EXERCISE 90分

演習: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日(月)山田太郎

■ 今日やったこと
-(ここに記入)

■ 明日やること
-(ここに記入)

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

■ 学んだこと・気づいたこと
-(ここに記入)
<details> <summary>解答例</summary>
【日報】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 の日報を書いてください

<details> <summary>解答例</summary>
【日報】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 の日報を書いてください

<details> <summary>解答例</summary>
【日報】2025年4月9日(水)山田太郎

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

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

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

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

振り返り

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

チェックポイント

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

まとめ

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

次のステップへ

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

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


推定所要時間: 90分