メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.ai-code-review

AIにコードレビューを依頼する

AIにコードレビューを依頼する 料理を作ったあと、味見をプロの料理人にお願いする――それがコードレビュー(=自分の書いたコードを別の人にチェックしてもらうこと)です。今回はその「別の人」をAIに担当してもらいます。...

ai-code-review-skillai-code-review-skillAI に書いてもらったコードを自分なりにレビューできます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

AIにコードレビューを依頼する

料理を作ったあと、味見をプロの料理人にお願いする――それがコードレビュー(=自分の書いたコードを別の人にチェックしてもらうこと)です。今回はその「別の人」をAIに担当してもらいます。

あなたがAIツール(Claude Code や Codex CLI など)を使ってコードを書いたあと、そのコードに問題がないかAIに見てもらう方法を15分で身につけます。終わるころには「AIに聞けば、自分一人でもコードの品質を上げられる」と実感できるはずです。

前提を確認する

このレッスンを始める前に、以下を用意してください。

  • AIツールが使える状態になっていること(Claude Code または Codex CLI が起動できる)
  • AIに生成させたコード、もしくは自分で書いたコードが手元にあること

どちらもまだ準備できていない場合は、先にAIツールのセットアップを済ませてから戻ってきてください。

レビューの流れを理解する

AIコードレビューは、大きく3つのステップで進みます。

レビュー依頼の全体像

  1. レビューを依頼する ― AIに「このコードをチェックして」と伝える
  2. 結果を読む ― AIからの指摘を確認し、重要度を見極める
  3. 修正を反映する ― 必要な修正をAIに頼むか、自分で直す

レストランで言えば、「シェフ、この皿の味見をお願いします」→「塩が足りないですね」→「塩を足して出し直します」の流れと同じです。

レビューを依頼する

AIにコードレビューを頼むときは、プロンプト(=AIへの指示文)の書き方が重要です。曖昧な依頼だと、AIも曖昧な回答しか返せません。

良いプロンプトの例

src/app/page.tsx のコードをレビューしてください。
以下の観点でチェックしてほしいです。
1. バグ(=プログラムの間違い)がないか
2. セキュリティ(=悪意あるユーザーから守る仕組み)に問題がないか
3. 読みやすさを改善できるところはあるか
日本語で回答してください。

→ チェックしてほしい観点を番号つきで伝えると、AIが項目ごとに整理して回答してくれます。

悪いプロンプトの例

このコード見て。

→ 何を確認してほしいのかAIに伝わりません。的外れな回答が返ってきやすくなります。

このコードの問題を全部教えて。完璧にして。

→ 範囲が広すぎて、重要な指摘が些細な指摘に埋もれてしまいます。

ツール別の依頼方法

Claude Code を使う場合

ターミナル(=キーボードで命令を入力する画面)で次のように入力します。

claude "src/app/page.tsx のコードをレビューしてください。バグとセキュリティ問題があれば指摘してください。日本語で回答してください。"

この1行をコピーして貼り付けるだけで、AIがファイルを読み込んでレビュー結果を返してくれます。

Cursor を使う場合

レビューしたいファイルを開いた状態で、チャットパネル(画面右側のAIとの会話欄)に同じプロンプトを入力します。Cursor は開いているファイルを自動で読み取ってくれるので、ファイル名を省略しても大丈夫です。

ChatGPT を使う場合

コードをコピーしてチャット画面に貼り付け、その下にレビュー依頼のプロンプトを書きます。ファイルが長い場合は「最初の50行だけ見てください」のように範囲を絞ると、精度の高い回答が得られます。

ターミナルでのレビュー依頼画面

結果を読み取る

AIが返してくるレビュー結果には、大きく分けて3つのパターンがあります。

パターン緊急度どうするか
バグの指摘「この変数が未定義のためエラーになります」必ず直す
セキュリティ警告「ユーザー入力をそのまま表示しています」優先して直す
改善提案「ここはもっとシンプルに書けます」余裕があれば直す

すべての指摘に対応する必要はありません。まずは「バグ」と「セキュリティ警告」を確実につぶしましょう。改善提案は、後で余裕ができたときに取り組んで問題ありません。

指摘の読み方 ― 良い例と悪い例

良い例(優先度を付けて対応する)

  • 「セキュリティ警告が2件あったから、まずそれを直そう」
  • 「バグ指摘が1件、改善提案が5件。バグだけ先に直して、提案は次回にしよう」

悪い例(やりがちな失敗)

  • 「指摘がたくさんあってパニックになったから、全部無視する」→ バグが残ったまま進んでしまいます
  • 「AIの言うことをすべて鵜呑みにして、意味を確認せずに直す」→ AIも間違えることがあります。指摘の意味がわからなければ「なぜそれが問題なのか教えてください」と聞き返しましょう

修正を反映する

AIが指摘した問題のうち、直すべきものが見つかったら、AIに修正を頼みましょう。

修正依頼のプロンプト例

claude "さきほどのレビューで指摘されたセキュリティ問題を修正してください。修正箇所と理由も説明してください。"

「修正箇所と理由も説明してください」を添えると、AIが何をどう変えたか教えてくれるので、あなた自身の理解にもつながります。

修正後の再レビュー

修正したら、もう一度レビューを依頼して問題が解消されたか確認します。これが「味見のやり直し」です。

claude "先ほどの修正が正しく反映されたか確認してください。まだ問題が残っていれば教えてください。"

最初のレビューで指摘された問題が消えていれば、あなたのコードは安心して使える状態に近づいています。

よくあるつまずきに対処する

つまずき原因解決方法
AIが英語で返してくるプロンプトに言語指定がない末尾に「日本語で回答してください」と添える
指摘が多すぎて混乱するチェック観点を絞っていない「最も重要な3つだけ教えてください」と依頼する
何を聞けばよいかわからない最初の一歩が踏み出せない「このコードで一番危ないところはどこですか?」から始める
修正したら別のエラーが出た修正の副作用再レビューを依頼して新しい問題も確認する
AIの指摘が正しいか判断できない知識不足は当然のこと「なぜそれが問題なのか、初心者にもわかるように説明してください」と聞き返す

成果物を確認する

このレッスンの完了目安は、以下の3つすべてができていることです。

  • AIにコードレビューを依頼するプロンプトを、チェック観点つきで書けた
  • レビュー結果を「バグ」「セキュリティ警告」「改善提案」に分類して、優先順位をつけられた
  • 重要な指摘に対する修正を反映し、再レビューで問題が解消されたことを確認した

すべてチェックがついたら、レビュー依頼のプロンプトと結果のスクリーンショットを保存しておきましょう。これがあなたの成果物です。

お疲れさまでした! 次からは、コードを書いたあとに「AIにレビューしてもらう」が自然な習慣になるはずです。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
学習完了