STEP 0: はじめに — この研修の歩き方

ようこそ！ この研修では、Webアプリを自分の手で作って、世界に公開します。 まずこの導入編で全体像と準備を整えてから、フロント編へ進みましょう。技術の知識はまだ不要です。

▼ このガイドの使い方
📘 進め方
  • 左のサイドバーの STEP をクリックすると移動します（キーボードでも: Tab で移動 → Enter で開く）
  • サイドバー上の「編」切り替えで、フロント / バック / インフラ編へ行き来できます
  • 各STEPは「やること / 到達チェック / 学ぶこと」で要点が分かります

STEP 1: 全体像とゴール

やること作るものと、目指すゴール（2段階）を理解する
到達チェック第一/第二目標と、3編（フロント/バック/デプロイ）の関係を自分の言葉で言える
学ぶことこのプロジェクトの全体像
▼ 作るもの と ゴール

作るのは 「車種選択型 割賦シミュレーター」 ── マイカーローンの月々の支払額を計算するWebアプリです。

第一目標（全員必達）支払条件（車両価格・頭金・年利・回数）を入力 → 計算 → 結果を表示する
第二目標（余力で挑戦）車種カタログから選ぶと価格が自動で入る（応用編）

👀 これが完成イメージ（別タブで開きます）： 完成サンプル（割賦シミュレーター）

▼ この1つのアプリを「3つの編」に分けて作る
① フロント編画面・操作
→
② バックエンド編計算API・車種API
→
③ デプロイ編世界に公開
なぜ分けるのか？ 「見た目・操作（フロント）」「計算やデータ（バック）」「公開（デプロイ）」と役割を分けるのが本物のWeb開発だからです。フロントは計算ロジックを持たず、計算API（サーバー側のプログラム）を呼び出して結果を受け取ります。この計算APIはバックエンド編で自分で作ります（フロント編ではまず仮のAPIで動かし、あとで本物に差し替え）── フロントとバックの分担を1つのアプリで体験できます。

STEP 2: 10日間の流れ

やること10日間で、いつ何をするかの大枠をつかむ
到達チェック今日が全体のどこにあたるかが分かる
学ぶことスケジュール感
▼ スケジュール（全10日）
Day 1人事オリエンテーション・目標設定
Day 2現場（メンバー紹介・業務紹介・テーマ理解・環境構築）
Day 3〜5フロント編（画面づくり → 計算APIに接続 → 結果表示）
Day 6〜7バックエンド編（計算API・車種APIを自分で作る）
Day 8デプロイ編（S3 + CloudFront で公開）
Day 9まとめ・発表資料づくり・発表練習
Day 10午前: 人事座談会 ／ 午後: 成果発表
基礎学習（Udemy）は、研修の中で必要なところを見ながら進めます（見て → すぐ手を動かす）。早く終わったら前の工程に戻って磨くのもOK（一方通行にしません）。

STEP 3: 前提知識（事前学習）

やること必要な前提知識と、その学び方を確認する
到達チェック「何を知っていれば進めるか」「分からないときどうするか」が分かる
学ぶこと学習の進め方
▼ 必要な基礎

HTML / CSS / JavaScript の基礎は Udemy で学べます。HTML が未経験でも大丈夫 ── 各STEPを進めながら、必要なところを Udemy で見て、すぐ手を動かす形で身につけます。

HTMLタグで画面の「部品」を置く（入力欄・ボタンなど）
CSS色・余白・並びで「見た目」を整える
JavaScriptボタンを押したときの「動き」を付ける

研修ならではの部分（fetch でAPIを呼ぶ・入力チェックなど）は各編で丁寧に説明します。基礎を全部覚えてから始める必要はありません。

▼ 詰まったときは
🆘 分からなくなったら
  1. まず Udemy や公式ドキュメントを見返す
  2. ブラウザの F12（エラー表示）を読む（STEP 4 で説明）
  3. メンターに聞く ── 遠慮はいりません。詰まったら早めに相談しましょう

STEP 4: 環境構築

やることコードを書いて、すぐ画面で確認できる状態を作る
到達チェック自分のHTMLが Live Server でブラウザに表示できる
学ぶこと開発の基本サイクル（書く → 保存 → 確認）
▼ セットアップ手順 （画像はクリックで拡大）

1VSCode（エディタ）をインストール

公式サイト code.visualstudio.com/download から「Windows 10, 11」を選んでDL → .exe を実行。基本は「次へ」で進めてOK。「追加タスクの選択」画面だけ、次のチェックを入れておくと便利：

  • ✅ デスクトップ上にアイコンを作成する ── デスクトップから起動できて分かりやすい
  • ✅ PATH への追加（デフォルトでON。そのままにする）
  • その他（エディターとして Code を登録 など）はデフォルトのままでOK
VS Codeインストーラの「追加タスクの選択」画面。「デスクトップ上にアイコンを作成する」「サポートされているファイルの種類のエディターとして Code を登録する」「PATH への追加」にチェックが入った状態

完了したら VSCode を起動する。

2拡張機能 Live Server をインストール

左サイドの拡張機能アイコン →「Live Server」を検索 → Install。

Live Server 拡張機能（作者 Ritwick Dey）の詳細ページ。ロゴ・評価・操作ボタン・詳細/機能/変更ログのタブが表示されている

3自分の作業フォルダを作り、最初のHTMLを Live Server で開く

この先のコードはすべて自分のPCのフォルダに書く（このガイドはブラウザのURLで読むだけ ── 手元に用意するのは「自分のコードを書く場所」だけでOK）。次の3つをやってみよう：

  • デスクトップなどに作業用フォルダ（例: kappu-app）を新規作成し、VSCodeで「ファイル → フォルダーを開く」で開く
  • そのフォルダに index.html を新規作成し、<h1>こんにちは</h1> など簡単な中身を書いて保存する
  • index.html を右クリック →「Open with Live Server」→ ブラウザに表示されればOK（保存するたびに自動で更新される）。このフォルダを次のフロント編でそのまま育てていく

4ブラウザで F12 → DevTools（開発者ツール） を開く

ブラウザに最初から付いている開発者向けの道具箱。「なぜ動かない？」を自分で調べるための最強の武器です（開き方: F12 または 画面を右クリック →「検証」）。研修でよく使うのは次の3つ：

タブ何が見える研修で使う場面
Console
（コンソール）		 赤いエラーメッセージ、console.log() の出力、その場でJSを試し打ち 動かない時にまず開く。赤い文字を読めば原因の大半が分かる
Network
（ネットワーク）		 サーバーとの通信を1件ずつ（宛先URL・ステータス・送ったデータ・返ってきたデータ） fetch が成功(200)か失敗(400)か、APIに何を送り何が返ったかを確認
Elements
（要素）		 表示中ページのHTMLタグとCSS。その場で書き換えて見た目を試せる タグの入れ子を確認、CSSを一時的にいじって調整の当たりを付ける
見本アプリで「計算する」を押し、DevTools の Network タブに calc への通信（POST・ステータス 200 OK）が表示されている画面

STEP 5: 準備完了チェック

やることスタート前の最終確認
到達チェック下が全部できていれば準備完了 🎉
学ぶこと—
▼ スタート前チェック
✅ チェックリスト
  • 作るもの・第一/第二目標・3編の関係を理解した（STEP 1）
  • 10日間の流れと、今日の位置が分かる（STEP 2）
  • 環境構築できた＝Live Server で自分のページが開ける（STEP 4）
  • AWSアクセスをメンターから受け取った

準備ができたら、いよいよ画面づくりです。

フロント編へ進む →