アプリケーションの拡大に伴う開発者体験の悪化をなんとかする

Transcript

1.  TSKaigi Hokuriku 2025 アプリケーションの拡大に伴う 開発者体験の悪化を なんとかする 福田哲也（@gendaihyousyou） @2025-11-22
2. 自己紹介  福田 哲也 (@gendaihyousyou)  株式会社 RIT CTO/CHRO  京都在住  Web技術と入力デバイスが好きです
3. 背景：規模の大きな業務アプリのリプレース  100+テーブル の大規模アプリケーション  Hono + Drizzle ORM + zod の技術スタック  エンドツーエンドの型安全を実現
4. 問題の顕在化（DX悪化）  エディタ補完が秒〜10秒超で遅延  TypeScriptサーバーが頻繁にクラッシュ  CI/CDのビルド時間増加  テスト実行がテスト数に比例して遅延 → 生産性低下 
5. 課題1: 型推論による補完の遅延 型推論の処理フロー 1 ルート定義の収集 2 zodスキーマから入力型を推論 3 Drizzleクエリから返り値型を推論 4 エンドポイント数 × リレーション数 で負荷増大
6. 検証1: 型定義の事前生成
7. 対応方針 型定義を動的に推論させるのではなく、 型定義ファイルを先に生成してそれを クライアントの型定義に使う
8. ベンチマーク結果 前提条件  同一コミット・同一tsconfigで計測  キャッシュクリア後に3回実行の平均値  対象プロジェクト: Hono + Drizzle ORM + zod、100+テーブルの大 規模アプリ 結果（ビルド/型チェック時間） 動的型推論： 2.37秒 事前生成： 0.45秒 約5.3倍高速化
9. 採用しなかった理由  型定義の再生成が必要 コードが変更されるたびに .d.ts ファイルの再生成が必要になり、運用コ ストが高い  既存ワークフローへの影響大 開発・ビルド・デプロイプロセスの変更が必要になり、チーム全体の生 産性に影響
10. 検証2: tsgoを使ってみる
11. 対応方針 TypeScript 5.9.3の代わりにtsgoを使用して型チェックを高速化す る
12. ベンチマーク結果 前提条件  同一コミット・同一tsconfigで計測  キャッシュクリア後に3回実行の平均値  対象プロジェクト: Hono + Drizzle ORM + zod、100+テーブルの大 規模アプリ 結果（ビルド/型チェック時間） 動的型推論： 2.37秒 tsgo： 0.92秒 約2.6倍高速化
13. 採用理由とVS Codeでの導入 採用理由  既存ワークフローの変更が不要  エディタ補完が体感で高速化  開発者が意識せずに恩恵を受けられる VS Codeでの導入 settings.json: "typescript.experimental.useTsgo": true
14. 課題2: テスト実行速度の低下  テスト件数に比例して実行時間が増加  100+テーブルの全クリアが毎回実行  テスト間のTRUNCATE＆シードが重い beforeEach(async () => { // 外部キー無効化 await db.execute(...); // 100+テーブル全クリア for (... i <= 100; ...) { await db.execute(`TRUNCATE ...`); } });
15. 改善1: TRUNCATE → DELETE + tmpfs DELETE への変更 テーブル全体のリセットではなく行単位の削除で効率化 tmpfs 導入 ディスクI/OをメモリアクセスOに置換えて高速化 結果（50テストケース） 通常DELETE： 7.84秒 tmpfs： 3.00秒 約2.6倍高速化
16. 改善2: トランザクションのロールバック  Railsから学んだ手法: テスト実行→自動ロールバック  ヘルパー関数でラップしてfinallyで例外をthrow  劇的な高速化 3.00秒 → 0.12秒（25倍）  詳しい実装はHonoの例で解説します
17. Honoのテストで使うなら ハンドラ内で context からDBを取得する実装パターン withTransaction ヘルパーでテストをラップ testFailure変数 でテスト失敗を保存し、例外を適切に再 スロー  tx.rollback() を明示的に呼び出して確実にロールバ ック // withTransactionヘルパー関数 function withTransaction(fn) { return async () => { let testFailure; try { await db.transaction(async (tx) => { const request = async (path, init) => { return await app.request(path, init, { db: tx }); }; try { await fn(tx, request); } catch (e) { testFailure = e; } // 明示的にロールバック tx.rollback(); }); } catch (e) { if (testFailure) throw testFailure; if (e instanceof DrizzleError) { return; } throw e;
18. パフォーマンス比較まとめ 2つの主要課題に対する解決策の実測パフォーマンス改善率 型補完・ビルド 動的型推論： 2.37秒 tsgo： 0.92秒 事前生成： 0.45秒 tsgo：約2.6倍高速化 事前生成：約5.3倍高速化 テスト（50ケース） DELETE： 3.00秒 トランザクショ ン： 0.12秒 約25倍高速化
19. おわりに  アプリだけでなく DXも計測しよう！   