EXERCISE 90分

演習:チェックリストを作成しよう

ストーリー

「チェックリストの理論は学んだね。次は実際に作ってみよう」

「自分で作るんですか?」

「そう。まずは問題のあるコードを見て、何をチェックすべきか考えてみて」

「やってみます!」


ミッション概要

以下の3つのPartに取り組んでください。

Part内容目安時間
Part 1問題のあるコードからチェック項目を抽出する30分
Part 2自分用のコーディングチェックリストを作成する30分
Part 3コミット前チェックリストを作成する30分

達成条件

  • Part 1: コードの問題点を5つ以上発見できた
  • Part 2: 10項目以上のコーディングチェックリストを作成できた
  • Part 3: 8項目以上のコミット前チェックリストを作成できた

Part 1: 問題のあるコードからチェック項目を抽出しよう(30分)

以下のコードには複数の品質問題があります。 問題点を見つけて、それぞれに対応するチェック項目を書き出してください。

問題コード

javascript
// ユーザー登録API
const pass = "admin123";
const API = "sk-abc123xyz789";

function f(d) {
  console.log("debug:", d);

  var x = d.name;
  var y = d.email;

  // データベースに保存
  const q = `INSERT INTO users (name, email, password) VALUES ('${x}', '${y}', '${pass}')`;

  db.query(q);

  return {ok: true};
}

// TODO: あとでちゃんとする
function g(id) {
  var u = db.query(`SELECT * FROM users WHERE id = ${id}`);
  return u;
}

タスク 1-1: 問題点を書き出す

上のコードの問題点をリストアップしてください。

markdown
## 発見した問題点

1.
2.
3.
4.
5.
(できるだけ多く見つけてください)

タスク 1-2: チェック項目に変換する

見つけた問題点を「チェック項目」に変換してください。

markdown
## チェック項目

- [ ]
- [ ]
- [ ]
- [ ]
- [ ]
<details> <summary>解答例</summary>

問題点と対応するチェック項目

#問題点チェック項目
1パスワードがハードコードされている[ ] 機密情報がソースコードに直書きされていないか
2APIキーがハードコードされている[ ] APIキーは環境変数から取得しているか
3関数名 f, g が意味不明[ ] 関数名から処理内容が推測できるか
4変数名 x, y, q が意味不明[ ] 変数名から内容が推測できるか
5console.logが残っている[ ] デバッグ用のconsole.logを削除したか
6SQLインジェクションの脆弱性[ ] ユーザー入力をそのままSQLに組み込んでいないか
7varを使用している(letやconstを使うべき)[ ] var を使わず let/const を使っているか
8エラーハンドリングがない[ ] DB操作にエラーハンドリングがあるか
9パスワードが平文で保存されている[ ] パスワードはハッシュ化しているか
10TODOコメントが放置されている[ ] 不要なTODOコメントが残っていないか
11SELECT * を使用している[ ] 必要なカラムだけを取得しているか
</details>

Part 2: コーディングチェックリストを作成しよう(30分)

Step 2で学んだ内容を元に、自分用のコーディングチェックリストを作成してください。

タスク 2-1: カテゴリを決める

以下のカテゴリを参考に、自分のチェックリストのカテゴリを決めてください。

  • 変数名・関数名
  • コメント
  • エラーハンドリング
  • セキュリティ
  • コードの読みやすさ
  • (自分で追加しても OK)

タスク 2-2: 各カテゴリに項目を追加する

各カテゴリに最低2項目ずつ追加して、合計10項目以上のチェックリストを作成してください。

markdown
## マイ・コーディングチェックリスト

### 変数名・関数名
- [ ]
- [ ]

### コメント
- [ ]
- [ ]

### エラーハンドリング
- [ ]
- [ ]

### セキュリティ
- [ ]
- [ ]

### コードの読みやすさ
- [ ]
- [ ]
<details> <summary>解答例</summary>
markdown
## マイ・コーディングチェックリスト

### 変数名・関数名
- [ ] 変数名が内容を適切に表しているか
- [ ] 関数名が動詞から始まっているか(get, set, validate等)
- [ ] 命名規則(キャメルケース)に従っているか

### コメント
- [ ] 「なぜ」そうしたのかが書かれているか
- [ ] コメントアウトされた不要なコードがないか
- [ ] 不要なTODOコメントが残っていないか

### エラーハンドリング
- [ ] nullやundefinedになる可能性を考慮しているか
- [ ] 外部APIやDB呼び出しにtry-catchがあるか
- [ ] エラーメッセージが利用者にとって分かりやすいか

### セキュリティ
- [ ] 機密情報(APIキー、パスワード)がハードコードされていないか
- [ ] ユーザー入力を適切にバリデーションしているか
- [ ] SQLインジェクション対策がされているか

### コードの読みやすさ
- [ ] 1つの関数が長すぎないか(目安: 50行以内)
- [ ] ネストが深すぎないか(目安: 3段階以内)
- [ ] 同じコードの重複がないか
</details>

Part 3: コミット前チェックリストを作成しよう(30分)

実際にコミットする前に使えるコミット前チェックリストを作成してください。

タスク 3-1: 優先度でグループ分けする

「必須」「重要」「推奨」の3段階で項目を分類してください。

タスク 3-2: 具体的な確認方法を添える

各チェック項目に、実際の確認方法(コマンドや手順)を添えてください。

markdown
## マイ・コミット前チェックリスト

### 必須(これを満たさないと絶対にコミットしない)
- [ ] (項目)→ 確認方法:
- [ ] (項目)→ 確認方法:

### 重要
- [ ] (項目)→ 確認方法:
- [ ] (項目)→ 確認方法:

### 推奨
- [ ] (項目)→ 確認方法:
- [ ] (項目)→ 確認方法:
<details> <summary>解答例</summary>
markdown
## マイ・コミット前チェックリスト

### 必須
- [ ] テストが全てパスしている → 確認方法: `npm test` を実行
- [ ] 機密情報が含まれていない → 確認方法: `git diff --cached` でpassword, key, token等を検索
- [ ] .envファイルがコミット対象でない → 確認方法: `git status` で確認

### 重要
- [ ] 意図しないファイルが含まれていない → 確認方法: `git status` で全ファイル確認
- [ ] デバッグコードを削除した → 確認方法: `git diff --cached | grep console.log`
- [ ] コミットメッセージが具体的 → 確認方法: 変更内容が第三者に伝わるか読み返す
- [ ] 1コミットに1つの変更 → 確認方法: `git diff --cached --stat` でファイル数確認

### 推奨
- [ ] 変更差分を自分で確認した → 確認方法: `git diff --cached` を通読
- [ ] コーディング規約に準拠 → 確認方法: リンター実行
- [ ] 受入条件を満たしている → 確認方法: チケットの受入条件と照合
</details>

達成度チェック

以下を確認してください:

  • Part 1: 問題点を5つ以上発見できた
  • Part 2: 10項目以上のコーディングチェックリストを作成できた
  • Part 3: 8項目以上のコミット前チェックリストを作成できた
  • Part 3: 各項目に具体的な確認方法を添えた

まとめ

この演習で実践したこと:

操作内容
問題の発見コードから品質問題を見つけ出す
チェック項目化問題をチェック項目に変換する
体系化カテゴリ分けと優先順位付け
実用化具体的な確認方法を添える

重要なポイント

  1. チェックリストは使って初めて意味がある - 作って終わりにしない
  2. 完璧でなくていい - まず使い始め、徐々に改善する
  3. チームで共有する - 自分のチェックリストをチームに共有するとさらに効果的

次のステップへ

おめでとうございます!自分だけのチェックリストが完成しました。

次のセクションでは、チェックリストに関する理解度を確認するクイズに挑戦します。


推定所要時間: 90分