progFocus
公開中コードを書く前に、目的と構成を整理する
- Web アプリ
- Next.js
- 学習支援
短縮パス takushio2525.com/progfocus

どんなもの
コードを書き始める前に、作りたいものの目的・仕様・機能・入出力を、階層をたどりながら整理していく Web アプリだ。無限キャンバスにノードを置き、機能ごとに、その入力・処理・出力まで書き下していける。
作った設計は Markdown のファイルとして書き出して読み込み直せるので、AI に渡して育ててもらうこともできる。ログインすればクラウドに自動で保存され、リンクで人に見せられる。画面は日本語と英語がある。
progFocus の使い方
このページには progFocus を作った理由と作りを書いた。画面の操作や保存のしかたは、progFocus の中の使い方ガイドにまとめてある。
- 設計の考え方
ゴール(出力)を置く → 入力を洗い出す → 処理でつなぐ → 矢印に意図を残す、の 4 ステップで迷わず設計する考え方。
- 保存と読み込み
ブラウザへの自動保存と、Markdown のファイルで手元に残す・読み込んで続きから直す方法。
- ログインとクラウド機能
Google か GitHub でログインして別の端末から開くクラウド保存と、ログインなしで見てもらえるリンク共有。
- AI 活用ガイド
保存した設計と AI 編集ルールを ChatGPT や Claude に渡して、設計の改善やコードを書いてもらう手順。
なぜ作ったか
仕様書の「背景」の章には、作る理由として 4 つが書いてある。初心者は仕様を考えないまま書き始めて構造を崩しやすいこと、「まず考える」ことを促す道具が少ないこと、文章だけの設計書は更新も把握も大変なこと、学び始めの段階でデータの流れや役割の分け方を目で見られる道具が少なかったこと。考え方そのものはチュートリアル Vol.1 に書いた。
作り方の判断と経緯
初日に「下りて、戻れる」形を決めた
最初のコミットは 2026 年 1 月 10 日で、その日のうちに無限キャンバス、機能のノード、その中身を入力・処理・出力に分けて書く 2 段目の画面までが入った。同じ日のうちに、ノードの中にノードを入れられる再帰の作りへ組み直している。目的から仕様、機能、入出力へと細かくしていき、迷ったら上の階層へ戻る、という仕様書の「目的」の形を、画面の構造としてそのまま持たせた。1 月だけで 227 コミットあり、3 月までに全体の 9 割が入っている。
AI は組み込まず、ファイルで渡した
1 月 12 日に、設計を Markdown で書き出して読み込み直す機能と、AI がその Markdown を書き換えるときの決まりをまとめた文書を足した。アプリの中に AI を持たせるのではなく、設計のファイルと決まりの 2 つを好きな AI に渡して育ててもらい、結果を読み込む流れだ。使い方は Vol.6 と Vol.7 にある。
8 月 28 日には、この .progfocus.md を AI が直接読み書きし、画像としても書き出せる MCP サーバーを作り、翌日にはクラウドに保存したプロジェクトを AI から読めるリモート版も足した。9 月 30 日には、つないだアプリの一覧と取り消しを置いている。
ログインと共有は 2 か月後に足した
最初は設計をブラウザの中(localStorage)に置く作りで、ログイン・クラウドへの自動保存・リンクでの共有は 3 月 17 日に Supabase で入れた。手元に残っていた設計をクラウドへ移す段も同じ日に用意している。翌日には仕様書を改め、Web の基礎・データベース・認証・セキュリティを解説する教科書の部を足した。8 月 29 日には、自動保存が別のタブや端末での変更を黙って上書きしないよう、版の番号を見比べてから書く形に変えた。この作りは、のちに chamfer の自動保存の手本になった。
無料の枠で止まらないように
Supabase の無料プランは、7 日ほど使われないとプロジェクトが止まる。7 月 31 日に GitHub Actions から 2 日おきに軽い読み取りを送る仕組みを入れたが、9 月 27 日と 29 日に、GitHub の支払いの上限が 0 ドルのせいで予定の実行が起動しなかった。9 月 30 日に、Cloudflare Workers の定期実行から毎日送る形へ移している。9 月末には、配信先の Vercel の無料プラン(Hobby)では広告の掲載が商用の利用にあたるため、広告の読み込みも外した。
数字で見る今
progFocus のリポジトリは公開していないので、2026 年 10 月 12 日に数えた数字だけを載せる(最後のコミットは 10 月 9 日)。
| 項目 | 値 |
|---|---|
| 開発した期間 | 2026 年 1 月 10 日〜10 月 9 日 |
| コミット(main) | 420。1 月 227・2 月 58・3 月 91・4 月 9・7〜10 月 35 |
| Issue | 45 件。閉じたものは 32 件 |
| プルリクエスト | 36 件。マージしたものは 24 件 |
| 公開しているページ | 日本語と英語で 4 ページずつ(トップ・使い方・データの扱い・規約) |
| チュートリアル | 7 本(このサイトのブログ) |
これから
7 月末に、tako の構成図(35 ノード・30 本の線)を AI に progFocus の形式で書かせる試しをした。ファイル自体は 1 回で正しく出たものの、座標を AI が決めるのに手間がかかる、整合を確かめるのに AI が自分で検査のスクリプトを書く羽目になる、親の違うノードどうしを線でつなげない、ファイルが 700 行ほどに膨らむ、の 4 つが見えた。座標を省いたら自動で並べる、読み込むときに導き出せる値を計算し直す、子のノードから親の機能の境界へ線を引けるようにする、決まった値を省いて形式を軽くする、の 4 本がまだ開いている。英語の画面に日本語が残る箇所の直しと、ワークスペースを直接開いたときにキャンバスの操作が効かない不具合も残っている。
関連リンク
- progFocus のデータの扱い … ログインしたときに何を保存し、どう消せるか
- chamfer … progFocus の自動保存の作りを手本にした、別の作品
使った技術
- 言語
- TypeScript
- フレームワーク
- Next.js
- React
- 基盤
- Supabase
- GitHub Actions
- 配信
- Vercel
開発の記録
リポジトリのコミット履歴から出した数字です(2026 年 10 月 12 日時点)。
- 開発期間
- 2026 年 1 月 〜 2026 年 10 月
- コミット数
- 420
※ リポジトリは非公開
progFocus について書いた記事
- progFocusチュートリアル Vol.1:なぜ「思考の可視化」が必要なのか?
プログラミングにおいて「いきなりコードを書く」のではなく、まず「思考を可視化」することの重要性と、progFocusが解決する課題について解説します。
- progFocusチュートリアル Vol.2:基本操作をはじめよう
progFocusの基本操作である「ノードの作成」と「接続」について、ショートカットキーを交えて解説します。
- progFocusチュートリアル Vol.3:大規模な設計を整理・保存する
設計が複雑になった時に役立つ「階層化(機能ノード)」の使い方と、大切なデータを守るための「保存・インポート」について解説します。
- progFocusチュートリアル Vol.4:実践!クイズアプリを設計する
「クイズアプリ」をテーマに、条件分岐やスコア計算など、ロジックの流れを視覚的に設計する方法を学びます。
- progFocusチュートリアル Vol.5:実践!システムを「機能」でカプセル化する(大規模システム編)
単にノードをつなぐだけではなく、機能ノードを使ってシステムを階層化し、データ構造を意識した本格的な設計に挑戦します。
- progFocusチュートリアル Vol.6:AI活用【前編】骨組みを拡張する
「ふんわりしたアイデア」をprogFocusでざっくり描く。それをAIに渡して「ガッチリした構造」に進化させる。AI時代の新しい設計ワークフローを解説します。
- progFocusチュートリアル Vol.7:AI活用【後編】構造からコードへ
AIによって「拡張」されたprogFocusの設計図。それを今度はGemini Canvasに渡し、React製ポモドーロタイマーを爆速で実装する方法を紹介します。