STEP 0: APIを自分の手で作る

フロント編で作ったアプリは、いまメンターが用意した仮の計算APIで動いています。 このガイドでは、その計算APIを AWS（Lambda + API Gateway）で自分の手で作り、この仮のAPIと差し替えます。

前提: フロント編 STEP 6（第一目標）まで完成していること

ゴールは「差し替えてもアプリの動きが1ミリも変わらないこと」。 仕様（契約）が同じなら、中身は丸ごと入れ替えられる ── これが「API仕様は契約」という、Web開発でいちばん大事な考え方です。

▼ 全体の構成 — 赤い枠が、このガイドで自分が作る部分
🖥️ あなたのフロントブラウザ（fetchで呼ぶ）
→
🚪 API GatewayAPIのURL（玄関）
→
⚙️ Lambda計算プログラム（Python）
→
🗄️ DynamoDB車種データ（拡張）

フロント編では「API Gateway + Lambda」の部分をメンターが用意したAPIが担当していた。今日からは自分のAWSアカウントの中で同じものを動かす ── 用意された Lambda に中身のコードを書き、API Gateway をつないでいく。
サーバーマシンを自分で建てる場面が1度も出てこないことに注目 ── これがサーバーレスと呼ばれる構成。「サーバーが無い」のではなく、AWSが裏で動かしてくれるので自分は管理しなくていい、という意味だ。

▼ 作るAPIの動き（契約）を体験 — アプリの代わりに、自分の手で本物のAPIを呼んでみよう
🔎 これは何の画面？

フロント編で「月々の支払額を計算する」ボタンを押すたび、あなたのアプリは裏でこのJSONをAPIに送り、 返ってきたJSONを結果カードに表示していた。 ここではアプリの代わりに自分の手で送ってみて、これから作るAPIの仕事を「裏側から」のぞいてみよう。

① リクエスト ＝ 計算ボタンを押したときにアプリが送っているJSON（数字は自由に書き換えてOK）

頭金を車両価格より大きくするなど、わざと変な入力で送るとどうなるかも見てみよう。 この「JSONを受け取り、計算して、JSONを返す」係を、STEP 1〜5 で自分のAWS上に作っていく。

🔬 本物の通信も、同じ形でのぞける（開発者ツール）
  1. フロント編で作った自分のアプリをブラウザで開き、開発者ツールを出す（F12 キー、または画面を右クリック →「検証」）→「Network（ネットワーク）」タブを開く
  2. 計算ボタンを押すと、一覧に calc という通信が1行現れる。クリックして中を見る
  3. 「ヘッダー」にステータス（200）、「ペイロード」に①のリクエストJSON、「応答」に②のレスポンスJSONが、いま上で体験したのと同じ形で入っている

この Network タブは「APIに何が届いて、何を返したか」を確かめる虫めがね。いま映っているのはメンターのAPIだが、STEP 4 で自分のAPIを作ったあとも、動作確認やエラーの切り分けでずっと使う。

▼ STEPごとにAPIを育てていく
STEP作るものクリアの条件
1Lambda関数を開いて動かすテスト実行で "Hello from Lambda!" が返る
2JSONを受け取り、JSONを返す送った値がそのまま返る（オウム返し）
3元利均等の計算ロジックテストで正しい計算結果が返る
4API GatewayでURLを付けるURLを叩くと計算結果が返る
5バリデーション（最終防衛）不正な入力に 400 とエラーを返す
6フロントのURLを差し替える🎉 第一目標クリア（仮のAPIを卒業）
7応用編 車種一覧API（GET /cars）URLを叩くと車種JSONが返る
8応用編 フロントの車種APIを差し替え🏆 第二目標クリア
9拡張 拡張課題（好きなお題に挑戦）🚀 天井なし

STEP 6 までが全員のゴール。STEP 7〜9 は、余力があればチャレンジ！

進め方のルール
① AWSコンソールの画面は更新で変わることがある。見つからないボタンはメンターに聞こう
② コードはまず自分で書いてみる。詰まったらメンターに声をかけてパスワードをもらい、「🔒 答えのコード例」を開こう
③ クリアの条件を満たしたらメンターに見せて、次のSTEPへ

STEP 1: Lambda関数を開いて動かす

やることメンターが用意した自分用の計算用 Lambda（名前はメンターが伝える）を開き、最初から入っているコードをテスト実行する
到達チェックテスト実行が成功（緑色）になり、"Hello from Lambda!" が返る
学ぶことLambda ＝ サーバーを建てずに「関数のコードだけ」を動かせるサービス。書いたコードは「Deploy」を押すまで反映されない（このガイド最大のハマりポイント！）
📋 手順（AWSコンソール）
  1. メンターから配布されたアカウントで AWS コンソールにログインする
  2. 画面右上のリージョンが「東京 (ap-northeast-1)」になっているか確認する（違ったら切り替え）
  3. 上の検索バーで「Lambda」を検索して開く →「関数」の一覧を表示する
  4. 自分用に用意された計算用 Lambda（名前はメンターが伝える）をクリックして開く
  5. 「テスト」タブ → イベント名に test1 と入れて保存 →「テスト」を実行する

※ 関数そのもの（と動かすための権限）はメンターが事前に用意済み。あなたの仕事はこの中身のコードを育てること。

▼ 最初から入っているコード（まだ書き換えなくてOK。読んで意味を考えてみよう）
import json def lambda_handler(event, context): # TODO implement return { 'statusCode': 200, 'body': json.dumps('Hello from Lambda!') }

lambda_handler が「呼ばれたら実行される関数」。event に呼び出し時の情報（あとでフロントからの入力が入る）、 戻り値の statusCode と body がAPIの返事になる。フロント編で受け取っていたJSONは、この body の中身だった。

STEP 2: リクエストを受け取り、JSONを返す（オウム返し）

やることevent からリクエストの body を取り出し、そのままJSONで返す。テストイベントを「本番でフロントから届くのと同じ形」に作り変えて確認する
到達チェックテスト実行すると、テストイベントに入れた4つの値がそのまま返ってくる
学ぶことAPIの正体は「JSONを受け取り、JSONを返す関数」。届く body は「JSONの文字列」なので json.loads で辞書に変換してから使う
📋 手順
  1. 「テスト」タブでテストイベントの中身を、下の「テストイベント」のJSONに丸ごと書き換えて保存する
  2. コードを「bodyを取り出して、そのまま返す」ように書き換える（ヒント: json.loads と json.dumps）
  3. 「Deploy」を押してから「テスト」を実行する
▼ テストイベント（フロントの fetch から届くのと同じ形。body の中身が「文字列」になっている点に注目）
{ "body": "{\"vehiclePrice\": 3200000, \"downPayment\": 500000, \"annualRate\": 3.0, \"installments\": 60}" }
▼ Python で return する辞書と、ブラウザに届くHTTPレスポンスの関係
# Lambda が return する辞書（AWSのお作法） ブラウザに届く本物のレスポンス { "statusCode": 200, ──→ ステータス: 200 OK（返事の「合図」部分になる） "headers": { ... }, ──→ 返事のヘッダー（Content-Type など。CORSはAPI Gatewayが付けるのでLambdaでは不要） "body": "{ ... }" ──→ 返事の中身（フロントが res.json() で読むJSON） } # この変換をしてくれるのが API Gateway（STEP 4 で繋ぐ「玄関」）。 # STEP 0 で見た「ステータス: 200 OK」は、statusCode が変換されたあとの姿
⚠️ テストしても結果が変わらないときは、まず「Deploy を押したか」を疑おう。コードの編集はDeployするまで動いているコードに反映されない。
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 3: 元利均等の計算ロジックを実装する

やること下の公式をPythonで実装し、レスポンス5項目を仕様書どおりのキー名で返す
到達チェックSTEP 2 のテストイベントで実行すると、monthlyPayment が 48515 になる
学ぶこと計算はサーバー側の仕事（フロントは表示するだけ）。キー名は「契約」── 1文字でも違うとフロントの結果カードが壊れる。年利0%のときは公式が使えないので計算を分ける（ゼロ除算の回避）という、計算ならではのエッジケースも扱う
▼ 元利均等返済の公式（これをPythonにする）
# 月々の支払額（元利均等返済） 月額 = 借入額 × r × (1+r)^n ÷ ( (1+r)^n − 1 ) r = 年利 ÷ 12 ÷ 100 # 月利（例: 年利3.0% → 0.0025） n = 支払回数 借入額 = 車両価格 − 頭金 # ⚠️ 年利が 0 のときはこの公式が使えない（ゼロ除算）。「借入額 ÷ n」で別処理にする # 金額は round() で円単位の整数にする
▼ 正解のレスポンス（テストイベントの値で計算した場合。このとおりに返れば合格）
{ "monthlyPayment": 48515, "vehiclePrice": 3200000, "loanAmount": 2700000, "totalPayment": 3410900, "totalInterest": 210900 }

総支払額 = 月額 × 回数 + 頭金 ／ 利息合計 = 総支払額 − 車両価格。 この5つのキー名は、フロント編 STEP 6 で結果カードに表示していたものと同じ ── つまり仕様書（契約）そのもの。

🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 4: API GatewayでURLを付ける

やることAPI Gateway（HTTP API）を作り、POST /calc ルートを自分の Lambda に繋ぎ、CORS を設定する
到達チェック下のAPIテスターに自分のURLを入れて送信すると、計算結果が返ってくる
学ぶことAPI Gateway ＝ Lambda に「世界中から呼べるURL」を与える玄関。CORS ＝ ブラウザ（別のサイト）から呼ぶことを許可する設定で、忘れるとフロントから一切呼べなくなる定番ポイント
📋 手順（AWSコンソール）
  1. 検索バーで「API Gateway」を開く →「APIを作成」→「HTTP API」の「構築」
  2. 「統合を追加」→ Lambda を選び、自分の関数（calc-api-自分の名前）を指定。API名も calc-api-自分の名前
  3. ルートの設定: メソッド POST、リソースパス /calc
  4. そのまま進めて「作成」（ステージは $default・自動デプロイのままでOK）
  5. 左メニューの「CORS」を開いて設定する: Access-Control-Allow-Origin に *、Allow-Methods に POST と OPTIONS、Allow-Headers に content-type を追加して保存
  6. API の詳細画面に表示される「呼び出しURL」をコピーする。使うときは末尾に /calc を付ける（例: https://xxxx.execute-api.ap-northeast-1.amazonaws.com/calc）
▼ APIテスター — 自分のURLを入れて、本物のAPIを叩いてみよう（これは仮の動きではなく本当に通信します）
自分のAPIのURL（末尾の /calc を忘れずに）
リクエスト（POST で送るJSON）

STEP 5: バリデーション（最終防衛）を作る

やること不正な入力が来たら、計算せずに 400 + {"error": "メッセージ"} を返す処理を Lambda に追加する
到達チェック下のテスターで「頭金 ≧ 車両価格」を送ると、400 と日本語のエラーメッセージが返る
学ぶことフロントのチェック（STEP 4でやった）は「親切」、APIのチェックは「契約」。フロントのチェックは F12 から簡単に迂回できるため、クライアントの入力は信用しない ── サーバー側だけが信頼できる防衛線。これで二段構えが完成する
▼ ブロックする条件（仕様書で決まっているルール）
キールールエラーメッセージの例
vehiclePrice1 以上車両価格は1円以上で入力してください
downPayment0 以上、かつ車両価格未満頭金は車両価格未満で入力してください
annualRate0 以上（0% は有効な入力）年利は0%以上で入力してください
installments1 以上支払回数は1回以上で入力してください
💡 フロント編 STEP 4 で書いた入力チェックと同じ内容を、今度はPython側にも書く。「二度手間では？」と思ったら、F12 でフロントのチェックを通り抜ける方法をメンターに見せてもらおう。
▼ APIテスター — わざと壊れた入力を送って、自分のAPIがブロックすることを確認しよう
自分のAPIのURL
リクエスト
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 6: フロントのURLを自分のAPIに差し替える

やること自分のフロント（app.js）の API_URL を、メンターのAPIのURLから自分のAPIのURLに書き換える。変更はこの1行だけ
到達チェック🎉 第一目標クリア ── 自分のアプリが、自分の作ったAPIで動く。見た目の動きが何も変わらないことこそが成功
学ぶこと仕様（契約）が同じなら、中身は丸ごと差し替えられる。仮のAPIを先に用意してフロントとバックを並行開発するのは、実務でも定番の進め方
▼ 変更箇所はこの1行だけ
// 変更前: メンターが用意した仮のAPI const API_URL = "https://intern.fs-arch.com/calc"; // 変更後: 自分が作ったAPI（STEP 4 でコピーしたURL + /calc） const API_URL = "https://xxxx.execute-api.ap-northeast-1.amazonaws.com/calc";
🔍 「本当に自分のAPIで動いている」ことを確認する（証跡の取り方）
  1. 自分のアプリをブラウザで開き、F12 → Network タブを開く
  2. 計算ボタンを押す
  3. 一覧に calc へのリクエストが出る。クリックして、宛先が自分のURL・ステータスが 200 であることを確認する
  4. この画面のスクショを撮っておくと、成果発表で「自分でAPIを作った証拠」として使える
▼ うまく動かないときの切り分け（エラー別の原因）
症状（Consoleタブ / Networkタブ）原因のあたり
赤い文字で「CORS policy」のエラーSTEP 4 の CORS 設定もれ（Allow-Origin / Allow-Headers）
ステータス 404URLの間違い。末尾の /calc を忘れていないか
ステータス 500Lambda のコードがエラーを起こしている（拡張課題のCloudWatchでログが見られる）
直したのに動きが変わらないLambda の Deploy 忘れ／ブラウザのリロード忘れ

STEP 7: 車種一覧API（GET /cars）を作る 応用編

やることメンターが用意した2つ目の Lambda（車種用）を開き、車種一覧を JSONで返すコードを書く（データはまずコードに直接置く）。API Gateway に GET /cars ルートを追加する
到達チェック下のテスターで自分のURLを叩くと {"cars": [...]} が返る
学ぶこと「データを返すだけのAPI」も calc と同じ作り方（受け取って・返すだけ）。データはまずコードに直接置いて動かし、本格的にDBへ移すのは STEP 9 の拡張。フロント編 STEP 7 で fetch した車種データの「出どころ」を、今度は自分で作る
📋 手順
  1. STEP 1 と同じ要領で、用意された車種用 Lambdaを開く
  2. 車種一覧を {"cars": [...]} の形で返すコードを書く（下の見本データを使ってOK）。Deploy も忘れずに
  3. API Gateway で STEP 4 と同じAPIを開き、「ルート」→「作成」→ メソッド GET・パス /cars → 統合に cars-api の Lambda を選ぶ
  4. CORS の Allow-Methods に GET が入っているか確認する（入っていなければ追加）
▼ 見本データ（この4つの属性がフロントの車種カードと対応している）
{ "name": "ヤリス", "category": "コンパクト", "price": 1697300, "imageUrl": "https://intern.fs-arch.com/cars/yaris.png" } { "name": "ハリアー", "category": "SUV", "price": 3710300, "imageUrl": "https://intern.fs-arch.com/cars/harrier.png" } { "name": "ノア", "category": "ミニバン", "price": 3261500, "imageUrl": "https://intern.fs-arch.com/cars/noah.png" } { "name": "アルファード", "category": "ミニバン", "price": 5599000, "imageUrl": "https://intern.fs-arch.com/cars/alphard.png" }
▼ APIテスター — GET なのでURLだけで叩ける（ブラウザのアドレスバーに貼っても見られる）
自分のAPIのURL（末尾は /cars）
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 8: フロントの車種APIを自分のAPIに差し替える 応用編

やることフロント（app.js）の CARS_API_URL を自分の GET /cars のURLに書き換える
到達チェック🏆 第二目標クリア ── 自分のアプリの車種一覧が、自分のAPIから取得した車に変わる
学ぶこと画面に並ぶデータの出どころが、自分で作ったAPIになった。フロントとバックの分離 ── 返す車種を変えても、フロントのコードは1行も触らなくていい
▼ 変更箇所はこの1行だけ（STEP 6 と同じ要領）
// 変更前: メンターの車種API const CARS_API_URL = "https://intern.fs-arch.com/cars"; // 変更後: 自分が作ったAPI const CARS_API_URL = "https://xxxx.execute-api.ap-northeast-1.amazonaws.com/cars";
🧪 仕上げの実験 — 「フロントとバックの分離」を体感しよう
  1. 自分のアプリを開いて、車種一覧が「自分のAPIから来た車」になっていることを確認する
  2. 車種用 Lambda のコードに車をもう1台追加して Deploy する
  3. アプリをリロードする → フロントのコードを触っていないのに車が増える

STEP 9: 拡張課題 — 好きなお題に挑戦しよう 拡張

やること下のメニューから好きなお題を選んで挑戦する。順不同・いくつでもOK。着手前にメンターに一言伝えよう
到達チェックなし。ここから先は天井なし 🚀
学ぶことここまでは「決められたものを作る」、ここからは「何を作るか自分で決めて作る」。実務にいちばん近い部分
▼ 拡張課題メニュー（答えはありません。メンターと相談しながら自走しよう）
お題難易度できると何が嬉しい？ヒント
車種データをDynamoDBに置く★★★ データを「コードの外」に出せる＝本物のWebアプリの構成。増やすのにコードを触らなくてよくなる DynamoDBにテーブル作成＋車種を登録 → 車種用 Lambda の固定リストを boto3 の table.scan() に置き換える。⚠️数値が Decimal 型で返るので int() 変換。DB読み取り権限はメンターが設定済み
バリデーションの強化★★ 「壊れた入力」への耐性が上がる＝APIの品質が上がる 数字以外が来たら？ キーが足りなかったら？ body がJSONですらなかったら？（try-except の出番）
フロントのCSSをブラッシュアップ★ 見た目が整う＝発表で「自分のアプリ」として見せやすくなる フロント編に戻って、配色・余白・レスポンシブ（スマホ幅）を整える。フロント編の拡張「デザイン磨き」とセット
自由課題？ 企画から自分でやる、いちばん実務に近い体験 「あったら便利」をメンターに提案して実装（例: ボーナス併用払い、返済スケジュールAPI など）
CloudWatchでログ探検
（任意・余力があれば）		★ 「サーバーで何が起きたか」を見られる＝障害調査の第一歩 Lambda のコードに print() を仕込む → CloudWatch Logs で見つける。500エラーの原因調査にも使える