記事内に商品プロモーションを含む場合があります
ここ一年ほど、実務も兼ねながらJavaScriptを勉強してみて指針になっている勉強方法や考え方についてを本記事にまとめています。
どのようにJavaScriptを勉強していけば良いか検索するのですが、一から詳細に書かれている記事がないのと、紹介されているものが記事を書いたご本人が読んだり、体験したものではなさそうなものが多い印象です。
という方向けの内容です。
ちなみに私自身、理解スピードは人よりも遅い方だと思いますが、そのような方でも理解できるように書きたいと思います。
「JavaScriptの勉強」とは何を指すか
JavaScriptを勉強する定義からお伝えすると、私は以下のように考えています。
- JavaScriptでできることを知ること
- 文法（書き方）を知ること
それぞれについて見ていきましょう。
JavaScriptでできることを知ること
まずはJavaScriptとは何なのか、その概念を知ることからだと考えます。具体的に言うと、「JavaScriptでできることを知る」という言葉に置き換えられると思います。
「何ができて、何ができないのか」
HTML・CSSであれば、文章を書いて、装飾や簡単なアニメーションを実装することができます。一方でJavaScriptでできることはどんなことがあるでしょうか。
例えばですが、ある要素をクリックした時に変化を加えたり、一定の箇所までスクロールしたら、ポップアップが自動で出てくるなどのことができます。
これは元々ブラウザが持っている仕様です。
その仕様を「プログラムを書いて呼び出すこと」がJavaScriptの役割と言えると思います。
文法（書き方）を知ること
JavaScriptでできることを知るとともに、その「呼び出し方」つまり文法も知らなくてはなりません。
“条件分岐”や、”繰り返し”などプログラミング特有の書き方があります。
また、JavaScriptはHTML・CSSとは違って、1文字違うだけでもエラー表示となりますし、大文字・小文字も区別されており、ルールに則った書き方をしなくてはなりません。
これらは最低限の知識として知っておく必要があります。
より理解が必要な言語
HTMLやCSS（マークアップ言語）は理解しやすい言語なので、比較的習得まであまり時間がかからないと思いますが、JavaScript（プログラミング言語）となると、概念から文法まで情報量が膨大になります。
※フロントエンド だけでなく、バックエンドもカバーできる言語のため尚更です。
動画教材を見ても10時間以上、書籍も400ページを超えるものなど全体像を把握するだけでも相当の時間がかかります（一通り目を通すのに、各々1ヶ月かかりました）。
さらに、到底1度で理解できるような内容ではないので、繰り返し見聞きしながら忘れては思い出しの繰り返しになるでしょう。
初めての勉強は書籍がオススメ
ここ1年「動画」と「書籍」でJavaScriptを勉強してきて思ったのは、最初の勉強は「動画」ではなく、「書籍」から入るのが良いです。
私は最初の半年間、動画で勉強していたのですが、全く身につきませんでした。
後から気がついたのですが、動画は知識が断片的であり、全体像を掴むことができません。既に基本（先述した「できること」や「文法」）を知っているものとして、話が進んでいきます。
それに対して書籍は体系化されており、大枠が把握できるような内容になっているものが多いです。2ヶ月で3冊ほど読んだのですが、基礎が理解できた感覚があります（何を読んだかは後述します）。
また、私なりに動画よりも書籍をオススメする理由を下記に挙げておきます。
- 動画だと明確に定義されておらず、記憶に定着しない
- 詳細に解説されているものがない
- JavaScriptの構文を既に知っているものとして進行する
動画だと明確に定義されておらず、記憶に定着しない
先に述べたように、私はJavaScriptの勉強を動画から入り、半年間ほど継続しましたが、内容が全く頭に入ってきませんでした。
というのも「文法を明確に定義している動画がないから」です。
動画は、”This is a pen”のように「これは○○である」と講義形式ではなく、話し言葉で展開されているのが基本的なスタイルです。それだとほとんど記憶に定着しないということが分かりました（単に「こう書く」という説明のみ）。
また、ベースの知識がないので学習しても右から左に内容が抜けていってしまいます。
詳細に解説されているものがない
JavaScriptは、その概念を理解するのに相当な時間がかかる言語だと思っています。
インターネットユーザーとして使用している間は、ブラウザは単なる「インターネット閲覧機能」だけでしたが、エンジニア視点で見ると、実は「様々な機能を持っているもの」でした。
windowオブジェクト、location、history、documentなど、JavaScriptのブラウザが持っている機能を挙げればキリがありませんが、それらを動画で1つずつ詳細に解説するのは情報量が膨大なので、不可能だと思います。
それに対して、書籍は1から解説されているものが多く、講義形式（This is a pen方式）で記されているので、動画と比べると記憶に定着しやすいものになっています。ベースの知識を築きやすいです。
JavaScriptの構文を既に知っているものとして進行する
ほとんどの動画は構文を解説することはなく、コードを書いて話しが展開していきます。何度も述べている通り、基本の解説がほとんどありません。
ですから、書籍で基本が頭に入っている状態なら理解の促進につながりますが、意味が分からないまま書いても、単なるコードを書く作業にしかならず、時間が浪費されてしまいます。
書籍は複数冊読むこと
そして、オススメの書籍についてですが、その前に書籍は複数冊読むことをオススメします。理由は下記の通りです。
- 初心者向けは分かりやすいが内容が浅い
- 逆に、最初から詳細解説だと理解しづらい
- 解説者が理解している言葉でしか、解説がなされない
初心者向けは分かりやすいが内容が浅い
最初は初心者向けの書籍が良いと思います。
JavaScriptの書籍は幅が広く、初心者向けから中・上級者向けのものがあります。中には800ページほどある、かなり分厚いものもあります。
その中でも初心者向けのものをオススメするのは、内容が浅い方が導入には良いからです。
逆に、最初から詳細解説だと理解しづらい
最初は初心者向けがオススメですが、中・上級者向けの本から入ると、基礎を知っている前提で話が進んでいきます。
「え、これって何の話？」とならないように最初は噛み砕いて説明されている本でないと、理解しづらいことは目に見えています。したがって最初は初心者向けの本から入ると良いでしょう。
解説者が理解している言葉でしか、解説がされない
最後に。本の数だけ著者がいますが、それぞれの理解している言葉でしか解説できないので、複数読んで、いろんな角度から理解していくと良いです。
人は自分が理解している範囲でしか解説できません。プロの書いた説明が初心者の方の理解につながるかと言うと、必ずしもそうではないと考えます。
いろんな著者の方が解説されている書籍を読むことで、次第に理解が立体的になっていきます。
理解する・しないの思考回路
JavaScriptが分からない時の流れとしてはこうです。
- 分からない
- コードを読むのに抵抗が出る
- 読むのを諦める
- 理解できない
この流れから出るには、早いうちに書籍でJavaScriptとは何なのかを知っていくことが良いでしょう。
理解するときの心理的な流れ
では反対に、理解する時はどのように理解していくのでしょうか？
分解していくと、こんな流れではないかなと思います。
- 読書する
- 仕事でコードを読む
- 記憶に引っかかる（「あれ、これどこかで見たことがある」）
- コードを読む抵抗が少なくなる
- コードを読む気になる
- コードを読む（「あれ、分かるぞ」）
- 検索する
- コードを書くようになる
- 使い方を覚える
- 理解する（「こう言う使い方をするのか」）
なので、まずは「記憶に引っ掛けるために読書をする」と言えるかと思います。
JavaScriptのオススメ書籍
お待たせしました。それでは初心者向けから、オススメの書籍を紹介していきます。以下の順番で読んでいけば、初心者から中・上級者向けの流れとして理解していけるはずです。
初心者向け
1.『スラスラ読める JavaScript ふりがなプログラミング』
タイトルにある通り、ふりがなが振られていて、この記述は何を意味するのか、ふりがなを振って一つ一つ解説されています。まさに入門書にぴったりの内容です。
内容は浅いですが、JavaScriptでどんなことができるのかを知るにはこれ以上に初心者に優しく書かれている本はないと思います。一番最初にJavaScriptとは何なのかを知りたいという方向け。
2.『確かな力が身につくJavaScript「超」入門第2版』
1で概要を知ったら、次はより詳細に解説されているものが良いですが、こちらが次に読む本としておすすめです。
例題などが豊富にあり、サンプルコードもついてくるので、書きながら理解を促してくれます。JavaScriptが網羅されているとは言えませんが、概要からさらに少し深い内容が書かれているので入門書の2冊目としてオススメです。
中級者向け
3.『本格JavaScript入門』
1、2よりも詳細に書かれています。したがって全くの初心者の方には不向きの内容です。
個人的には３と4を「教科書代わり」にすればOKだと思います。
実務を通して分からなかったところはメンターに聞きつつ、「この記述何だっけな？」と言う時に索引から調べるのに役立ちます。
SNSで「これを入門書すべき」とあったのですが、私も同意見で、記述につまづいた時や、コードを書いたもののどういう意味だったのかを復習するのに役立ちます。
また、この書籍は幅広く、かつ丁寧に書かれていて理解しやすいので2回は読むようにしてください。1回、2回と繰り返し読むことで、構文や記述の意味を理解していくことができます。
- 1回目は分からないまま読む
（意味が分からない箇所は飛ばしてもOK・ざっくりと内容を理解） - 2回目は1回目には気がつかず、飛ばしていた内容を理解し始める
（自分が理解していない箇所の検討がついてくる） - 3回目は細かな記法や、名称について理解してくる
4.『徹底マスターJavaScriptの教科書』
3には書かれていないcanvasについてや、書かれていても違った表現で説明されているので多面的に理解するのに役立ちます。3を索引して見つからない時は4を見たり、逆も然りです。
印象としては3よりも詳しく書かれています。3を読んでも分からない時の補足として読むのも良いでしょう。分厚めの本です。
紙書籍と電子書籍のメリット・デメリット
余談の節として、紙書籍と電子書籍についてもふれます。私も両方使用していますが、それぞれ良さがあると思います。
迷わないよう、私が感じている各々のメリット・デメリットを挙げておきます。
| メリット | デメリット | |
| 紙書籍 | すぐに索引可能 | 物理的に重たい |
| フリマアプリで安価に購入可能 | 手元に届くまで時間がかかる | |
| 電子書籍 | 軽い・どこでも読める | 索引できない |
| 買ってすぐに読める | ||
| kindleなど3ヶ月に1回ほどセールがある |
初心者向けの本は索引として使うことがないと思いますので、電子書籍。辞書代わりに使いたい書籍は紙書籍が良いと思います。
概要が掴めてきたら、アプリを作ってみる
書籍を通じてJavaScriptの概要が掴めてきたら、次にアプリを作ってみます。ここから動画の学習に切り替えましょう。
単元だけで短くまとまっているので、ドットインストールがおすすめです。ドットインストールでは詳細解説はされないので、書籍で概要を掴んだ後、アプリ作りをすると良いでしょう。
「あ、このコード見たことあるな」と記憶に引っ掛かったら3や4の書籍で振り返ると良いです。
もし、書籍で振り返っても分からない場合は、検索するかもしくは、該当箇所の動画で学習するというのも良いでしょう。動画では解説者の視点からの説明が聞けます。
私の場合、spliceメソッドが分からなかったのですが、動画での解説を見てしっくりきました。中にはスライドで図解されているものもあるので書籍でも分からなかったところが理解できるものもあるかと思います。
ただ、あくまで動画は補助的なものであるということは前提として認識しておいた方が良いです。
出てくる不安の種類と対策
最初は誰でもそうだと思いますが、勉強していても分からない時が多々あります。その時に出てくる不安の種類にはこういったものがあります。対策と一緒に記載しておきます。
終わりの見えない「分からない感」（いつになったら分かるんだろう）
今できている人も最初は同じだったはず
私は分からないけど、他の人は簡単に理解できているんだろう
周りと比べるのではなく、昨日の自分と比べて成長しているかどうか。
理解できているだろうか
繰り返しやることで記憶に定着していくので焦らずにやろう。
時間がない、どうしよう
5分でもいい。やろう。
こういった思考が出てきても、途中でやめずに継続していけば必ず理解できていくはずです。
イメージとしては、ある日パッと理解できるようになっているのではなく、絵の具が滲むように、じわじわと認識の範囲が広がっていく様子が理解する過程として近いと思います。
できることが理解できてきたら、それらを組み合わせて実装できないかを思考する
ここまできたら、全体像は理解できているはずです。
JavaScriptで何ができるかを理解できてきたら、それらを組み合わせて目的の実装ができないかを考えます。
やり方としては、一つ一つ処理を分解して言語化します。
例えば、企業サイトなどで「選択した業種に応じて、それに見合う事例記事を出力する」という実装をするとしましょう。
この実装をざっくりと分解すると下記のようになります。
- 「業種」が変更されたことを検知する
- 記事データを取得する
- 今ある記事データを、選択された業種に一致するものに書き換える
これらに見合うメソッドやプロパティなどをイメージして、調べて書いてみるというのが実装の流れです。組み合わせるには、事前にできることをしっかりと頭に入れておく必要があります。
そうでないと検索することができません。基礎（JavaScriptできること）を頭に叩き込みましょう。
実務でメソッド、プロパティの実装パターンの引き出しを増やす
勉強はあくまで知識のレベルで、それを活かすのは現場です。JavaScriptの実装シチュエーションというのは様々で、その場でしかできないパターンがあります。
「絶対パス指定でヘッダーナビのcurrentクラスの文字色を変える」などの指定は、現場では必要でも、検索記事に同じシチュエーションで書かれているコードが必ずしもあるとは限りません。
したがってこれまで学んできたことを駆使しつつ、実装の引き出しを増やしていく必要があります。
他にもjQueryでは、$(function())がないとDOM描画が先になってscriptが適用されないなどもあります。記事はfunctionがなく、それにわざわざ解説を加えているものなどありません。
知っていないと「なぜ動作しないんだろう」とハマることになってしまいます。
これらは実務で実装してみて、初めて身につくものと言えるでしょう。それには実務をこなしつつ、実装パターンの引き出しを増やしていくしかありません。
ベテランエンジニア（メンター）からのフィードバックは必須
さらに、一番大切なことは「フィードバックを得る」ということだと思います。
独学でJavaScriptを身につけるのは不可能だと思います。
現場経験とともにベテランエンジニアからのフィードバックは必須です。
これがないと成長のしようがありません。
実装の引き出しを増やしていくことで、実装パターンの引き出しを増やしていくことができますが、フィードバックありきだと思っています。
コードを書いてみたら、フィードバックを受けて、間違いを修正する。
実装できたら、本で振り返って内容をふに落とす。
この繰り返しで次第にスキルレベルが上がっていくでしょう。
ベテランの方をメンターとして指導を受けることを強くおすすめします。
1ヶ月、2ヶ月で理解できるようなものではない
JavaScriptの習得の過程では、膨大な情報量があります。それを1、2ヶ月で理解しようとは思わない方が良いと思います。
概念を理解して、書けるようになるまで年単位の時間がかかるはずです。
バックエンドまで幅広くカバーしていて、スラスラとコードが書ける先輩エンジニアも「JavaScriptを理解できるまで3年かかった」と言っています。
大枠を知ったら、あとは現場でレベルを上げる
最後にスキルレベルを上げる結論としては、現場経験が必須です。知っただけでは知っただけでは実装できないからです。
- 学ぶ
- 書く
- フィードバックを受ける
- 修正する
上記のような流れが一番成長スピードを加速させてくれます。
検索はできる状態かつ、コードを見て何を書いているのかは分かるにしても、実際書くとなると違う脳を使います。
構文の書き方や、オブジェクトに対して使えるメソッド・プロパティが違うなどの問題で必ずつまづきます。
そこでつまづいたら、調べて、調べても分からなかったらメンターに聞いて、さらに調べて身についていきます。繰り返しますが、概念で知っていても書くとなると「これ使えるんだっけな？」となります。
（最近ですと、addEventListenerの’change’はform要素にしか使えないことを初めて知りました。selectタグやtextareaタグが変わった時にしかchangeを検知できません。divタグ内のテキストが変わった時には使えません）
このような試行錯誤は、実務でしか体験不可能だと思います。
まとめ
本記事では以下のことについて解説しました。
- 「JavaScriptの勉強」とは何を指すか
- より理解が必要な言語
- 初めての勉強は書籍がオススメ
- 書籍は複数冊読むこと
- 理解する・しないの思考回路
- 理解するときの心理的な流れ
- JavaScriptのオススメ書籍
- 概要が掴めてきたらアプリを作ってみる
- 出てくる不安の種類と対策
- できることが理解できてきたら、、それらを組み合わせて実装できないかを思考する
- 実務でメソッド、プロパティの実装パターンの引き出しを増やす
- ベテランエンジニア（メンター）からのフィードバックは必須
- 1ヶ月、2ヶ月で理解できるようなものではない
- 大枠を知ったら、あとは現場でレベルを上げる
何度も述べている通り、JavaScriptは1ヶ月、2ヶ月勉強して身につくものではありません。
先述しましたが、身近にいるベテランの先輩も「3年かけて書けるようになった」と言っています。
学習は長い目で見て、コツコツ勉強しつつ、コードを書いてみて、地道に継続しましょう。応援しています。
