inflearn logo
inflearn logo

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

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

難易度 初級

受講期間 無制限

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を使用したウェブ要素の操作

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

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

  • History APIによるルーティング

  • JavaScriptをReactのように使う

> 「一口チャレンジ」8期に申し込む : https://link.onebitefe.com/r/vd8zra

🍀 'ウェブフロントエンドのためのJavaScript第一歩'の受講生の皆様は、
以下のリンクから割引価格(35%割引)で講座をご購入ください!!

-> 割引クーポンリンク

🤯 バニラJavaScriptを
なぜ詳しく学ぶ必要があるのでしょうか?

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

バニラJavaScriptを学ぶことはWeb開発の基礎を固める重要なプロセスであり、
JavaScriptの根本的な原理動作の仕組みを理解することができ、
多様なツールや技術を効率的に使用できるようになります。 efficiently. một cách hiệu quả.

React.jsのようなライブラリを使用する状況でも、これらの技術がどのように動作するのかを理解でき、
ライブラリに依存せず自由に開発できる能力を養うことができるため、
純粋なJavaScriptの学習は開発者にとって非常に重要なプロセスです。

一度に終わらせるJavaScript講座は…!

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

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

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

計2つのプロジェクトを通じた
内容の確認および反復学習

分かりやすい講義資料とともに、JavaScriptの概念を学ぶことができます 👍
講義資料はすべ〜て、以下のようなPDFファイルで提供されます。

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

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

一気に終わらせるJavaScriptを受講すれば、
次のような2つのプロジェクトを開発することができます。

中間プロジェクト

最終プロジェクト

講義を受講しながら理解できなかった部分を確認したり、
講의受講後も内容を復習できるように、
下の図のように、講義と一緒に見ることができるハンドブック提供されます! as shown in the image below, which you can refer to alongside the lectures! như hình minh họa bên dưới!

ハンドブック(講義資料ウェブサイト)

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

基礎から応用まで一度に!
基礎概念から応用概念まで一度に学習したい方。
直接プロジェクトの開発まで行いながら、必要な概念を学んでみてください。

フロントエンドの就職を準備中です。
フロントエンドエンジニアとしての就職を目指している就職準備生。

DOM操作、状態管理、SPAに関する概念を学習してみてください。

バニラJavaScriptはよく分かりません。
React.jsやNext.jsなどを使用していますが、JavaScriptには自信がない方。

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

講義を受講した後には…

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

  • 実務で頻繁に使用される配列メソッド非同期処理コンポーネントとモジュール化などの概念を理解することができます。 that are frequently used in the field..

  • DOM操作API呼び出し状態管理SPA開発などをJavaScriptだけで開発できるようになります。 development using only 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の概念についても見ていきます。最終的に、学んだ内容を適用して中間のプロジェクトコードを修正します。. giữa kỳ.

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

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

ウェブサイトに必要な機能を確認し、機能ごとにコンポーネント化した後、VSCodeを使用して実際にウェブサイトを開発します。

検索機能フィルタリング機能ページ移動などの機能を開発します。page navigation. và các chức năng khác sẽ được phát triển.

💬 よくある質問

Q. 非専門家でも受講できますか?

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

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

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

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

Q. 講義が役に立つかどうかよくわかりません。

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

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

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

  • Promiseオブジェクト非同期について理解し、APIを呼び出してデータを受け取ることができる。 to fetch data. để nhận dữ liệu.

  • 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

こんにちは
hyobinです。

11,862

受講生

384

受講レビュー

137

回答

4.9

講座評価

14

講座

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

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

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


ウェブページ

https://hyobb.com/

オンライン講座

書籍

外部活動

もっと見る

カリキュラム

全体

55件 ∙ (9時間 40分)

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

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

受講レビュー

全体

146件

4.9

146件の受講レビュー

  • dangwoo님의 프로필 이미지
    dangwoo

    受講レビュー 21

    平均評価 5.0

    5

    15% 受講後に作成

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

    • hyobin
      知識共有者

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

  • skateboard295254님의 프로필 이미지
    skateboard295254

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

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

    • hyobin
      知識共有者

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

  • ygvbhy518205님의 프로필 이미지
    ygvbhy518205

    受講レビュー 13

    平均評価 5.0

    修正済み

    5

    56% 受講後に作成

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

    • hyobin
      知識共有者

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

  • minzinging7984님의 프로필 이미지
    minzinging7984

    受講レビュー 1

    平均評価 5.0

    5

    33% 受講後に作成

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

    • hyobin
      知識共有者

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

  • devrooney님의 프로필 이미지
    devrooney

    受講レビュー 3

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

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

    • hyobin
      知識共有者

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

似ている講座

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

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

¥529,632

28%

¥4,329