progFocusチュートリアル Vol.7：AI活用【後編】構造からコードへ
構造を渡せば、アプリができる
前回（Vol.6）は、人間が作った「ふんわりした骨組み」を、AIが「ガッチリした構造」に拡張するところまでを行いました。 今回はその後編です。手に入れた「詳細な設計図」を使って、実際にアプリを動かすところまで進めます。
Step 4: 設計図の準備
前回、AIが作ってくれた「タスク管理付きポモドーロタイマー」のMarkdownファイル。 progFocus上でインポートして中身を確認済みですね。
このMarkdownには、ノードの位置座標だけでなく、機能やデータの整理も入っています。 今回の例では、次のような内容まで含まれていました。
- タスク入力UI、タスクリスト表示、タイマー操作UI、時間表示、アラーム発報といった入出力ノード
- タスク状態管理、タイマーロジック、通知処理といった中核ロジック
- タスク選択連携、1秒Tick、0秒到達、再生コマンドといった接続ラベル
つまりこれは、ただの図ではなく、実装方針まで補完された設計図です。 これを自分のマシンに保存しておきます（progFocusの「ファイル保存」でダウンロードしたファイルでOKです）。
Step 5: コーダーとしてのAI (Gemini Canvas)
GoogleのGemini Canvasなど、ファイルを読み込んで対話できるAIツールを開きます。
先ほどのMarkdownファイルをアップロードし、こう伝えます。
あなた: 「添付の設計図に基づいて、React + TypeScriptでポモドーロタイマーを実装してください。 タスク追加・選択、スタート/ストップ、リセット、集中/休憩モード切替、タイマー終了時の通知表示まで動作するようにしてください。 UIはシンプルで確認しやすい構成にしてください。」
すると、GeminiはMarkdown内の構造化データを読み解き、必要なコンポーネントやロジックを書き上げます。 入力、処理、出力の役割が先に整理されているので、画面とロジックの分担を組み立てやすいのが利点です。
Step 6: 実装と確認
Gemini Canvasのプレビュー画面を見てみましょう。
完成したFocusTimerアプリ
- 25分のタイマーが動く
- タスクを追加し、アクティブなタスクを選べる
- スタート、ストップ、リセット、スキップができる
- 集中と休憩のモードが切り替わる
- タイマー完了時に通知やアラームを出せる
設計図通りのアプリが、そこにあります。 もし動きがおかしい部分があっても、「設計図のこの部分の処理、○○に変えて」と指示すれば、Geminiは喜んで修正してくれます。
終わりに：思考のOSへ
全7回にわたるチュートリアル、お疲れ様でした。
- 人間: 直感的な骨組みを作る（Vol.6）
- AI: 構造を詳細化・拡張する（Vol.6）
- progFocus: 構造を可視化して整理する（Vol.6）
- AI: コードに変換して動かす（Vol.7）
progFocusは、人間とAIが「構造」という共通言語で対話するためのプラットフォームです。 このループを回すことで、あなたの開発スピードは何倍にも加速するはずです。
さあ、progFocusを開いて。 次は何を作りましょうか？
📚 チュートリアルシリーズ一覧