UI肥大化・保守性 実験 — 使用プロンプト一式（3条件） https://techs-targe.github.io/blog/ja/posts/030-ui-bloat-experiment/ ※ 設計指針は各系列とも初回プロンプトの1回だけ。改修1〜20は全条件で同一文面。 ============================================================ ■ 初期プロンプト B（無指示） ============================================================ 読書ログ管理アプリを作ってください。 ユーザーは、自分が読んだ本、読みたい本、読書中の本を管理できます。本ごとにステータス、評価、メモ、読了日、ジャンルを記録できます。 以下の機能を入れてください。 1. 本の一覧表示 2. 本の追加 3. 本の編集 4. 本の削除 5. ステータス変更（読みたい/読書中/読了） 6. 評価の登録（1〜5） 7. メモの登録 8. ジャンルの登録 9. ステータス別の絞り込み 10. キーワード検索 フロントエンドだけで動くサンプルで構いません。データはメモリ上、またはlocalStorageで保持してください。見た目はシンプルで構いません。実装コードを出してください。 必ず workspace にファイル（index.html 等）として保存してください。 ============================================================ ■ 初期プロンプト A1（素の設計：分割方針のみ） ============================================================ サンプルプロダクトの初期版を設計・実装してください。 # プロダクト概要 個人向けの「読書ログ管理アプリ」。ユーザーは、読んだ本／読みたい本／読書中の本を管理でき、本ごとにステータス・評価・メモ・読了日・ジャンルを記録できる。 # 初期機能 1. 本の一覧表示 2. 本の追加 3. 本の編集 4. 本の削除 5. ステータス変更（読みたい/読書中/読了） 6. 評価の登録（1〜5） 7. メモの登録 8. ジャンルの登録 9. ステータス別の絞り込み 10. キーワード検索 # 重要な設計方針（実装前に必ず明示すること） 1. ドメイン分割: 少なくとも Book管理 / ReadingStatus管理 / Review・Rating / Search・Filter / UI表示 の各ドメインに責務分割し、それぞれの責務・保持状態・依存関係を説明する。 2. インターフェース設計: Book型 / BookStatus型 / BookRepository相当のデータ操作層 / UIコンポーネントの責務 / 状態更新関数の責務 / 検索・フィルタ関数の責務 を定義する。 3. UI肥大化を防ぐ方針（今後20回以上の改修が加わる前提で厳守）: - 1画面にすべての操作を詰め込まない - 機能追加時に既存UIへ安易にボタンや入力欄を増やさない - ドメインごとにコンポーネントを分離する - 表示用UIと編集用UIを分離する - 検索/フィルター/並び替え/詳細編集をそれぞれ独立した責務として扱う - 拡張しやすい構造にする # 実装条件 フロントエンドのみで動作。データは localStorage 保持。見た目はシンプルでよいが情報設計を重視。責務分離が分かる構成。 # 出力形式（workspace に実ファイルとして保存し、下記を workspace/DESIGN.md にも残すこと） 1. ドメイン分割の説明 2. インターフェース設計 3. UI構成の説明 4. 実装コード 5. 今後の改修時に守るべき設計ルール 必ず workspace にファイル（index.html 等 + DESIGN.md）として保存してください。 ============================================================ ■ 初期プロンプト A2（規律つき設計：A1＋モジュール規律） ============================================================ サンプルプロダクトの初期版を設計・実装してください。 # プロダクト概要 個人向けの「読書ログ管理アプリ」。ユーザーは、読んだ本／読みたい本／読書中の本を管理でき、本ごとにステータス・評価・メモ・読了日・ジャンルを記録できる。 # 初期機能 1. 本の一覧表示 2. 本の追加 3. 本の編集 4. 本の削除 5. ステータス変更（読みたい/読書中/読了） 6. 評価の登録（1〜5） 7. メモの登録 8. ジャンルの登録 9. ステータス別の絞り込み 10. キーワード検索 # 重要な設計方針（実装前に必ず明示すること） 1. ドメイン分割: 少なくとも Book管理 / ReadingStatus管理 / Review・Rating / Search・Filter / UI表示 の各ドメインに責務分割し、それぞれの責務・保持状態・依存関係を説明する。 2. インターフェース設計: Book型 / BookStatus型 / BookRepository相当のデータ操作層 / UIコンポーネントの責務 / 状態更新関数の責務 / 検索・フィルタ関数の責務 を定義する。 3. UI肥大化を防ぐ方針（今後20回以上の改修が加わる前提で厳守）: - 1画面にすべての操作を詰め込まない - 機能追加時に既存UIへ安易にボタンや入力欄を増やさない - ドメインごとにコンポーネントを分離する - 表示用UIと編集用UIを分離する - 検索/フィルター/並び替え/詳細編集をそれぞれ独立した責務として扱う - 拡張しやすい構造にする 4. モジュール規律（過分割・肥大の両方を防ぐ。今後の改修でも厳守）: - 1ファイルは100〜300行を目安とし、300行を大きく超えそうなら責務単位で分割する - 逆に、些末なウィジェット1つのために数十行のファイルを乱造しない。類似の責務は1モジュールに集約する（例: 各種フィルタ・並び替えUIは filterBar 相当の1モジュールにまとめる） - CSSも1枚に集めず、共通/画面（コンポーネント）単位で分割する - 機能追加時は「まず既存モジュールに置けないか」を検討し、新ファイルは責務が明確に異なるときだけ作る - 重複コードは共通化する。ただし将来使うかもしれないだけの抽象化はしない（YAGNI） - この規律を DESIGN.md に明記し、以後の改修でも従うこと # 実装条件 フロントエンドのみで動作。データは localStorage 保持。見た目はシンプルでよいが情報設計を重視。責務分離が分かる構成。 # 出力形式（workspace に実ファイルとして保存し、下記を workspace/DESIGN.md にも残すこと） 1. ドメイン分割の説明 2. インターフェース設計 3. UI構成の説明 4. 実装コード 5. 今後の改修時に守るべき設計ルール（モジュール規律を含む） 必ず workspace にファイル（index.html 等 + DESIGN.md）として保存してください。 ============================================================ ■ 改修プロンプト（1〜20）※全条件共通 ============================================================ ----- 改修1 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修1：本ごとに「読書期限」を設定できるようにしてください。 - 本の追加時に読書期限を入力できる - 本の編集時に読書期限を変更できる - 一覧または詳細で読書期限を確認できる - 期限切れの本が分かるようにする - 期限が近い本が分かるようにする 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修2 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修2：本ごとに「優先度」を設定できるようにしてください。優先度は 高 / 中 / 低 の3段階です。 - 本の追加時に優先度を選べる - 本の編集時に優先度を変更できる - 一覧または詳細で優先度を確認できる - 優先度で絞り込める - 優先度の高い本が目立つようにする 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修3 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修3：本の一覧に並び替え機能を追加してください。以下の条件で並び替えできるようにしてください。 - 登録日が新しい順 - 登録日が古い順 - 評価が高い順 - 評価が低い順 - 読書期限が近い順 - 優先度が高い順 既存の検索・絞り込み機能と組み合わせて使えるようにしてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修4 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修4：本ごとに読書時間を記録できるようにしてください。 - 読書時間は分単位で登録できる - 1冊ごとの合計読書時間を確認できる - 読書時間を追加で記録できる - 間違って登録した読書時間を修正または削除できる - 一覧または詳細で合計読書時間を表示する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修5 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修5：読書時間を、単なる合計ではなく「読書セッション履歴」として記録できるようにしてください。読書セッションは 日付 / 読書時間 / メモ を持ちます。 - 本ごとに読書セッションを追加できる - 本ごとに読書セッション一覧を確認できる - 読書セッションを編集できる - 読書セッションを削除できる - 合計読書時間はセッション履歴から計算する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修6 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修6：月別の読書サマリーを表示できるようにしてください。月ごとに以下を表示してください。 - 読了した本の数 - 合計読書時間 - 平均評価 - 読書セッション数 - よく読んだジャンル 表示対象の月を選択できるようにしてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修7 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修7：本に登録できるジャンルを、1つではなく複数にしてください。 - 1冊の本に複数ジャンルを登録できる - 既存の単一ジャンルデータがある場合は、新しい形式へ移行する - ジャンルで絞り込める - 複数ジャンルが一覧または詳細で分かるようにする - 月別サマリーの「よく読んだジャンル」も複数ジャンルに対応する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修8 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修8：本に著者情報を追加してください。 - 本ごとに著者名を登録できる - 著者名で検索できる - 著者名で絞り込める - 同じ著者の本をまとめて確認できる - 一覧または詳細で著者名を表示する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修9 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修9：本に出版社と出版年を追加してください。 - 本ごとに出版社を登録できる - 本ごとに出版年を登録できる - 出版社で検索できる - 出版年で絞り込める - 出版年順に並び替えできる - 一覧または詳細で出版社と出版年を確認できる 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修10 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修10：本ごとの詳細画面を追加してください。一覧にすべての情報を表示するのではなく、本を選択すると詳細を確認できるようにしてください。 詳細画面では以下を確認・操作できるようにしてください。 - 基本情報 / ステータス / 評価 / メモ / ジャンル / 著者 / 出版社 / 出版年 / 読書期限 / 優先度 / 読書セッション履歴 / 編集 / 削除 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修11 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修11：本の一覧表示の情報量を整理してください。現在の一覧が情報過多にならないようにしてください。一覧では必要最低限の情報だけを表示してください。優先して表示する情報は タイトル / 著者 / ステータス / 評価 / 優先度 / 読書期限。その他の情報は詳細画面で確認できるようにしてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修12 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修12：ジャンルとは別に、自由入力のタグ機能を追加してください。 - 本ごとに複数のタグを登録できる - タグは自由入力できる - 既存タグを再利用しやすくする - タグで絞り込める - タグで検索できる - 一覧または詳細でタグを確認できる 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修13 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修13：本をお気に入り登録できるようにしてください。 - 本ごとにお気に入りON/OFFを切り替えられる - お気に入りの本だけを絞り込める - お気に入りの本が一覧で分かるようにする - お気に入り状態は保存されるようにする 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修14 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修14：同じ本を再読した履歴を管理できるようにしてください。再読履歴は 読み始めた日 / 読み終えた日 / その回の評価 / その回のメモ を持ちます。 - 本ごとに再読履歴を追加できる - 本ごとに再読履歴を確認できる - 再読履歴を編集できる - 再読履歴を削除できる - 本の総合評価と各回の評価を区別する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修15 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修15：読書目標を設定できるようにしてください。目標は 月間読了冊数 / 年間読了冊数 / 月間読書時間 / 年間読書時間 の単位で設定できるようにしてください。 - 目標を設定・編集できる - 目標に対する進捗を確認できる - 達成率を表示できる - 月別サマリーと連動する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修16 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修16：アプリのトップにダッシュボードを追加してください。ダッシュボードでは以下を表示してください。 - 現在読書中の本 / 期限が近い本 / 今月の読了冊数 / 今月の読書時間 / 読書目標の進捗 / 最近追加した本 / お気に入りの本 一覧画面、詳細画面、サマリー画面との役割分担が分かるようにしてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修17 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修17：機能が増えてきたため、画面ナビゲーションを追加してください。少なくとも以下の画面に分けてください。 - ダッシュボード / 本の一覧 / 本の詳細 / 本の追加 / 月別サマリー / 読書目標 / 設定 現在表示している画面が分かるようにしてください。各画面の責務が重複しないようにしてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修18 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修18：本を複数選択して一括操作できるようにしてください。以下の一括操作を追加してください。 - 複数の本を選択する - 選択した本のステータスをまとめて変更する - 選択した本にタグをまとめて追加する - 選択した本をまとめて削除する - 一括操作をキャンセルする 誤操作を防ぐため、削除時には確認を入れてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修19 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修19：読書データのインポート・エクスポート機能を追加してください。 - 現在の読書データをJSON形式でエクスポートできる - JSONファイルから読書データをインポートできる - インポート時に既存データを置き換えるか、追加するか選べる - 不正なJSONや形式が違うデータを読み込んだ場合はエラーを表示する - インポート前に確認を表示する 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。 ----- 改修20 ----- 前回までの実装を維持したまま、以下の改修を加えてください。 改修20：設定画面を追加し、表示をカスタマイズできるようにしてください。設定画面では以下を変更できるようにしてください。 - 一覧の表示密度（コンパクト / 標準 / 詳細） - デフォルトの並び順 - デフォルトの絞り込み条件 - ダッシュボードに表示する項目 - テーマ（ライト / ダーク） 設定内容は保存されるようにしてください。設定画面と他画面の責務を分けてください。 既存機能を壊さずに実装してください。作業後、変更点を2〜3行で要約してください。