Yutabolg

Learning is the best asset

Programing

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

投稿日:

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

信頼性の保証

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



対象となる読者

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

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

おすすめのWeb制作学習コンテンツ

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

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

JavaScriptとは何か?

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

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

JavaScriptでできること

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

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

おすすめの書籍

ここでは、初級、中級に分けて書籍をご紹介したいと思います。

初級編

これから学ぶJavaScript

JavaScript初学者が学ぶために作られているので、すごく基礎的で、挫折しないような内容です。
なので、中級、上級の内容は端折ってあり、とても取り組みやすい参考書です!

スラスラ読める JavaScriptふりがなプログラミング

これでもか!ってくらい丁寧に書かれた本で、1行1行、プログラムにフリガナが振ってあるので、すごく理解しやすい参考書です!
ですが、少しJavaScriptやったことがあるよ!って人にとっては、丁寧すぎてうざいなぁ~って感じなので、買わないほうがいいです。

JavaScript コードレシピ集

本の名前にもあるように、コードサンプルが250個以上も載っているので、すごくためになる参考書です!
実際に、何かを作りながら学習することができるので、学習しやすいと思います。

中級編

JavaScript本格入門

本格入門というだけに、実務でも役立つ様々な技術が凝縮された本です。
昔ながらの書き方や最新の書き方まで、多岐にわたる分野を網羅しています!
めちゃめちゃ難しいですが、やりがいはすごくあります!



Udemyで学ぼう!

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

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

Code Mafia

北海道大学 工学研究科 応用物理学専攻 修了したのち、ソフトバンク SE兼、開発で新卒入社〜4年間勤務。そして、WEB開発のコンサル、開発者として独立し、4年前からWEBのコンサルと実際に手を動かす開発者の2足の草鞋で活動開始。関西を中心とした大学や企業様向けの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までのリリースで、どんなものを作ることができるのかを下記で見ていきましょう!

おみくじ

Image from Gyazo

カレンダー

Image from Gyazo

ストップウォッチ

Image from Gyazo

スライドショー

Image from Gyazo

スロットマシーン

Image from Gyazo

タイピングゲーム

Image from Gyazo

タブメニュー

Image from Gyazo

ビンゴシート

Image from Gyazo

三択ゲーム

Image from Gyazo

数字タッチゲーム

Image from Gyazo

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

忍者コード

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

コンテンツ 価格
鳳凰の間 12,980円
鷹の間 8,980円
鶴の間 7,980円

鳳凰の間を例にとって、どんなものが作れるのかをご紹介いたします!
※具体的には、JavaScriptの屋敷の公式HPに飛んでみてください。

ちなみに、Dotinstall,忍者コード(模写偏)については、以前、紹介したことがあるので、そちらもどうぞ~

おすすめのWeb制作学習コンテンツ

なんかうまくま取りませんが、こんなところで失礼いたします!

-Programing

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Techacademyっておすすめできる?

今話題のWeb制作を学ぶ上で、Techacademyはおすすめできるのか?を実体験をもとに細かく紹介しております!

Web制作

おすすめのWeb制作学習コンテンツ

こんにちは!今回は、前回&#12 …