良いセルフレビューのやり方

はじめに

マージリクエストやプルリクエストを出した際、レビュワーから多くの指摘を受けて「もっとちゃんと確認すればよかった…」と落ち込むことはありませんか？
自分はレビューを提出してから動作確認漏れやタイポといった初歩的なミスを指摘され、レビュワーの方の時間をもらっていることに申し訳なさを感じていました。

この記事では、そんな状況から一歩抜け出すために私が実践しはじめ、効果を測定し実際に精度が向上したセルフレビューの方法をご紹介します。

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

優れたセルフレビューは、多くのメリットをもたらします。

• レビュワーの負担軽減: 本質的な議論（設計や仕様について）に時間を使ってもらえるようになります。
• 開発サイクルの高速化: 手戻りが減り、マージや提出までの時間が短縮されます。
• 自身のスキルアップ: 自分のミスの傾向を客観的に把握し、意識的に改善できます。

具体的なセルフレビューのやり方

MRを出す直前、自分自身が最初のレビュワーになったつもりで、以下の観点でコードをチェックします。

1. そもそも、ちゃんと動くか？（動作確認漏れ）

• 要件通りの動作を改めて確認したか？
• 正常系だけでなく、異常系の動作（エラー表示など）も確認したか？
• 今回書いたコードが、他の箇所に意図しない影響を与えていないか？

2. もっと良い書き方はないか？（リファクタリング漏れ）

• 命名は適切か？（変数名、関数名が処理内容を表しているか）
• 冗長なコードはないか？共通化できる処理はないか？
• コメントがないと理解できない複雑なコードになっていないか？

3. タイプミスや凡ミスはないか？（タイポ）

• 変数名、コメント、文字列内の誤字脱字はないか？
• console.logなどのデバッグ用コードは残っていないか？

4. 仕様を全て満たしているか？（要件把握・定義漏れ）

• 実装を始める前に確認した仕様書やチケットをもう一度見返したか？
• デザイン資料の細かい注釈や、チケットのコメント欄に書かれた仕様変更などを見落としていないか？
• 「こうだろう」という思い込みで実装してしまった箇所はないか？

この4つの項目を意識し、粗を探す勢いでコードを見ていけばかなり初歩的なミスは減らせると思います。

レビュー品質を数値化する

セルフレビューの効果を客観的に評価するため、私はレビュワーからもらった指摘を集計しています。

集計するコメントのカテゴリは先ほど書いた4つの観点です。

• 動作確認漏れ
• リファクタリング漏れ
• タイポ
• 要件把握・定義漏れ

この記録を取り続けることで、「先月よりタイポの指摘が減ったな」「最近、要件の把握漏れが多いから、案件着手前にもっと読み込もう」といった具体的な振り返りが可能になります。

PerfectPixelの活用

これは自分がフロントエンドエンジニアで、基となるデザインデータがある場合使っているものなので「自分は当てはまらないな」と思った場合はスキップしていただいて大丈夫です。

PerfectPixelとは？

erfectPixelは、Google Chromeの便利な拡張機能です。これを使うと、デザインカンプ（画像）をブラウザの画面上に半透明で重ねて表示できます。
デザインカンプをブラウザ上に重ねて表示させることで、デザインと実際のWebページを簡単に比較することができます。

自己レビューでの使い方

1pxのズレも許さないという使い方ではなく、あくまで効率的に実装のズレを発見するための目的で使うのがおすすめです。

具体的には、自己レビューの際にPerfectPixelでデザインを重ねることで、以下のような点を効率的にチェックできます。

• レイアウトの大きな崩れ: 目視では気づきにくいpaddingやmarginの大きな乖離（かいり）がないか。

• 要素の抜け漏れ: 実装し忘れているテキストやボタンがないか。

• 誤字脱字: デザインと見比べることで、テキストの間違いを素早く発見できる。

目視だけの確認よりも、こうした相違点を効率的に見つけられるため、レビューの質を高めることができます。

AIの活用

最近では、AIを自己レビューの壁打ち相手として活用するのも非常に効果的だと思っています。GitHub CopilotやChatGPT、Geminiといったツールは、もはやただのコード補完ツールではありません。レビューの質を上げる強力なサポーターになってくれます。

もちろんAIの提案が常に正しいとは限りません、間違った情報を提示することもあります。
大事なのはAIの提案を鵜呑みにせず、「なぜこのような提案をしたのか？」を自分で考えて、最終的な判断は自分で行うことです。AIを補助として上手く活用することで、自己レビューの精度と効率を高めることができます。

1. CSS設計のレビュー

自分では正しく書いたつもりの設計でも、思い込みで間違っていることがあります。AIにチェックしてもらうことで、命名規則が合っているかを確認できます。

• AIへの質問例
  「以下のHTMLのクラス名は、BEMの命名規則として正しいですか？もし間違っていたら修正案を教えてください。」

BEM.html

<div class="card">
  <h2 class="card-title">記事タイトル</h2>
  <div class="card_body--text">
    <p>ここに本文が入ります。</p>
  </div>
  <button class="card__button-primary">もっと見る</button>
</div>

card_body--textやcard__button-primaryのような微妙な間違いをAIが検出し、以下のように正しい形式を提案してくれます。

BEM.html

<div class="card">
  <h2 class="card__title">記事タイトル</h2>
  <div class="card__body">
    <p class="card__text">ここに本文が入ります。</p>
  </div>
  <button class="card__button card__button--primary">もっと見る</button>
</div>

2. ロジックのレビューとリファクタリング

自分では完璧だと思ったロジックでもAIにレビューを依頼すると、思わぬミスやより効率的な書き方を指摘してくれることがあります。

• AIへの質問例
  「以下のコードをレビューしてください。もっと効率的で読みやすい書き方があればリファクタリング案を教えてください。」

BEM.js

const getUserStatus = (user) => {
  if (user.isLoggedIn) {
    if (user.isActive && !user.isDeleted) {
      if (user.subscription.plan === 'premium') {
        return 'Premium Active User';
      } else {
        return 'Standard Active User';
      }
    } else {
      return 'Inactive User';
    }
  } else {
    return 'Guest';
  }
};

これ以外にも、正規表現の生成やテストコードの作成、コミットメッセージの提案など、AIの活用方法は多岐にわたります。その時々の状況に合わせてAIをフルに活用できるとおもいます。

AIにコードレビューなどを依頼する際は、企業データや顧客データといった機密情報を絶対に含めないでください。

具体的には、以下のような情報がコードのサンプルに含まれていないか、貼り付ける前に細心の注意を払いましょう。

• 顧客データや個人情報（氏名、住所、電話番号など）

• 社外秘のAPIキーや接続情報、認証情報

• 企業の独自アルゴリズムやビジネスロジック

多くのAIサービスでは、入力されたデータが学習に利用される可能性があり、意図しない情報漏洩に繋がるリスクがあります。

必ず、所属している企業のセキュリティポリシーやAIの利用ガイドラインに則って使用してください。 もしルールが不明確な場合は、安易に利用せず上長などに確認することが賢明です。

さいごに

セルフレビューの精度を向上させることで、自分のスキル向上だけでなくチームメンバーの時間を節約することができます。
完璧を目指しすぎると疲れてしまいますが、ちょっとだけでもレビュワーになりきって自分のコードを見つめ直すだけで、コードの品質は向上すると思っています。

皆さんが実践しているセルフレビュー術があれば、ぜひコメントで教えてください！