Web制作・プログラミング関連のおすすめレビュー記事はこちら

【JavaScript】入門者向けのオススメの学習ステップを紹介【今ならこうする】

JavaScript

今回は入門者向けのJavaScriptの学習方法をご紹介します。

色々と学習してきて「始めからこの方法でやってればよかったな〜」という方法が確立してきたので紹介していきます。

初心者に良くありがちなのが、すぐにjQuery等のJavaScriptライブラリの学習から入ってしまうこと。

これは絶対におすすめしません。

ライブラリやフレームワークはある程度分かりやすく作られているので、JavaScript自体の基礎が曖昧でも使い方さえ覚えてしまえば、それなりに使いこなせてしまうこともあるでしょう。

しかし、基礎が曖昧な状態で、ライブラリの使い方だけを学んでも応用が効きません。

React, VueなどのモダンJavaScriptフレームワーク、言語問わずに利用できるデータフォーマットであるJSON、サーバーサイドJavaScriptとして知られるNode.jsなど、これらの技術は全てJavaScriptが基本となっています。

これらのモダンな技術や応用を使いこなすために、JavaScriptの基礎は必ず抑えておきましょう。

この記事では応用に対応するためのJavaScriptの本質的な学習法を具体的に解説したので、是非参考にしてください。

言語の仕様や基礎文法を知る

まずは基礎文法の使い方を知るところからスタートです。

どんな言語でも共通ですが、実践で覚えていく部分が大きいので最初の段階で完璧を目指そうとしなくてOKです。

ここからは学習を始める前に知っておきたいことやオススメの学習サイトを紹介します。

ES5とES6(ES2015)について

学習を始める前に知っておきたいこととしてES5とES6についてが挙げられます。

JavaScriptにはECMAScript(ES)という言語の標準的な仕様をまとめたバージョンのようなものが存在します。

そのECMAScriptが2015年にES5からES6(ES2015)へ更新された際、大幅な機能追加や仕様変更がありました。

現在では新規で開発する場合は、ES6(ES2015)を使うことがほとんどです。

そのため、れから学ぶ人は新しいES6(ES2015)から学ぶようにしましょう。

※ES5自体が無くなったわけではないので、昔のコードなどにはES5の書き方が残っている場合あります。

初心者にオススメの学習サイト

まず最初の段階で、学習するサイトとしては以下の2つがおすすめです。

定番ですが、Progateはブラウザだけで手軽に学べるので完全初心者にもおすすめです。

ドットインストールでは、実際にテキストエディタを使ってコードを書いて学ぶ動画教材です。

分量としてはどちらも、JavaScriptのコースをとりあえず一周すれば十分だと思います。

コラム:jQueryは今からやるのはもう遅い?

結論から言うと、jQueryをやるかどうかは自分の目標を考えて決めましょう。

例えば、Web制作の現場ではjQueryはまだ現役で使われることも多いので、必要な場面も来るかと思います。

しかし、Webアプリのフロントエンド開発等には段々と使われなくなっています。
(モダンJavaScriptフレームワークが台頭してきたため。)

jQueryに限らずですが、何か取捨選択する場面が来たときは自分の目標から逆算すると、無駄な勉強を省くことができます。

正直最初は「何をやってるんだろう...これで何ができるんだろう....」とモヤモヤするかも知れませんが、ステップごとに理解できるようになるので安心してください。

以下はここまでのまとめです。

ここまでのまとめ
・これから始める人はES6から学ぼう!
・JavaScriptの基礎文法や書き方を知る
・知識に穴があったり、完璧じゃなくても全然OK
・jQueryを学ぶかどうかは人による

JavaScriptの歴史を知る

駆け出し<br>エンジニア
駆け出し
エンジニア

プログラミングで開発するのに歴史を知る必要ってないのでは?

始めはそう思うかも知れません。

しかし、JavaScriptがどんな歴史でここまで発展してきたのかを知ることは、この先の学習の理解度を格段に高めます。

正直、僕もこの段階を軽視していましたが、「なぜそうなったか?」を知ることで発展的な内容でも理解しやすくなりました。

教材としては以下のしまぶーさんのYoutube動画がオススメです。2時間くらいあれば歴史編を全部視聴できます。

具体的には「webpackbabelといった技術がなぜ必要なのか?」や「React, Vueなどが発展するまでの経緯」などを学べます。

【モダンJavaScript #1】新章開幕!最も独学が難しい分野を徹底解説していきます!【フロントエンドエンジニア講座】

以下ここまでのまとめです。

ここまでのまとめ
・「なぜそうなったか?」の部分にフォーカスして学ぼう
・歴史を学べば、これからの学習の理解が深まる

教材に沿ってアプリを作成してみる

ここまでで基本的なJavaScriptの文法と簡単な歴史を知れたかと思います。

ただ、実際に自分で開発するにはまだまだ知識慣れが足りない状態です。

そこでオススメするのが、Udemyの動画教材での学習です。

実際に手を動かして学ぶことができ、小さなアプリを作りながら理解を深めていくことができます。

Udemyの教材はかなりクオリティが高いですが、その分レベルも高いです。

どうしても分からない部分は動画の講師に質問することも可能です。

2020年7月時点で、僕が実際に受講しておすすめできるものを紹介します。

JavaScriptを学べるオススメUdemy教材

JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

ES6(ES2015)を用いた基本文法からwebpackbabelを実際にインストールして使うところまでを学習できます。

バニラJavaScriptにフォーカスして詳しく扱ってくれていたので、今回の「基礎をしっかり学ぼう」という趣向にぴったりです。

実際に受講してみましたが、初心者向けで分かりやすいかつ実践的な内容という印象です。

Udemyは通常時に購入するとかなり高いのでセールを狙って購入しましょう。

セール情報に関してはこちらの記事で解説しています。

バニラJavaScriptを深く理解する

バニラJavaScriptとは、ライブラリもフレームワークも利用しないJavaScript自体のことです。生のJavaScriptなんても良く言われますね。

今まで勉強してきたのもバニラJavaScriptですが、このステップではより深く理解することが目的です。

バニラJavaScriptを学習する際には以下のサイトや書籍がおすすめです。

順番に紹介していきます。

JavaScript Primer

JavaScript Primerは全て日本語で書籍版も出版されていますがWebで無料で全文公開されています。

内容としては、まさに「変化に対応できる基礎を身に着けよう」というコンセプト通りで、基本編と応用編の2部構成です。

基本編では言語仕様や基本文法を、応用編ではTodoアプリ開発を通してJavaScriptでのコーディングからリファクタリング(コードの改善)までの一連の流れを体験できます。

全編を通して、ES2015の書き方を紹介してくれているので初心者でも安心です。

めちゃめちゃ良書ですが、正直結構レベルが高いです。

そのため、難しいと感じたりどうしても分からないところがあれば、前のステップに戻ったり、自分で詳しく調べていくという学習法がおすすめです。

また、最後まで読み切って知識のフレームを作ることを意識すると効果的だと思います。

今までなんとなく使ってた関数や言語の書き方があ〜、こうゆうことだったのか!という感触が少しでも得られれば確実に成長できている証拠ですので頑張りましょう。

現代のJavaScriptチュートリアル

現代のJavaScriptチュートリアルはロシアで最大級のJavaScriptチュートリアルと学習プラットフォームのOSSとして生まれたものです。その日本語版になります。こちらも無料。

前述のJS Primerと比べて翻訳版ということもあり、少し不自然に感じる日本語もありますが、内容の質はとても高いです。

また、学習プラットフォームから生まれたということもあって、次のような点が特徴です。

  • 基礎から応用まで学べる
  • 体系的に幅広く学べる
  • その場でコードを実行し動作を見ながら進められる
  • 各章の末尾に問題があり、理解度の確認に使える

こちらも良書ですが、さらにレベルが高く感じるはずです。

というのも、非同期通信のPromiseについてより詳しく触れられていたり、関数のカリー化などの発展的な内容まで扱われています。

そのため、こちらも「まずは1周する」と割り切って最後まで読み進めることをおすすめします。

いままでの知識がだんだん繋がっていく感覚を感じられれば着実に成長しています。

開眼!JavaScript - 言語仕様から学ぶJavaScriptの本質

開眼!JavaScriptはオライリー・ジャパンから出版されている書籍。

「言語仕様から学ぶJavaScriptの本質」というサブタイトルの通り、内容としてはかなり深い部分まで扱っています。

「JavaScriptではすべてがオブジェクトのように振る舞う」とはどういうことなのか、プロトタイプチェーンやthisなどはどういう仕組みで動いているのか、などより本質的な部分を学ぶことができます。

そのため、先に紹介した2つのうちのどちらかを終わらせてから取り組むと理解しやすいと思います。

ただ、2013年初版の本なので、サンプルコードの書き方には注意しましょう。
(変数宣言はvarを使用していたり等々)

難易度的には、ここまでの学習が終わっていれば、どこを重点的に学ぶべきかが分かっているはずなのでそこまで苦労しないと思います。

ここまでのまとめ
・バニラJavaScriptを深く理解する
・今までなんとなく使っていた知識との繋がりを意識する

発展:モダンJavaScriptを学習する

ここまで学習をしっかりこなせれば、JavaScirptについてかなり理解できているはずです。

次のステップアップとしてはVue.jsやReactなどのモダンJavaScriptの学習が挙げられます。

言語に関しては、自分の好みや目標に合わせて学習してみましょう。

筆者自身は、Vue.jsをおすすめします。(自分がその道に進んだからというのもありますが。)

というのも、Vueは比較的学習コストが低いと言われ、ここまでのJavaScriptの基礎があればすぐに使い始められるからです。

下記記事ではVue.jsの学習方法について詳しく解説しているので気になる方は是非。

最後に

バニラJavaScriptは今後フロントエンドの色々な技術を学んでいく上で、かなり重要なスキルになります。

更にスキルアップを目指したい方は、自分で簡単なアプリを設計から開発までを行ってみると良いでしょう。

今後の発展的なスキルや応用に対応できるように、「バニラJavaScript」を是非頑張ってみてください。

それでは、今回は以上です。

タイトルとURLをコピーしました