演習：3日分の日報を書こう

ストーリー

「テンプレートも覚えたし、良い例と悪い例もわかった。じゃあ実際に書いてみよう」

「はい！でもまだ業務が始まったばかりで書く内容がないです...」

「大丈夫。架空のシナリオで練習しよう。3日分書いてみて」

「やってみます！」

ミッション概要

以下の架空シナリオを読み、3日分の日報を作成してください。

あなたの設定

名前: 山田太郎（新人エンジニア）
チーム: Web開発チーム
先輩: 田中さん（メンター）
現在のタスク: ユーザープロフィール画面の作成

達成条件

3日分の日報を作成した
テンプレートに沿って書いた
具体的な内容を記載した
困りごとや学びも含めた

シナリオ: Day 1（月曜日）

今日のできごと

09:00 朝会（デイリースタンドアップ）に参加
      → 今週のタスク「ユーザープロフィール画面」を確認
09:30 田中さんから仕様書の説明を受ける（30分）
      → プロフィール画面に必要な項目を理解
10:00 HTML/CSSでプロフィール画面のレイアウトを作成開始
12:00 昼休み
13:00 レイアウト作成の続き
      → ヘッダー部分のCSSがうまくいかず1時間悩む
14:00 MDNドキュメントで調査 → 解決
15:00 プロフィール画像のアップロード部分のUIを作成
16:30 田中さんに途中経過を見せる
      → 「いい感じ！余白をもう少し取るといいよ」とアドバイス
17:00 修正作業
17:30 退勤

タスク 1: Day 1 の日報を書いてください

以下のテンプレートを使って日報を書きましょう。

【日報】2025年4月7日（月）山田太郎

■ 今日やったこと
-（ここに記入）

■ 明日やること
-（ここに記入）

■ 困っていること・相談したいこと
-（ここに記入）

■ 学んだこと・気づいたこと
-（ここに記入）

【日報】2025年4月7日（月）山田太郎

■ 今日やったこと
- 朝会参加、今週のタスク確認（15分）
- 田中さんからプロフィール画面の仕様説明を受けた（30分）
  - 表示項目: アイコン画像、名前、メール、自己紹介文
- プロフィール画面のHTML/CSSレイアウト作成（5時間）
  - ヘッダー部分完了
  - プロフィール画像エリア完了
  - 情報表示エリア完了
  - 全体の約60%完了
- 田中さんに途中経過を共有し、フィードバックを受けた

■ 明日やること
- 余白の調整（田中さんのフィードバック対応）
- プロフィール編集フォームのUI作成
- レスポンシブ対応の検討

■ 困っていること・相談したいこと
- ヘッダーのCSSで1時間ハマったが、MDNで解決できた
- プロフィール画像のアップロード方法について、
  技術的な実装方針を明日相談したい

■ 学んだこと・気づいたこと
- CSSのposition: absoluteとrelativeの親子関係を理解した
- 田中さんから「余白を意識するとデザインが整う」と学んだ
- 仕様を最初にしっかり確認することで、手戻りが防げると実感した

</details>

シナリオ: Day 2（火曜日）

今日のできごと

09:00 朝会に参加
      → 昨日の進捗を報告
09:15 余白の調整作業（田中さんのフィードバック対応）
10:00 プロフィール編集フォームのUI作成開始
11:00 フォームのバリデーション表示でエラーが発生
      → 自分で15分調べてわからず、田中さんに相談
      → 「イベントハンドラの書き方が間違っていたね」と教えてもらう
11:30 エラー解消、実装続行
12:00 昼休み
13:00 編集フォーム完成
14:00 田中さんにコードレビューを依頼
14:30 レビュー結果: 3件の指摘あり
      → 変数名の改善、コメントの追加、エラーハンドリングの追加
15:00 指摘対応
16:30 対応完了、再レビュー依頼
17:00 TypeScript学習（チュートリアル Chapter 5）
17:30 退勤

タスク 2: Day 2 の日報を書いてください

【日報】2025年4月8日（火）山田太郎

■ 今日やったこと
- 余白調整（田中さんのフィードバック対応）（45分）
  - padding/marginを見直し、全体的に読みやすくなった
- プロフィール編集フォームのUI作成（3.5時間）
  - 名前、メール、自己紹介の入力フォーム完了
  - バリデーション表示（エラーメッセージ）完了
  - バリデーションでエラー発生 → 田中さんに相談して解決
- コードレビュー対応（1.5時間）
  - 指摘3件を修正（変数名改善、コメント追加、エラーハンドリング）
  - 再レビュー依頼済み
- TypeScript学習 Chapter 5（30分）

■ 明日やること
- 再レビューの結果確認と対応
- レスポンシブ対応の実装
- プロフィール画像アップロード機能の実装方針を田中さんに相談

■ 困っていること・相談したいこと
- プロフィール画像のアップロードについて、
  Base64でDBに保存するか、S3にアップロードするか
  方針を田中さんに相談したい

■ 学んだこと・気づいたこと
- JavaScriptのイベントハンドラの正しい書き方を学んだ
  - onChangeではなくhandleChangeのように命名する
- コードレビューで「変数名は処理内容がわかるように」と学んだ
  - × data → ○ userProfileData
- 15分ルールで相談したら5分で解決した。もっと早く聞けばよかった

</details>

シナリオ: Day 3（水曜日）

今日のできごと

09:00 朝会に参加
09:15 再レビュー結果確認 → 承認（LGTM）をもらった
09:30 レスポンシブ対応の実装開始
10:30 スマートフォン表示でレイアウトが崩れる問題発生
      → メディアクエリの書き方を調べて対応
11:30 田中さんに画像アップロードの方針を相談
      → 「今回はシンプルにBase64でいこう」と決定
12:00 昼休み
13:00 画像アップロード機能の実装
14:30 動作確認 → 画像が表示されない問題
      → 原因調査中にチームミーティング（スプリントレビュー）
15:00 スプリントレビュー参加（1時間）
      → 自分の画面を共有して進捗をデモ
      → チームから「使いやすそう！」と好評
16:00 画像表示問題の原因判明
      → Base64のエンコード処理に誤りがあった
16:30 修正完了、動作確認OK
17:00 明日の作業を整理
17:30 退勤

タスク 3: Day 3 の日報を書いてください

【日報】2025年4月9日（水）山田太郎

■ 今日やったこと
- コードレビュー承認確認（15分）
  - 昨日の再レビューでLGTMをもらった
- レスポンシブ対応の実装（2時間）
  - スマートフォン表示のレイアウト調整完了
  - タブレット表示の調整完了
  - メディアクエリ768px / 480px のブレイクポイントを設定
- 画像アップロード機能の実装（3時間）
  - Base64方式で実装（田中さんと方針合意済み）
  - 画像が表示されない問題が発生
  - 原因: Base64エンコード処理の誤り → 修正済み、動作確認OK
- スプリントレビューに参加（1時間）
  - プロフィール画面をデモ
  - チームから好意的なフィードバックをもらった

■ 明日やること
- プロフィール画面の最終調整
- テストの実施
- ドキュメント作成（実装メモ）

■ 困っていること・相談したいこと
- 特になし
  - 今日の問題はすべて自力 or 相談で解決できた

■ 学んだこと・気づいたこと
- メディアクエリのブレイクポイントは「モバイルファースト」で
  書くとシンプルになることを知った
- Base64エンコード/デコードの仕組みを理解した
- スプリントレビューでデモすることで、自分の仕事の成果を
  チームに伝える大切さを実感した

</details>

振り返り

3日分の日報を書いてみて、どうでしたか？

チェックポイント

4つの項目（やったこと/明日/困りごと/学び）をすべて書けたか
具体的なタスク名と時間を書けたか
進捗がわかるように書けたか
困りごとは正直に書けたか
学びを自分の言葉で書けたか

まとめ

ポイント	内容
日報の基本	4項目のテンプレートを毎日埋める
具体性	タスク名、時間、進捗を明記する
正直さ	困りごとを隠さない
継続	毎日書き続けることが最も重要

次のステップへ

3日分の日報が書けましたね。お疲れさまでした。

次のセクションでは、Step 2の理解度チェックです。日報に関する知識がどのくらい身についたか確認しましょう。

推定所要時間: 90分