依存関係

1. 01独習JavaScript 新版→ステップアップJavaScript推奨前提 / JS入門から発展学習へ

   理由: 「独習JavaScript」で言語の基礎文法を一通り押さえたら、実務でつまずきやすい一歩進んだ書き方へ進む。ステップアップJavaScript は非同期処理やモジュールといった現場必須のテーマを橋渡しし、入門書では触れにくい実践の段差を埋める。

   出典

   • JavaScript Guide - MDN Web Docs
2. 02独習JavaScript 新版→これからのJavaScriptの教科書推奨前提 / JS基礎から実践的な記法へ

   理由: 言語の基礎を学んだら、モダンな JavaScript の書き方と開発の流れを体系的に学び直す。「これからのJavaScriptの教科書」は ES の新しい記法やツールチェーンを前提に、現代的な書き方の標準を身につけさせる。

   出典

   • JavaScript Guide - MDN Web Docs
3. 03独習JavaScript 新版→CSSとJavaScriptで作る動くUIアイデアレシピ推奨前提 / JS基礎からUI実装へ

   理由: 言語の基礎が身についたら、その知識を「目に見える UI」を動かす実装へ結びつける。本書は CSS と JavaScript を組み合わせた動きのある UI のレシピ集で、学んだ文法が画面上の表現に変わる手応えを与える。

   出典

   • CSSとJavaScriptで作る動くUIアイデアレシピ - インプレス
4. 04独習JavaScript 新版→プログラミングTypeScript推奨前提 / JSからTypeScriptへ

   理由: JavaScript で動くものを書けるようになると、規模が増えたときの型のなさによる不安が見えてくる。プログラミングTypeScript は JavaScript の上に静的型を載せる発想を基礎から解説し、安全に拡張できるコードへの入口を与える。

   出典

   • TypeScript: JavaScript With Syntax For Types - typescriptlang.org
5. 05ステップアップJavaScript→JavaScript 第7版推奨前提 / JS中級から上級リファレンスへ

   理由: 実践的な書き方を一段身につけたら、言語仕様そのものを深く参照できる定本へ進む。「JavaScript 第7版」は言語の隅々を網羅するリファレンスで、断片的な知識を体系的な理解へと束ね直す土台になる。

   出典

   • JavaScript Guide - MDN Web Docs
6. 06ステップアップJavaScript→Webフロントエンド ハイパフォーマンス チューニング参考 / JS深層からパフォーマンスへ

   理由: JavaScript の挙動を一段深く理解したら、その知識を「速さ」という観点で活かす段階へ進む。Webフロントエンド ハイパフォーマンス チューニングはレンダリング・リソース読み込み・計測の勘所を与え、体感速度を左右する実装判断を可能にする。

   出典

   • Web Vitals - web.dev
7. 07CSSとJavaScriptで作る動くUIアイデアレシピ→Tailwind CSS実践入門推奨前提 / UI基礎からCSSアーキテクチャへ

   理由: 個別の UI 表現を作れるようになったら、スタイルを「設計」としてスケールさせる方法へ進む。Tailwind CSS実践入門はユーティリティファーストの考え方で、命名や詳細度の悩みを避けながら一貫した UI を保守する手法を与える。

   出典

   • Styling with utility classes - Tailwind CSS
8. 08JavaScript 第7版→Webフロントエンド ハイパフォーマンス チューニング推奨前提 / JS深層からブラウザ最適化へ

   理由: 言語仕様を深く参照できるようになったら、ブラウザという実行環境の特性を踏まえた最適化へ進む。本書はクリティカルレンダリングパスやメモリ・計測の観点を与え、言語の知識をブラウザ上の体感性能へ結びつける。

   出典

   • Web Vitals - web.dev
9. 09プログラミングTypeScript→Effective TypeScript 第2版推奨前提 / TS入門から上級型設計へ

   理由: TypeScript の型システムの基礎を理解したら、それを「効果的に使う」勘所を体系的に学ぶ。Effective TypeScript は 83 の具体的な項目で、型推論を活かす書き方や any の御し方など、実務で型を武器にするための判断基準を与える。

   出典

   • TypeScript: JavaScript With Syntax For Types - typescriptlang.org
10. 10プログラミングTypeScript→Vue 3 フロントエンド開発の教科書参考 / TS基礎からVue.jsフレームワークへ

    理由: TypeScript の基礎を身につけたら、もう一つの主要フレームワークである Vue.js を選択肢として学ぶ。「Vue 3 フロントエンド開発の教科書」は Composition API や型サポートを前提に、React とは異なるリアクティブな UI 構築の発想を与える。

    出典

    • Vue.js - The Progressive JavaScript Framework - vuejs.org
11. 11プログラミングTypeScript→Reactハンズオンラーニング 第2版参考 / TS基礎からReactフレームワークへ

    理由: TypeScript の基礎を押さえたら、それを土台にモダンフロントエンドの代表格 React へ進む。Reactハンズオンラーニングはコンポーネント・フック・状態管理を手を動かして学ばせ、型付き JavaScript の知識を実際の UI フレームワークへ接続する。

    出典

    • Quick Start - React (react.dev)
12. 12Vue 3 フロントエンド開発の教科書→後悔しないためのVueコンポーネント設計推奨前提 / Vue基礎からコンポーネント設計へ

    理由: Vue の基本的な書き方を覚えたら、再利用と保守を見据えたコンポーネントの「設計」へ踏み込む。「後悔しないためのVueコンポーネント設計」は責務分割・props 設計・状態の持ち方といった、規模が増えても破綻しない構造の指針を与える。

    出典

    • 後悔しないためのVueコンポーネント設計 - インプレス NextPublishing
    • Component Registration - vuejs.org
13. 13後悔しないためのVueコンポーネント設計→マイクロフロントエンド推奨前提 / コンポーネント設計からマイクロFEへ

    理由: 単一アプリ内のコンポーネント設計を極めると、今度は複数チーム・複数アプリにまたがる「フロントエンドの分割」という課題が見えてくる。マイクロフロントエンドは独立してデプロイできる UI の合成方式を与え、組織のスケールに耐える構造を示す。

    出典

    • Micro Frontends - martinfowler.com
14. 14Reactハンズオンラーニング 第2版→Webアプリケーションアクセシビリティ推奨前提 / React実装からアクセシビリティへ

    理由: React で UI を作れるようになったら、その UI が「すべての人に使えるか」という品質へ責任を広げる。Webアプリケーションアクセシビリティは WAI-ARIA やキーボード操作・スクリーンリーダー対応を体系立て、作れる UI を使える UI へ引き上げる。

    出典

    • WCAG 2 Overview - W3C WAI
15. 15Webフロントエンド ハイパフォーマンス チューニング→Webアプリケーションアクセシビリティ参考 / パフォーマンスからアクセシビリティへ

    理由: 速さという「測れる品質」を追求したら、もう一つの不可欠な品質――誰もが使えること――へ視野を移す。アクセシビリティはパフォーマンスと同じく後付けが難しい横断的関心事であり、早い段階で設計に織り込む発想を与える。

    出典

    • WCAG 2 Overview - W3C WAI
16. 16Effective TypeScript 第2版→A Philosophy of Software Design, 2nd Edition参考 / 型設計から複雑性管理の設計哲学へ

    理由: 型を使って堅牢なコードを書けるようになると、より根源的な問い――複雑さそのものをどう抑えるか――に向き合いたくなる。A Philosophy of Software Design は深いモジュール・情報隠蔽といった原則で、型の前提にある「設計の良し悪し」を言語化する。

    出典

    • A Philosophy of Software Design - John Ousterhout
17. 17マイクロフロントエンド→A Philosophy of Software Design, 2nd Edition参考 / 分散FEから普遍的な設計哲学へ

    理由: フロントエンドを分割・合成する設計を経験すると、その判断の根っこにある「複雑さとどう向き合うか」という普遍的な問いに行き着く。A Philosophy of Software Design はモジュールの深さや認知負荷の観点から、分割の良し悪しを見極める言葉を与える。

    出典

    • A Philosophy of Software Design - John Ousterhout
18. 18Reactハンズオンラーニング 第2版→フロントエンド開発のためのテスト入門推奨前提 / React実装からFEテストへ

    理由: React でコンポーネントを書けるようになったら、その振る舞いを保証するテストの書き方を学ぶ。「フロントエンド開発のためのテスト入門」は単体からインテグレーション、E2E までフロント特有のテスト戦略を与え、壊れにくい UI 開発の土台を作る。

    出典

    • Testing Library - Introduction
19. 19後悔しないためのVueコンポーネント設計→フロントエンド開発のためのテスト入門参考 / コンポーネント設計からテストへ

    理由: 保守しやすいコンポーネント設計ができるようになったら、その設計が「テストしやすさ」と表裏一体であることを確かめる。「フロントエンド開発のためのテスト入門」は何をどの粒度でテストするかを示し、設計とテストを往復して品質を固める視点を与える。

    出典

    • Testing Library - Introduction
20. 20フロントエンド開発のためのテスト入門→Testing JavaScript Applications推奨前提 / FEテスト入門からJSテスト戦略深掘りへ

    理由: フロントエンドのテストの基本を押さえたら、JavaScript アプリ全体のテスト戦略へ掘り下げる。Testing JavaScript Applications はモック・非同期・統合テストの実践を体系立て、入門で得た技法を「戦略」として運用する力を与える。

    出典

    • The Practical Test Pyramid - martinfowler.com
21. 21Tailwind CSS実践入門→Webアプリケーションアクセシビリティ参考 / スタイル設計からアクセシビリティへ

    理由: 見た目を自在に設計できるようになると、色のコントラストやフォーカス表示といった「見え方の質」がアクセシビリティに直結することに気づく。Webアプリケーションアクセシビリティは視覚・操作の両面から、スタイル選択が利用者を選別しないための基準を与える。

    出典

    • WCAG 2 Overview - W3C WAI
22. 22Effective TypeScript 第2版→Reactハンズオンラーニング 第2版推奨前提 / 上級型設計からReact実装へ

    理由: 型設計を武器にできるようになったら、その型を最も活かせる実戦の場としてコンポーネント指向の UI 開発へ進む。Reactハンズオンラーニングは props や state を型で守りながら宣言的に UI を組む経験を与え、型の恩恵を画面づくりで体感させる。

    出典

    • Quick Start - React (react.dev)
23. 23独習JavaScript 新版→リーダブルコード推奨前提 / JS 入門から可読性原則へ

    理由: 言語の文法を覚えた直後こそ、「動くコード」から「読めるコード」へ意識を向ける好機だ。リーダブルコードは命名・コメント・制御フローの具体的な改善技法を与え、独学で身につきにくい可読性の感覚を早い段階で育てる。

    出典

    • リーダブルコード - オライリー・ジャパン
24. 24リーダブルコード→プログラミングTypeScript参考 / 可読性入門から型安全な実装へ

    理由: 読みやすいコードの原則を身につけたら、その可読性を型という仕組みで支える段階へ進む。プログラミングTypeScript は型注釈が「コードで表現するドキュメント」として働くことを示し、命名と型の両輪で意図の伝わるコードを書かせる。

    出典

    • TypeScript: JavaScript With Syntax For Types - typescriptlang.org
25. 25JavaScript 第7版→Webを支える技術参考 / JS リファレンスから Web 技術原典へ

    理由: 言語そのものを深く知ったら、その言語が動く土台＝Web のプロトコルとアーキテクチャへ視野を広げる。「Webを支える技術」は HTTP・URI・REST を体系立て、JavaScript の知識を「Web がどう成り立っているか」の理解で支える。

    出典

    • Overview of HTTP - MDN Web Docs
26. 26Webを支える技術→Webフロントエンド ハイパフォーマンス チューニング参考 / Web 技術原典からフロントエンド最適化へ

    理由: Web の基盤技術を理解したら、その理解を速度改善という実利に変える。HTTP のキャッシュやリソース読み込みの仕組みを知っていれば、Webフロントエンド ハイパフォーマンス チューニングが説く最適化の「なぜ効くか」が腑に落ちる。

    出典

    • Web Vitals - web.dev
27. 27これからのJavaScriptの教科書→ステップアップJavaScript推奨前提 / モダン JS 入門から発展学習へ

    理由: モダン JavaScript の標準的な書き方を学んだら、より実務寄りの応用テーマへ歩を進める。ステップアップJavaScript は非同期・モジュール・設計といった「次に必要になること」を扱い、教科書的知識を現場の力に変える。

    出典

    • ステップアップJavaScript - 翔泳社
28. 28Testing JavaScript Applications→フルスタックテスティング参考 / JS テスト戦略からフルスタック品質戦略へ

    理由: JavaScript のテスト戦略を確立したら、フロントエンドに閉じず CI/CD まで含めた品質の全体最適へ視野を広げる。フルスタックテスティングは契約・性能・セキュリティ・E2E を横断する品質戦略を与え、テストを開発文化として位置づける。

    出典

    • The Practical Test Pyramid - martinfowler.com
29. 29Tailwind CSS実践入門→Webフロントエンド ハイパフォーマンス チューニング参考 / スタイル設計からフロントエンド最適化へ

    理由: スタイルの設計を整えたら、その CSS や描画がページ速度に与える影響まで視野に入れる。Webフロントエンド ハイパフォーマンス チューニングは未使用 CSS の削減やレイアウト計算のコストといった、見た目と速さの両立に必要な視点を与える。

    出典

    • Web Vitals - web.dev
30. 30マイクロフロントエンド→マイクロサービスアーキテクチャ参考 / FE分散からBE分散の対応概念へ

    理由: フロントエンドを独立した部品へ分割する発想を掴むと、それがバックエンドのマイクロサービスと同じ根を持つことに気づく。マイクロサービスアーキテクチャは境界・自律デプロイ・組織との対応というサーバー側の体系を与え、分散の原理を両面から理解させる。

    出典

    • A pattern language for microservices - microservices.io
31. 31プログラミングTypeScript→プロを目指す人のためのTypeScript入門推奨前提 / 英語入門書から日本語実践書へ

    理由: Boris Cherny の入門で TypeScript の全体像を掴んだら、日本語で書かれた実践入門でさらに地に足のついた理解を固める。「プロを目指す人のためのTypeScript入門」は文法から型の実践までを丁寧に積み上げ、英語書で飛ばしがちな前提を埋める。

    出典

    • プロを目指す人のためのTypeScript入門 - 技術評論社
32. 32プロを目指す人のためのTypeScript入門→Effective TypeScript 第2版推奨前提 / 実践入門から83項目の上級型設計へ

    理由: 実践入門で型を使った開発に慣れたら、より洗練された型設計のベストプラクティスへ進む。Effective TypeScript は項目ごとに「なぜそう書くべきか」を示し、動く型から「読み手と未来の自分を助ける型」へと設計を引き上げる。

    出典

    • TypeScript: JavaScript With Syntax For Types - typescriptlang.org
33. 33Reactハンズオンラーニング 第2版→Fluent React推奨前提 / React基礎から内部動作・Fiberへ

    理由: React で UI を組めるようになったら、その裏側で何が起きているかを理解して使いこなしの精度を上げる。Fluent React は再レンダリングの仕組みや Fiber アーキテクチャに踏み込み、「なぜ速い/遅いのか」を説明できる深さへ引き上げる。

    出典

    • Quick Start - React (react.dev)
34. 34Fluent React→Webフロントエンド ハイパフォーマンス チューニング参考 / React内部理解からブラウザ最適化へ

    理由: React の内部動作を理解すると、再レンダリングや差分計算がどこでコストになるかが見える。Webフロントエンド ハイパフォーマンス チューニングはブラウザ全体の計測と最適化を与え、フレームワーク内部の知識を実測ベースの改善へ橋渡しする。

    出典

    • Web Vitals - web.dev
35. 35Reactハンズオンラーニング 第2版→実践Next.js推奨前提 / React習得からNext.js実践へ

    理由: React 単体での開発に慣れたら、ルーティング・データ取得・レンダリング戦略を統合したフレームワーク Next.js へ進む。実践Next.js は App Router やサーバーコンポーネントを前提に、実プロダクトを組み立てる現実的な設計を与える。

    出典

    • Next.js Docs - nextjs.org
36. 36Effective TypeScript 第2版→実践Next.js参考 / 型設計からNext.js実装へ

    理由: 型設計の引き出しが増えたら、その型を全レイヤーで活かせる Next.js のフルスタック開発へ応用する。実践Next.js はサーバー/クライアント境界やデータ取得を型で貫く実装を示し、型安全をアプリ全体へ広げる。

    出典

    • Next.js Docs - nextjs.org
37. 37実践Next.js→Webを支える技術参考 / Next.js実装からWeb基礎技術理解へ

    理由: Next.js でアプリを動かせるようになったら、フレームワークが隠している HTTP・キャッシュ・URI といった Web の基礎技術へ降りて理解を補強する。「Webを支える技術」はその土台を体系立て、フレームワークの挙動を原理から説明できるようにする。

    出典

    • Overview of HTTP - MDN Web Docs
38. 38単体テストの考え方/使い方→フロントエンド開発のためのテスト入門推奨前提 / 単体テスト原則からFEテストへ

    理由: テスト設計の原則はフロントエンドにも通じる。テストピラミッドを土台に、UI は少数の E2E で要を押さえ、ロジックは単体で厚く守る——層を跨いでも判断基準は同じ。

    出典

    • The Practical Test Pyramid - martinfowler.com