【2020年】おすすめのJavaScript学習コンテンツ

こんにちは！今回は、Webのフロントエンドにおいて最も重要であるといって過言ではない「JavaScript」の学習コンテンツについてご紹介をしていきたいと思います！
私自身、JavaScriptを学習し始めた当初、どのような学習コンテンツがあるのかが分からず、右往左往していました！
ですので、これから「JavaScript」を学習したい！という方々のためになれば良いなぁ～と思っておりますので是非ご一読ください！

信頼性の保証

実際に、JavaScriptの技術を用いてPortfolioを作成した経験があるので、そちらを拝見いただければ幸いです。
※趣味程度で学習しているので、実務でバリバリ使いたい！という方は他のサイトも参考にするとよいと思います！
参考サイト

対象となる読者

✔ Javascript初学者
✔ 学習コンテンツを知りたい方
✔ コンテンツレビューが気になる方
✔ PortfolioにJavaScriptを使いたい方

ちなみに、過去にこんな記事も書いているので、Web制作について気になる方は、こちらもご覧ください！

読み終えるとどのような知識が手に入るか？

✔ JavaScriptとは何か？
✔ どんな学習コンテンツがあるか？
✔ JavaScript学習は楽しい！
✔ JavaScriptでのモダンなWeb制作

本日の目次

✔ JavaScriptとは何か？
✔ Udemyで学ぼう！
✔ JS-Proで学ぼう！
✔ Dotinstallで学ぼう！
✔ 忍者コードで学ぼう！

JavaScriptとは何か？

JavaScriptとは昔から初学者にやさしい言語として、多くのユーザに使われてきた言語であり、近年はWebアプリ開発には欠かせない言語として評価されています！

上図を見てみても、JavaScriptの人気が見て取れます！
また、JavaScriptが人気になった背景として、Ajax技術があり、Ajax技術の登場によって、単にWebページを装飾するだけであったJavaScriptは、高いユーザビリティーを実現するための重要な手段として、その価値が見いだされてきました。
では、JavaScriptを使うことで、どんなことができるようになるでしょうか？？
私のPortfolioを例に挙げて、「JavaScriptで実現できる簡単な例」をご紹介いたします！

JavaScriptでできること

✔ ページ遷移時のアニメーション
CSSだけを使って処理をする方法もありますが、PACEというJavaScriptモジュールを使うことで、より今度なローダーを実現することができます。
✔ 画像のスライド
スライドのアニメーションは限られたスペースに多くの情報を載せるうえで、とても重要な技術です。
✔ スクロール検知
モダンなWebサイトでよくある技術で、スクロールと共に画像や文字がスライドしてきたりする機能を追加することができます！
これには、IntersectionObserverという関数を用いて実現するのですが、少し内容が複雑なので、興味がある方は、Udemyで「【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）」のコースを受講してみてください！
✔ クリックによって任意の位置へ移動する
ユーザビリティを向上させるうえですごく重要な技術であり、コードソースはネット上にたくさん転がっているので、そちらを見てみてください！
※参考サイト

その他にも数えきれないほどたくさんの技術があるのですが、紹介しきれないので、これくらいにしておきます。
また、ここでは詳しくご紹介しませんが、「jQuery」という言語を使えば、より簡単にJavaScriptを記述でき、簡単な実装ができるので、そちらも学習してみることをお勧めします！
参考までに、参考書籍を載せておきます！

Udemyで学ぼう！

通信技術の発展と共に、「動画での学習」が主流となっている今の時代で、「Udemy」での学習はすごく画期的な学習方法です！
ここでは、Udemyのご紹介というよりは、Udemyで私が魅力的だと思った講座のご紹介をしたいと思います！
ですので、Udemyとは何かが気になった方がいましたら、Udemy公式のサイトを参考にしてみてください。

それでは、UdemyでJavaScriptを学習する際のおすすめの講座をご紹介いたします！
しかし、正直なところ、「JavaScriptを勉強するなら、これしかないだろ！」という感じなので、もしかしたら皆さんもご存じかもしれません！

Code Mafia

北海道大学工学研究科応用物理学専攻修了したのち、ソフトバンク SE兼、開発で新卒入社〜４年間勤務。そして、WEB開発のコンサル、開発者として独立し、４年前からWEBのコンサルと実際に手を動かす開発者の２足の草鞋で活動開始。関西を中心とした大学や企業様向けのWEBコンサルと開発を行っているスーパーエンジニアです！

【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）

この講座では、CSSAnimation,HTML,JavaScriptの文法をはじめ、モダンなサイトを作成するために必要な知識をたくさん学ぶことができます。私が思うに、日本にあるフロントエンドの講座で一番素晴らしい講座だと思います。
具体的に、どんな技術が学べるのかというと、次のような感じです。

ローディングアニメーション
スライドショー
スクロールオブザーバー
レスポンシブデザイン
ナビバー

正直なところ、学べる知識が多すぎて、ここでは紹介しきれません！
※スクロールオブザーバーはスクロールと共に、Animationが発火する技術です。例えば、ユーザーがページを下にスクロールしていくとともに、文字や画像がAnimationするような感じです。

【JS】初級者から中級者になるためのJavaScriptメカニズム

この講座は、上記で説明した講座とは違い、文法が中心の講座であり、Amazonとかで売っている技術書以上に丁寧で、わかりやすく、内容がすごく濃いです！
私が、この講座を本当に魅力的だなぁ～と感じた理由としては、「演習課題が豊富」であることです。
講座が終了した後に、必ず数問、演習問題がついています！
一般的に、こういう講座についている演習問題は全然考えられていなく、解くのが容易なものが多いですが、CodeMafiaさんが作っている演習問題は結構えぐいです笑
とにかく、JavaScriptを学びたい方にはうってつけの講座です！

JS-Pro

JS-ProはJavaScriptに特化した学習コンテンツであり、月額980円でコンテンツを使うことができます。
正直、使ったことがないので、わかりませんが、Twitterなどで、すごくいい！と聞くので、多分、良いコンテンツだと思います！

下記サイトで、詳しく説明されているので、気になった方はこちらで見てみてください！

Dotinstall

皆さんご存じのDotinstall！笑
Dotinstallでは、Webサイト作成に必要な知識だけでなく、ゲームを作る知識も学ぶこともできます！
具体的に、2020/9/1までのリリースで、どんなものを作ることができるのかを下記で見ていきましょう！

おみくじ

カレンダー

ストップウォッチ

スライドショー

スロットマシーン

タイピングゲーム

タブメニュー

ビンゴシート

三択ゲーム

数字タッチゲーム

上記のように、実際にサイトに組み込んで使ったり、他の技術に応用できそうなものがたくさん学べます！
著作権の関係上、ソースコードを載せるのはよろしくないと思いましたので、興味がある方は、Dotinstallで学んでみてください！

忍者コード

あまり、ご存じの方はいないかもしれませんが、忍者コードでは、本格的なWebサイト、ECサイトを作りながら、HTML,CSS,JavaScriptを学ぶことができます！
サイト模写に関しては以前紹介したことがあるので、下記に示すコンテンツに任せるとして、JavaScriptの屋敷についてご紹介いたします！