01 / IT FOUNDATION
この講座で、何をできるようにするか。
画面・API・DBをつなぐ小規模な予約アプリを作り、入力検証と認証・認可の境界を説明する。
目安30時間。説明・調査・演習・成果物作成・レビューを含む学習計画です。本文を読むだけでこの時間の実習を完了したことにはなりません。進み方と経験に応じて調整します。
学習目標と確認ポイント詳しく見る
- HTML・CSS・JavaScriptを説明し、入力フォームと画面仕様を作る。
- JSONとAPIの契約を説明し、API仕様書を作る。
- CRUDとDBの連携を説明し、CRUDの実装と検証結果を作る。
- 入力検証とエラーを説明し、検証条件と異常系の表を作る。
- 認証・セッション・認可を説明し、権限表とテストケースを作る。
- 小さくつないで確認するを説明し、動作する小規模アプリとデモ記録を作る。
ブラウザーで本文・アニメ・問題を確認できます。実機演習は会社が用意した学習環境を使い、Python・Linux・Git・DB等の準備状況を確認してから進めます。
Python・SQL・ログ・架空パケット表・テスト・APIのスターターと説明書を同梱しています。APIは認証・認可等を受講者が追加する未完成の学習用で、公開用完成品ではありません。
共通演習キットをダウンロード
02 / IT FOUNDATION
仕組みを理解し、手を動かして確かめる。
HTML・CSS・JavaScript
詳しく見る
学習ブロック 1 / 目安5時間（説明・調査・演習・記録・レビュー）
HTMLは文書の意味や構造、CSSは見た目、JavaScriptは動作の実装に使います。見出しやラベルなどの意味を保ち、キーボードでも操作できる画面にします。ブラウザー内の入力チェックだけでサーバー側の検証を省略しません。
予約フォームにラベル、日付、人数、エラー表示を設計し、クリック以外の操作も確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
JSONとAPIの契約
詳しく見る
学習ブロック 2 / 目安5時間（説明・調査・演習・記録・レビュー）
APIは受け取るメソッド、パス、値、戻り値、状態コードの契約を決めます。JSONでは文字列、数値、配列、真偽値等を区別します。画面とサーバーで必須項目や型が食い違うと、連携時に問題が起こります。
予約作成APIへ必要項目と成功・失敗のJSON例を書き、画面側と突き合わせる。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
CRUDとDBの連携
詳しく見る
学習ブロック 3 / 目安5時間（説明・調査・演習・記録・レビュー）
作成・参照・更新・削除の業務ルールを、APIとDBへ対応させます。予約番号の存在だけで操作を許可せず、その利用者に操作権限があるか確認します。同じ枠への競合は、一方の画面の判定だけで防げないためDB制約等も考えます。
予約の一覧・作成・取消を実装し、存在しない番号、重複、他人の予約のケースを試す。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
入力検証とエラー
詳しく見る
学習ブロック 4 / 目安5時間（説明・調査・演習・記録・レビュー）
必須、型、長さ、範囲、日付の順序などをサーバーで検証します。エラー時は保存を行わず、利用者が次に修正できる情報を返します。内部のSQLや秘密情報、スタックトレースをそのまま利用者へ返しません。
空欄、0人、上限超え、日付形式違いを入力し、保存されないことと説明が表示されることを確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
認証・セッション・認可
詳しく見る
学習ブロック 5 / 目安5時間（説明・調査・演習・記録・レビュー）
認証は誰かを確かめ、認可はその人が何をできるかを判断します。ログイン済みというだけで管理者の操作を許しません。セッションの保持・期限・ログアウト、CSRF等の対策も設計に関わります。
利用者と管理者の権限表を作り、一般利用者が他人の予約を操作できないテストを作る。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
小さくつないで確認する
詳しく見る
学習ブロック 6 / 目安5時間（説明・調査・演習・記録・レビュー）
画面、API、DBを別々に確認した後、実際の連携を通します。待機中の表示、二重送信、通信失敗、成功後の再読み込みも考えます。利用者が何を見て何が確定したと判断するかを業務仕様へ戻して確認します。
予約作成→一覧反映→取消→再読込を一通り行い、成功と失敗のデモを準備する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
CRUDスターターの動作と、未実装を分ける
python3 api_lab.py
GET /api/bookings 一覧：200
POST /api/bookings 追加：201
POST 同じtitle 重複：409
POST peopleが0/11 入力不正：400
DELETE /api/bookings/1 削除：200、なければ404
POSTのJSON例：{"title":"Room A","people":2}
このスターターはtitleを枠の代用にした簡易例。
受講者が追加する課題：本当の予約枠・日時、画面、更新API、認証、対象ごとの認可、CSRF。
完成の判定：自分の受け入れ条件に実装を対応させ、正常・異常・他人操作を検証する。
本番用の完成アプリとして公開しない。03 / IT FOUNDATION
仕事のアニメ：WebアプリとAPI開発を考える。
新人・アオイさんと先輩・ミナトさんの会話で、「WebアプリとAPI開発」を学びます。最初の場面は「HTMLは文書の意味や構造、CSSは見た目、JavaScriptは動作の実装に使います。」。何を確かめ、どう対応するかを順に見ていきましょう。
HTMLは文書の意味や構造、CSSは見た目、JavaScriptは動作の実装に使います。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. HTML・CSS・JavaScript
アオイ：HTMLは文書の意味や構造、CSSは見た目、JavaScriptは動作の実装に使います。
学習ポイント：入力フォームと画面仕様
2. JSONとAPIの契約
ミナト：APIは受け取るメソッド、パス、値、戻り値、状態コードの契約を決めます。
学習ポイント：API仕様書
3. CRUDとDBの連携
アオイ：作成・参照・更新・削除の業務ルールを、APIとDBへ対応させます。
学習ポイント：CRUDの実装と検証結果
4. 入力検証とエラー
ミナト：必須、型、長さ、範囲、日付の順序などをサーバーで検証します。
学習ポイント：検証条件と異常系の表
5. 認証・セッション・認可
アオイ：認証は誰かを確かめ、認可はその人が何をできるかを判断します。
学習ポイント：権限表とテストケース
6. 小さくつないで確認する
ミナト：画面、API、DBを別々に確認した後、実際の連携を通します。
学習ポイント：動作する小規模アプリとデモ記録
04 / IT FOUNDATION
演習を完成させ、成果物をレビューする。
演習1
予約またはタスク管理アプリの画面とAPI契約を作る。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
同梱のミニAPIを入口にCRUDとDB保存を実装する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
認証と認可、入力検証、重複・他人操作のケースを検証する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
05 / IT FOUNDATION
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / IT FOUNDATION
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / IT FOUNDATION
説明・実装・記録を、一つの成果へつなげる。
画面・API・DBをつなぐ小規模な予約アプリを作り、入力検証と認証・認可の境界を説明する。
- 入力フォームと画面仕様
- API仕様書
- CRUDの実装と検証結果
- 検証条件と異常系の表
- 権限表とテストケース
- 動作する小規模アプリとデモ記録
08 / IT FOUNDATION