Node.js 環境

最近は Rust 実装の環境管理ツールが流行っている。複数言語に対応した mise (ミーズ) がよさそう。

https://dev.classmethod.jp/articles/setup-and-manage-dev-tools-with-mise/

mise

インストール

brew install mise

mise doctor

設定ファイル作成

mkdir -p ~/.config/mise && echo '[tools]' > ~/.config/mise/config.toml
vi ~/.config/mise/config.toml

[tools]
node = '22'
'npm:pnpm' = '10'
go = '1.24'

go, node, pnpm インストール

$ mise install
mise WARN  gpg not found, skipping verification
mise go@1.24.2 ✓ installed
mise npm:pnpm@10.10.0 ✓ installed  
mise node@22.15.0 ✓ installed        

設定ファイルに基づいて自動インストールしてくれるので便利。

📁 開発環境・コア言語

• Node.js ≥ 22 / Bun 2 をインストール
• corepack enable → pnpm または bun をデフォルトに設定 mise で環境構築
• TypeScript 5.8 を devDependencies に追加
• tsconfig.json を生成し、以下を確認
  • "strict": true
  • "moduleResolution": "bundler"
  • "experimentalDecorators": true
• ESLint + Prettier + EditorConfig をプロジェクト共通で導入
• Git で pre-commit hook（lint & type-check）を設定

⚛️ React 19（基礎 → 先進機能）

• npm create vite@latest my-app -- --template react-ts で雛形作成
• function component / hooks の基本（useState, useEffect）
• Server Components と use フックの概念を理解
• 自動メモ化（Compiler RC） を @react/compiler で試す
• Suspense + Error Boundary の組み合わせを実装
• Context API → useContextSelector でレンダリング最適化
• React DevTools で Re-render トレース確認

🌐 Next.js 15（フルスタック）

• npx create-next-app@latest --ts --tailwind で新規プロジェクト
• App Router で以下を実装
  • レイアウト / ページ / loading.tsx
  • RSC 内で DB アクセス（例: Prisma + PlanetScale）
  • Route Handlers (app/api/*/route.ts) で REST/GraphQL 入口
• Edge Runtime 配置 (runtime: 'edge') を試す
• Turbopack ビルドへ切替 (next.config.mjs)
• ISR / SSG / SSR の動作差をベンチマーク

🎨 Tailwind CSS v4 & 最新 CSS API

• tailwind.config.{js,cjs} を 0-config で生成
• Cascade Layers (@layer) の仕組みを把握
• Container Queries + Tailwind プラグインを適用
• CSS View-Transitions API と Tailwind utilities を統合
• Headless UI / shadcn-ui でフォーム & モーダルを実装

⚡ ビルドツール & パフォーマンス

• Vite 6 / Bun 2 で同一アプリを起動して HMR 速度比較
• vite build --mode production → vite preview でバンドル確認
• whygraph で依存サイズを可視化し tree-shaking を検証
• eslint-plugin-import/no-unresolved で unused import を検出

🔌 データフェッチ & 状態管理

• TanStack Query v5+ 導入 (ReactQueryDevtools を含む)
• Query Key 設計 & infiniteQuery でページネーション実装
• Optimistic Update と Mutation のロールバック実装
• React Server Components と dehydrate/hydrate 連携をテスト

✅ テスト & 品質保証

• Vitest 3 を vite.config.ts 経由でセットアップ
  • setupFiles で JSDOM / MSW を初期化
• Playwright 1.51 で以下を作成
  • 主要ページの表示テスト
  • フォーム送信フロー (API モック)
• CI（GitHub Actions or Vercel Checks）で lint → test → build パイプライン

🗂️ モノレポ & DevOps

• Turborepo で apps / packages 構成を作成
• Remote Cache（Vercel）を有効化してビルド時間を計測
• .dockerfile と docker-compose.yml で本番コンテナリング
• Cloudflare Pages / Workers or Vercel に Preview デプロイ

🔍 代替フレームワーク（理解範囲）

• Svelte 5：単一ファイルコンポーネントで TODO アプリ
• Vue 3.5 / Nuxt 4：Composition API + <script setup> 体験
• Angular 19：Standalone Components + Signals の概要把握
• Solid 2 / Qwik 2：signals / resumability の PoC

結論（要点のみ）

2015年当時（TypeScript 1.x系）から 5.8（2025 年3月）までの “破壊的に大きい” 進化は、次の8カテゴリに集約できます。

1. 型安全の強化

• strictNullChecks (2.0) – null | undefined を型体系に取り込み、実行時 NPE をコンパイル時に捕捉。既存コード移行では --strictNullChecks false → 徐々に true 推奨。(JavaScript With Syntax For Types.)
• exactOptionalPropertyTypes / noUncheckedIndexedAccess など (4.x) – “存在しないプロパティ” と “配列境界” を型で表現。

2. 近代 JavaScript 機能のフルサポート

• async/await (2.1) – ES2017 構文を ES5 へも自動ダウンレベル。コールバック地獄解消。(JavaScript With Syntax For Types.)
• Optional Chaining / Nullish Coalescing (3.7) – ?. と ?? で安全にプロパティ参照。(JavaScript With Syntax For Types.)
• Private #fields (3.8) – 真にランタイムでも隠蔽されるフィールド。(JavaScript With Syntax For Types.)

3. 型システムの表現力

• keyof / Mapped Types (2.1) – オブジェクトキーを型として操作。(JavaScript With Syntax For Types.)
• Conditional Types & infer (2.8) – 型レベルの if/else。
• Template-Literal Types (4.1) – 文字列リテラルを型レベルで合成。(JavaScript With Syntax For Types.)
• Variadic Tuple Types (4.0) – 可変長タプル結合／分割。(JavaScript With Syntax For Types.)
• satisfies 演算子 (4.9) – 型注釈せずに代入時制約だけ掛ける。設定ファイル系で便利。(JavaScript With Syntax For Types.)

4. 大規模ビルド & Mono-repo 対応

• Project References & tsc --build (3.0) – 相互依存プロジェクトを増分ビルド。CI/CD で必須。(JavaScript With Syntax For Types.)
• Incremental / Composite, .tsbuildinfo で 10倍規模でも差分ビルド秒殺。

5. ES 提案シンクロ & ランタイム連携

• Decorators 標準仕様 (5.0) – Babel 依存から脱却。NestJS 等のデコレータは experimentalDecorators → 本仕様へ。(JavaScript With Syntax For Types.)
• using 宣言 & 明示的リソース管理 (5.2) – RAII 風に using file = await open();。(JavaScript With Syntax For Types.)

6. Node / ESM エコシステム

• --module nodenext/node16/node18 – package.json "type": "module" に合わせて解決戦略を変更。node18 は 5.8 で安定版。(Microsoft for Developers)
• Import Attributes (5.3) – import data from "./foo.json" with { type: "json" } を型安全に。(JavaScript With Syntax For Types.)

7. 開発体験 & 生産性

• override キーワード & --noImplicitOverride (4.3) – 継承でのタイプミスを即検出。(Microsoft for Developers)
• --noCheck (5.6) – emit だけ行い型検査をスキップ。CI で “型チェック無しのスピードビルド” を切り分け可能。(Microsoft for Developers)
• 変数の未初期化検出強化 (5.7) – これまで漏れていた “完全未代入” を警告。(JavaScript With Syntax For Types.)
• transpileDeclaration (5.5) – 単一 .d.ts を高速生成、ライブラリ作者向け。(JavaScript With Syntax For Types.)

8. 進行中の ECMAScript API 型定義

• Object.groupBy / Map.groupBy 型宣言 (5.4) – 次期 ES API を先取り。(JavaScript With Syntax For Types.)
• Set#difference / intersection など (5.5) – コレクション操作を型付きで。

バージョンアップ戦略のヒント

1. 2段階移行
   まず現在のコードを "strict": false で 5.x に上げ、CI が通るように修正。次に strictNullChecks だけ true にして実行時 NPE を一掃。
2. paths/baseUrl 廃止検討
   Node ≥ 18 + ESM 環境ではモジュール解決も標準の exports フィールド利用が推奨。
3. デコレータ使用プロジェクト
   旧 legacy デコレータから標準版へは --verbatimModuleSyntax を有効にしつつ一括置換ツールを使うと安全。
4. CI
   tsc --noEmit と --noCheck の2ジョブ体制にすると、“型安全” と “ビルド速度” を両立。

これで 2015→2025 の10年分ギャップを埋められます。必要に応じて気になるバージョンを掘り下げてください。