강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

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

難易度 初級

受講期間 無制限

  • hyobin
JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API
JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API

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

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

4.9

5.0

Chan

89% 受講後に作成

JavaScriptのOnline Classesは既に一、二度受講したことがありました。しかし不思議なことに、いつも知っているような気がするのに、いざ使おうとするとうまくいかない状態が続いていましたが、このOnline Classesはその曖昧だった部分を一つずつ整理してくれた感じでした。 文法だけ説明して終わるのではなく、なぜこの概念が必要なのか、これが後でSPAでどのように使われるのかまで、継続的に繋げて説明してくださったのが良かったです。 特に良かったのはプロジェクト部分でした。普通は書き写して終わることが多いのですが、このOnline Classesは中間プロジェクト → 問題点の認識 → 概念の補完 → 最終プロジェクトという流れがあったので、考えないわけにはいきませんでした。正直簡単ではありませんでしたが、その分得るものが多かったです。 Online Classes資料(ハンドブック)も整理がよくできていて、Online Classesを受講する時だけでなく、復習する時も継続的に参考にしています。 JavaScriptをもう一度しっかり整理したい方におすすめしたいOnline Classesです。

5.0

산독기

100% 受講後に作成

完走しました! 完走して感じたことは、合理的な価格で本当に丁寧に準備された講義を受けることができて嬉しかったです。 開発講義は価格もピンキリですが、私は今でも複数の講義を一緒に受講していますが、価格が高いからといって講師が質問対応をきちんとしてくれるとか、コードアップデートがあるとか、そういうことはないんですよね。それである講師にとても失望していた状態だったのですが、ヒョビンさんの講義を受けてみると本当に確実に違いますね。 他の方と比較して言うのはちょっとあれですが、ヒョビンさんのような教育者がもっともっと成功されることを願っています。JavaScriptの他にもReactやNext.jsの方向に講義を拡張されたらとても良いと思います! Inflearn n年目として最もコスパが良くて有益だった講義でした。もちろん最後のファイナルプロジェクトは難しかったですが、難しい分だけ謙虚にもう一度復習しなさいという意味だと思って刺激になりました。 こんなに長く受講レビューを書いたことはないのですが、ヒョビンさんのファンになって他の方々にお勧めしたくて受講レビューを書きます! 詳細なハンドブック、明確な発音、きれいな例題、迅速な質疑応答など、何一つ物足りない点がありませんでした。Inflearnや教育界でもっと有名になられることを願っています!よく聞かせていただきました!

5.0

kimday365

100% 受講後に作成

私が転職を準備しながら約5年ぶりに再びFEに戻ることになりました。 再び始めようとしたところ、どこから勉強すべきか途方に暮れていたのですが、 この講義を受けながら以前に軽く知っていた部分の復習から、 新しい文法構造、そしてオブジェクト/プロパティ/ルーポーネント単位など上級課程までとても充実して学ぶことができて本当に良かったです。 特にプロジェクトを進行したことが本当に有益な時間でした。 単純に基礎知識&文法だけを学ぶのではなく、実務でどのように使用すれば良いかについて学びましたし、 毎回作っていたtodoリストではない新しいプロジェクトを進行してより興味深い時間でした! 次の講義もとても期待しています! 良い講義をありがとうございます :)

受講後に得られること

  • バニラJavaScript基本文法

  • 実務開発に必要なJavaScriptの概念

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

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

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

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

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

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

  • JavaScriptをReactのように使う

🍀 'ウェブフロントエンドのための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とMPA、そしてCSRとSSRの概念についても見ていきます。最終的に、学んだ内容を適用して中間プロジェクトコードを修正します。

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

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

ウェブサイトに必要な機能を確認し、一緒に機能別にコンポーネント化してから、VSCodeを使用して直接ウェブサイトを開発します。

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

💬 よくある質問

Q. 非専攻者でも受講できますか?

基礎概念から扱っており、講義資料も提供されるため、開発を初めて始める方も受講できます。ただし、何度も繰り返し学習してください!

講義を事前に視聴してみたいです!

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

講義を事前に視聴したい方は、
「プレビュー」と書かれた講義を受講してみてください。

Q. 講義が役に立つかよく分かりません..

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

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

  • スコープホイスティングについてよく理解している。

  • Promiseオブジェクト非同期について理解しており、APIを呼び出してデータを取得できる。

  • JavaScriptでDOMを操作できる。

  • JavaScriptのthisについてよく理解している。

  • SPASPAの動作方式を理解している。

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

  • ウェブサイトを機能別にコンポーネント化できる。

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

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

  • JavaScriptでSPAを実装できる。


📣 受講前の参考事項

実習環境

  • Chromeブラウザを使用します。

  • VSCodeを使用してコードを作成します。(インストール方法及び使用方法は講義に含まれています。)

学習資料

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

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

  • プロジェクトコードはgithubリンクから確認できます。

前提知識および注意事項

  • 前提知識:HTML、CSS

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

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

  • 注意事項

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

    • ご質問への回答は24時間以内に作成いたします。


띠배너

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

  • 講義資料と一緒に受講したい方

  • スタディを通じて、多くの人々と一緒に学習したい方々

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

  • HTML

  • CSS

こんにちは
です。

11,574

受講生

375

受講レビュー

136

回答

4.9

講座評価

8

講座

こんにちは、キム・ヒョビンです 😊
フロントエンドエンジニアを目指す方々のために、分かりやすく親切な講義を提供しています。

(現) フロントエンド開発講師

(前) スタートアップ フロントエンド リード開発者


ウェブページ

https://hyobb.com/

オンライン講座

書籍

外部活動

カリキュラム

全体

55件 ∙ (9時間 40分)

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

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

受講レビュー

全体

144件

4.9

144件の受講レビュー

  • 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
      知識共有者

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

期間限定セール

¥646,580

12%

¥4,359

hyobinの他の講座

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

似ている講座

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