JavaScriptをもう少し知ってみたいと思ったら、どのような順番で進めていくと良いのでしょうか。自習のコツとともに、第1回と 第2回を終えた今の「現在地」を確認しておきましょう。
取り上げなかった内容・現在地
プログラミング言語の初歩としてよく取り上げられる内容は以下のようなものですが、第1回と第2回では、ほとんど取り上げませんでした。
- 変数・関数
- 条件分岐
- 繰り返し
- オブジェクト
また、システムの一部として「Ajax」という通信の機能が大抵のことに関わってきますが、これについても全く触れていません。つまり、コードを介したブラウザの操作の経験はしたものの「プログラミングした」という実感はあまり湧いてないはずです。
より高度な内容は、シッカリと基本を学ぶことから発展できると思うので、ある程度掴めたら本格的な学習に取り組むと良いでしょう。ゴールにしていることがある程度実感できていれば、それらの学習も意味が出てくるはずです。
では、次のステップは？
実は今の場所から「次の実感のあるステップまで、すこし距離がある」というのが、私の正直な見解です。とは言え、どういう道筋がありそうかは提示できればと思います。このステップはLPのようなデザイン寄りのお仕事から、より技術寄りの内容に近づくものです。
以下に次のステップを難易度の低そうな順番で書いてみました。参考にしてみてください。
1.jQuery
上図の上のルートを通って今回取り上げなかったDOMについて理解を深めると、DOM操作を基本にしたjQueryが少しわかるようになると思います。
これまでの知識の上に積み重ねやすい内容ですが、最近jQueryはあまり推奨されない傾向があるので、たくさん時間をかけるべきか迷うところです。LPに少し動きを付けるなどのケースが多い場合なら、十分役に立つシーンはあるでしょう。また、豊富なプラグインによって、コードがあまり書けなくても動かせることもあります。
2.Ajaxなどを利用したシステム連携
バックエンドにシステムがあるような場合には、Ajax（JavaScriptから呼び出せる通信機能を使うもの）が重要になることが多いです。ただし、多少なりともプログラミングの知識がないと使いこなすことが難しい内容です。そのため、簡単にでもプログラミング学習を経てからチャレンジすると、時間を浪費せずに到達できることが多いはずです。
3.Reactのようなフロントエンジニアへの道筋
この場合は、上図の下のルートを通るため、少しでもプログラミングを学んでから進む方が良いでしょう。
「JSX」というHTMLの断片を作れる仕組みを利用して画面を構築しますが、この断片を作る際にプログラミングの知識を必要とするはずです。また、バックエンドのシステムとの連携が前提なことも多いことから 「Ajax」を使うことが多いので、知識として必要な量は多くなりがちです。
次のステップに進むための方法・道具
■Web上の情報
最も低コストですぐに始められるものは、Web上の情報です。自分で調べて試してみるといった「試行錯誤」ができるタイプの人はこちらがマッチするでしょう。
また、業務でコードを書くようになるとこの方法が基本になるので、最終的には「Web上の情報を自分で探し出して対応できること」が実力につながるはずです。
▼良い点
- インターネット環境さえあればほぼ無料
- 最終的に実務でやる際のアプローチとほぼ同一
▼悪い点
- 情報の取捨選択を自分でできないと適切な情報へ辿り着けないこともある
- コツが掴めないうちは時間がかかることもある
Web上の情報で試行錯誤するとき、最初は「初心者向け」「入門」のような内容をたどっていくことが多いと思います。そのとき、次第に信頼できる情報を頼らないと時間がかかることも増えます。
信頼できる内容を提供するサイトの一つはMDN（https://developer.mozilla.org/ja/docs/Web/JavaScript）だと思いますが、英語を翻訳したものであったり、表現が難解なこともあり、難しいと感じる人もいるかもしれません。最近では動画で説明するサイトもあるので、テキストだけの情報が苦手な人は調べてみるのも良いでしょう。
■書籍
書籍はいくつかの種類があります。単純に内容を一つひとつ説明した辞書的なもの、本当に簡単な入門をサッとなぞるものなど、どれを用意すればいいのか迷うと思います。
プログラミング自体がはじめてだという場合には、最初の一冊は捨ててもいいような気持ちで、以下のようなものを選ぶのはいかがでしょうか。まずは通しで一冊やるだけでも、得るものは多いはずです。
- 「初心者」「入門」など、レベル感の記載があるもの
- ページ数が薄めのもの。まずは一冊やり切ることが大事
- 開いたときにカラフルなもの。書籍自体が「初心者向け」と差別化する場合も
▼良い点
- 一定のゴールに向かって内容がまとまっているはずなので、著者のゴールと一致すれば得るものは多い
- 自力で調べてたどり着くまでの苦労や時間を短縮できることが多い
▼悪い点
- 疑問を感じたとき、質問する場がないことが多い
- 刊行から時間が経つと情報が古くなり、更新されない
■人から教わる
学ぶ際に「ひとりでは不安」と多くの人が感じるようで、迷いがちな人には「人に指導をお願いする」ということがマッチする場合もあります。
▼良い点
- 自分に合う人に出会えれば、「自分にあった方法」で導いてくれる
- 相談できることにより、漠然とした不安や迷いが解消する場合がある
- 最新の手法や今後役に立つ考え方などを得られる場合がある
▼悪い点
- 良い人に出会うこと自体が大変
- 「自分に合う人」に出会えない場合は、価格に見合う価値を得られない場合がある
わかることが増えると、Webだけで困りごとを解消できる
書籍や人から教わることを入り口にした人であれば、次のレベルの書籍に進んだり、より専門的にトレーニングしてくれる人を探すのも良いでしょう。そして、わかることが増えてくると、Webだけで困りごとを解消できる内容も増えていきます。
本連載はこれからプログラミングを始められるような方向けの連載でした。その先にある、すでにコードをある程度書いている方に向けた連載もエンジニアスタイルに掲載しています。今回の私の文章が合うという方は、ぜひ将来読んでみてください。
https://www.r-staffing.co.jp/engineer/entry/20220826_1
付録
第1回でご紹介した3つの例に対応したコード、第2回の記事中に利用したコードは、以下のzipからご覧いただけます。今後の学習の参考にしていただけたら幸いです。
https://github.com/CircleAround/engineer_style_js_intro/archive/refs/heads/main.zip
JavaScript学びの入り口
契約社員、客員研究員、フリーランスなどさまざまな立場で開発現場を経験。フロントエンド、バックエンド開発、チームリードやOJTの育成担当まで幅広くこなしてきた。現在プログラミングトレーニング事業を行うサークルアラウンド株式会社を立ち上げ、経営や現場開発を行いながらOJT経験をもとに後進の育成に励み、個人や法人に向けたプログラミングのトレーニングを行っている。ノウハウのコンテンツ化にも取り組んでおり、著書に『ステップアップJavaScript』（翔泳社）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
