progFocusチュートリアル Vol.2：基本操作をはじめよう
基本操作をはじめよう
前回の記事では、progFocusのコンセプトについてお話ししました。 Vol.2となる今回は、実際の画面を見ながら、プロジェクトの作成から基本操作までをハンズオン形式で解説します。
1. プロジェクトを作成する
まずは、自分のアイデアを形にするための「場所」を作りましょう。
手順1：トップ画面からスタート
progFocusにアクセスすると、以下のようなシンプルなトップ画面が表示されます。 画面中央、またはナビゲーションバーにある「新規作成」ボタンをクリックしてください。
トップ画面
手順2：プロジェクト名を入力
ダイアログが表示されるので、プロジェクトの名前を入力します。
今回は練習なので、「MyFirstProject」や「Tutorial」など、好きな名前をつけてください。
入力したら Enter キーを押すか、「作成」ボタンをクリックします。
プロジェクト作成ダイアログ
手順3：ワークスペースへ
プロジェクトが作成されると、無限に広がる「ワークスペース」が表示されます。 ここが、あなたの思考を展開するキャンバスです。
ワークスペース初期画面
2. ノードを作る
準備ができたら、さっそく「ノード（思考の箱）」を置いてみましょう。 progFocusには、役割に応じた3つの基本ノードがあります。
3つのノードタイプ
- 🔵 入力: データの入り口（ユーザー操作、API取得など）
- 🟢 処理: ロジック（計算、判定、変換など）
- 🔴 出力: データの出口（画面表示、ログ保存など）
サイドバーからドラッグ＆ドロップで作成
画面左側のサイドバーに、ノードタイプの一覧が表示されています。 作りたいノードタイプをサイドバーからキャンバス上にドラッグ＆ドロップすることでノードを作成できます。
- 入力ノード
- 処理ノード
- 出力ノード
まずはサイドバーから処理ノードを1つドラッグ＆ドロップしてみましょう。
ノード作成
3. ノードを編集する
作成したノードに名前を付けます。
- ノードをクリックすると選択状態になります（青い枠が表示されます）。
- 選択状態のノードをもう一度クリックすると編集モードになります。
- タイトルに「足し算」と入力してみましょう。
- メモ欄にも詳細な計算式などをMarkdownで書けます。クリックすればそのフィールドを編集できます。
- 編集を終了するには、キャンバスの何もないところをクリックします。
ノード編集
4. ノードをつなぐ
ノードが一つだけでは何も起きません。入力と出力をつないで、「流れ」を作りましょう。
- 入力ノードを作成し、「数値A」と名付けます。
- もう一つ入力ノードを作り、「数値B」と名付けます。
- 出力ノードを作り、「結果表示」と名付けます。
これでキャンバスには4つのノードがあるはずです。これらを線でつなぎます。
接続の手順
- 「数値A」ノードにマウスを重ねると、上下左右に●（ハンドル）が出現します。
- 右側のハンドルをドラッグして、「足し算」ノードの左側まで引っ張ります。
- ハンドルが吸着したらドロップします。これで接続完了です！
- 同様に、「数値B」→「足し算」、「足し算」→「結果表示」とつないでみましょう。
完成すると、左から右へデータが流れるような図になるはずです。これがprogFocusの推奨するデータフローです。
ノード接続
まとめ
今回は、プロジェクトの作成から、基本的なノードの操作までを行いました。
- プロジェクト作成: 名前を決めるだけで即スタート
- ノード作成: サイドバーからドラッグ＆ドロップ
- 接続: 左から右への流れを意識する
これだけでも、頭の中のモヤモヤしたアイデアを「箱」と「線」にするだけで、驚くほどスッキリするはずです。
次回は、より複雑な設計を整理するための「階層化（機能ノード）」について解説します。お楽しみに！
次の記事はこちら 👉
