実践！クイズアプリを設計する

これまでは操作方法を中心に学んできましたが、Vol.4からは実践編です。 今回は「クイズアプリ（診断系アプリ）」を題材に、progFocusを使ってゼロから設計を行ってみましょう。

1. 入力・処理・出力を考える

まずはクイズアプリを構成する要素を「入力」「処理」「出力」の3つに分けて考えてみましょう。

• 入力: ユーザーが何をするか？（例：選択肢ボタンを押す）
• 処理: アプリは何をするか？（例：正解かどうか判定する、スコアを足す）
• 出力: ユーザーに何を見せるか？（例：正解/不正解の表示、次の問題へ）

いきなり画面を作り込むのではなく、この3つの要素をノードとして書き出すことから始めます。

2. 基本ノードを配置する

左側のサイドバーから「基本ノード」をドラッグ＆ドロップして、キャンバス上に配置していきます。 今回は機能ノードのようなグループ化は使わず、すべての要素をフラットに並べてみましょう。

ノードの配置例

キャンバスに以下のようなメモや処理ノードを置いてみます。

クイズのロジックフロー

このように、必要なパーツを机の上に並べる感覚で置いていくのがコツです。

3. 流れをつなぐ

ノードを配置したら、それらを線でつないでロジックの流れを作ります。

クイズの流れ（接続図）

こうして線をつなぐことで、「Aを選んだらどうなるか？」「正解したら次に何が起こるか？」が一目でわかるようになります。 コードを書く前にこの「流れ」が見えていると、実装時の迷いがなくなります。

まとめ：要素に分解してつなぐ

実践編の第一歩として、アプリケーションを「入力・処理・出力」の要素に分解し、それらをノードとして配置してつなぐ方法を体験しました。 複雑に見えるアプリも、実はこうした単純な要素と線の組み合わせでできています。

次回は、この設計をもう少し整理して、実際のプログラム構造に近づけていきます。

---

次の記事はこちら 👉