01 / IT CAREERS
この講座で、何をできるようにするか。
ブラウザー上の画面や操作を実装する。予約システムの具体例を使い、入力画面、検索画面、画面とAPIの連携の中身と連携を学びます。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 役割と、解決する問題を説明し、課題と確認する問いを作る。
- 成果物の中身を説明し、成果物のサンプルを作る。
- 他の職種との受け渡しを説明し、役割と受け渡しの図を作る。
- 境界・レビュー・一日の仕事を説明し、レビュー済みの仕事体験メモを作る。
専門的な実装知識より先に、利用者・目的・成果物・受け渡しを考えます。職種名や境界は企業・案件によって異なり、一人で複数の役割を担う場合もあります。
02 / IT CAREERS
仕組みを理解し、手を動かして確かめる。
役割と、解決する問題
詳しく見る
学習テーマ 1
ブラウザー上の画面や操作を実装する。入力、操作、待機、成功、失敗の状態を画面へ反映し、APIとの契約に合わせる。見た目に加え、キーボード、読み上げ、通信失敗、狭い画面での使い方も考える。
予約ボタンを押しても、通信中か失敗か分からず利用者が連打する。 この状況で、最初に確認すべき事実と問いを3つ書く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
成果物の中身
詳しく見る
学習テーマ 2
入力画面、検索画面、画面とAPIの連携が主な成果物の例です。見た目を整えるだけでなく、受け手が判断や次の作業をできる情報を含めます。以下の架空例を、自分が担当するとしたらどう具体化するか考えます。
状態：入力→送信中→成功／失敗 送信中：重複操作を抑える 400：修正する項目を示す 409：別の枠を案内 表示：APIの結果と同期
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
他の職種との受け渡し
詳しく見る
学習テーマ 3
主な連携先はUI/UX・バックエンド・QA・SEです。受け取る情報、決める内容、作成して渡す成果物、確認相手を分けます。担当範囲は会社・案件で変わるため、肩書きから一方的に決めません。
予約サービスの仕様変更を一件選び、入力資料→自分の作業→受け渡す成果物→相手の確認を図へ描く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
境界・レビュー・一日の仕事
詳しく見る
学習テーマ 4
入力の画面チェックは補助であり、サーバー側の検証や認可を代替しない。まず状況を確認し、作成・検証・相談・記録を繰り返します。完成した成果物は根拠と制約を添え、初見の人が次の行動を取れるかでレビューします。
上のケースの提案または対応案を書き、事実、仮説、決めたこと、未確定、次の確認を分けて説明する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
03 / IT CAREERS
仕事のアニメ：フロントエンドエンジニアを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「フロントエンドエンジニア」を学びます。最初の場面は「予約ボタンを押しても、通信中か失敗か分からず利用者が連打する。」。何を確かめ、どう対応するかを順に見ていきましょう。
予約ボタンを押しても、通信中か失敗か分からず利用者が連打する。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 困りごと
アオイ：予約ボタンを押しても、通信中か失敗か分からず利用者が連打する。
学習ポイント：課題と確認する問い
2. 役割を考える
ミナト：この役割では、入力、操作、待機、成功、失敗の状態を画面へ反映し、APIとの契約に合わせる。
学習ポイント：課題と確認する問い
3. 成果物を作る
アオイ：成果物は入力画面、検索画面、画面とAPIの連携なのですね。
学習ポイント：成果物のサンプル
4. 連携して渡す
ミナト：受け渡す相手はUI/UX・バックエンド・QA・SE。何を判断してもらうかを明確にしよう。
学習ポイント：役割と受け渡しの図
5. 境界を確認する
アオイ：入力の画面チェックは補助であり、サーバー側の検証や認可を代替しない。
学習ポイント：レビュー済みの仕事体験メモ
6. レビューする
ミナト：事実と未確定を分けた成果物を残し、次の担当へ説明してみよう。
学習ポイント：レビュー済みの仕事体験メモ
04 / IT CAREERS
演習を完成させ、成果物をレビューする。
演習1
予約ボタンを押しても、通信中か失敗か分からず利用者が連打する。 最初に聞く問いを3つ書く。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
入力画面、検索画面、画面とAPIの連携のうち一つを選び、架空データで一ページの成果物を作る。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
相談先・受け渡し・完了条件を付けて、相手役とレビューする。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
05 / IT CAREERS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / IT CAREERS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / IT CAREERS
説明・実装・記録を、一つの成果へつなげる。
ブラウザー上の画面や操作を実装する。予約システムの具体例を使い、入力画面、検索画面、画面とAPIの連携の中身と連携を学びます。
- 課題と確認する問い
- 成果物のサンプル
- 役割と受け渡しの図
- レビュー済みの仕事体験メモ
08 / IT CAREERS