学習ロードマップ

JavaScript 深掘り(中級)

文法の「書ける」からクロージャ・プロトタイプ・非同期の挙動を説明できる水準まで、入門の復習と言語仕様、実務レシピを 5 冊で接続する。

確かな力が身につくJavaScript「超」入門第2版

改訂3版JavaScript本格入門

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

JavaScript逆引きレシピ第2版

SCROLL TO BEGIN

このロードマップが扱うもの

- チュートリアルは一通り終えたが、`this` / クロージャ / Promise の挙動を自分の言葉で説明できないエンジニア - フレームワーク越しに JavaScript を書いていて、素の言語仕様を押さえ直したいフロント / Node.js 実務者 - TypeScript や React に進む前に、土台となる ECMAScript の知識を固めたい中級者

このロードマップの全体像

対象読者

チュートリアルは一通り終えたが、this / クロージャ / Promise の挙動を自分の言葉で説明できないエンジニア
フレームワーク越しに JavaScript を書いていて、素の言語仕様を押さえ直したいフロント / Node.js 実務者
TypeScript や React に進む前に、土台となる ECMAScript の知識を固めたい中級者

5 冊で到達する状態

スコープ・クロージャ・プロトタイプチェーンを図に描きながら他人に説明できる
Promise / async-await / イベントループの関係を踏まえ、非同期処理の実行順を読める
ES2015 以降で増えた構文(分割代入・Spread・モジュール・class 等)を仕様背景とセットで理解している
実務で頻出する DOM 操作・Fetch・エラー処理のパターンを素の JS で書き切れる
型や FW を入れる前に「素の JavaScript でどこまで責務を閉じるか」を判断できる

進め方のヒント

1・2 冊目で入門知識の穴を洗い出し、3 冊目で「初級から中級の壁」になる概念(非同期・スコープ・イミュータブル)を重点的に潰す
4 冊目の仕様ベースの記述は通読ではなく、疑問が出たタイミングでインデックス的に開く使い方が効く
5 冊目の逆引きは手を動かす教材として、既存コードの書き直し課題に使うと定着する

01
ステップ 01 挫折経験ありでも戻れる入門の土台
02
ステップ 02 ES2022 対応の定番本格入門
03
ステップ 03 初級から中級への壁を越える一冊
04
ステップ 04 サイ本で仕様レベルまで掘り下げる
05
ステップ 05 実務の詰まりどころを逆引きで突破

第 1 章

挫折経験ありでも戻れる入門の土台

挫折経験ありでも戻れる入門の土台

変数・関数・オブジェクトの肌感を揃える起点。2 冊目以降の仕様寄りの議論を理解するための共通語彙をここで整える。
この章の 1 冊 確かな力が身につくJavaScript「超」入門第2版
狩野祐東 / SBクリエイティブ / 2019

HTML/CSS既習者がJavaScriptの基礎と実践サンプルで現場力を身につける
この本で身につくこと
- 変数・定数・条件分岐・ループ・関数といったJavaScript基本構文を手を動かしながら習得できる
- DOM操作によるHTML書き換えとイベント処理の基礎パターンを実装できる
- 配列・オブジェクトの操作と活用方法を理解できる
- ES2015以降の現代的な文法(letとconst・アロー関数等)を入門段階から取り入れた書き方ができる
想定読者: HTMLとCSSをひと通り触ったことがあり、JavaScriptに踏み出せていない初学者。挫折経験があり再チャレンジを検討している人、WebデザイナーやWebディレクターとしてフロントエンドコードを読み書きできるようになりたい人
本の詳細を見る →
ES2022 対応の定番本格入門

文法から prototype ベースのオブジェクト指向、モジュール、非同期までを日本語で通読できる背骨。ロードマップの中核教材として置く。
この章の 1 冊 改訂3版JavaScript本格入門
山田祥寛 / 技術評論社 / 2023

ECMAScript 2022 対応でJavaScriptの本質を基礎から現場水準まで体得する
この本で身につくこと
- プロトタイプチェーンとクラス構文を使ったオブジェクト指向設計の違いを説明できる
- ECMAScript 2022 の新構文（クラスフィールド、トップレベル await、論理代入演算子等）を実務コードに適用できる
- コールバック・Promise・async/await の制御フローを状況に応じて使い分けられる
- モジュールシステム（ES Modules）を活用した大規模プロジェクト向けコード分割ができる
想定読者: HTML/CSSの基礎知識を持ち、JavaScriptを体系的・本格的に学び直したい初〜中級のWebエンジニア
本の詳細を見る →
初級から中級への壁を越える一冊

「なんとなく動く JS」から脱却するための思考法を扱う。クロージャ・非同期・設計で詰まる読者を中級側へ押し出す役割を担う。
この章の 1 冊 ステップアップJavaScript フロントエンド開発の初級から中級へ進むために
サークルアラウンド株式会社/佐藤正志/小笠原寛 / 翔泳社 / 2022

JavaScriptの落とし穴を体系的に克服し、初級から中級の壁を越える
この本で身につくこと
- 非同期処理(async/await・Promise)の動作原理と、よくある悩み(競合・直列・並列)への対処法
- Fetch APIを使ったAJAX通信とCORSエラーの理解・対処
- thisが指す対象を文脈ごとに正確に判断できる
- スコープ・クロージャ・プリミティブ型とオブジェクト型の参照の違いを説明できる
想定読者: 入門書を一冊読み終え、より堅牢なコードを書きたいフロントエンドエンジニア志望者・現役初級エンジニア
本の詳細を見る →
サイ本で仕様レベルまで掘り下げる

ES6 以降の言語仕様を網羅する決定版。疑問点をインデックス的に引き、2・3 冊目で得た理解を仕様ベースで裏取りする位置づけ。
この章の 1 冊 JavaScript 第7版
David Flanagan/村上列 / オライリー・ジャパン / 2021

JavaScriptの言語仕様をES2015以降の最新版で体系的に習得する
この本で身につくこと
- ??演算子とSet/MapなどES2015以降の組み込みAPIを目的に応じて選択できる
- イテレータ・ジェネレータ・async/awaitを使った非同期フロー制御を実装できる
- プロトタイプチェーンとclassベースの継承モデルを理解しオブジェクト設計の判断軸を持てる
- DOM操作・イベント伝播（capturing/bubbling）・Viewport座標とDocument座標の違いを説明できる
想定読者: JavaScriptをなんとなく使ってきた中級者、またはTypeScriptで業務開発するが言語仕様の体系的理解を固めたいエンジニア
本の詳細を見る →
実務の詰まりどころを逆引きで突破

DOM / 非同期 / エラー処理などハマりやすい論点をレシピで確認する応用書。学んだ語彙を実務コードに接続する最終段として読む。
この章の 1 冊 JavaScript逆引きレシピ第2版
山田祥寛 / 翔泳社 / 2018

JavaScriptの頻出パターンを課題起点で引ける実践リファレンス
この本で身につくこと
- ECMAScript 2015以降の新記法(アロー関数・分割代入・Promise・クラス構文等)を実例付きで把握できる
- DOM操作・イベント処理・フォーム検証を生のJavaScriptで実装できる
- Fetch APIとXMLHttpRequestによる非同期通信の実装パターンを習得できる
- Node.js/Babel/webpack/ESLintといった開発ツールチェーンの基本的な使い方を一通り把握できる
想定読者: HTML/CSSの基礎はあり、JavaScriptを実務で書き始めたが標準APIやES2015以降の記法を体系的に押さえたい中級手前のWebプログラマー
本の詳細を見る →