STEP 0: このガイドで作るもの

STEP 1〜6 で「割賦（かっぷ）シミュレーター」を作ります。 車の価格や頭金を入力すると、月々の支払額を計算してくれるWebアプリです。 当社が実際に行っている割賦管理の、いちばん身近な入口になるアプリです。

前提: Udemy で HTML / CSS / JS の基礎を学んでから取り組む

まずはこのすぐ下にある完成形を動かしてみてください。 「これを自分で作るのか」というイメージを持ってから STEP 1 に進みましょう。

▼ 完成形（第一目標）— 実際に動かしてみよう！
円
円
%
回

※ 応用編（STEP 7〜9）まで進むと、ここに「車種を選ぶと価格が自動で入る」機能が加わります（完成形は STEP 7 の冒頭で動かせます）

▼ STEPごとにアプリを育てていく
STEP作るものクリアの条件
1入力フォームの構造（HTML）入力欄とボタンが並ぶ（見た目は素朴でOK）
2見た目を整える（CSS）入力欄がきれいに並ぶ
3入力値の取得（JS）入れた数字がポップアップに出る
4APIを呼んで計算月々の支払額がポップアップに出る（変な値はAPIに弾かれる）
5送る前にフロントで入力チェックおかしな入力はAPIに送らずその場でエラー
6結果カードに表示🎉 第一目標クリア
7応用編 車種データをAPIから取得車種一覧が取得できる
8応用編 車種を画像カードで並べるカードで一覧表示される
9応用編 カードをクリックして価格を自動入力🏆 第二目標クリア
10拡張 拡張課題（好きなお題に挑戦）🚀 天井なし

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

進め方のルール
① 各STEPの見本は自由に動かして確認してOK
② コードはまず自分で書いてみる。詰まったらメンターに声をかけてパスワードをもらい、「🔒 答えのコード例」を開こう
③ クリアの条件を満たしたらメンターに見せて、次のSTEPへ

STEP 1: HTMLで入力フォームの構造を作る

やることindex.html / style.css / app.js の3ファイル構成で進める（<link> と <script> で繋ぐ・Udemyでやった構成）。index.html の <body> に form / input / button で4つの入力欄とボタンを作る
到達チェック画面に入力欄とボタンが並ぶ（素朴な見た目でOK。整えるのは次のSTEP）
学ぶことSTEP 1〜2 は Udemy でやったことを自分のアプリで再現するウォームアップ。ポイントは id ── あとで JS から部品を探す「名前」になる
▼ この時点でのアプリの見た目（ブラウザの素の表示。これで正解！）
<!-- ポイント: type="button" にしないと submit でページがリロードされる（定番ハマりポイント） --> <button type="button">月々の支払額を計算する</button>
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 2: CSSで見た目を整える

やることstyle.css に自分でCSSを書いて、色・余白・並びを整える（Udemyでやった書き方でOK。デザインは自由）
到達チェック入力欄が整って並び、ボタンらしい見た目になる（見本そっくりでなくてよい）
学ぶことデザインの磨き込みは時間が溶けるので、まずは「整っている」レベルでOK。こだわりたくなったら拡張課題として後で戻ってくるのがおすすめ
▼ 見本: ここまで整えば十分（同じにする必要はなし。自分の色でOK）
円
円
%
回

STEP 3: 入力値をJSで取得し、ボタンでアラート表示

やることapp.js に書く。ボタンのクリックイベントで input の値を取り、alert で表示する
到達チェック入れた数字がそのままポップアップに出る
学ぶことUdemyでやった DOM 取得（getElementById）とイベント（addEventListener）を、自分のアプリで実際に使う
▼ この時点でのアプリの動き（ボタンを押してみてください）
円
円
%
回
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 4: 仮のAPIを叩いて結果をアラート表示

やることSTEP 3 の処理を、配布ひな形の calc 関数（入力値をAPIに送る → 返ってきた月々の支払額をalert）に差し替える
到達チェック月々の支払額がポップアップに出る（計算はAPI側がやる）。マイナスを入れて押すと、APIからエラーが返ってくることも確認
学ぶことfetch＝JSからAPI（サーバー側の機能）を呼ぶ命令。非同期通信＝結果が返ってくるまで少し待つ通信。ステータスコード＝APIの返事の種類（200=成功 / 400=入力がおかしい）。おかしな値も、いまは毎回サーバーまで往復してから 400 で弾かれている
▼ 完成するとこう動く（マイナスや空欄でも押してみよう ── APIに弾かれる。※下の見本は動きの確認用）
円
円
%
回
📡 自分のページで使うAPIのURL（全員共通・メンターが用意した仮のAPI）
https://intern.fs-arch.com/calc

POST で送る。バック編で「自分のAPI」を作ったら、このURLを自分のものに差し替える。

⚠️ fetch を使うこの STEP からは、必ず Live Server で開くこと（導入編 STEP4 で入れた拡張機能）。ファイルをダブルクリックして直接開くと、ブラウザが通信をブロックして API を呼べない。うまく計算できないときは、VSCodeで index.html を右クリック →「Open with Live Server」で開き直そう。

🔒 このSTEPはひな形を配布: fetch のコードを見る（要パスワード）
🔒 パスワード解除後にここにひな形が表示されます

STEP 5: 送る前にフロントで入力チェックする

やることcalc 関数の先頭に空欄・マイナス値の if文チェックを追加し、おかしい入力はAPIに送る前にその場で止める。最後にテスト仕様書（Excel・配布）で動作確認のエビデンスを残す
到達チェックおかしな入力はAPIに送られず、その場でエラーが出る。テスト仕様書＋エビデンスをメンターに提出
学ぶことバリデーションは二段構え ── フロント＝送る前に止める「親切」（すぐ出る・無駄な通信が減る）/ API＝最終防衛（クライアントの入力は信用しない）。そして金融系の開発では「動いた」ではなく「動いた証跡」を残すのが当たり前 ── テスト文化を体験しよう
▼ この時点でのアプリの動き（空欄やマイナスは送信前に止まる＝API呼び出し中が出ない。正しい値なら STEP 4 と同じ）
円
円
%
回
🧾 仕上げ: テスト仕様書でエビデンスを残す

📥 テスト仕様書をダウンロード（Excel）

  1. 上のボタンからテスト仕様書をダウンロードする（書き方は「記入例」シートとケース1を参照）
  2. 条件を考える（ここが本体）: 用意されているのは「正の数・空欄」だけ。他にどんな入力を試すべきかを考えて、空き行に条件と代表値を追加する
  3. ケースを作って実施: 1列＝1ケース。項目ごとに条件1つへ Y・残りに －、下に期待結果 → 実施して結果（○/×）とスクショNoを記入（スクショは「エビデンス」シートへ）
  4. 考えた条件すべての行に Y が付いたら提出し、メンターに確認者欄を記入してもらってクリア
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

STEP 6: alertをやめて結果カードに表示する

やることAPIのレスポンス5項目を、alertではなく画面の結果カードに書き込む
到達チェック🎉 第一目標クリア（フロント完成）
学ぶことAPIの返事のキー（monthlyPayment など）と結果カードが1対1対応していることに注目
▼ 完成するとこう動く（＝このガイドの第一目標！見本は仮の動き）
円
円
%
回
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます

応用編 はじめに：車種を選んで価格を自動入力 第二目標

ここからは応用編（第二目標）です。STEP 6 まで手入力していた「車両価格」を、 車種カードを選ぶだけで自動入力できるようにします。 （余力があれば挑戦 ── 必達ではありません）

まず下の完成形を動かしてゴールのイメージをつかみましょう。そのうえで、次の3ステップで1つずつ積み上げていきます：

STEPやることゴール
7車種データをAPIから取得する一覧が取得できる
8取得した車種を画像カードで並べるカードで一覧表示される
9カードのクリックで価格を自動入力🏆 第二目標クリア

※ 下の完成形は「取得→描画→クリック」が全部入った最終形。STEP 7〜9 でこの状態まで育てます。

▼ 応用編で作る完成形（第二目標）— 車種カードを選ぶと価格が入り、そのまま計算できる
円
円
%
回

STEP 7: 車種データをAPIから取得する 応用編

やることメンター提供の車種一覧API（GET）を fetch で呼び、車種データが取得できることを確認する
到達チェック取得した車種一覧が確認できる（コンソールや画面に出る）。まだ見た目は不要
学ぶことGET の fetch（STEP 5 の POST より簡単）、APIから届くデータ（JSONの配列）の中身の読み方。車種データは自分のコードに書かない＝データはDB（DynamoDB）にあり、APIを通して受け取るのが本物のWebアプリの構成
▼ このSTEPでやること: その第一歩、「車種データの取得」（※下の見本は動きの確認用）
📡 自分のページで使う車種APIのURL（計算APIと同じサーバーの /cars）
https://intern.fs-arch.com/cars

GET で取得する。バック編で自分の /cars を作ったら、このURLを差し替える。

🔒 このSTEPはひな形を配布: 車種取得のコードを見る（要パスワード）
🔒 パスワード解除後にここにひな形が表示されます

STEP 8: 車種を画像カードで並べる 応用編

やることSTEP 7 で取得した車種データ（data.cars）を、1台ずつ画像付きカードにして画面に並べる（まだクリックの動きは付けない）
到達チェック取得した車種が、画像付きのカードで一覧表示される
学ぶことデータ（配列）から画面を作る基本＝forEach で1件ずつ createElement して並べる。画像は car.imageUrl を <img> に渡すだけ＝データのURLがそのまま絵になる
▼ 完成するとこう並ぶ（画像付きカード。この時点ではまだクリックしても何も起きません ── クリックの動きは STEP 9 で付けます）
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます
▼ ここから下は STEP 6 までに作ったアプリ（車両価格だけ自動入力に変わる）
円
円
%
回

STEP 9: カードをクリックして価格を自動入力 応用編

やることSTEP 8 で並べたカードに「クリックすると選択され、その車の価格が車両価格の欄に入る」動きを付ける
到達チェックカードを選ぶと車両価格に金額が入り、そのまま計算できる ＝ 🏆 第二目標クリア
学ぶことクリックイベント（addEventListener "click"）、classList による選択中の見た目の切り替え、選んだデータ（car.price）を入力欄に反映する流れ
作り方
  1. STEP 8 で作ったカード（data.cars.forEach の中）に click イベントを足す
  2. クリックされたら、全カードから選択中の見た目を外し、自分にだけ付ける（classList）
  3. 選ばれた車の car.price を車両価格の入力欄に入れる
▼ 完成するとこう動く（カードをクリックしてみてください）
🔒 詰まったら: 答えのコード例を見る（要パスワード）
🔒 パスワード解除後にここに答えが表示されます
▼ ここから下は STEP 6 までに作ったアプリ（車両価格だけ自動入力に変わる）
円
円
%
回

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

やること下のメニューから好きなお題を選んで挑戦する。順不同・いくつでもOK。着手前にメンターに一言伝えよう
到達チェックなし。ここから先は天井なし 🚀
学ぶことここまでは「決められたものを作る」、ここからは「何を作るか自分で決めて作る」。実務にいちばん近い部分
▼ 拡張課題メニュー（答えはありません。メンターと相談しながら自走しよう）
お題難易度できると何が嬉しい？ヒント
デザインの磨き込み★ 自分のアプリが「作品」になる。発表映えも◎ 色・フォント・hoverアニメ。車種カードや結果カードをこだわろう。エラーも alert をやめて画面に赤字で出そう
入力チェックの強化★★ 実務のバリデーション設計を体験できる 「頭金が車両価格以上ならエラー」「年利や支払回数に上限を設ける」「数値以外をはじく」など
返済スケジュール表★★★ 毎月の元金・利息の内訳が見える、金融アプリらしい機能 月ごとの行を動的に作って表にする（考え方は STEP 9 の forEach と同じ）
カテゴリフィルター★★★ 車種が増えても探せる、一段上のUIになる 「ミニバンだけ表示」ボタンを作る。配列の filter が鍵
別のUIでも作ってみる★★ 同じデータでも見せ方は何通りもある、というUIの引き出しが増える カードの代わりにプルダウン（<select>）やリスト（<ul>）で車種を選べるようにしてみる
自由課題？ 企画から自分でやる、いちばん実務に近い体験 「あったら便利」をメンターに提案して実装（例: ボーナス併用払い、月々の予算から車を逆引き）