近年では、

• 一部のウェブ開発のサーバ側でもJavaScriptを利用できるようになってきている
• スマートフォンアプリケーションやデスクトップアプリケーションもJavaScriptで開発できるようになってきている
• スマホアプリの開発をWeb開発の技術で置き換えるパラダイムであるPWAという開発手法においては、HTML, CSS, JavaScriptが開発言語として主要アクターである

などの理由から、Web開発周りにおけるJavaScriptの役割が大きくなってきているので、JavaScriptをきちんと使えることは非常に大きな強みとできる時代となっています。

そのため、JavaScriptをきちんと学び、スキルとして身に付けていくことは非常に重要だと言えるでしょう。

さて、今回はそんなJavaScriptを、初心者が一から勉強するためのガイドとなるような記事をお届けします。

これまでAwesome Ars Academiaでは、下記のような初心者向けの初期学習向けの記事を公開させていただいています。

• 『初心者がHTML/CSSを勉強するベストプロセス』
• 『初心者がPHPを勉強するベストプロセス』
• 『初心者がPHP/Laravelを独学で学習するベストプロセス』
• 『初心者がRuby on Railsを勉強するベストプロセス』

すべての学習プロセスをご紹介する記事で毎回書かせて頂いてはいるのですが、弊スクールAwesome Ars Academiaでは、プログラミング学習にあたって常に下記のような３つのプロセスを一つのセットとして実施することが大切だと考えています。

 

下記が、弊社が大切だと思っている学習の３つのステップです。

1. 見よう見まねでとりあえず動かしてみるハンズオン学習
2. 理論や概念などの理解を深める概念学習
3. 理解した内容をベースに作りたいものを作り上げようとする実践・演習学習

多くの人がプログラミングがコンピュータを相手にする仕事だからなのか、そこには何か正解があって、それを知識として積み上げるように学んでいくものだ、という考えを持たれているのですが、弊社スクールの考え方だと、スポーツなどと同じようななもので、繰り返し練習していく中で徐々に身についてくるものだと考えています。

野球でバッティングをするときに、バッティングとは何か、肘の角度とは何か、というようなことをすべて座学で学んでからバットを振り始める人は居ないと思います。

とりあえずバットをちょっと振ってみるところからスタートするのが一般的でしょう。

そして上級者になるにつれて、肘の角度や体の使い方に対して感覚が鋭くなるため意識できることが増えていき、それがプロともなれば、バットの振り方を動画で撮影してスローモーションで分析して、より効率的な体の使い方を考えていく、という形になっていきます。

プログラミングも実は同じで、「まずちょっとやってみてどんな雰囲気かを掴んでみる」というところからスタートして、その意味を少しずつ理解し、それを応用していく、という同じ様なプロセスを通ります。

そんなプロセスをJavaScriptというプログラミング言語において踏み出すためのプロセスを紹介していければと思います。

また、JavaScriptはHTML, CSSと一緒にそれらへ動きを付けていくことのできるプログラミング言語ではあるので、本記事の内容を学習する前に、ぜひ『初心者がHTML/CSSを勉強するベストプロセス』を実施しておくのをおすすめします。

さて、それではここからが本題の「JavaScriptを独学で学習するベストプロセス 2020年更新版」です。

 

JavaScript学習の第一段階 - ハンズオン学習

 

もはや初心者向けのプログラミング学習題材としては定番と言って良いProgateの登場です。
JavaScriptの学習の初期段階として、やはりまずProgateをハンズオン学習として触っておきましょう。

Progateだけをやっても実務に必要なレベルの実践的なスキルは身に付きはしない、というのがリアルではあります。
ですが、実際のProgateというコンテンツ、Progateのプロダクトビジョンも含めてですが、「プログラミングの最初のハードルを徹底的に低く」して「初心者から創れる人を生み出す」というのが、彼らのプロダクトです。
そして、そのプロダクトビジョン通り、「初心者が挫折せずにプログラミングの初期理解」をサポートしてくれる素晴らしいコンテンツを提供してくれていると思います。

まずはProgateのJavaScriptに関するところのコンテンツを１周しましょう。
すぐに理解できないな、と思う人は、あまり詳細な理解にこだわらずさらっと１周したあと、２周目をしてみるのも良いかも知れません。

ここではJavaScriptと直接関連しないエンジニアとして知っておくべき関連知識として、Command LineやGit、SQLなどの講座もピックアップしておきますね。

ひとまずこれらの内容を触ってみることで、JavaScriptを中心にプログラミングの世界への第一歩を踏み出してみてください。

• https://prog-8.com/languages/html
• https://prog-8.com/languages/es6
• https://prog-8.com/languages/react
• https://prog-8.com/languages/commandline
• https://prog-8.com/languages/git
• https://prog-8.com/languages/sql

※ ProgateのjQuery講座は参考になるのですが、ベースとしているJavaScriptがES5と少し古いものになっています。
そのため、敢えてここではおすすめコンテンツからは外しています。

※ 月額980円の有料プランに入らないと見れないものもありますが、めちゃくちゃ安いと思うので、迷わず月額980円払っちゃいましょう！

 

JavaScript学習の第二段階 - 概念学習・理解深化編

 

上記Progateを触ってみることによって、なんとなくJavaScriptとはなにか、プログラミングとは何かということを掴んでもらった上で、次のステップとしては書籍をベースにした概念理解を深めていきましょう。

この段階ではきちんとJavaScriptというプログラミング言語自体を深めていくことが大切です。その際に最も参考になるJavaScript入門書は、もはやJavaScript入門書としては圧倒的な定番書となった『JavaScript本格入門』です。

言わずと知れた入門書執筆者として著名な山田祥寛さんの書籍ですが、おそらく最も定番化している一つかもしれません。

 

また、ちょっとハンズオン学習が少ない状態で書籍学習に入って飽きちゃいそうな人は、下記のドットインストールシリーズで、動画での学習も並行してやってみましょう。

動画学習のほうが飽きは来ないので、動画で基本的な理解を作った上で、書籍で詳細化していく、という順序でも良いかも知れません。

• はじめてのJavaScript
• 詳解JavaScript 基礎文法編
• 詳解JavaScript オブジェクト編
• 詳解JavaScript DOM編

※ Progateと同様、月額980円のプレミアムプランに入らないと見れないものもありますが、学習に対する金額としては安いです。迷わず課金しましょう！

 

JavaScript学習の第三段階 - 実践・演習編

 

第三段階では、第一・第二段階を経て基礎的な理解度を持っている状態で、より実践的なアウトプットをより深めていきましょう。
プログラミング学習においては、「多くのアウトプットを実施すること」が知識の定着と応用力を身につけるために非常に大切になってきます。

その際、JavaScript学習における初心者向けのアクティビティとしてAwesome Ars Academiaがおすすめするのは、こちらもおなじみのドットインストールでのいくつかのアクティビティです。

実際にここで開発するアウトプットは、ちょっとした練習課題のようなものなのですが、「実際に何かまとまった機能を持ったアプリケーションを作ってみる」というのは楽しいものです。

そのため、ぜひこれらの遊び心も持ったサンプルアプリをたくさん作ってみることをおすすめします。

関連：プログラミングと英語を学ぶ価値とは？学習法までご紹介！

さて、ここまで、プログラミング初心者がJavaScriptを独学開始してみるプロセスについて紹介させていただきました。
実際JavaScriptは、特に環境構築なくプログラミング学習を開始できるので、非常に初期コスト低くプログラミング学習を開始できますし、ブラウザ上で目に見える動きがわかりやすいので、楽しく学び始めることができる言語の一つです。

ただ、ここまでの内容が完璧であったとしても、まだまだ仕事ができるエンジニアになるには遠い道のりがあります。

今回のJavaScript入門は、内容自体が非常にビギナー向けな内容となっているということもあるのですが、きちんとしたプログラマとして仕事をしていくためにはもっと幅広い周辺知識も含めた学習が必要と言えるでしょう。

たとえば、

• 小さい規模の開発においては、jQueryを利用した開発は最低限当たり前のスキルとして求められる
• 一定規模以上の実際のプロダクト開発では、ReactやVue.jsのようなJavaScriptフレームワークの理解と利用が当たり前となっている
• チーム開発で求められるGit, Githubなどの利用経験を積めていない
• 先輩にコードレビューを受けるなどの経験がないため、現場で求められる「美しいコード」「読みやすいコード」などを意識できない
• APIを利用した実践的なフロントエンド開発の経験も理解もまだ持てていない
• サーバ、インフラ、ネットワークなどコンピュータ周辺の知識が足りない

など、JavaScriptを利用した本格的なアプリケーション開発をするにあたって必要なスキルや学習が足りない状況です。

自分の力でトライアンドエラーをしながら、上記のようなスキルセットを高めていく経験を積んでいく必要があるでしょう。

より本格的な学習をされるにあたってプログラミングスクールを検討される方は、本記事で学べるようなことの「次のステップ」を学べるようなスクールを選んだ方が良いでしょう。また、もしどこかにインターンやアルバイトとして低いスキルからでも業務経験が積めるところへ入り込めるのであれば、いち早く現場へ入り込むことも大切です。

近年プログラミングスクールも多く存在するため、初心者レベルの応募者が多くなっており、多くの企業がエンジニア不足に悩みながらも安易に初心者を採用しなくなっているので、就業のハードル自体はそこまで低くない状況になってきている印象があります。
そのため、実践的な経験やハイレベルな経験を積める「学習品質の高いスクール」へ行って、世の中に溢れているスクール卒業生の中から１つ頭抜け出すような努力をすることは、非常に大切です。

みなさんにとっても、「独学でも学習できる範囲が何か」「スクールに行くのであればスクールに求める経験は何か」「そもそもプログラミングを仕事にしたいと本当に思えるのか」など、一歩踏み込んでより良い判断をできるようになっていただくために、ぜひまずは独学で基礎的なプログラミング学習へチャレンジして頂ければと思っています。

 

また、今回はJavaScriptの初期学習のためのガイドとなる記事を書かせて頂きましたが、Awesome Ars Academiaとしては、初心者が初めに本格的に学習する言語としては、PHPやRubyなどのサーバサイドの言語を学習することを推奨しています。

理由としては、サーバサイド言語を学ぶことによって、サーバやインフラ、インターネットなどの周辺知識を自然と学ぶことができるため、コンピュータサイエンス自体の学習に大学などで触れていないプログラミング初学者にとっては、周辺知識も自動的に学んでいくという一石二鳥な学習をできるから、です。

そのため、「本格的にプログラミングを勉強するんだ」という風に考えて動き出した方には、サーバサイド言語である「PHP/Laravel」や「Ruby/Ruby on Rails」などの学習から入ることをおすすめしています。

 

とはいえ、冒頭で紹介したとおり、JavaScriptは現在のウェブ開発周りにおいて非常に幅広く利用されている言語であることも事実です。

そのため、初期の数ヶ月から半年間はきちんとサーバサイド言語を学んだ上で、JavaScriptとJavaScript周辺のフロントエンドのスキルを高めていく、というプロセスを持たれる方が良いのではないか、と考えています。

このような記事の情報も含めて、今後プログラミング学習を開始されるみなさまの一助になれますと幸いです。