A
AI開発の基本のキFor Non-Engineers · 2026
Lecture 05技術理解 — 第 3 章

Lecture 05Web/モバイルアプリの全体像

Webアプリとモバイルアプリに共通する、画面、API、サーバー、データベース、ストレージの関係を理解します。

読了の目安 約 6 分図解 準備中難易度

ECサイトで商品を買うときも、スマホの予約アプリで席を取るときも、 画面の裏では たくさんの部品が一斉に動いて います。 画面・サーバー・API・データベース・ストレージ。名前は耳にしたことがあっても、 それぞれの 役割 までは意外と整理されていません。

このレクチャーでは、Webアプリとモバイルアプリに共通する5つの登場人物を、 ECサイトや予約アプリを例にして一通り眺めます。今後のレクチャー（サーバー、API、データベース…）の地図になる回です。

1Webでもモバイルでも、裏側の地図は似ている

ブラウザで開くWebアプリと、スマホにインストールするモバイルアプリは、入口の形が違います。 WebはChromeやSafariなどのブラウザで使い、モバイルアプリはiPhoneやAndroidのアプリとして使います。

ただし、ログインする、予約する、投稿する、購入する、といった機能の裏側では、 どちらも API、サーバー、データベース、ストレージ とやり取りして、 ようやく1つの体験が成立しています。

全部を同時に理解しなくて大丈夫です。 まずは「Web画面やスマホ画面とサーバーは別物」「データはデータベース、画像はストレージ」という大ざっぱな地図を持ちましょう。

25つの登場人物

  • 画面（クライアント）：ユーザーが見て・触れる場所。Webならブラウザ画面、モバイルならスマホアプリ画面。
  • API：画面とサーバーが会話するための窓口。「これお願い」と渡し、「結果はこれです」を受け取る。
  • JSON：APIでよく使われるデータの書き方。注文票や申込フォームの内容を、コンピューターが読みやすい形にしたもの。
  • サーバー：依頼を処理する裏方。在庫確認・決済・データ保存などはここで動く。
  • データベース：ユーザー情報、注文情報、商品情報などの 整理されたデータ を保管する場所。
  • ストレージ：画像・PDF・動画など ファイル を保管する場所。
Note

データベースとストレージは別物

似ているようで役割は違います。 「テキストや数値の表」を扱うのがデータベース、「ファイルそのもの」を扱うのがストレージ、と覚えておけばOKです。 ECサイトでは商品名や値段はデータベース、商品の写真はストレージに置きます。

Tip

JSONはAPIの中を流れるメモ用紙

APIは「窓口」、JSONはその窓口で渡す「メモ用紙」のようなものです。 たとえば購入処理では、商品ID、個数、ユーザーIDなどをJSONの形にしてサーバーへ渡します。 JSONそのものはLecture 08で詳しく扱います。

3ECサイトで「購入ボタンを押す」と何が起きるか

実際の流れを追ってみましょう。普段なにげなく押している購入ボタンですが、 Webの商品ページでも、スマホアプリの商品画面でも、中ではこんなことが 0.数秒 の間に起きています。

  1. 画面：Webまたはモバイルの画面で「購入する」ボタンを押す。
  2. API：画面が「この商品を1つ購入したい」とサーバーへ伝える。
  3. サーバー：在庫を確認し、決済サービスに支払いを依頼する。
  4. データベース：注文情報（誰が何をいつ買ったか）を保存する。
  5. ストレージ：商品の写真は最初から表示するためにここから読み込まれている。
  6. 画面：「ご注文ありがとうございました」が表示される。
Figure 5.1Webとモバイルアプリに共通する裏側の構成
Webとモバイルの画面からAPI、サーバー、データベース、ストレージへつながる構成図
NoteWebとモバイルは入口の画面が違いますが、APIから先のサーバー、データベース、ストレージは共通して登場します。

4自分のよく使うアプリで考えてみる

画面、API、JSON、サーバー、データベース、ストレージは、Webアプリにもモバイルアプリにもよく登場します。 身近なアプリに当てはめてみると、覚えるよりも先にイメージが定着 します。

  • 予約アプリ：画面＝予約フォーム / DB＝予約一覧・店舗情報 / ストレージ＝店舗の写真。
  • SNSアプリ：画面＝タイムライン / DB＝投稿テキスト・ユーザー情報 / ストレージ＝投稿の画像や動画。
  • 家計簿アプリ：画面＝スマホの入力フォーム / DB＝支出一覧 / ストレージ＝レシート画像。
やってみよう · Exercise

よく使うアプリの中身を分解してみる

自分が普段よく使うアプリを1つ選び、5つの登場人物に当てはめて書き出してみましょう。 うまく書けないところはCodexに「この機能ならどこにデータがありそうですか？」と聞いてみるのがおすすめです。

  1. アプリを1つ選ぶ（例：食べログ、Amazon、Instagram、freee）。
  2. 次のテンプレを埋める。
    アプリ名:
画面（よく見るページ）:
データベースにありそうな情報:
ストレージにありそうなファイル:
  3. Codexに「このアプリが裏で使っていそうなデータベースとストレージを、初心者向けに説明してください」と依頼する。
進捗にチェックをつける →

5理解確認チェックリスト

  • Webアプリとモバイルアプリは入口が違っても、裏側の部品が似ていると説明できる。
  • 画面（クライアント）とサーバーの違いを説明できる。
  • APIが画面とサーバーをつなぐ窓口だと理解している。
  • JSONがAPIで渡すデータの書き方だと理解している。
  • データベース（整理されたデータ）とストレージ（ファイル）の違いを説明できる。
End of Lecture 05