はじめに

ようこそ、progFocusの世界へ。

このチュートリアルシリーズでは、ツールの使い方だけでなく、「プログラミングにおける設計思考の解像度を上げる」ための方法論を全7回にわたってお伝えしていきます。

Vol.1となる今回は、具体的な機能の話に入る前に、なぜこのツールが必要なのかという根本的なコンセプトについてお話しします。

プログラミングの「思考」における課題

あなたは、新しい機能を実装しようとした時、どうしていますか？

これは、多くのエンジニアが経験する「実装と思考の混同」という罠です。

言い換えれば、「プロジェクトに対する解像度が低い状態」のままコードを書こうとしているため、うまくいかないのです。

progFocusは、この問題を解決するために作られました。このアプリを使って要件定義を細かく行い、やりたいことに対する解像度を上げること。それによって、迷いを断ち切り、コードにしっかり焦点をあわせられる（Focusできる）ようにすること。

そんな思いが、このツールには込められています。

テキストエディタは「コードを書く」ためのツールであり、「思考を整理する」ためのツールではありません。コードは一次元の文字列であり、上から下へと処理が流れる構造を強制されます。しかし、人間の思考やシステム全体の構造は、もっと多次元的で有機的です。

これらも有用ですが、「データの流れ」や「依存関係」を直感的に把握するには不十分なことが多いのです。

progFocusは、この課題を解決するために作られた「思考の解像度を上げるための無限キャンバス」です。

頭の中にある曖昧なアイデアや機能を、まずは「ノード」としてキャンバスに置きます。「何かわからないけど、認証機能が必要だ」と思ったら、とりあえず「認証」という箱を置く。これだけで、思考の一部が外部化され、脳のメモリが解放されます。

次に、ノードとノードを線でつなぎます。

つなぐことで、データの流れ（Data Flow）や因果関係が見えてきます。「あ、認証にはデータベースが必要だな」と気づき、新しいノードを追加する。この繰り返しで、自然と設計が詳細化されていきます。

progFocusの最大の特徴は、「左から右へ」という明確な方向性を持っていることです。一般的なマインドマップは放射状に広がりますが、プログラミングの処理は基本的に入力から出力へと流れます。

progFocusでは：

という役割を持たせることで、システムの流れを最も自然な形で可視化できます。

世の中にはMiroやFigJam、Notionなど素晴らしいツールがたくさんあります。しかし、それらは汎用的すぎるがゆえに、「プログラミングの設計」に特化した機能が不足しがちです。

progFocusは、以下の点で「エンジニアのための思考ツール」として最適化されています：

Markdownネイティブ: 作成した図は特殊なバイナリではなく、Markdownとして保存されます。テキストデータなので扱いやすく、AIにコンテキストとして渡すのにも最適です。
AIによる壁打ち: 構造化されたデータを元に、AIに「この設計で抜け漏れはない？」と相談できます。一人で悩む時間を、AIとの有意義なディスカッションの時間に変えられます。
実装までシームレスに: AIを活用して、プロジェクトのMarkdownドキュメントを直接リファクタリングしたり、設計図からコードを生成したりと、「考える」から「作る」までを一気通貫でサポートします。

次回、Vol.2では、実際にprogFocusの画面を触りながら、「ノードの作成」と「接続」の基本操作について解説します。

さあ、思考のキャンバスを広げましょう。

次の記事はこちら 👉