- フロントエンドとは
- フロントエンド開発者に必要なスキルセット
[[技術スキル (HTML, CSS, JavaScript, フレームワーク, ツールなど)]][[ソフトスキル (コミュニケーション, 問題解決, UI・UXへの理解)]]
- フロントエンド技術の歴史と進化
[[静的HTMLの時代から動的Web、Ajax、SPA、PWAへ]][[主要な技術的ブレークスルーとトレンド]]
- モダンフロントエンド開発の概要
[[コンポーネントベースアーキテクチャ]][[宣言的UIプログラミング]][[状態管理の重要性]][[ビルドプロセスとモジュールバンドラ]][[テスト自動化]][[パフォーマンスとアクセシビリティへの意識]]
- フロントエンド開発の学習ロードマップ (例)
- HTMLの基本
- 主要なHTML要素
[[見出しタグ (-
)]]
[[段落タグ ()]]
[[リンクタグ ()]] (属性: href, target, rel)[[画像タグ (![]()
)]] (属性: src, alt, width, height)[[リストタグ (, , , , , )]]
[[テーブルタグ (, , , , )]]
[[セクショニング要素 ([[インライン要素とブロックレベル要素]][[汎用要素 (, )]]
- セマンティックHTML (Semantic HTML) MOC
- フォーム (Forms) MOC
[[<form>タグ (属性: action, method)]][[入力要素 () の種類]] (text, password, checkbox, radio, submit, button, file, date, email, numberなど)[[<label>タグとアクセシビリティ]][[<textarea>タグ]][[<select>と<option>タグ]][[<button>タグ]][[フォームバリデーション (HTML5属性: required, pattern, min, maxなど)]]
- マルチメディア要素
[[<audio>タグ]][[<video>タグ]][[<canvas>タグ]] (2Dグラフィックス)[[<svg>タグ]] (ベクターグラフィックス)
- HTMLエンティティと特殊文字
- HTMLのベストプラクティスとアクセシビリティ考慮事項
[[alt属性の適切な使用]][[ランドマークロールの活用]][[WAI-ARIA属性の基本]] (詳細はアクセシビリティMOCで)
- HTMLバリデーションツール
- CSSの基本
- セレクタ (Selectors) MOC
[[基本セレクタ (全称, 型, クラス, ID, 属性)]][[結合子 (子孫, 子, 隣接兄弟, 一般兄弟)]][[擬似クラス (Pseudo-classes - hover, focus, active, nth-childなど)]][[擬似要素 (Pseudo-elements - ::before, ::after, ::first-lineなど)]][[セレクタの詳細度 (Specificity) とカスケーディング (Cascading)]][[継承 (Inheritance)]]
- ボックスモデル (Box Model) MOC
[[content, padding, border, margin]][[box-sizingプロパティ (content-boxvs.border-box)]]
- CSSの単位 (Units)
[[絶対単位 (px, ptなど)]][[相対単位 (em, rem, %, vw, vh)]]
- CSSのプロパティ (主要カテゴリ別)
[[テキスト関連 (color, font-family, font-size, font-weight, text-align, line-heightなど)]][[背景関連 (background-color, background-image, background-repeat, background-position, background-size)]][[表示 (displayプロパティ: block, inline, inline-block, none, flex, grid)]][[配置とレイアウト (position, top・right・bottom・left, float, clear, z-index)]][[境界線 (border関連プロパティ)]][[パディングとマージン (padding関連, margin関連)]][[サイズ (width, height, min-width, max-heightなど)]][[リスト関連 (list-style-typeなど)]][[テーブル関連 (border-collapseなど)]
- CSSレイアウト技術 MOC
- Flexbox (Flexible Box Layout) MOC
[[FlexコンテナとFlexアイテム]][[主要プロパティ (display: flex, flex-direction, justify-content, align-items, flex-wrap, flex-grow, flex-shrink, flex-basis)]]
- CSS Grid Layout MOC
[[GridコンテナとGridアイテム]][[主要プロパティ (display: grid, grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row)]]
[[floatレイアウト (レガシーだが理解は必要)]][[positionレイアウト (static, relative, absolute, fixed, sticky)]]
- レスポンシブWebデザイン (RWD) とCSS MOC
[[メディアクエリ (@media)]][[ビューポート ()]][[可変グリッド、可変画像]]
- CSSの高度なテクニック
[[トランジション (transition)]][[アニメーション (@keyframes, animation)]][[変数 (カスタムプロパティ - CSS Custom Properties)]][[計算関数 (calc())]][[擬似要素の活用]][[CSSフィルタ (filter)]][[ブレンドモード (mix-blend-mode, background-blend-mode)]]
- CSSプリプロセッサ (CSS Preprocessors) MOC
- CSSフレームワーク/ライブラリ
[[Bootstrap の概要と利用]][[Tailwind CSS (ユーティリティファースト) の概要と利用]][[Materialize, Bulmaなど]]
- CSS設計手法/命名規則
[[BEM (Block, Element, Modifier)]][[OOCSS (Object-Oriented CSS)]][[SMACSS (Scalable and Modular Architecture for CSS)]][[Atomic Design (CSSへの応用)]][[CSS Modules]][[CSS-in-JS (Styled Components, Emotionなど)]] (フレームワーク文脈で詳述)
- CSSのデバッグ (ブラウザ開発者ツール)
- CSSのパフォーマンス最適化 (セレクタの効率、プロパティの描画コストなど)
- JavaScriptの基本
- 基本構文
[[変数宣言 (var(非推奨), let, const)]][[データ型 (プリミティブ型: String, Number, Boolean, Null, Undefined, Symbol, BigInt ・ オブジェクト型)]][[演算子 (算術, 比較, 論理, 代入, 条件, ビットなど)]][[制御構文 (if・else, switch, for, while, do・while, for...in, for...of)]][[関数 (Function)]] (宣言、式、アロー関数)[[スコープ (グローバル, ローカル, ブロック, レキシカル)]][[クロージャ (Closure)]][[thisキーワードの挙動]] (呼び出し元による変化)[[プロトタイプとプロトタイプチェーン (Prototype-based Inheritance)]][[クラス構文 (ES6 - class, constructor, extends, super)]][[モジュール (ES6 Modules - import, export)]][[エラーハンドリング (try…catch…finally, throw)]]
- DOM (Document Object Model) 操作 MOC
- イベント処理 (Event Handling) MOC
[[イベントリスナーの登録 (addEventListener) と削除 (removeEventListener)]][[イベントオブジェクト (Event Object)]][[イベントの種類 (マウスイベント, キーボードイベント, フォームイベント, DOM変更イベントなど)]][[イベントフロー (キャプチャリングとバブリング)]][[イベント移譲 (Event Delegation)]][[preventDefault()とstopPropagation()]]
- 非同期JavaScript (Asynchronous JavaScript) MOC
- 非同期処理の必要性 (ブロッキングの回避)
[[コールバック関数 (Callbacks) とコールバック地獄 (Callback Hell)]][[Promiseオブジェクト (new Promise, then, catch, finally, Promise.all, Promise.race)]][[async・await構文]][[イベントループ (Event Loop), コールスタック (Call Stack), タスクキュー (Task Queue ・ Message Queue)]][[setTimeout, setInterval]]
- Web API (ブラウザAPI) の利用 MOC
[[Fetch API ・ XMLHttpRequest (XHR) (Ajax)]] (HTTPリクエスト)[[localStorage ・ sessionStorage]] (Webストレージ)[[IndexedDB]][[Geolocation API]][[History API]] (SPAルーティング)[[Canvas API ・ WebGL API]][[WebRTC API]][[Web Workers API]] (バックグラウンド処理)[[Service Workers API]] (PWA)
- JSON (JavaScript Object Notation) (再掲・JSでの扱い)
[[JSON.parse(), JSON.stringify()]]
- ES6+ の主要機能
[[アロー関数]][[テンプレートリテラル]][[分割代入 (Destructuring assignment)]][[デフォルトパラメータ]][[残余引数 (Rest parameters) とスプレッド構文 (Spread syntax)]][[オブジェクトリテラルの拡張]][[Map ・ Set ・ WeakMap ・ WeakSet]][[シンボル (Symbol)]][[イテレータ (Iterator) とジェネレータ (Generator)]][[Optional Chaining (?.)]][[Nullish Coalescing Operator (??)]]
- TypeScript (TS) MOC (JavaScriptのスーパーセット)
- TypeScriptの概要と利点 (静的型付け)
[[基本的な型 (string, number, boolean, array, tuple, enum, any, void, null, undefined, never, object)]][[インターフェース (Interface)]][[クラス (Class) と継承、アクセス修飾子]][[ジェネリクス (Generics)]][[型推論 (Type Inference) と型アサーション (Type Assertion)]][[型定義ファイル (.d.ts)]] (DefinitelyTyped)- [[TypeScriptコンパイラ (
tsc) と設定 (tsconfig.json)]]
- JavaScriptプロジェクトへの段階的導入
- JavaScriptのデバッグ (ブラウザ開発者ツール,
console.log, デバッガ)
- JavaScriptのパフォーマンス最適化 (DOM操作の最小化, イベントループの理解, メモリリーク対策)
- JavaScriptのセキュリティ (XSS対策など - 詳細はセキュリティMOCで)
- JavaScriptのテスト (詳細はテストMOCで)
- JavaScriptのコーディング標準とベストプラクティス (ESLint, Prettierなど)
- Reactの基本
- 主要な概念
[[コンポーネント (Component - 関数コンポーネントとクラスコンポーネント)]][[プロパティ (Props)]] (親から子へのデータ受け渡し)[[状態 (State)]] (コンポーネント内部のデータ)[[ライフサイクルメソッド (Lifecycle Methods - クラスコンポーネント) ・ フック (Hooks - 関数コンポーネント)]][[イベント処理 (Event Handling)]][[条件付きレンダリング (Conditional Rendering)]][[リストとキー (Lists and Keys)]][[フォーム (Forms)]][[コンポジション vs. 継承]]
- Reactフック (Hooks) MOC
[[useState]][[useEffect]] (副作用の処理、クリーンアップ)[[useContext]] (Context API)[[useReducer]] (複雑な状態管理)[[useCallback, useMemo]] (パフォーマンス最適化)[[useRef]] (DOM参照、ミュータブルな値の保持)[[カスタムフック (Custom Hooks)]]
- Reactエコシステム
[[ルーティング (React Router)]][[状態管理 (Redux, Zustand, Recoil, Context API)]] (詳細は状態管理MOCで)[[フォームライブラリ (Formik, React Hook Form)]][[スタイリング (CSS Modules, Styled Components, Emotion, Tailwind CSS)]][[テスト (Jest, React Testing Library, Enzyme)]][[Create React App (CRA) ・ Vite (Reactテンプレート)]] (プロジェクト作成)
- Next.js (Reactフレームワーク) MOC (SSR, SSG, API Routesなど)
- Reactのベストプラクティスとパターン
- Reactのパフォーマンス最適化
- Vue.jsの基本
- 主要な概念
[[Vueインスタンス ・ アプリケーションインスタンス]][[テンプレート構文 (ディレクティブ: v-bind, v-model, v-if, v-for, v-onなど)]][[コンポーネント (Component)]] (SFC - Single File Components: .vueファイル)[[プロパティ (Props)]][[データ (Data) ・ リアクティブな状態]][[算出プロパティ (Computed Properties)]][[ウォッチャ (Watchers)]][[ライフサイクルフック (Lifecycle Hooks)]][[イベント処理 (v-on・@)]][[フォーム入力バインディング (v-model)]][[スロット (Slots)]] (コンポーネントのコンテンツ配信)[[トランジションとアニメーション]]
- Composition API (Vue 3) MOC (vs. Options API)
[[setup() 関数]][[リアクティビティAPI (ref, reactive, computed, watch)]][[ライフサイクルフック (Composition API版)]][[Provide ・ Inject]][[カスタムコンポーザブル関数 (Custom Composables)]]
- Vueエコシステム
[[ルーティング (Vue Router)]][[状態管理 (Pinia (推奨), Vuex)]] (詳細は状態管理MOCで)[[スタイリング (Scoped CSS, CSS Modules, Tailwind CSS)]][[テスト (Vue Test Utils, Jest, Vitest, Cypress)]][[Vue CLI ・ Vite (Vueテンプレート)]] (プロジェクト作成)
- Nuxt.js (Vue.jsフレームワーク) MOC (SSR, SSG, API Routesなど)
- Vue.jsのベストプラクティスとパターン
- Vue.jsのパフォーマンス最適化
- Angularの基本
- 主要な概念
[[コンポーネント (Component)]][[テンプレート (Template)]] (ディレクティブ: *ngIf, *ngFor, [(ngModel)]など)[[ディレクティブ (Directive - コンポーネント, 構造, 属性)]][[サービス (Service)]][[データバインディング (補間, プロパティ, イベント, 双方向)]][[パイプ (Pipe)]] (データ変換)[[フォーム (テンプレート駆動フォームとリアクティブフォーム)]][[HTTPクライアント (HttpClient)]][[ライフサイクルフック (Lifecycle Hooks)]][[RxJS (リアクティブプログラミングライブラリ) との統合]]
- Angularエコシステム
[[ルーティング (@angular・router)]][[状態管理 (NgRx, Akita, Services + RxJS)]][[Angular Material (UIコンポーネントライブラリ)]][[テスト (Karma, Jasmine, Protractor(非推奨) ・ WebdriverIO・Cypress)]][[Angular CLI]] (プロジェクト作成、コード生成、ビルド)
- Angularのベストプラクティスとパターン
- Angularのパフォーマンス最適化 (Change Detection Strategy, AOTコンパイル)
- Svelteの基本
- 主要な概念
[[コンポーネント (.svelteファイル)]][[リアクティブな宣言 ($:)]][[プロパティ (Props)]][[イベント処理]][[バインディング (bind:)]][[ストア (Stores)]] (組み込み状態管理)[[ライフサイクルフック]][[トランジションとアニメーション]][[スロット (Slots)]]
- SvelteKit (Svelteフレームワーク) MOC (ルーティング, SSR, SSG, APIエンドポイント)
- Svelteの利点と適用ケース
[[学習曲線]][[パフォーマンス]][[エコシステムの成熟度とコミュニティサポート]][[プロジェクトの規模と要件]][[チームのスキルセット]][[状態管理の統合度]][[スケーラビリティ]]
- 状態管理とは
- 状態管理のパターンとアプローチ
[[ローカルコンポーネント状態]][[Propsによるデータリレー (Prop Drilling) とその問題点]]- Context API (React) ・ Provide-Inject (Vue) (中規模の状態共有)
- グローバル状態管理ライブラリ MOC
[[Redux (React) の基本原則 (単一ストア, Stateは読み取り専用, Reducerによる変更)]]
[[Action, Reducer, Store, Dispatch, Middleware (Thunk, Saga)]][[Redux Toolkit (RTK)]]
[[Zustand (React)]] (シンプルで軽量な状態管理)[[Recoil (React)]] (Facebookによる実験的状態管理)[[Pinia (Vue) の特徴と使い方]] (Vuexの後継推奨)[[Vuex (Vue) の基本 (State, Getter, Mutation, Action, Module)]] (Vue 2/3)[[NgRx (Angular) の基本 (Store, Actions, Reducers, Effects, Selectors)]] (RxJSベース)[[Akita (Angular)]]
[[サーバーキャッシュとしての状態管理 (React Query・TanStack Query, SWR, Apollo Client)]]
- 状態管理ライブラリの選択基準
- 状態管理のベストプラクティス (正規化、イミュータビリティ、副作用の扱い)
- UI/UXの基本原則 (詳細はデザイン系MOCと連携)
- ワイヤーフレームとモックアップから実装へ
- コンポーネントライブラリの活用
[[Material UI (React), Ant Design (React・Vue・Angular), Chakra UI, Bootstrap (JS版)]][[ヘッドレスUIコンポーネント (Headless UI)]] (Radix UI, Headless UI by Tailwind Labs)
- デザイントークン (Design Tokens) (色、フォント、スペースなどの一元管理)
- アクセシブルなUIコンポーネントの実装
- マイクロインタラクションの実装
- UIの状態管理 (ローディング、エラー、空状態など)
- 国際化 (i18n) と地域化 (l10n) のUIへの反映
- APIリクエストの送信
[[Fetch API]] (再掲)[[XMLHttpRequest (XHR)]] (再掲・レガシー)[[AxiosなどのHTTPクライアントライブラリ]]
- レスポンスデータの処理 (JSON, XMLなど)
- エラーハンドリング (ネットワークエラー、サーバーエラー)
- 認証と認可
[[トークンベース認証 (JWTなど) の扱い]][[APIキーの安全な管理 (クライアントサイドの限界)]]
- CORS (Cross-Origin Resource Sharing)
- APIクライアントコードの設計 (サービスクラス、リポジトリパターンなど)
- GraphQLクライアントの利用 (Apollo Client, Relay, urql)
- gRPC-webの利用
- パッケージマネージャ
[[npm (Node Package Manager)]] (package.json, package-lock.json)[[yarn]] (yarn.lock)[[pnpm]]
- モジュールバンドラ
- トランスパイラ
- リンターとフォーマッタ
- 開発サーバー (ホットリロード/ホットモジュールリプレイスメント - HMR)
- IDEとエディタ (VS Code, WebStorm/IntelliJ IDEAなど) と拡張機能
- ブラウザ開発者ツール (Browser Developer Tools) (再掲・フロントエンド開発でのフル活用)
[[Elementsパネル]] (DOMとCSSの検査・編集)[[Consoleパネル]] (ログ出力、JS実行)[[Sourcesパネル]] (JSデバッグ、ブレークポイント)[[Networkパネル]] (HTTPリクエスト/レスポンスの監視)[[Performanceパネル]] (実行パフォーマンス分析)[[Memoryパネル]] (メモリリーク調査)[[Applicationパネル]] (ストレージ、Service Worker、PWA)[[Lighthouse]] (Webサイト品質監査ツール)
- バージョン管理システム (
Git) (再掲・フロントエンドでの活用)
- テストの重要性とテストピラミッド (再掲・フロントエンド文脈)
- ユニットテスト (Unit Testing)
[[純粋関数、コンポーネントのロジック部分のテスト]][[Jest, Vitest, Mocha, Jasmineなどのフレームワーク]]
- コンポーネントテスト (Component Testing)
[[個々のUIコンポーネントのレンダリング、インタラクションのテスト]][[React Testing Library, Vue Test Utils, Svelte Testing Library, Angular Testing Utilities]][[Storybookとの連携によるコンポーネント駆動開発 (CDD)]]
- E2E (End-to-End) テスト ・ UIテスト
[[ユーザー操作のシミュレーションによるアプリケーション全体のテスト]][[Cypress, Playwright, Selenium WebDriver, WebdriverIO]][[E2Eテストの課題 (実行時間、不安定さ、メンテナンスコスト)]]
- ビジュアルリグレッションテスト (Visual Regression Testing) (Percy, Applitools, Playwright)
- アクセシビリティテスト (Accessibility Testing) の自動化 (axe-coreなど)
- パフォーマンステスト (Performance Testing) (Lighthouse, WebPageTest API)
- モックとスタブの活用 (MSW - Mock Service Workerなど)
- テストカバレッジ
- CI/CDパイプラインへのテスト統合
- パフォーマンス指標
- レンダリングパフォーマンス
[[ブラウザのレンダリングパス (Critical Rendering Path)]][[レンダリングブロッキングリソースの削減 (CSS, JavaScript)]][[レイアウト計算 (Layout・Reflow) と再描画 (Paint・Repaint) の最適化]][[ハードウェアアクセラレーションの活用 (transform, opacity)]]
- アセット最適化
[[画像最適化 (フォーマット選択: WebP・AVIF, 圧縮, レスポンシブ画像)]][[フォント最適化 (Webフォント, FOUT・FOIT対策, サブセット化)]][[CSS・JavaScriptの最小化 (Minification) と圧縮 (Compression - Gzip, Brotli)]]
- コード最適化
[[コード分割 (Code Splitting)]][[遅延読み込み (Lazy Loading - 画像, コンポーネント)]][[ツリーシェイキング (Tree Shaking)]][[不要なライブラリの削除]][[効率的なJavaScriptの記述 (ループ最適化, DOM操作の最小化)]][[メモ化 (Memoization)]] (React.memo, useMemo)
- ネットワークパフォーマンス
[[HTTP・2, HTTP・3の活用]][[CDN (Content Delivery Network) の利用]][[ブラウザキャッシュの活用 (HTTPキャッシュヘッダ)]][[DNSプリフェッチ, プリコネクト, プリロード, プリレンダ]]
- サーバーサイド最適化 (フロントエンドへの影響)
[[サーバー応答時間 (TTFB - Time to First Byte)]]
- パフォーマンス監視と継続的改善
, scope属性)]]
- WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) MOC
[[ARIAロール (Role), ステート (State), プロパティ (Property)]][[動的なコンテンツやカスタムウィジェットのアクセシビリティ向上]][[ARIAの使いすぎに注意]]
- キーボードナビゲーション
[[全ての機能がキーボードで操作可能であること]][[フォーカス管理とフォーカスインジケータ]][[適切なタブ順序 (tabindex)]]
- スクリーンリーダー対応
- 色のコントラストと視覚的デザイン
- 動的コンテンツとインタラクション
- アクセシビリティテスト
[[手動テスト (キーボード操作、スクリーンリーダー)]][[自動テストツール (axe-core, Lighthouse, WAVE)]][[ユーザビリティテスト (障害のあるユーザー参加)]]
- アクセシビリティの継続的取り組み
- 主要ブラウザとそのレンダリングエンジン (Chrome/Blink, Firefox/Gecko, Safari/WebKit)
- Web標準化団体 (W3C, WHATWG, ECMA International)
- ブラウザ間の互換性とクロスブラウザテスト
- ポリフィル (Polyfill) とトランスパイラ (Transpiler) (古いブラウザへの対応)
- Can I use… (ブラウザ機能のサポート状況確認サイト)
- ブラウザのDevToolsの高度な活用 (再掲)
- (オプション) WebAssembly (Wasm) (概要とフロントエンドでの利用可能性)
- RWDの3つの基本技術要素
[[フルードグリッド (Fluid Grids)]][[フレキシブルイメージ・メディア (Flexible Images・Media)]][[メディアクエリ (Media Queries)]] (再掲・詳細)
- モバイルファーストアプローチ
- レスポンシブデザインのパターン (Mostly Fluid, Column Drop, Layout Shifter, Off-Canvasなど)
- ブレークポイントの設計
- タッチデバイスの考慮 (タップターゲットのサイズ、ジェスチャー)
- レスポンシブデザインのテストとデバッグ (ブラウザのレスポンシブモード)
- PWAとは (Webとネイティブアプリの利点を組み合わせたアプリ)
- PWAの主要技術
[[Service Worker]] (オフライン対応、バックグラウンド同期、プッシュ通知)[[Web App Manifest]] (ホーム画面への追加、スプラッシュスクリーン)[[HTTPS]] (必須)
- PWAの利点 (インストール可能、オフライン動作、プッシュ通知、アプリストア不要)
- PWAの実現ステップ
- PWAのテストとデバッグ (Lighthouse, Chrome DevTools Applicationパネル)
- PWAの配布とストア登録 (TWAなど)
- コンポーネントベースアーキテクチャ (CBA) (再掲・アーキテクチャ視点)
- 状態管理アーキテクチャパターン (Flux, Reduxパターンなど)
- データフローアーキテクチャ (単方向データフローなど)
- モジュール性と関心の分離
- マイクロフロントエンド (Micro Frontends) MOC
[[マイクロフロントエンドの概念と目的 (大規模フロントエンドの分割統治)]][[実装パターン (iframe, Web Components, シングルSPAなど)]][[利点と課題]]
- Atomic Design (アトミックデザイン) (コンポーネント設計への応用)
- ディレクトリ構造とコード構成のベストプラクティス
- スケーラブルなフロントエンドアーキテクチャの設計
- バージョン管理 (Git) とブランチ戦略 (GitFlow, GitHub Flowなど - フロントエンド文脈)
- コードレビュー
- CI/CDパイプラインの構築 (Lint, Test, Build, Deploy)
- ドキュメンテーション (コードコメント、コンポーネントドキュメント、API仕様)
- エラー監視とレポーティング (Sentry, Rollbarなど)
- パフォーマンスバジェットの設定と監視
- クロスファンクショナルチームとの連携 (デザイナー、バックエンド開発者、QA)
- 技術的負債の管理とリファクタリング
- 継続的な学習と技術トレンドの追跡
- フロントエンド開発におけるアンチパターン