Open4

Building Frontend App

Next.js
React
TypeScript
T-unityT-unity

0

フロントエンド開発を始める際におさえたい基礎知識 MECEに 10 カテゴリへ整理。

1. JavaScript ➜ TypeScript 基礎

  • ES2015+ 機能 … let/const, アロー関数, destructuring, spread / rest, Promise, async‑await
  • モジュールシステム … import / export とツリーシェイク概念
  • TypeScript 文法 … 型注釈・型推論・ユニオン／ジェネリクス・非 null 保証
  • tsconfig 基本 … strict, moduleResolution, paths, baseUrl

2. React コア概念

  • 関数コンポーネント & JSX
  • Props / State / Hooks … useState, useEffect, useMemo, useCallback
  • ライフサイクルの暗黙的変化（DOM 操作タイミング, バッチ更新）
  • コンポジションと単方向データフロー

3. Next.js アプリケーション構造

  • Pages / App Router … app/ ディレクトリ, ルーティング規則, nested layout
  • データ取得戦略 … fetch + cache, Route Handler, generateStaticParams (SSG), revalidate (ISR)
  • API Routes / Edge Functions
  • App Router のサーバー／クライアント境界 (use client)

4. UI & スタイリング with MUI

  • MUI コンポーネント体系 & props API
  • Theme オブジェクト … palettes, typography, ThemeProvider, emotion‑styled
  • CSS in JS の基本概念と SSR 対応 (cache, prepend)
  • レスポンシブ設計 … sx でのブレイクポイント

5. 状態管理 & データアクセス

  • ローカル vs グローバル state の切り分け
  • Context API（小規模共有状態）
  • サーバー state ライブラリ概念 … TanStack Query / SWR
  • フォーム状態 … React Hook Form 基本

6. テスト & 品質保証

  • ユニット / DOM テスト … Jest + React Testing Library
  • 統合 / E2E … Playwright / Cypress の役割差
  • 型によるテスト軽減 … 型安全がバグ検出に寄与する範囲
  • CI での自動化 … GitHub Actions で lint → test → build

7. 開発者体験 (DX) 向上ツール

  • パッケージマネージャ … npm v9 / pnpm / yarn の選定観点
  • Lint & Format … ESLint + Prettier, おすすめ設定 (eslint-config-next)
  • コミット規約と Husk … Conventional Commits, lint‑staged, commitlint
  • IDE 補完 … VS Code 拡張 (@types/react など)

8. パフォーマンス最適化

  • 動的インポート & Code‑Splitting (next/dynamic)
  • 画像 & フォント最適化 … next/image, next/font
  • メモ化と再レンダー抑制 … React.memo, useMemo, useDeferredValue
  • Web Vitals 指標 … LCP, FID, CLS, INP

9. セキュリティ & アクセシビリティ

  • XSS / CSRF 対策 … ヘッダ設定, cookie 属性
  • 環境変数管理 (NEXT_PUBLIC_* vs サーバー専用)
  • a11y 基礎 … ARIA ロール, キーボード操作, 色コントラスト
  • ライブラリアップデートと依存性監査 … Dependabot, npm audit

10. デプロイ & 運用

  • Vercel 基本 … Preview Deploy, Environment Variables, Edge Network
  • 自動リラウト & 404 / 500 ページ
  • 監視 / ログ … Vercel Analytics, Sentry, Log Drains
  • SEO / メタデータ管理 … next/head, OG 画像生成