AI連携アプリの基本構成を理解する

レストランで食事を頼む場面を思い出してみましょう。あなたはウェイターに注文を伝えます。ウェイターはそれを厨房に届け、シェフが料理を作ります。完成した料理はウェイターがあなたのテーブルまで運んできます。

AI連携アプリ（＝AIの力を借りて動くアプリ）も、これとそっくりな仕組みで動いています。このレッスンでは、その「注文→調理→配達」の流れをアプリの世界でどう見るかを一緒に確認し、さらにAIツールを使って自分の理解をまとめる練習をしていきましょう。

---

AI連携アプリは、大きく 3つの役割 で成り立っています。

1. ユーザー画面（＝お客さんの席） — あなたが操作する画面です。ボタンを押したり、文字を入力したりします。
2. つなぎ役（＝ウェイター） — ユーザーの入力を受け取って、AIに渡すための橋渡しをします。
3. AIの窓口（＝厨房） — 実際にAIが文章や画像などを生成して返してくれます。

この図では「ユーザー → つなぎ役 → AI → つなぎ役 → ユーザー」という往復の流れを表しています。この3層構造を頭に入れておくと、あとあと「どこでエラーが出ているか」を見つけやすくなります。

---

それぞれの役割には、技術の世界でよく使われる名前があります。今すべてを暗記する必要はありませんが、「ああ、あの役割のことだな」と思い出せる程度に知っておくと便利です。

---

たとえば、「質問を入力するとAIが答えてくれるチャットアプリ」を考えてみましょう。

1. あなたが質問を入力して「送信」ボタンを押す（ユーザー画面）
2. つなぎ役がその質問を受け取り、AIが読める形式に整えてからAIに送る（つなぎ役）
3. AIが回答文を作ってつなぎ役に返す（AIの窓口）
4. つなぎ役がその回答をユーザー画面に届ける（つなぎ役）
5. 画面に回答が表示される（ユーザー画面）

このサイクルが1回のやり取りで起きています。ChatGPTやClaudeを使ったことがある方は、まさにこの流れを体験しているのです。

---

「ユーザー画面からAIに直接つなげばいいのでは？」と思うかもしれません。しかし、つなぎ役には重要な3つの仕事があります。

• 安全を守る — AIに送る前に、個人情報などをチェックして取り除く
• 形式を整える — AIが理解しやすい形にテキストを加工する（プロンプト＝AIへの指示文 を組み立てる）
• 結果を保存する — やり取りをデータベース（＝情報を整理して保存する箱）に記録する

良い例と悪い例

良い例 — ユーザーが入力した質問から個人情報を自動でマスキング（＝見えないように隠すこと）してからAIに送る。これで安全にAIを活用できます。

悪い例 — ユーザーの入力をそのままAIに送ってしまう。もし顧客名や電話番号が含まれていたら、それが外部に漏れるリスクがあります。

---

ノーコード（＝プログラミングせずにアプリを作る方法）の世界では、この3層をそれぞれ別のツールで用意することが多いです。

良い例と悪い例

良い例 — Glideで質問フォームを作り、Makeで「質問を受け取る → OpenAIに送る → 結果をGlideに返す」という流れを組む。各ツールの役割が明確です。

悪い例 — すべてを1つのツールの中で無理に完結させようとして、ツールの機能では対応しきれずに失敗する。

---

ここからが今日の実践パートです。学んだ3層構造を、AIツール（ChatGPTやClaude）に手伝ってもらいながら自分の言葉でまとめてみましょう。

ステップ1: AIに質問してみる

ChatGPTまたはClaudeを開いて、次のプロンプト（＝AIへの指示文）をコピー＆ペーストしてください。

私はプログラミング初心者です。
「AI連携アプリ」の仕組みを、レストランのたとえを使って小学生にも分かるように説明してください。
「ユーザー画面」「つなぎ役」「AIの窓口」の3つの役割を必ず含めてください。

AIの返答が返ってきたら、このレッスンで学んだ内容と比べてみてください。「3つの役割」がちゃんと登場しているか確認しましょう。

ステップ2: 自分の言葉でまとめる

次に、AIの回答を参考にしつつ、自分なりのたとえ話で3層構造を説明する短い文章（5〜10行程度）を書いてみましょう。レストラン以外のたとえでもOKです。たとえば「郵便局」「コンビニの宅配受付」など、身近なものに置き換えてみてください。

書いたら、以下のプロンプトでAIにフィードバックをもらいます。

以下は、AI連携アプリの3層構造を自分の言葉でまとめたものです。
内容が正しいか、分かりやすいかをチェックして、改善点があれば教えてください。

---
（ここに自分の文章を貼り付ける）
---

ステップ3: 成果物として保存する

AIのフィードバックを反映して修正したら、その文章をテキストファイルやメモアプリに保存してください。これがこのレッスンの 成果物（＝あなたが作り上げたもの） です。

---

以下の3つの質問に、見返さずに答えてみましょう。声に出しても、紙に書いてもOKです。

1. AI連携アプリを構成する3つの役割は何ですか？ それぞれレストランのたとえで言うと何に当たりますか？
2. つなぎ役（バックエンド）はなぜ必要ですか？ 最低2つの理由を挙げてください。
3. ChatGPTやClaudeを使っているとき、あなたはこの3層構造のどこにいますか？

3つとも自分の言葉で答えられたら、このレッスンの目標は達成です！

---