画面とデータと処理の関係を理解する

アプリやWebサイトを「作りたい」と思ったとき、最初にぶつかる壁は 何をどう説明すればいいかわからない ということです。AIツールに「こんなアプリを作って」と伝えるにも、頭の中のイメージを整理する枠組みが必要です。

このレッスンでは、どんなアプリにも共通する 「画面」「データ」「処理」 という3つの要素を理解します。この3つがわかると、AIへの指示が格段に的確になり、「なんか違う…」という手戻りを減らせます。

所要時間: 約15分

---

まず、レストランの厨房を想像してみてください。

お客さんは「完成した料理（＝画面）」しか目にしませんが、裏側には必ず「食材（＝データ）」と「調理（＝処理）」があります。アプリもまったく同じ構造です。

ポイント: この3つのどれか1つでも欠けると、アプリは正しく動きません。画面だけ作ってもデータがなければ空っぽですし、データがあっても処理がなければ更新できません。

---

実感をつかむために、あなたが毎日使っているアプリで考えてみましょう。

例1: ToDoアプリ

• データ: やることリスト（「牛乳を買う」「レポート提出」など）
• 処理: 「完了にする」ボタンを押したら、そのタスクに完了マークをつける
• 画面: タスク一覧と、各タスクの横にあるチェックボックス

例2: 天気予報アプリ

• データ: 各地域の気温・降水確率・風速
• 処理: 現在地の情報を取り出して、傘マークをつけるかどうか判定する
• 画面: 「今日は☀️ 最高気温25℃」という表示

どんなアプリも、この3つに分解できます。

---

ここからが実践です。AIツール（ChatGPT、Claude など）を使って、あなたが作りたいものの3要素を整理してみましょう。

ステップ1: AIに分解を頼む

次のプロンプト（＝AIへの指示文）をコピーして、AIツールに貼り付けてください。「●●●」の部分をあなたの作りたいものに書き換えます。

私は「●●●」というアプリ（またはツール）を作りたいと思っています。
このアプリを「画面（UI）」「データ」「処理」の3つに分解して、
それぞれ何が必要か、表形式で説明してください。
専門用語は使わず、初心者にもわかるように書いてください。

良い例: 「社内の備品貸出を管理するツール」「お客さんの予約を受け付けるページ」

悪い例: 「すごいアプリ」「便利なやつ」（→ 具体性がないとAIも的確に答えられません）

ステップ2: AIの回答を確認する

AIが返してくれた表を見て、以下をチェックしましょう。

• データの欄に「何を保存するか」が具体的に書かれているか？
• 処理の欄に「どんなルールや計算があるか」が書かれているか？
• 画面の欄に「ユーザーが何を見て何を操作するか」が書かれているか？

足りない部分があれば、AIに追加で聞きましょう。

ありがとうございます。「処理」の部分をもう少し詳しく教えてください。
たとえば、データがこう変わるときに何が起きるか、具体的なシナリオで説明してもらえますか？

ステップ3: 自分の言葉で書き直す

AIの回答を参考にしながら、自分の言葉で3要素を書き出してみてください。これがこのレッスンの成果物になります。

書き方の例（備品貸出ツールの場合）:

■ データ
- 備品リスト（名前、個数、保管場所）
- 貸出記録（誰が、いつ、何を借りたか）

■ 処理  
- 「貸出」ボタンを押すと在庫数が1つ減る
- 返却期限を過ぎたらリマインドを送る

■ 画面
- 備品一覧ページ（在庫数つき）
- 貸出フォーム（名前・日付を入力）
- 貸出履歴ページ

---

---

よくある間違い1: 画面と処理を混同する

「ボタンを押したら注文が完了する」は処理の話です。「注文完了と書かれた画面が表示される」が画面の話です。処理は裏側で起きること、画面はユーザーの目に見えることと覚えましょう。

よくある間違い2: データの存在を忘れる

画面のデザインばかり考えて、「そもそもこの情報はどこに保存されているの？」を忘れがちです。表示したい情報があるなら、必ず保存場所（データ）が必要です。

よくある間違い3: AIに丸投げして終わる

AIの回答をそのままコピーするだけでは理解は深まりません。必ず自分の言葉で書き直すステップを飛ばさないでください。

---

以下の3つすべてに「はい」と答えられたら、このレッスンは完了です。

1. 分解できた: 自分が作りたいもの（または身近なアプリ）を「画面」「データ」「処理」の3つに分けて書き出せた
2. AIを使えた: AIツールに分解を依頼するプロンプトを実際に試し、回答を得られた
3. 自分の言葉にした: AIの回答をもとに、自分の言葉で3要素を整理したメモ（成果物）を作成できた

成果物として、自分で書いた3要素の分解メモのスクリーンショットを保存しておきましょう。