この記事は約 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 — 公式プロダクトページ