大規模な設計を整理・保存する

Vol.2では基本的なノードの作り方を学びました。 しかし、実際のアプリケーション開発では、ノードの数が数十に増えることも珍しくありません。

今回は、そんな大規模な設計を整理するための 「階層化機能」 と、作業内容を確実に残すための 「保存機能」 について解説します。

1. 機能をまとめる「機能ノード」

progFocusには、入力/処理/出力以外に、もう一つ特別なノードタイプがあります。それが機能ノードです。

階層化のメリット

例えば「ユーザー認証」という機能を考えてみましょう。 詳細に設計すると、「バリデーション」「DB照合」「トークン発行」「クッキー設定」など、多くのプロセスが含まれます。これらを全てメインキャンバスに並べると、全体図が複雑になりすぎてしまいます。

そこで機能ノードを使います。「ユーザー認証」という一つの箱を作り、その中に詳細な処理を閉じ込めるのです。

機能ノードの使い方

1. サイドバーから機能ノードをドラッグ＆ドロップして作成します。

   機能ノードの作成

2. 作成された機能ノードをShift+クリックします。

3. すると、そのノードの内部キャンバスに移動（ドリルダウン）します。機能ノードにマウスを乗せると「⇧ Shift+Click で中を見る」というヒントが表示されます。

   内部キャンバス

4. この中で、通常通り入力/処理/出力ノードを作成して詳細を設計します。

   機能詳細の設計

5. 元の階層に戻るには、画面左上のパンくずリスト（例: チュートリアル > 機能A）の チュートリアル をクリックします。

このように、大きなシステムを「機能」という単位で分割し、詳細を内部に隠蔽することで、常に全体の見通しを良く保つことができます。

💡 ヒント：ツリービューを使う 画面右上の「ビュー」ボタンを押すと、キャンバスの内容をツリー形式で表示できます。ノードの階層構造を俯瞰したいときに便利です。キャンバスとツリーはいつでも切り替えられます。

2. プロジェクトを保存する

progFocusは、ブラウザ上で動作するアプリケーションですが、クラウドに自動保存されるわけではありません（※ローカルストレージには一時保存されますが、ブラウザのキャッシュクリア等で消える可能性があります）。

大切な設計データを守るために、必ずファイルとして保存する習慣をつけましょう。

保存（エクスポート）の手順

1. 画面右上のツールバーにある「ファイル保存」ボタンをクリックします。

   保存（エクスポート）

2. ボタンをクリックすると、自動的にMarkdownファイル（.md）がダウンロードフォルダに保存されます。

なぜMarkdown？ progFocusの保存データは、実はMarkdown形式です。中にJSONデータが埋め込まれています。 そのため、GitHubなどのバージョン管理システムで管理しやすく、テキストエディタで開いて説明文を追記することも可能です。

復元（インポート）の手順

保存したファイルを再び開く手順です。

1. トップ画面の「読み込み」ボタンをクリックします。

   復元（インポート）

2. 保存したMarkdownファイルを選択します。

   ファイル選択

3. プロジェクトが読み込まれ、続きから編集できます。

3. まとめ：設計のサイクル

これまでの3回で、基本的な使い方はマスターできたはずです。

1. ノードを置く（思考を出す）
2. 線をつなぐ（流れを作る）
3. 機能ノードでまとめる（整理する）
4. ファイルに保存する（記録する）

このサイクルを回すことで、どんなに複雑なシステムでも、迷子にならずに設計を進めることができます。

次回からは、いよいよ実践編です。具体的なアプリケーションの例を挙げて、ゼロから設計を行うプロセスを体験してみましょう。

---

次の記事はこちら 👉