実行方式とクラウド（手を動かす）

概要

日程: Day 3 / セッション 09
時間: [14:40-15:10]
形式: 実習
ゴール: ネイティブ／Web／モバイル／クラウド（SaaS/PaaS/IaaS）の違いを表で説明し、curlまたはDevToolsで簡単なHTTPリクエストを1回以上実行できる
学習形式: ハンズオン実習

導入（5分）

設計した通り（REST API）にUIから機能を呼び出すには、両者が「どこで」動くかを決める必要があります。スマホアプリで動かすのか、Webブラウザで動かすのか、サーバはどこに置くのか、クラウドを使うのか自社サーバか。

これを「実行方式（Execution model）」と呼びます。今日はそれを実際にcurlコマンドで体験してみます。手を動かすと「APIってこういうことか」が一気に腑に落ちます。

本編（10分）

1. 実行方式の分類

flowchart TD UI["クライアント
(実行方式)"] UI --> N["ネイティブアプリ
(Windows .exe / Mac .app)"] UI --> W["Webアプリ
(ブラウザで動く)"] UI --> M["モバイルアプリ
(iOS / Android)"] UI --> H["ハイブリッド
(React Native / Flutter)"]

種別	例	強み	弱み
ネイティブ	デスクトップ版Slack	高速・OS機能フル活用	配布・更新が面倒
Web	GitHub、Gmail	配布不要、即更新	OS機能の制限
モバイル	各種スマホアプリ	プッシュ通知・カメラ等	OS別開発
ハイブリッド	React Native製アプリ	1コードで複数OS対応	完全ネイティブほどではない

2. サーバ側の実行環境（クラウド）

クラウドは「自社で物理サーバを買わず、他社のリソースを借りる」モデル。主に3階層に分かれます。

flowchart LR I["IaaS
(基盤を借りる)
例: AWS EC2"] --> P["PaaS
(実行環境を借りる)
例: Heroku, Vercel"] P --> S["SaaS
(完成品を借りる)
例: Gmail, Slack"]

層	名前	借りる範囲	自分でやる範囲	例
SaaS	Software as a Service	アプリ全体	設定のみ	Gmail、Slack、Notion
PaaS	Platform as a Service	OS+ミドル+実行環境	アプリ本体	Heroku、Vercel、GAE
IaaS	Infrastructure as a Service	仮想マシン	OSから上	AWS EC2、GCP Compute Engine

たとえで言えば：

IaaS = キッチン付き物件を借りて、料理は全部自分でやる
PaaS = 食材と調理器具まで揃った料理教室
SaaS = レストランで完成料理を食べる

コラム

「クラウド（Cloud）」という言葉は、ネットワーク図でインターネットを「雲のマーク」で描いていたことに由来します。2006年、Google CEOのエリック・シュミットが講演で使い、AWSが同年にEC2をリリースしたことで一気に広まりました。今や「クラウドファースト」という言葉があるほどで、新規開発はクラウド前提が当たり前になりました。

3. 実行方式の選び方

自チームの開発テーマで何を選ぶか考えるための判断軸：

質問	YESなら
スマホで使う？	モバイル or ハイブリッド
複数OS対応したい？	Web or ハイブリッド
プッシュ通知・GPS等のOS機能を使う？	ネイティブ or ハイブリッド
短期で動くものを作りたい？	Web + PaaS（Vercel等）
学習用、小規模、無料で動かしたい？	Web + 無料PaaS

研修では「Web + PaaS（Vercel/Heroku等）」または「Web + apiary（Day 4で使用）」が多くなります。

ここがポイント

実行方式は1度決めると変えにくいので、ペルソナの利用シーンから逆算します。「電車内でサクッと使う」ならモバイル、「腰を据えて編集する」ならWebデスクトップ、というように。

💬 AIに聞いてみよう

ここまでの内容で疑問があれば、AIに質問してみましょう。たとえば：

「IaaSとPaaSの違いを、自分の開発テーマで具体的に教えて」
「AWS、Azure、GCPの違いは何？どれを選べばいい？」
「PWA（Progressive Web App）って何？ネイティブとどう違う？」

実習（10分）

課題

A. curlでHTTPリクエストを送る

ターミナルを開いて、以下のコマンドを実行してください。

# 1. GETリクエスト: 公開APIで気象情報を取得
curl https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.69&current_weather=true

# 2. レスポンスを整形して表示（jqがあれば）
curl -s https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.69&current_weather=true | jq

# 3. ヘッダ込みで詳細表示
curl -i https://api.github.com/users/octocat

B. ブラウザのDevToolsで確認

Chromeで適当なサイト（例: github.com）を開く
F12でDevToolsを開く
Networkタブを開いた状態でページをリロード
リクエスト1つをクリックし、HeadersとResponseを見る

成果物

curlコマンドの実行結果（スクリーンショットまたはコピー）
DevToolsで観察した1リクエストのHTTPメソッド・ステータスコード・Content-Type のメモ
自チームの実行方式（クライアント側・サーバ側）の選択メモ

ヒント

curlがない場合: WindowsはGit Bashにcurl同梱、Macは標準搭載、Linuxはapt install curl
jqがない場合: ブラウザでURLを開いて整形済みJSONを見ても可
DevToolsでリクエストが多すぎる場合: 「Doc」フィルタで絞ると見やすい

発展課題

POST リクエストを送ってみる: curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' https://httpbin.org/post

まとめ（5分）

実行方式はクライアント側（ネイティブ/Web/モバイル/ハイブリッド）とサーバ側（IaaS/PaaS/SaaS）で分けて考えます。多くの研修プロジェクトでは「Web + PaaS」が現実解。curlとDevToolsで、HTTPの中身を実際に見ると、API設計の感覚が掴めます。

次のセッションでは「開発手法」を学びます。ここまでDay 3で「設計→永続化→通信→実行方式」と決めてきましたが、それを「どんなプロセスで作るか」が最後のトピックです。

🔄 振り返りチェック

ネイティブ／Web／モバイル／ハイブリッドの違いを表で説明できますか？
IaaS / PaaS / SaaS の違いを「料理のたとえ」で説明できますか？
curlかDevToolsでHTTPリクエストを1回以上実行できましたか？

補足資料

参考リンク: curl公式 https://curl.se/、httpbin（テスト用エンドポイント） https://httpbin.org/
発展課題: 自分のスマホで使うアプリ3つを、ネイティブ/Web/ハイブリッドに分類してみる

学習ガイド

想定される質問と回答例

質問	ヒント
サーバレス（FaaS）って何？	PaaSの一種。関数単位で実行（AWS Lambda、Vercel Functionsなど）。アイドル時はゼロ課金
クラウドって本当に安いの？	小〜中規模なら安い。超大規模（Netflix級）になると自社運用のほうが安いことも
curlとPostmanはどっち使うべき？	curl=軽量・スクリプト化向き、Postman=GUI・チーム共有向き。両方使えると強い

つまずきやすいポイント

つまずきポイント	ヒント
curlが動かない	インストール確認、`curl --version`で動作確認。Windowsはコマンドプロンプトでも動く
JSONレスポンスが読みづらい	`
クラウド3層の違いが覚えにくい	「自分でやる範囲がどこまで？」で覚える。SaaS=ほぼなし、IaaS=ほぼ全部