オススメJS教材

UdemyのJavaScript部門ベストセラー講座を徹底紹介!【これ1つでOK】

アイキャッチ画像

この記事では、udemyのjavascript部門で世界ベストセラーを獲得しているThe Complete JavaScript Course 2020: Build Real Projectという講座を徹底紹介していきます。

筆者は、2018年の2月から本格的にJavaScriptを通じてプログラミングを学びはじめました。

その際にUdemyの「The Complete JavaScript Course 2020: Build Real Project」を活用したのですが、大変すばらしい教材だったので本記事で共有します。

講座アイキャッチ

もしあなたが以下の境遇ならば、「The Complete JavaScript Course 2020: Build Real Project」はあなたにピッタ入りの講座だと断言できます。

  • これからJavaScriptをお遊びではなくガチで学びたい
  • ReactやVueなどのモダンなライブラリを学ぶ前にJavaScriptそのものをマスターしておきたい

当記事を通して本講座の全体像の感じを掴んで、今後のJavaScript学習の参考にして頂けたらと思います。

 

 

講師のJonas氏が自身のツイッター(@jonasschmedtman)で表明した通り、本講座は只今リニューアル中

今現在のコンテンツに追加される形でアップグレードされるということです。

今の講座時間は24時間ですが、アップグレード後は60時間にもボリュームアップするそう。

以下の本人のツイートによると、このリニューアル版は10月半ばにリリース予定ということで、今から購入を検討する方はもう少し待つもの一つの手でしょう。

 

 

「The Complete Javascript Course 2020」はどんな講座??

「The Complete Javascript Course 2020」は、講座タイトルからも分かる通り、Javascriptの基礎の基礎から現場レベルまでを学べる内容です。

以下が「The Complete Javascript Course 2020」のカリキュラムです。

講座のカリキュラム
  1. 変数、ループ、条件分岐、演算子などのコンピューターサイエンスの基礎
  2. エクスキューション・コンテクスト、スコープなどJSエンジンについて
  3. DOM操作とそれを活用したアプリ作成
  4. コンストラクタ関数、クロージャ、オブジェクトとしての関数などJSの言語仕様
  5. JSの言語仕様を活用したアプリ作成
  6. ES6
  7. Promiseを活用した非同期処理とAjax
  8. モダンJS開発環境(node.js, npm, webpack, babelなど)でのAjaxやモジュール化を活用したシングルページアプリケーション作成

当たり前ですが、React、Vueなどのライブラリ、Angularなどのフレームワークは一切出てきません。

とにかく、バニラのJSのみをとことん学んでいく講座となっています。

「The Complete Javascript Course 2020」を選んだ理由

ここでは、僕が「The Complete Javascript Course 2020」を選んだ理由を説明します。

僕が本講座を選んだ理由は以下の3つです。

  1. JavaScriptをまずはしっかり身に付けたかった
  2. JS部門でベストセラー講座だったから
  3. 講師がJanas氏だったから

 

JavaScriptをまずちゃんと身に付けたかった

「React、Vueなどのモダンライブラリに焦って取り組むより、Javascriptそのものを先ずは基礎からしっかり身に付けるべきだ!」という考えからこの講座の受講を決意しました。

「JSをまずはしっかり身に付けておけば応用(reactなどのライブラリ)は速攻で理解できるだろ!」という考えがあったんです。

確かに現場のスタンダードはreactやVueです。

が、Twitterからの情報にはなりますが、JavaScriptそのものをまずはしっかり身に付けることは大事みたいですし、現場でバニラJSが使われることさへもあるんですね。

 

JS部門でベストセラーだったから

選んだ理由の2つ目は本講座がベストセラーを獲得していたからです。

「JavaScript」というキーワードで調べて貰えばわかるのですが、JSを1〜10までカバーしたコンプリート系の講座は今紹介しているThe Complete Javascript Course 2020」以外にも沢山出てきます。

おそらく他の講座も素晴らしいはずですが、時間をかけて比較検討するのもめんどくさかったので

  • ベストセラーを獲得
  • 平均評価が5点中4.6点獲

の「The Complete Javascript Course 2020」を選びました。
ベストセラーと高い平均点

 

講座の講師がJanas氏だったから

3つ目の理由は、本講座の講師がJanasさんという方だったからです。

jonas氏のプロフィール

JanasさんはこれまにUdemyでプログラミング関連の講座を5つリリースしていますが、そのうち4つがベストセラーとなっている一流講師です。

事実、筆者はJanasさんのHTML/CSS講座も同時に受講していたのですが、非常に分かりやすく、コーディングスキルの基礎力をつけるのに大いに役立ちました。

そんな訳で「HTML/CSSの講座も分かりやすかったのだから、JavaScriptの講座も分かりやすいに違いない」という動機で購入したわけです。

因みに、HTML/CSSの講座のレビュー記事も書いていますの興味ある方はどうぞ。

 

 

「The Complete Javascript Course 2020」で身に付いたこと

このセクションでは、僕が本講座を通じて何が出来るようになったのか?、身に付けたことを元に次はどんなことをやっていくのか?を書いていきます。

先ず大前提として、僕は本講座をまだ全てやり終えていません。

現状の進歩状況は、70%ほどで、下記の画像のように、最終セクションのアプリプロジェクト「Modern JavaScript: ‘Using ES6, NPM, Babel, Webpack」は未完了です。

ですので、7章「Asynchronous javascript」まで完了した時点での成果となります。

カリキュラムの進歩状況

成果物1

レクチャー3

3章「Javascript in the Browser」が終わった時点で簡易todoリストを作成しました。

(ソースコード)

この時点では、コードの保守性・可読性を維持するためのデザインパターンを学んでいなかったため、行き当たりばったりでゴミクソコードを書いています。

成果物2

レクチャー4、5

5章が終わった時点で、先ほどのTodoリストをアップグレードさせました。

todoアプリのソースコード

4、5章を通じて、JavaScriptの言語仕様(オブジェクトの生成方法、オブジェクトとしての関数、クロージャ)やデザインパターンを学んでいたので、より複雑な機能を可読性・保守性を保ちつつ実装できるようになっていることを実感できました。

 

「The Complete Javascript Course 2020」の良い点・不満点

ここでは、「The Complete Javascript Course 2020」を受講してみて、よかった部分と気に入らなかった部分を記していきます。

良い点1:アニメーション・図解が豊富

1つ目は、少々理解しずらいJavaScriptの言語仕様などの概念を豊富な図解やアニメーションを用いて解説してくれていることです。

これにより、抽象的な概念も具体的イメージを持って理解出来るようになります。

スコープチェーン図解スコープチェーンのアニメーション解説
イベントループ図解イベントループのアニメーション解説

良い点2:独学では学習が難しい内容がわかりやすくて解説されている

メリットの2つ目は、市販の日本語の教材では説明が難しいせいかほとんどスルーされている内容がしっかりと解説されていることです。

スコープ、オブジェクト、クロージャ、this、オブジェクトとしての関数、、、、。

挙げればきりがありませんが、上記のようなJSの言語の特徴は、初心者にはけっこうハードル高いです。

そんな取っつきづらい分野も本講座では、主に2、4、5章で丁寧に説明されています。

また、コードの設計、つまりデザインパターンも、プログラミングにおいては非常に重要な分野にも関わらず、そもそも取り扱っている教材すら日本にはほぼ無いという状況ではないでしょうか。

もちろん、本講座では5章にて、このデザインパターンも図解・アニメーションで超絶わかりやすく詳細に解説してくれています。

デザインパターン図解

僕のこのTodoアプリも以下のこの第5章で学んだことを活かした以下のデザインパターンに基づいて実装してあります。

todoアプリのアーキテクチャ

デザインパターンに基づき実装することで、あとあと修正や追加しやすいようなコード設計ができるようになりましたね。

不満点:Promiseの解説が雑

基本的に本講座に不満はないのですが、ここまでで唯一不満点をあげるとしたら6章「Asynchronous Javascript: Promises, Async/Await and Ajax」です。

この6章でJSでの非同期処理の記述方法であるPromiseの解説が少し雑だと感じました。

けれど、100%完璧な教材は存在しないですし、ある教材の説明が不十分だと感じたら、ネットなどでググるなどして別の情報源で細くすればいいだけです。

僕も、日本語や英語の技術記事を読み漁りながら、何度も本編の動画を見直し、コードを書くことで徐々に理解できるようになっていきました。

効果的な使い方

ここでは、「The Complete Javascript Course 2020」を120%活用するための効果的な学習方法を以下の2つの観点から記していきます。

  • 補助教材の活用
  • アウトプット

補助教材の活用

1つ目は、「補助教材の活用」です。

これは、メインの「The Complete Javascript Course 2020」の他に別のサブ教材を用意すべきということです。

理由としては、本講座の5章「Advanced Javascipt: Objects and Functions」(JavaScriptの言語の特徴)がそれなりに難しく、本講座だけでは理解できない可能性が高いからです。

事実、筆者はそうでした。

しかし、この5章で扱うコンストラクタ関数、クロージャ、即時関数などのJS言語仕様は、JavaScriptを深く理解し使いこなせるようになるためには必須の知識です。

適当にやり過ごすわけには行かないので、もしあまり理解できていない場合は、ネットや書籍などの他の情報源を参照するようにしましょう。

個人的に使ってみて一番ためになったサブ教材はオライリー社のこの本です。

アウトプットは絶対に怠らない

本講座で学んだことを元に必ずアプトプットをするようにしましょう。

ここでのアプトプットとは、0から自分の手を動かして何かを作り上げることです。

アウトプットを怠るなら、あなたが教材をやった意味がなくなってしまいます。

急がば回れ。一旦立ち止まってアウトプットするということは教材を進めるスピードは遅くなりますが、理解が曖昧なまま先に進んでも空回りするだけです。

インプットを自分の血肉にするために必ずアウトプットはするようにしましょう。

ちなみに、本講座のアウトプットのベストなタイミングは、以下の3章、5章、8章です。

レクチャー3 レクチャー5

なお、せっかくアプトプットしたなら、是非gitとgithubを活用してポートフォリオとしてネット公開して色んな人に見てもらいましょう。

git/githubは、Git:もう怖くないGit!チーム開発で必要なGitを完全マスターが全くの初心者でも理解できるように作られており大変オススメです。

 

The Complete Javascript Course を日本語ベースの講座で組み直す

ここまでで、「The Complete Javascript Course 2020」を熱弁してきました。

しかし読者さんの中には「良さそうだけど、英語だからな〜」とあまり乗り気になれない方もいるのではないでしょうか。

そこで、「The Complete Javascript Course 2020」をudemy日本語ベースのjavascript講座で組み直してみました。

本講座に興味を持ってくれたけれども、それほど英語が得意ではないという方。

そんなあなたは、以降で紹介する講座で代替してみてはどうでしょうか?こうすれば、実質「The Complete Javascript Course 2020」を受けることができます!

 

Section 1 : JavaScript Language Basics

第1セクション「JavaScript Language Basics」に対応する講座は、初心者向けJavaScript & jQuery基礎講座

3.5時間で、変数、データ型、IF文などの条件分岐、繰り返し(ループ)、関数、オブジェクト、配列などプログラミングの基礎中の基礎を学べます。

なお、本講座の関数型プログラミングやjQueryもカバーしていますが、飛ばしてもいいと思います。

 

Section 2 : How JavaScript Works Behind The Scenes

第2セクション「How JavaScript Works Behind The Scenes」の代わりは、【JS】ガチで学びたい人のためのJavaScriptメカニズムです。

jsエンジンの仕組みを学べるカリキュラム

上記記画像で示した通り、この講座の前半部分を活用し、

  • javascriptで書かれたコードがどのように実行されているのか?
  • スコープとは何か?
  • スコープがエラーとどう関わってくるのか?

など、あなたの書いたjsコードを実行する、ブラウザに組み込まれたjavascriptエンジンの仕組みを学んでいきましょう。

 

Section 3 : JavaScript In The Browser : Dom Manipulation and Events

第3セクション「JavaScript In The Browser」に対応するのは、JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

やはり、この講座も全部はやらず、下記画像の通り「ブラウザ・DOM・WebAPI」の部分のみをやります。

DOM操作を学べるカリキュラム

と言っても、全25レクチャー計3時間を超えるので中々のボリュームですが。

ここでは、javascriptでhtml/cssを操作する方法、いわゆるDOM操作とクリックした時にどうするかを決めるイベントとイベントハンドラ関数について理解を深めます。

 

Section 4・5 : Advanced JavaScript: Objects and Functions

第4セクション「Advanced JavaScript」と第5セクション「Putting It All Together」に対応するのは、第2セクションでも取り上げた【JS】ガチで学びたい人のためのJavaScriptメカニズムです。

ここでは、本講座の中盤部分の以下を活用します。

関数とオブジェクトを深く学ぶためのカリキュラム

this、オブジェクトとしての関数、bindメソッド、コンストラクタ関数、プロトタイプ、プロトタイプチェーンによる継承、classシンタックス、、、、

上記のようなjavascript学習における最大の関門を学んでいきます。

第5セクション「Putting It All Together」はアウトプットのセクションですので、あなたもここまでの知識を活用して何かを作ってみましょう。

 

ちなみに少し話がそれますが、この講座はかなり凄い。

というのも、これまで、オブジェクトと関数の深い部分を初心者目線で丁寧に解説した日本語ベースのjs講座は、udemyに限らずほぼ無いに等しかった。

あったとしても、とても高額なサービスのみ。それか、開眼!JavaScript – 言語仕様から学ぶJavaScriptの本質のような難解な技術書でやるしかなかった。

そんな中で、【JS】ガチで学びたい人のためのJavaScriptメカニズムがリリースされたわけです。

 

Section 6: Next Generation JavaScript: Intro to ES6/ES2016

第6セクション「Next Generation JavaScript: Intro to ES6/ES2016」は、【世界で3万人が受講】JavaScriptエンジニアのためのES6完全ガイドがこの部分に対応します。

最後の方のGeneratorとPromise以外を除いた全ての部分をやるようにしましょう。

 

Section 7: Asynchronous JavaScript: Promse, Async/Await and Ajax

第7セクション「Asychronous JavaScript」に対応するのは、またまた【JS】ガチで学びたい人のためのJavaScriptメカニズムとなります。

以下の画像の通り、「非同期処理」という部分を使います。

非同期処理のカリキュラム

同期処理と非同期処理→タスクキューとコールスタック(ブラウザ内部の仕組み)→コールバック地獄→promise→async/awaitという初心者が非常に理解しやすいカリキュラム構成になっているのがGOOD。

 

Section 8 : Modern JavaScript : Using ES6, Babel and Webpack

最終のセクション8は複数の講座で対応します。

まず一つ目はnode.js/npmとモジュール。これらは、「またかよ」と思うかもですが、【JS】ガチで学びたい人のためのJavaScriptメカニズムの「モジュラーJavaScript」の部分を活用します。

2つ目もBabelとWebpackに関しては、モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでの手順を理解するで。

以上の2講座で、いわゆるモダンJS開発環境の大枠をインプットできます。

ここまでできたら、あとは最終アプトプットのみ!!

  • node.js、npm、webpack、babel、devserverで開発環境の構築
  • モジュールを活用してファイルを細かく管理
  • ES6や非同期通信をフル活用

以上3つを意識して簡易シングルページアプリケーションを作りましょう。

 

以上が「The Complete Javascript Course 2020」を日本語のjs講座で組んだ場合の一例となります。参考にしてください。

 

まとめ

以上、JavaScriptの全てを学べる Udemyの「The Complete Javascript Course 2020」の紹介をしてきました。

本講座以外でUdemyのJavaScriptのオススメが知りたいという人は『【20厳選】Udemyのjavascript おすすめ講座はコレ!初心者から中級者まで厳選した20講座を一挙紹介!!』を参考にして下さい。

アイキャッチ画像
【20厳選】Udemyのjavascript おすすめ講座はコレ!初心者から中級者まで厳選した20講座を一挙紹介!!【2020究極完全版】当記事では、udemyのJavaScriptのオススメ講座を20厳選して紹介しています。【入門編】【基礎編】【応用編】【発展編】【番外編】の5つにカテゴライズしてまとめているので、完全初心者から中級者まで、あらゆるレベルの方に応じた最適なJavaScirpt講座がきっと見つかることでしょう。...

 

また、英語でプログラミングを学ぶことに関しては『[udemy] 英語ベースの教材でプログラミングを学ぶメリットとコツ 〜日本語字幕の表示の方法も解説〜』を参考にして下さい。

[udemy] 英語ベースの教材でプログラミングを学ぶメリットとコツ 〜日本語字幕の表示の方法も解説〜「Udemyの海外講師の講座でプログラミングを学びたい!」 確かに海外の講座の質は日本のものとは段違いに良い。しかし、壁となるのは「英語」。「英語が得意でなくても海外講師の講座は受けれるの?」等々、英語でプログラミングを学ぼうと思った際の悩みは多々あります。当記事では、そんな悩みを筆者の体験ベースを元に解決します。...