AIと共に設計し、AIと共に作る

全6回のチュートリアル……の予定でしたが、この「AI活用」パートは非常に重要かつ強力なため、前後編の2回に分けて詳しく解説することにしました。

progFocusの真価は、単なる作図ツールにとどまりません。それは、「人間のアイデア」と「AIの実装力」をつなぐ、共通言語（インターフェース）として機能します。

今回（Vol.6）と次回（Vol.7）で、実際に一つのアプリを作りながら、そのワークフローを体験してみましょう。

今回のゴール：AIによる構造の拡張

私たちが目指すのは、以下のような開発フローです。

人間: progFocusで「ふんわりした骨組み」を作る（3ノードくらい）
AI: それをMarkdownとして読み込み、「ガッチリした構造」に拡張・詳細化する
progFocus: 拡張された構造をインポートし、人間が確認する
AI: 確定した構造を元に、コードを実装する（Vol.7）

丸投げするのではなく、「最初は人間が方向性を示す」のがポイントです。

Step 1: ふんわりした骨組みを作る

今回作るのは「タスク管理機能付きのポモドーロタイマー」です。最初から細かく設計する必要はありません。まずは「こんな感じ」という大まかな流れだけをprogFocusで描いてみましょう。

今回は、たった3つのノードで作りました。

サイクル入力 (入力)
時間計測 (処理)
アラーム (出力)

3ノードだけのシンプルなprogFocusキャンバス

これだけで十分です。描けたら、画面右上の「ファイル保存」ボタンから、この「骨組み」をMarkdownファイルとしてダウンロードします。

Step 2: 設計士としてのAI

次に、ダウンロードしたMarkdownファイルを、ChatGPTやClaude、GeminiなどのAIに渡します。

💡 ヒント：AI編集ルールも一緒に渡す progFocusのヘルプ画面から「AI編集ルール」をダウンロードできます。このルールファイルをMarkdownファイルと一緒にAIへ渡すことで、AIがprogFocusの形式を正しく理解し、再インポート可能なMarkdownを出力してくれます。

そして、こうお願いします。

あなた: 「添付のファイルは、私が作りたい『ポモドーロタイマー』の概略構造です。これを元に、Reactでの実装を見据えた、より具体的で詳細なprogFocus形式のMarkdownに拡張してください。

必要な機能（スタート/ストップ、リセット、スキップ、タスク追加、タスク選択など）や、持つべきデータ（残り時間、実行中フラグ、選択中タスク、集中/休憩モードなど）を補完して、ガッチリした構造に直してください。

可能なら、後でコード化しやすいように、役割分担が見える形にしてください。」

AIは、あなたの「サイクル入力→時間計測→アラーム」という意図を読み取り、必要なロジックやステートを補ってMarkdownを書き直してくれます。今回、実際に返ってきたのは、8ノード・8接続まで具体化された構造でした。

Step 3: 構造の進化を見る

AIが出力したMarkdownコードをコピーし、progFocusのトップ画面から「読み込み」でインポートしてみてください。

すると……

複雑化したキャンバス

たった3つだったノードが、8個のノードへ増え、実装を意識した構造に進化しました。

タスク入力UI（入力）
タスク状態管理（処理）
タスクリスト表示（出力）
タイマー操作UI（入力）
タイマーロジック（処理）
時間表示（出力）
通知処理（処理）
アラーム発報（出力）

しかも、単に箱が増えただけではありません。あとでコードへ落とし込みやすい粒度まで、処理の流れが補完されています。

タイマー完了時には、通知処理を経由してアラーム発報へつなぐ
タイマー内部には、1秒ごとの Tick を表す自己接続も入る

つまりAIは、「雰囲気で描いた骨組み」を「そのままReact実装の下書きにできる設計図」へ変換してくれたわけです。

人間がゼロから組み立てると時間のかかる「詳細設計」が、一気に形になります。これぞ、AI時代の設計体験です。

次回（Vol.7）は、この「ガッチリした構造」をそのままAIに渡し、タスク管理付きポモドーロタイマーを実装するところまで進めます。

次の記事はこちら 👉