はじめに
JavaScriptを書けると思っている人は多いけど、本当に理解している人はどれくらいいるだろう、という話。
GitHub で184,000スター以上を獲得している「You Don't Know JS」は、JavaScriptの「なんとなく動いてる」を「完全に理解した」に変えてくれる書籍シリーズです。著者はKyle Simpson氏で、11年以上かけて執筆された渾身の作品。
正直なところ、最初は「また無料で読める技術書か」くらいに思っていたんですよ。でも読み始めたら、自分がいかにJavaScriptを表面的にしか理解していなかったか痛感させられました。30代になって思うのは、基礎を疎かにしたツケは必ず後で回ってくるということ。このシリーズはその基礎を徹底的に固めてくれます。
You Don't Know JSとは
「You Don't Know JS Yet」(通称YDKJS)は、JavaScriptの言語メカニズムを深掘りする書籍シリーズです。現在は第2版が展開されていて、すべてGitHub上で無料公開されています。
特徴的なのは、フレームワークやライブラリの使い方ではなく、JavaScript言語そのものの仕組みを解説していること。スコープ、クロージャ、プロトタイプ、非同期処理など、「なんとなく使えているけど説明できない」部分を徹底的に掘り下げてくれます。
Frontend Mastersがスポンサーとなっていて、Leanpubやamazonで電子書籍版も販売されています。ライセンスはCreative Commons Attribution-NonCommercial-NoDerivs 4.0です。
シリーズ構成
第2版の推奨される読む順序は以下の通りです。
1. Get Started(入門編)
JavaScriptとは何かから始まり、言語の全体像を掴むための入門書。これを読まずに次に進むのはもったいない。
2. Scope & Closures(スコープとクロージャ)
個人的には、これが一番衝撃を受けた巻。スコープチェーン、レキシカルスコープ、クロージャの仕組みが腹落ちします。
3. Objects & Classes(オブジェクトとクラス)
プロトタイプベースの継承、classキーワードの裏側、オブジェクト指向の本質を解説。現在ドラフト版として公開中。
4. Types & Grammar(型と文法)
JavaScriptの型システム、暗黙の型変換、文法の細かい部分を解説。粗ドラフト版として公開中。
特徴・メリット
1. 完全無料でアクセス可能
GitHub上で全文が公開されていて、いつでも無料で読めます。コスパ的に、これ以上のJavaScript学習リソースはなかなかない。
2. 「なぜ」を徹底的に解説
多くの入門書が「こう書けば動く」で終わるところ、YDKJSは「なぜそう動くのか」を解説してくれます。これ、意外と重要で、理由がわかると応用が効くようになるんですよね。
3. 実務で役立つ深い知識
面接で「クロージャを説明してください」と聞かれて困った経験、ありませんか。このシリーズを読めば、自信を持って答えられるようになります。
4. 段階的に深まる構成
Get Startedから始めて、徐々に深い内容に進む構成になっているので、挫折しにくい。時短で効率よく学べます。
5. 長年のメンテナンス
11年間にわたって更新され続けていて、184人以上のコントリビューターが参加しています。1,910以上のコミットがあり、品質が担保されています。
読み始め方
オンラインで読む
GitHubリポジトリにアクセスすれば、すぐに読み始められます。
https://github.com/getify/You-Dont-Know-JS
第2版は 2nd-ed ブランチにあり、各書籍がディレクトリとして整理されています。
電子書籍を購入する
より読みやすい形式で欲しい場合は、LeanpubやAmazonで購入できます。著者を支援したい場合もこちらがおすすめ。
効果的な読み方
個人的には以下の順番をおすすめします。
- まず「Get Started」を通読して全体像を把握
- 「Scope & Closures」で基礎を固める
- 実際にコードを書きながら「Objects & Classes」へ
- 余裕があれば「Types & Grammar」で細かい部分を補完
具体的な学びのサンプル
実際にどんな内容が学べるのか、スコープとクロージャを例に見てみましょう。
スコープの理解
var teacher = "Kyle";
function otherClass() {
var teacher = "Suzy";
console.log("Welcome!");
}
function ask() {
var question = "Why?";
console.log(question);
}
otherClass(); // Welcome!
ask(); // Why?
このコードで、なぜotherClass内のteacherがグローバルのteacherを上書きしないのか。YDKJSを読めば、レキシカルスコープの仕組みから完全に理解できます。
クロージャの本質
function makeCounter() {
var count = 0;
return function increment() {
count = count + 1;
return count;
};
}
var counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
クロージャは「関数が自身のレキシカルスコープの外で実行されるとき、そのスコープへの参照を保持し続ける」という現象。この説明がスッと入ってくるようになります。
thisの理解
function ask(question) {
console.log(this.teacher, question);
}
var workshop1 = {
teacher: "Kyle",
ask: ask
};
var workshop2 = {
teacher: "Suzy",
ask: ask
};
workshop1.ask("How do I learn JS?");
// Kyle How do I learn JS?
workshop2.ask("What is closure?");
// Suzy What is closure?
thisが何を指すかは、関数が定義された場所ではなく、呼び出された方法で決まる。この理解があるかないかで、デバッグ効率が全然違います。
実践的なユースケース
JavaScript面接対策として
フロントエンドエンジニアの面接では、フレームワークの知識より言語の基礎知識を問われることが多い。YDKJSはその対策として一択ですね。
既存コードの理解に
レガシーコードを読むとき、「なぜこう書かれているのか」が理解できるようになります。プロトタイプチェーンや暗黙の型変換を理解していれば、古いコードも怖くない。
フレームワーク理解の土台として
React、Vue、Angularなど、どのフレームワークを使うにしても、JavaScript自体の理解が浅いと壁にぶつかります。YDKJSでその土台を固めておくと、フレームワークの学習効率も上がります。
コードレビューの質向上
「動くからいいでしょ」ではなく、「なぜこの書き方がベターなのか」を説明できるようになります。チーム内でのコードレビューの質がQOL上がります。
こんな人におすすめ
- JavaScriptを「なんとなく」使っている人
- フレームワークは使えるけど、言語自体の理解に不安がある人
- 面接でJavaScriptの深い質問をされて困った経験がある人
- 他人のコードを読んで「何やってるかわからない」と思うことがある人
- 基礎からしっかり学び直したい人
逆に、全くのプログラミング初心者には少しハードルが高いかもしれません。基本的な文法は理解している前提で書かれています。
まとめ
You Don't Know JSは、JavaScriptを「使える」から「理解している」にレベルアップさせてくれる稀有な書籍シリーズです。
GitHub Stars 184,000以上という数字が、その価値を物語っています。無料で読めるのにこのクオリティ、正直なところ有料の技術書と比べても遜色ない。むしろ上かもしれない。
30代になって技術書を読む時間も限られてくる中、本当に価値のある学習リソースを選びたい。YDKJSはその選択肢として、間違いなくトップクラスです。
スコープ、クロージャ、this、プロトタイプ。これらを「なんとなく」から「完全に理解」に変えたい人は、ぜひ読んでみてください。きっと、自分のJavaScript理解がいかに表面的だったか気づかされるはずです。