本文へスキップ
takushio2525

progFocus

公開中

コードを書く前に、目的と構成を整理する

短縮パス takushio2525.com/progfocus

progFocus のトップページ。「目的から、コードへ。思考を整理する開発ノート。」という見出しが出ている

どんなもの

コードを書き始める前に、作りたいものの目的・仕様・機能・入出力を、階層をたどりながら整理していく Web アプリだ。無限キャンバスにノードを置き、機能ごとに、その入力・処理・出力まで書き下していける。

作った設計は Markdown のファイルとして書き出して読み込み直せるので、AI に渡して育ててもらうこともできる。ログインすればクラウドに自動で保存され、リンクで人に見せられる。画面は日本語と英語がある。

progFocus の使い方

このページには progFocus を作った理由と作りを書いた。画面の操作や保存のしかたは、progFocus の中の使い方ガイドにまとめてある。

使い方ガイドの全体を読む

なぜ作ったか

仕様書の「背景」の章には、作る理由として 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 本がまだ開いている。英語の画面に日本語が残る箇所の直しと、ワークスペースを直接開いたときにキャンバスの操作が効かない不具合も残っている。

関連リンク

使った技術

言語
  • TypeScript
フレームワーク
  • Next.js
  • React
基盤
  • Supabase
  • GitHub Actions
配信
  • Vercel

開発の記録

リポジトリのコミット履歴から出した数字です(2026 年 10 月 12 日時点)。

開発期間
2026 年 1 月 〜 2026 年 10 月
コミット数
420

※ リポジトリは非公開

progFocus について書いた記事

ほかのもの

公開しているものの一覧へ戻る