この記事は約 4 分で読めます。
筆者プロフィール: ソフトウェアエンジニア。「知った気にならない。いつまでも学び続ける」を信条に、業務と個人開発の両輪で技術を磨いています。AI 駆動開発で複数の個人開発アプリを構築・運用中。
👉 ポートフォリオ: 筆者ホームページ
リリース 2 ヶ月前の集中改修で 主要 4 画面の応答速度を平均 60% 短縮 した話を整理します。運用中の SaaS 「たすきば Knowledge Relay」 で 2026-04 に実施した改修プロジェクト (docs/archive/performance/20260417/)。
サービスの機能紹介・画面イメージ・コンセプトは公式プロダクトページをご覧ください。
👉 たすきば Knowledge Relay — 公式プロダクトページ
なぜ集中改修したか
主要画面の応答が遅いと気づいたタイミング:
| 画面 | Before |
|---|---|
| プロジェクト一覧 | 1.8 秒 |
| ナレッジ一覧 | 1.5 秒 |
| WBS / ガントチャート | 2.4 秒 |
| 提案画面 | 0.9 秒 |
ユーザ視点では「もっさり」と感じる速度。リリース前に集中改修すべきと判断。
1. 4 軸の改修
軸 1: N+1 解消
最大のインパクト。Prisma の include / select で 1 クエリに集約。
// Before: 100 プロジェクト × タスク取得で 101 クエリ
const projects = await prisma.project.findMany();
const tasks = await Promise.all(
projects.map(p => prisma.task.findMany({ where: { projectId: p.id }}))
);
// After: 1 クエリ
const projects = await prisma.project.findMany({ include: { tasks: true } });
プロジェクト一覧: 1.8s → 0.7s。
軸 2: インデックス追加
主要クエリの WHERE / ORDER BY 列にインデックス。
model Project {
@@index([tenantId, state])
@@index([tenantId, createdAt])
@@index([tenantId, deletedAt])
}
EXPLAIN ANALYZE で効果確認。
軸 3: 不要 fetch 削減
// Before: tasks の全フィールド取得
include: { tasks: true }
// After: 必要フィールドのみ
include: { tasks: { select: { id: true, name: true, state: true } } }
転送量が 70% 削減。
軸 4: useMemo / React.memo 追加
const sortedProjects = useMemo(
() => [...projects].sort((a, b) => a.name.localeCompare(b.name, 'ja')),
[projects]
);
不要な再レンダーを抑制。
2. 効果
| 画面 | Before | After | 改善 |
|---|---|---|---|
| プロジェクト一覧 | 1.8s | 0.7s | -61% |
| ナレッジ一覧 | 1.5s | 0.6s | -60% |
| WBS / ガント | 2.4s | 0.9s | -63% |
| 提案画面 | 0.9s | 0.4s | -56% |
平均 60% の改善。
3. 計測してから改修の鉄則
「遅い気がする」だけでなく、必ず計測してから改修。
| ツール | 用途 |
|---|---|
| Prisma query log | SQL 実行時間 |
| ブラウザ DevTools Performance | レンダリング |
| React DevTools Profiler | 再レンダー検出 |
数字で効果を確認することで、無駄な改修を避けます。
4. 改修後の E2E でリグレッション検知
パフォーマンス改修は機能変更を伴うため、E2E でリグレッション検知。
□ E2E 全パス通過確認
□ Visual Regression baseline 確認
□ 単体テスト全 PASS
速くなったが壊れた、という事故を防ぐ。
5. 改修記録を archive に保存
改修プロジェクトの記録は、docs/archive/performance/20260417/ に 4 ファイル保存:
□ 計画書
□ 計測結果 (Before)
□ 改修内容詳細
□ 計測結果 (After)
将来 (チーム拡大時 / 別アプリ開発時) に参考にできます。
おわりに
| 軸 | 効果 |
|---|---|
| N+1 解消 | 最大インパクト、1 クエリで完結 |
| インデックス追加 | DB レベルの最適化 |
| 不要 fetch 削減 | 転送量 70% 削減 |
| useMemo / React.memo | 不要再レンダー抑制 |
リリース前のタイミングで集中改修したことで、ユーザ初期体験を最適化 できました。
本記事の改修プロジェクトは、運用中の SaaS 「たすきば Knowledge Relay」 で実施したものです。
👉 たすきば Knowledge Relay — 公式プロダクトページ