강의

멘토링

로드맵

BEST
Programming

/

Front-end

一度で終わらせるJavaScript: バニラJavaScriptでSPA開発まで

基本文法から応用概念まで学習しながら、バニラJavaScriptでSPAを開発してみましょう🔥

  • hyobin
이론 실습 모두
자바스크립트
JavaScript
SPA
DOM
REST API

学習した受講者のレビュー

こんなことが学べます

  • バニラ JavaScript 基本文法

  • 実務開発に必要なジャバスクリプトの概念

  • Promiseオブジェクトとasync/awaitによる非同期プログラミング

  • コンポーネントとモジュール化

  • DOM APIを使用したWeb要素の操作

  • stateとsetStateを使用した状態管理

  • ライブラリなしでSPA開発

  • History API を通じたルーティング

  • ジャバスクリプトをリアクトのように使う

🍀WebフロントエンドのためのJavaScriptの第一歩」受講生の方々
下記のリンクから割引価格(35%割引)で講義を購入してください!

->割引クーポンリンク

🤯バニラJavaScript
なぜ詳細を学ぶべきですか?

バニラJavaScriptは基本的にライブラリやフレームワークなし
純粋なJavaScriptでコードを書くことを意味します。

バニラのJavaScriptを学ぶことは、 Web開発の基礎を固める重要なプロセスです。
JavaScriptの基本原理その仕組みを理解できます。
さまざまなツールや技術を効率的に使用できるようになります。

React.jsなどのライブラリを使用している状況でも、これらのテクノロジがどのように機能するかを理解できます。
ライブラリに頼らずに自由に開発できる能力を育てることができるので
純粋なJavaScript学習は開発者にとって非常に重要なプロセスです。

一度に終わるJavaScript講義は..!

JavaScriptの最新の文法を扱い、ライブラリなし
純粋なJavaScriptのみを使用してAPI呼び出し、DOM操作、および状態管理、ルーティング、SPA開発まで
2つのプロジェクトを開発し、学習する講義です。

JavaScriptの最新の文法
ES6+バージョン学習

API、DOM操作、状態管理、SPA開発まで一度に!

合計2つのプロジェクトを通じて
内容チェックと繰り返し学習

きちんとした講義資料でJavaScriptの概念を学ぶことができます👍
講義資料は全部以下のようなpdfファイルで提供されます。

セクション1〜セクション5講義資料のプレビュー

セクション6〜セクション9講義資料のプレビュー

一度に終了するJavaScriptを受講すると
以下の2つのプロジェクトを開発できます。

中間プロジェクト

最終プロジェクト

講義を受講しながら理解がうまくいかなかった部分を確認したり、
講義受講後も内容を復習できるように
下図のように、講義とともにご覧いただけるハンドブックも提供されます!

ハンドブック(講義教案ウェブサイト)

🙋🏻‍♀️こんな方におすすめです

基礎から深化まで一度に!
基礎概念から深化概念まで一度に学習したい方。
直接プロジェクトまで開発し、必要な概念を学びましょう。

フロントエンド就職準備中です。
フロントエンド開発者として就職を準備している就職準備生。

DOM操作、状態管理、SPAの概念を学びましょう。

バニラのJavaScriptはよくわかりません。
React.js、Next.jsなどを使用中だが、JavaScriptは自信のない方。

ライブラリとフレームワークを使用する前に、必要な概念をもう一度学んでください。

講義を受講した後は…

  • バニラJavaScriptの基本文法と、基礎から深化の概念を理解することができます。

  • 実務によく使われる配列メソッド、非同期処理コンポーネントとモジュール化などの概念を理解できます。

  • DOM操作API呼び出し状態管理SPA開発などをJavaScriptのみで開発できます。


  • React.js、Next.jsをより簡単に学習できます。

💥他の講義とはこの点が異なります。

一度に終わるJavaScript講義には、次のような差別点があります。

講義資料による詳細な概念説明

アニメーションが適用されたきれいで直感的な素材、そしてサンプルコードを使って、基本的な文法や概念から、深化の概念まで細かく学習します。

一緒に書くサンプルコード

学んだ概念を、VSCodeに直接書いてみます。
ライブコーディングで一緒にJavaScriptコードを書いて練習してみましょう。

中間プロジェクトの開発とさらなる概念学習

中間プロジェクトを開発し、学んだことをよく理解していることを確認できます。その後、開発したプロジェクトの問題を特定し、より良いプロジェクトを作成するために必要な概念をさらに学びます。

最終プロジェクト開発による全内容復習

講義で学んだすべての内容を使って最終プロジェクトを一緒に開発します。プロジェクトを開発し、内容をもう一度復習できます。

全資料提供

受講生の方には講義教案をウェブページ形式(ハンドブック)で、
プロジェクトコードと講義に使用された資料はそれぞれgithub、pdfで提供します。

🔎詳細なカリキュラムが気になります。

一度に終わるJavaScript講義のカリキュラムは次のとおりです。

📌セクション1。 JavaScriptの基本〜セクション2。非同期とAPI

基本的な文法と深化の概念をまず講義資料(ppt)で学習し、
学んだ内容を適用して直接サンプルコードを作成し、概念をしっかりと固めます。

📌セクション3。 DOMとDOM API

DOM について詳しく学習した後、DOM を操作できるさまざまなDOM APIについて学習します。

よく使われるフォーム要素を操作する方法を学び、その後DOM APIを使って直接DOMを操作してみます。

📌セクション4。 thisと矢印関数

JavaScriptのthisキーワードについて学ぶ
練習を通じて、状況に応じてthisにどの値がバインディングになるかを確認します。

その後、thisと矢印関数、そしてthisと一般関数の関係についても見ていきます。

📌セクション5。中間プロジェクト

これまでに学んだ内容を活用して簡単なウェブサイトを開発します。
ウェブサイトを開発し、制作過程で発生した問題点を一つずつ把握してみます。

📌セクション6。コンポーネントとモジュールシステム

中間プロジェクトを開発し、発生した問題を解決するためにコンポーネントとモジュールシステムについて学びます。
まず、講義資料とサンプルコードで学習し、学習した内容を中間プロジェクトに適用して問題を解決します。

📌セクション7。状態管理とSPA

中間プロジェクトで発生した問題を解決するために学ぶ必要がある概念であるステータス管理とSPAについて学びます。
状態管理とは何か、どのように開発できるかを学びながら、 SPAとMPACSRとSSRの概念についても見ていきます。最後に、学習した内容を適用して中間プロジェクトコードを修正します。

📌セクション8。最終プロジェクト

これまでに学んだ内容をすべて活用して最終プロジェクトを開発します。

Webサイトに必要な機能を見て、一緒に機能別にコンポーネント化してみた後、VSCodeを使って直接Webサイトを開発します。

検索機能フィルタリング機能ページ移動などの機能を開発します。

💬よくある質問

Q. 非専攻者も聞くことができますか?

基礎概念から取り上げており、講義資料も提供されるので、開発を初めて始める方も受講できます

講義を事前に聞きたいです!

8つの講義を無料で公開しています。

講義をあらかじめ聴きたい方は、
「プレビュー」が書かれた講義を受講してみてください。

Q. 講義が役に立つかどうかわからない。

JavaScriptをある程度知っていれば、
下記のチェックリストで自己診断をしてみてください!

10個の項目のうち8個以上の項目に該当する場合
講義を受講しなくても大丈夫です😄

  • スコープホイスティングについてよく知っています。

  • Promise オブジェクト非同期について知り、 API を呼び出してデータを受け取ることができる。

  • JavaScriptでDOMを操作できます。

  • JavaScriptのthisについてよく知っています。

  • SPASPAの動作方法を知っています。

  • ライブラリなしで状態管理を実装できます。

  • Webサイトを機能別にコンポーネント化することができる。

  • ファイルをモジュール化し、import, exportを使って開発できる。

  • history apiを活用してページルーティングを実装できます。

  • JavaScriptでSPAを実装できます。


📣受講前の注意

練習環境

  • Chromeブラウザを使用してください。

  • VSCodeを使用してコードを記述します。 (設置方法および使用方法は講義に含まれています。)

学習資料

  • 講義で使用された資料はpdf形式で提供されます。

  • 講義で使用された内容はWebページ形式で提供されます。

  • プロジェクトコードはgithubリンクを介して確認できます。

選手の知識と注意事項

  • 選手の知識:HTML、CSS

    • HTMLでよく使われるタグは講義で説明しています。

    • CSSコードは別途提供いたします。

  • 注意事項

    • ChromeブラウザとVSCodeを使って学んでください。

    • 質問に対する回答は24時間以内に作成します。


バンドバナー

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発者として就職したい方々

  • プロジェクト開発を通して様々な概念を学習したい方々

  • バニラJavaScriptを学んでみたい方々

  • 講義資料も併せて受講したい方

  • スタディを通して、様々な人たちと一緒に学習したい方々

前提知識、
必要でしょうか?

  • HTML

  • CSS

こんにちは
です。

9,765

受講生

201

受講レビュー

108

回答

4.9

講座評価

2

講座

안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공합니다.

(현) 프론트엔드 교육자

(전) 스타트업 프론트엔드 리드 개발자


웹 페이지

https://hyobb.com/

온라인 강의

도서

외부활동

カリキュラム

全体

55件 ∙ (9時間 42分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

116件

4.9

116件の受講レビュー

  • minzinging7984님의 프로필 이미지
    minzinging7984

    受講レビュー 1

    平均評価 5.0

    5

    33% 受講後に作成

    視覚資料もすっきりして何よりライブコーディングでゆっくり一つ一つ教えてくれてよかったです。着実に受講後頑張ってみましょう!良い講義ありがとうございます。

    • hyobin
      知識共有者

      ありがとうございます😀 ぜひ頑張っていただきたいです!

  • ygvbhy518205님의 프로필 이미지
    ygvbhy518205

    受講レビュー 13

    平均評価 5.0

    修正済み

    5

    56% 受講後に作成

    イ・ジョンファンさんの講義を見て、한입コミュニティに加入し、該当の講義を知りました。SPAを利用したことはあっても、直接作ったことはなかったため、すでに決済ボタンを押していました😆😆 やっていることがあり、한입チャレンジには参加できませんでしたが、非常に満足のいく講義です。 知っている部分は飛ばしながら、ハンドブックで復習しながら講義の後半部分だけを聞きましたが、非常に満足のいく講義です。イ・ジョンファンさんも発音が聞き取りやすかったのですが、ヒョビンさんもまた格別に発音が良いですね。ありがとうございます。

    • hyobin
      知識共有者

      SK様!素敵なレビューありがとうございます😊 後日、復習用としてもう一度、一口チャレンジに参加してみるのも良いかと思います:) 改めて、良いレビューをいただきありがとうございます👍

  • devrooney님의 프로필 이미지
    devrooney

    受講レビュー 3

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    声がよく聞こえて発音もはっきりしているので、2倍速で聞いてもよく聞こえます! そして、理解しやすい構成になっています。 ありがとうございます。

    • hyobin
      知識共有者

      ノホンギさん!良い受講評価ありがとうございます :) 修了おめでとうございます👍👍

  • dangwoo님의 프로필 이미지
    dangwoo

    受講レビュー 21

    平均評価 5.0

    5

    15% 受講後に作成

    JavaScriptを初めて触れても、基礎からしっかりリアクトを学ぶ前に勉強するのに最適な講義だと思います!

    • hyobin
      知識共有者

      ドンウ!ありがとうございます😊

  • skateboard295254님의 프로필 이미지
    skateboard295254

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    JavaScriptの概念が不足している私にぴったりの講義だと思います。 バニラJavaScriptに必要な概念だけをピンポイントで得ることができ、本当に多くの助けになりました👍 ハンドブックが提供され、プロジェクトコードの作成に役立ちました!!復習にも良いですし、講義を聞きながら一緒に見るのにもとても良いです。良い講義を安価に受講することができました。ありがとうございます!!

    • hyobin
      知識共有者

      ラタトゥイユ様 😊 素敵な受講評ありがとうございます!! 完走おめでとうございます 🥳🥳

期間限定セール、あと4日日で終了

¥3,288

23%

¥4,326

hyobinの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!