セルフレビューをしよう

ストーリー

Day 4の朝。成果物はほぼ完成している。

「でも、提出する前にセルフレビューをしないと。月8で学んだことだ」

先輩も「GitHubにpushする前にセルフレビューを行うこと」と要件に書いていた。

チェックリストを作って、一つずつ確認していこう。

ミッション概要

チェックリストを使って成果物のセルフレビューを行い、問題があれば修正してください。

達成条件

HTMLのセルフレビューを実施した
CSSのセルフレビューを実施した
コンテンツの正確性を確認した
問題があれば修正してコミットした

Part 1: HTMLチェック

チェックリスト

以下の項目を一つずつ確認してください。

bash

cd ~/projects/internal-tools-page

構造チェック

#	チェック項目	確認方法	OK?
1	`<!DOCTYPE html>` が先頭にあるか	ファイル先頭を確認	[ ]
2	`<html lang="ja">` で言語が指定されているか	headタグ内を確認	[ ]
3	`<meta charset="UTF-8">` があるか	headタグ内を確認	[ ]
4	`<title>` が適切か	headタグ内を確認	[ ]
5	CSSが正しくリンクされているか	linkタグを確認	[ ]

セマンティックHTMLチェック

#	チェック項目	OK?
6	`<header>` が使われているか	[ ]
7	`<nav>` が使われているか	[ ]
8	`<main>` が使われているか	[ ]
9	`<section>` が各カテゴリに使われているか	[ ]
10	`<footer>` が使われているか	[ ]

コンテンツチェック

#	チェック項目	OK?
11	全10ツールが記載されているか	[ ]
12	各ツールに名前、説明、URLがあるか	[ ]
13	全5カテゴリのセクションがあるか	[ ]
14	ナビゲーションリンクが正しいidを指しているか	[ ]
15	外部リンクに `target="_blank"` があるか	[ ]

タスク 1-1: ツール数の確認

bash

# HTMLファイル内のツールカード数を数える
grep -c "tool-card" index.html

<details> <summary>ヒント: 期待される結果</summary>

tool-card は、開始タグ <div class="tool-card"> と閉じタグ </div> で出現するので、10ツール分の開始タグ = 10 がカウントされるはずです。ただし、tool-cards（複数形）も含まれるので、正確に数えたい場合は：

bash

grep -c 'class="tool-card"' index.html

結果が 10 であればOKです。

</details>

タスク 1-2: リンクの確認

bash

# URLを含むリンクを確認
grep 'href="https' index.html

10件のURLが表示されればOKです。

Part 2: CSSチェック

チェックリスト

#	チェック項目	OK?
1	ブラウザでページが正しく表示されるか	[ ]
2	ナビゲーションが横並びで表示されるか	[ ]
3	ツールカードが横並びで表示されるか	[ ]
4	テーブルが見やすいか	[ ]
5	ホバーエフェクトが動作するか	[ ]
6	文字が読みやすいサイズか	[ ]
7	色のコントラストが十分か	[ ]
8	余白が適切か（詰まりすぎ / 空きすぎでないか）	[ ]

タスク 2-1: ブラウザで表示確認

bash

open index.html  # macOS
# xdg-open index.html  # Linux

上記のチェックリストを見ながら、ブラウザで1つずつ確認してください。

Part 3: データの正確性チェック

タスク 3-1: HTMLとデータベースの整合性

HTMLに記載した情報がデータベースと一致しているか確認します。

bash

# データベースのツール名一覧
sqlite3 data/tools.db "SELECT name FROM tools ORDER BY name;"

HTMLに含まれるツール名と一致するか確認してください。

タスク 3-2: URLの正確性

bash

# データベースのURL一覧
sqlite3 data/tools.db "SELECT name, url FROM tools;"

HTMLに記載したURLと一致するか確認してください。

タスク 3-3: 評価の正確性

bash

# データベースの評価一覧
sqlite3 data/tools.db "SELECT name, rating FROM tools;"

HTMLに記載した評価がデータベースと一致するか確認してください。

Part 4: 問題の修正

タスク 4-1: 見つかった問題を修正

セルフレビューで問題が見つかった場合は、修正してください。

修正のパターン例：

問題	修正方法
ツール名の誤字	index.html を編集
URLの間違い	index.html のhrefを修正
レイアウトの崩れ	style.css を調整
ナビリンクが効かない	id属性を確認・修正

タスク 4-2: 修正をコミット

修正があった場合：

bash

git add index.html style.css
git commit -m "セルフレビューに基づく修正を実施"

修正がなかった場合：

bash

# セルフレビュー結果をドキュメントとして記録
cat > docs/review_result.md << 'EOF'
# セルフレビュー結果

## 実施日
Day 4

## チェック項目と結果

### HTML構造: OK
- DOCTYPE、lang、charset、title: 問題なし
- セマンティックHTML: 適切に使用
- 全10ツール記載: 確認済み

### CSS表示: OK
- レイアウト: Flexboxで正常に表示
- ホバーエフェクト: 動作確認済み
- 色・文字サイズ: 読みやすい

### データ整合性: OK
- ツール名: DB と一致
- URL: DB と一致
- 評価: DB と一致

## 修正事項
- なし（問題は見つからなかった）

## 結論
成果物は要件を満たしている。
EOF

git add docs/review_result.md
git commit -m "セルフレビュー結果を追加"

タスク 4-3: プッシュ

bash

git push

セルフレビューの価値

なぜセルフレビューが重要か

理由	説明
品質向上	提出前に問題を見つけて修正できる
信頼獲得	「ちゃんと確認してから出してくれるんだな」
学びの機会	自分のミスのパターンに気づける
レビュー負荷軽減	先輩のレビュー時間を減らせる

まとめ

ポイント	内容
HTMLチェック	構造、セマンティック、コンテンツ
CSSチェック	表示、レイアウト、読みやすさ
データチェック	DB との整合性
修正	問題があれば修正してコミット

HTMLのセルフレビューを実施した
CSSのセルフレビューを実施した
データの正確性を確認した
レビュー結果を記録した
修正があればコミット・プッシュした

次のステップへ

セルフレビューが完了しました。

次のセクションでは、完了報告書を作成します。月9で学んだドキュメント作成のスキルを使って、作業の成果をまとめましょう。

推定所要時間: 60分