「とりあえず動くJavaScript」から脱却したい人へ!
初級者から中級者へのステップアップ指南書
JavaScriptは「なんとなく」「勘で」書いても動いてしまうことがある一方で、 独特の癖があり奥が深いため、初心者から脱するのが難しい言語です。 本書は「入門者向けの本は一冊読み終わったけど、もっと良いコードを書きたい」 「バグの出にくいコードの書き方を知りたい」という開発者のために、 JavaScriptで特につまずきやすい部分を丁寧に解説します。
数ある書籍の中から本書を手に取っていただきありがとうございます。著者の2名は開発現場でコードを書く傍ら、プログラマのトレーニングを行ってスキルアップを促す仕事をしています。その中で獲得した学習のポイントを、まだ会ったことのないあなたにも届けるために書籍を執筆しました。
本書はいわゆる入門書ではありません。「『JavaScript脱初心者を目指す方』が次のステップへ進む助け」となるべく2022年現在身につけるべきスキルセットを選定したものです。 この「はじめに」と続く「本書の読み方」をご覧いただければ、あなたが本書を読むべきタイミングかわかると思います。是非ご一読ください。
JavaScriptは様々な環境において多くの外部ライブラリ等と共に活用されています。しかし本書では周辺の内容は最小限にとどめ 「JavaScriptの言語を身につけ、ブラウザの機能を駆使して自信を持って実装できるようになること」 を中心に据えています。移り変わりの激しいライブラリを追いかけるよりも、言語そのものの十分な理解を得ることが費用対効果の高い学びとなります。
さらにJavaScriptはとっつきやすい言語でありますが、深く踏み込んでいくと理解が難しい機能や概念があることに気づくでしょう。例えば
など、もしかしたら既に学習して苦しい思いをしている人がいるかもしれません。本書ではこのような「大事な機能であり、皆が一度は理解に苦しむトピック」の解説に多くの分量を割いています。可能であれば上述したトピックを拾い読みしていただき、手助けになりそうか是非確認していただきたいです。
また、実際の開発現場では過去のトレンドを引きずって開発していることが多いです。しかしながら、言語仕様の新しいバージョンであるES6（ECMAScript 6、ES2015とも呼びます）から多くの追加機能が加わり、長くJavaScriptを書いていた人も新しい書き方に追随することが求められています。それを受け、最新のコードと過去のコードを比較する内容を含めるなど、学習後に仕事の現場でコードを書くことを想定しています。仕事において役に立ちそうな考え方はMEMO欄でも補足しました。
言語習得の際には、アプリケーションを実際に作りながら学んでいくのが最も効果的です。本書では実際の使い方を把握できるよう、アプリを作りながら学びます。これは私たちがトレーニングで普段から行っている事を模倣しています。
本書が学習される皆さんと共に進む「伴走者」のような心強い一冊になれれば幸いです。
以下では本書と皆さんのミスマッチを防ぐ為の内容や、本書を読み進めるにあたって必要な心構えやルールについて記しています。
特に「世界地図と学習の対象範囲」では学習の全体像や、本書が提供する価値について理解が深まるような内容をお伝えしていますので、ぜひご一読ください。誰のどんな学習段階でもフィットする万能の書籍というものはありません。本書が今のあなたに必要な書籍であるかご確認いただければ幸いです。
「本書で”提供されないもの”やその背景について」では、本書が提供していない（が、読者の皆さんが期待しそうな）内容について背景を記述しました。紙面の都合上カットしてしまったものもあります。ご理解いただけますれば幸いです。
物事を学ぶのに「対象とするモノの全体像」を大まかに掴んでおくことは大事です。一口に「JavaScriptがわかる、書ける」と言った時にも様々な切り口があると思います。そこで、JavaScriptを学んでいく流れについての世界地図を表現してみました。
右に向かうほど高度もしくは特化した内容を扱うように描いています。イメージとしては左側にいた初学者の方が様々な内容を理解することで右へ進んで行き、学習していくようなものです。
「Webの基礎」や「HTML5」のような大項目と共に、「DOM」や「AJAX」などの構成要素は小さめの文字で示しています。内容に依存関係があるような大項目は矢印で繋ぎました。このように見ていくとJavaScriptの学習には大きく分けると以下のような3つの軸があることが見えてきます。
本書は図中に青い背景を入れた、基礎を抜けた直後の範囲をターゲットに、上記2で示した「JavaScript言語の軸」を中心に学んでゆきます。「ステップ」として段階を踏んでレベルアップしていく進め方をしますので、各ステップと項目の関わりや距離感を図中に入れているので参考にしてください。
本書を読み終えた後に以下のような質問にYESと答えられるようになることを目指していますので、この辺りについて不安のある方にはマッチするはずです。
世の中には多くのスタイルの書籍があると思いますが、本書は「全てを網羅的に同じ熱量で書いてある辞書的な書籍」ではありません。「よく使う機能や筆者が大切だと考える内容を、ポイントを絞って伝える書籍」であると思います。その為「細かい仕様について詳細に説明されていること」を求めている方は別の書籍を探される方がマッチするでしょう。この観点であればインターネット上にも網羅的な内容のものは存在しています。JavaScriptの言語についてならばMDNのような素晴らしいWebサイトに詳細がまとまっています。
私たちは「最新の正しく詳細な資料は常にインターネット上に存在する」と考えています。書籍はどんなに頑張っても古くなってしまうもので、この点においてインターネットに勝ることはできません。しかし、書籍を書くにあたって著者が込めた考え方や表現、学習のアプローチは普遍的な価値になるはずです。本書で重要なポイントや考え方を掴み、より詳細な内容を求める場合にはインターネット上の最新の文書や仕様を確認するような「学習と成長のサイクル」を獲得して欲しいと願っています。
昨今のJavaScriptに関するトピックですと、ReactやVue.jsのようなライブラリやフレームワークを利用することが多くなってきました。残念ながら本書ではこのような外部パッケージの利用方法については触れていません。それよりも、これらを活用しようとする場合に必要な「基礎体力」の部分にフォーカスしています。「フレームワークを利用するのは良いが、基礎体力が足らない為に思った動作にできず開発が進まない」というありがちな状態を打破するには、このようなアプローチが良いと考えています。
また、ライブラリは移り変わりも激しいので、まず基礎体力を充実させてから時代に合わせて便利な仕組みを利用すると、学習結果を多くのシーンで生かす事ができます。本書で学習したら是非それぞれの特化したライブラリを試してみてください。
同様に、Webpackが登場してはいますがトランスパイルのサポートの文脈で紹介しており、本来のバンドラとしての利用に踏み込んでいません。現場開発においてバンドラを利用することは多いですが、これを理解し使いこなすのはより上級な内容であると判断しました。
オブジェクト指向は現代のシステム開発において避けて通ることができないトピックであると思いますが、紙面の都合上クラスの紹介に留めています。大変奥深く興味深い分野でもありますので、是非他の情報をあたっていただき「より良いコード」を書いていけるような考え方を掴んでいただきたいです。
付録には以下のような内容を用意しています。ものによっては本編よりも濃い内容がありますので是非ご覧いただきたいです。特に「コードがうまく動かない時・デバッグについて」は本書を読了する強い助けになるはずですので、はやめに一読いただければ幸いです。
説明で利用しているコードのほとんどを https://github.com/CircleAround/step-up-javascript にて公開しています。
もしも最新のファイル群をzipでダウンロードされたい場合には https://github.com/CircleAround/step-up-javascript/archive/refs/heads/main.zip から行えますのでご活用ください。
また、学習における補足の情報の提供や内容のサポートを https://books.circlearound.co.jp にて行います。こちらもご覧いただけると進めやすくなるでしょう。合わせてご活用ください。
本文中のMEMOなどでも都度お伝えしますが、プログラミングを学ぶのに持っておくと良い心構えがあるのでここに列挙しておきます。
これから一段ずつステップアップしていき、より高みにたどり着く訓練をしていきます。最初は簡単な確認やおさらいから始め、徐々に難しくなっていくので成長しながらついてきてください。
よく理解している内容ばかりのステップは飛ばしても大丈夫ですが、もしも躓いてしまう事があれば前のステップを確認したり、付録に散りばめた道具や考え方を参考にして突破を試みてください。大きなステップアップも小さな学習や行動の結果に起こるものだと思います。焦らず少しずつ理解していきましょう。
本書の訓練を終えた後、皆さんの理解が高まり本書自体がいらなくなっている事が私たちの願いでもあります。完走まで一緒にがんばりましょう！
