Domain
Frontend Development
A systematic learning path for frontend development — from JavaScript/TypeScript to React/Vue, performance optimization, and accessibility, covering component design and architecture.
The Terrain of This Field
The terrain of frontend development can be read as a continent you climb from the "trailhead of language" at the foot, across the watershed of frameworks, to the plateau of quality. The starting point is the footing of JavaScript, where every route converges. From code that runs to code that reads, and on to code guarded by types (TypeScript), you gain your altitude one step at a time while assembling the gear to "extend safely."
Higher on the ridge the path divides toward two main summits: the range of React and the range of Vue. Armed with types you climb a summit, pass through component design, and converge on the universal peak of "how to confront complexity." A framework is not the destination but a route up to the heights of design.
Surrounding the summits is the "plateau of quality" — the cross-cutting tableland you traverse last no matter which peak you came from, spreading across styling, performance, accessibility, and testing. Performance and accessibility are the junctions where multiple routes cross, lifting a "UI you can build" into a "UI that is fast, usable by everyone, and hard to break."
Follow the arrows to read in order / solid = required, dashed = recommended
Share this map
Grouping
Difficulty
Difficulty
Dependencies
Computing layout...
Books in this domain
22 books
CSSとJavaScriptで作る動くUIアイデアレシピ
Mana
独習JavaScript 新版
CodeMafia 外村将大
Reactハンズオンラーニング 第2版
Webアプリケーション開発のベストプラクティス
Alex Banks, Eve Porcello
プログラミングTypeScript
スケールするJavaScriptアプリケーション開発
Boris Cherny
リーダブルコード
より良いコードを書くためのシンプルで実践的なテクニック
Dustin Boswell, Trevor Foucher
Vue 3 フロントエンド開発の教科書
WINGSプロジェクト 齊藤新三
Webフロントエンド ハイパフォーマンス チューニング
久保田光則
フロントエンド開発のためのテスト入門
今からでも知っておきたい自動テスト戦略の必須知識
吉井健文
これからのJavaScriptの教科書
狩野祐東
実践Next.js
App Router で進化するWebアプリ開発
吉井健文
プロを目指す人のためのTypeScript入門
安全なコードの書き方から高度な型の使い方まで
鈴木僚太
ステップアップJavaScript
フロントエンド開発の初級から中級へ進むために
サークルアラウンド株式会社, 佐藤正志, 小笠原寛
Tailwind CSS実践入門
工藤智祥
Testing JavaScript Applications
Lucas da Costa
後悔しないためのVueコンポーネント設計
中島直博
Webアプリケーションアクセシビリティ
今日から始める現場からの改善
伊原力也, 小林大輔, 桝田草一, 山本伶
Webを支える技術
HTTP、URI、HTML、そしてREST
山本陽平
Effective TypeScript 第2版
型システムの力を最大限に引き出す83項目
Dan Vanderkam
Fluent React
Build Fast, Performant, and Intuitive Web Applications
Tejas Kumar
JavaScript 第7版
JavaScript: The Definitive Guide
David Flanagan
マイクロフロントエンド
マイクロサービスアーキテクチャの概念をフロントエンドに拡張する
Luca Mezzalira
A Philosophy of Software Design, 2nd Edition
John Ousterhout
Dependencies
Reason: After covering the basic syntax of the language with 'Dokushu JavaScript,' you advance to the more practical techniques where beginners often stumble. Step-up JavaScript bridges essential real-world topics like asynchronous processing and modules, filling the gap that introductory books rarely cover.
Reason: Once you've learned the language basics, you systematically relearn modern JavaScript style and development workflow. 'The JavaScript Textbook for the Future' builds in the new ES syntax and toolchains, instilling the standards of contemporary coding.
Reason: Once you have the language fundamentals, you connect that knowledge to implementing 'visible UI' that moves. This book is a recipe collection of animated UIs combining CSS and JavaScript, giving you the tangible sense of turning learned syntax into on-screen expression.
Reason: Once you can write working JavaScript, the anxiety of untyped code at scale comes into view. Programming TypeScript explains from the ground up the idea of layering static types onto JavaScript, providing the entry point to code you can extend safely.
Reason: Having picked up practical techniques, you advance to the definitive reference for deep consultation of the language itself. 'JavaScript: The Definitive Guide, 7th Edition' is a comprehensive reference covering every corner of the language, serving as the foundation that ties fragmentary knowledge into systematic understanding.
Reason: Once you understand JavaScript's behavior a level deeper, you advance to applying that knowledge through the lens of 'speed.' This frontend performance-tuning book covers rendering, resource loading, and measurement, enabling the implementation decisions that govern perceived speed.
Sources
Reason: Once you can build individual UI expressions, you advance to scaling styles as 'architecture.' The Japanese book Tailwind CSS実践入門 teaches a utility-first approach that maintains consistent UI while sidestepping the headaches of naming and specificity.
Reason: Once you can deeply consult the language spec, you advance to optimization grounded in the characteristics of the browser as a runtime. This book covers the critical rendering path, memory, and measurement, connecting language knowledge to perceived performance in the browser.
Sources
Reason: Once you understand the basics of TypeScript's type system, you systematically learn the knack of using it 'effectively.' Effective TypeScript provides judgment criteria—eighty-three concrete items on leveraging type inference and taming any—for making types a weapon in practice.
Reason: With TypeScript fundamentals acquired, you learn Vue.js, another major framework, as an option. 'The Vue 3 Frontend Development Textbook' assumes the Composition API and type support, offering a reactive approach to building UI that differs from React.
Reason: With TypeScript fundamentals in place, you build on them to advance to React, the flagship of modern frontend. Learning React teaches components, hooks, and state management hands-on, connecting your typed-JavaScript knowledge to a real UI framework.
Reason: Once you've learned the basics of writing Vue, you step into the 'design' of components with reuse and maintenance in mind. This dedicated Japanese book on Vue component design offers guidance on responsibility separation, props design, and where to hold state—structure that doesn't break down as scale grows.
Reason: Master component design within a single app, and the challenge of 'splitting the frontend' across multiple teams and apps comes into view. Micro Frontends offers ways to compose independently deployable UIs, presenting a structure that scales with the organization.
Reason: Once you can build UI with React, you extend your responsibility to the quality of whether that UI is 'usable by everyone.' This web accessibility book systematizes WAI-ARIA, keyboard operation, and screen-reader support, elevating UI you can build into UI everyone can use.
Sources
Reason: Having pursued speed—a 'measurable quality'—you shift your view to another indispensable quality: usability for everyone. Like performance, accessibility is a cross-cutting concern hard to bolt on later, and this book instills the mindset of weaving it into design early.
Sources
Reason: Once you can write robust code with types, you want to face a more fundamental question—how to curb complexity itself. A Philosophy of Software Design articulates the 'good versus bad' of design that underlies typing, through principles like deep modules and information hiding.
Reason: Having experienced designing how to split and compose frontends, you arrive at the universal question beneath those decisions—how to deal with complexity. A Philosophy of Software Design gives you the language to judge good versus bad decomposition through module depth and cognitive load.
Reason: Once you can write components in React, you learn how to write tests that guarantee their behavior. 'Introduction to Testing for Frontend Development' covers frontend-specific testing strategy from unit to integration to E2E, building a foundation for UI development that doesn't break.
Reason: Once you can design maintainable components, you confirm that the design is two sides of the same coin as 'testability.' 'Introduction to Testing for Frontend Development' shows what to test and at what granularity, instilling a view that solidifies quality by moving back and forth between design and tests.
Reason: Once you've grasped the basics of frontend testing, you dig deeper into the testing strategy for JavaScript apps as a whole. Testing JavaScript Applications systematizes the practice of mocking, async, and integration testing, giving you the ability to operate the techniques learned in the introduction as a 'strategy.'
Reason: Once you can freely design appearance, you realize that 'visual quality' like color contrast and focus indication ties directly to accessibility. This web accessibility book provides criteria—visual and interactive—so that styling choices don't exclude users.
Sources
Reason: Once type design is a weapon you can wield, you advance to component-oriented UI development—the proving ground where those types shine most. Learning React gives you the experience of building UI declaratively while guarding props and state with types, letting you feel the benefit of types in making screens.
Reason: Right after learning the syntax is the prime moment to shift your focus from 'working code' to 'readable code.' The Art of Readable Code offers concrete techniques for naming, comments, and control flow, cultivating early the sense of readability that is hard to acquire on your own.
Sources
Reason: Once you've internalized the principles of readable code, you advance to supporting that readability with the mechanism of types. Programming TypeScript shows how type annotations act as 'documentation expressed in code,' letting you write intent-revealing code on the twin wheels of naming and types.
Reason: Having come to know the language itself deeply, you broaden your view to the foundation it runs on—the Web's protocols and architecture. The Japanese classic 'Webを支える技術' (on the technologies underpinning the web) systematizes HTTP, URIs, and REST, supporting your JavaScript knowledge with an understanding of how the Web is built.
Reason: Once you understand the Web's foundational technologies, you turn that understanding into the practical benefit of speed improvement. Knowing how HTTP caching and resource loading work makes the 'why it works' of the optimizations in this frontend performance-tuning book click.
Sources
Reason: After learning the standard style of modern JavaScript, you step toward more practice-oriented applied topics. Step-up JavaScript covers 'what you need next'—asynchrony, modules, design—turning textbook knowledge into on-the-job capability.
Sources
Reason: Once you've established a JavaScript testing strategy, you broaden your view beyond the frontend to whole-system quality optimization including CI/CD. Full Stack Testing provides a quality strategy spanning contract, performance, security, and E2E, positioning testing as part of development culture.
Reason: Once your styling architecture is in order, you broaden your view to how that CSS and rendering affect page speed. This frontend performance-tuning book covers unused-CSS reduction and the cost of layout calculation—the perspective needed to balance appearance and speed.
Sources
Reason: Grasp the idea of splitting the frontend into independent parts, and you notice it shares the same roots as backend microservices. Building Microservices provides the server-side framework of boundaries, autonomous deployment, and alignment with organization, letting you understand the principles of decomposition from both sides.
Reason: After grasping the overall picture of TypeScript with Boris Cherny's introduction, you solidify a more grounded understanding with a practical Japanese-language primer. 'TypeScript Introduction for Aspiring Professionals' builds carefully from syntax to practical typing, filling in the assumptions an English-language book tends to skip.
Reason: Once the practical primer has made you comfortable developing with types, you move on to more refined type-design best practices. Effective TypeScript shows, item by item, 'why you should write it this way,' elevating your design from types that merely work to types that help readers and your future self.
Reason: Once you can build UI with React, you raise your mastery by understanding what happens under the hood. Fluent React delves into the rendering mechanism and the Fiber architecture, lifting you to a depth where you can explain 'why it's fast or slow.'
Reason: Understanding React's internals reveals where re-rendering and diffing become costly. This frontend performance-tuning book provides whole-browser measurement and optimization, bridging framework-internals knowledge to measurement-driven improvement.
Sources
Reason: Once comfortable developing with React alone, you advance to Next.js, a framework that integrates routing, data fetching, and rendering strategy. 実践Next.js (Practical Next.js), built around the App Router and Server Components, provides realistic design for assembling actual products.
Sources
Reason: With a deeper repertoire of type design, you apply those types to Next.js full-stack development, where they pay off across every layer. 実践Next.js (Practical Next.js) shows implementations that carry types through the server/client boundary and data fetching, extending type safety across the whole app.
Sources
Reason: Once you can run apps with Next.js, you descend to the Web's foundational technologies the framework hides—HTTP, caching, URIs—to reinforce your understanding. The Japanese classic 'Webを支える技術' (on the technologies underpinning the web) systematizes that foundation, letting you explain the framework's behavior from first principles.
Reason: The principles of test design carry over to the frontend. Building on the test pyramid, you cover the essentials of the UI with a few end-to-end tests and protect logic densely with unit tests—the criteria stay the same across layers.
Explore next
Connected fields
Domain
Backend Development
A learning path to systematically build implementation skill and design principles for backend development — from API design and server-side architecture to authentication, async processing, distributed systems, and performance optimization.
Domain
Software Design
A systematic learning path for software design — from clean code to architecture, testing, and quality culture. Covers code quality, TDD, DDD, distributed system design, and DevOps/quality organization.