（演習）apiaryでAPIモックを作って呼び出してみる

• 日程: Day 4 / セッション2
• 時間: [9:20-9:40]
• 形式: 実習
• ゴール: apiaryで簡単なRESTful APIモックを1つ作成し、JavaScriptから呼び出して結果を確認できる
• 学習形式: AIペアプログラミング

🗣️ 要約

• apiaryで架空のAPIエンドポイントを作り、JavaScriptから呼び出し、結果を画面かコンソールに表示する
• これが研修全体を通じて最初の「動いた！」の瞬間になる
• エラーが出ても問題なく、詰まったときの対処法もこのセッションで身につける

前のセッションで、apiary・Monaca・GitHubという3つの推奨ツールの役割を学びました。ここからは実際に手を動かします。

このセッションの20分間で、あなたは初めて「自分の書いたコードが、自分の作ったAPIからデータを受け取る」という体験をします。3日間、情報の整理・モデル化・設計思想の選択と、頭を使う時間が続きました。今日はいよいよ、それが画面の中で動きます。

やることはシンプルです。

• apiaryで架空のAPIエンドポイントを1つ作る
• JavaScriptからそのエンドポイントを呼び出す
• 返ってきたデータを画面かコンソールに表示する

たったこれだけですが、これが研修全体を通じて最初の「動いた！」の瞬間になります。エラーが出ても大丈夫です。むしろ出て当然だと思ってください。詰まったときの対処法もこのセッションでセットで身につけます。

🗣️ 要約

• apiaryでモックAPIを作り、JavaScriptのfetchで呼び出す、という2ステップで進める
• モックはあくまで仮の応答であり、本物のデータベース設計まで完璧にする必要はない

🗣️ 要約

• apiaryは実サーバーを立てずにAPIの仕様（モック）を先に作れるツール
• フロントエンドとバックエンドが仕様を先に決めて並行作業できるようにする道具
• モックは「仮の応答」であり、細部の完成度より今日動かすことを優先する

apiaryは、実際のサーバーを立てなくても「こういうAPIがあるとしたら、こう応答する」という仕様（モック）を先に作れるツールです。

料理に例えると、apiaryは「メニュー表」のようなものです。まだ厨房（本物のサーバー）ができていなくても、メニュー表（API仕様）さえあれば、お客さん役（フロントエンドの開発者）は「これを注文したらこれが出てくるはず」という前提で先に動き始められます。

たとえば開発テーマが「レシピ類推サービス」なら、GET /recipes にアクセスすると、レシピの一覧をJSON形式で返す、というモックを定義します。これは該当しますが、実際にデータベースへ保存する処理を作ることはこの段階では該当しません。なぜなら、今はまだ「見た目の約束事」を先に決める段階だからです。

ここで少し考えてみてください。もしメニュー表（API仕様）が先になかったら、料理担当（バックエンド）とホール担当（フロントエンド）は、どちらから手をつければよいでしょうか。おそらくお互いを待つことになってしまいます。apiaryはこの「待ち」をなくす道具です。

apiaryで定義する簡単なAPI仕様のイメージ（Blueprint記法の一部）:

# GET /recipes
+ Response 200 (application/json)
    [
        { "id": 1, "name": "肉じゃが" },
        { "id": 2, "name": "カレーライス" }
    ]

特に注意してほしいのは、モックはあくまで「仮の応答」であることです。よくある間違いとして、モックの段階で本物のデータベース設計まで完璧にしようとして時間を使いすぎるケースがありますが、正しくは「今日動かして確認する」ことを優先し、細部は後から調整すれば十分です。

🗣️ 要約

• JavaScriptのfetch関数でモックAPIにアクセスし、response.json()で結果を受け取る
• このコードを実行してコンソールにレシピ一覧が表示されるのが、今日最初の「動いた！」

作ったモックAPIに対して、JavaScriptのfetch関数でアクセスしてみます。

これは、電話をかけて注文を伝え、答えを聞くようなものです。fetchが電話をかける動作、返ってきたjson()が相手の答えを聞き取る動作にあたります。

fetch("https://xxxx.apiary-mock.com/recipes")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("エラーが発生しました:", error));

このコードをブラウザのコンソール、またはHTMLファイルに埋め込んで実行すると、apiaryが返すレシピ一覧がコンソールに表示されます。これが今日最初の「動いた！」です。

ここまでで、APIを呼び出すコードのイメージはできましたか。分からない部分があれば、次の「AIに聞いてみよう」を活用してください。

apiaryのようなAPIモックツールが広まった背景には、Web開発が「フロントエンドチーム」と「バックエンドチーム」に分業化していった歴史があります。昔は1人、あるいは1チームが画面もデータベースも全部作っていましたが、システムが複雑になるにつれて分業が進みました。すると「バックエンドが完成するまでフロントエンドは何もできない」という待ち時間が問題になり、それを解消するために「先に仕様だけ決めて、双方が並行して作業できるようにする」という考え方が生まれました。今日のあなたたちの体験は、まさにこの歴史の縮図です。

🗣️ 要約

• fetchのthenが2つ続く理由、CORSエラーへの対処、apiary以外のツールでの同様の実現方法などをAIに質問できる

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

• 「fetchのthenが2つ続くのはなぜ？」
• 「CORSエラーが出たけどどうすればいい？」
• 「apiaryではなく別のツールで同じことをするには？」

🗣️ 要約

• apiaryでAPIエンドポイントを1つ作成し、JavaScriptのfetchで呼び出し、結果を表示する演習

🗣️ 要約

• apiaryで開発テーマに関連するAPIエンドポイントを1つ作成する
• fetchでアクセスするコードを書き、取得したデータをコンソールまたは画面に表示する

1. apiaryで、開発テーマに関連するAPIエンドポイントを1つ作成する（例：一覧を返すGETエンドポイント）
2. 作成したエンドポイントに対して、JavaScriptのfetchでアクセスするコードを書く
3. 取得したデータをブラウザのコンソール、または簡単なHTML画面に表示する

🗣️ 要約

• 動作するAPIモック（Blueprint）、呼び出し用JavaScriptコード、データ表示のスクリーンショット

• 動作するAPIモック（apiary上のBlueprint）
• 呼び出し用のJavaScriptコード（1ファイル）
• コンソールまたは画面にデータが表示されているスクリーンショット

🗣️ 要約

• うまくいかないときはapiaryのモックURLが正しいか確認する
• CORSエラーが出たらAIに状況を伝えると解決策が得られる
• データがundefinedになるのはresponse.json()のawaitや.then()の書き忘れが多い原因

• うまくいかない場合は、apiaryのモックURLが正しくコピーされているか確認してみてください
• 「CORS」というエラーが出たら、AIに「fetchでCORSというエラーが出た」と伝えると解決策を教えてもらえます
• データがundefinedになる場合は、response.json()のawaitまたは.then()の書き忘れがよくある原因です

🗣️ 要約

• 仕様を先に決めれば、実装は並行して進められる
• 今日体験したapiaryとfetchの組み合わせが、次のセッションの実装の土台になる

今回学んだことを一言でまとめると、「仕様を先に決めれば、実装は並行して進められる」です。今日体験したapiaryとfetchの組み合わせは、次のセッションで作る本格的な実装の土台になります。

次回は開発テーマに沿った実装に入ります。今回の「動いた！」という感覚を忘れずに、情報の設計とシステムの設計を分離するという意識を持って進みましょう。

🗣️ 要約

• apiaryでAPIモックを作る目的を説明できるか
• fetchで取得したデータをコンソールに表示する手順を説明できるか

以下の問いに答えられるか確認してみましょう：

• apiaryでAPIモックを作る目的を説明できますか？
• fetchで取得したデータをコンソールに表示する手順を説明できますか？

答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。

🗣️ 要約

• 参考資料はapiary公式ドキュメント（Blueprint記法）
• 発展課題はPOSTエンドポイントも定義し、データを送信するコードを書くこと

• 参考リンク: apiary公式ドキュメント（Blueprint記法）
• 発展課題: GETだけでなくPOSTエンドポイントもapiaryで定義し、データを送信するコードも書いてみましょう

🗣️ 要約

• 受講者からよく出る質問への回答例と、つまずきやすいポイントへの対処法をまとめている

このセクションは、受講者が理解を深めることをサポートする参考情報です。

🗣️ 要約

• apiaryは仮の応答を返すモックであり、実際のデータ保存はできない
• fetchはPromiseベースの標準API、ajaxはjQueryの$.ajaxなどを含む総称的な概念

🗣️ 要約

• CORSエラーは、URLの打ち間違いやhttpsの記載漏れが原因になりやすい
• response.json()のパース処理を忘れてdataが取得できないことがある