コードレビューで「また修正か…」を減らす。エンジニア視点の要件整理の秘訣|現場で使える実践テクニック

C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは!

今日は「コードレビューで何度も修正指摘されるのをどうやって減らすか」について、僕の失敗談を踏まえて解説します。

コードレビューで修正が増える本当の理由

僕も昔、後輩のコードレビューをするたびに「あ、こここうなってないな」「え、なぜこの実装?」みたいに指摘がめっちゃ増えちゃってた時期があるんです。
当時は「この子、要件を理解してないのかな」って思ってたんですけど、実は違ったんですよ。

問題は「要件書には書いてあるけど、実装者にとって曖昧だった」っていうところだったんです。
例えば、要件書には「ボタンをホバーで色を変える」って書いてあっても、エンジニアからすると下記のような疑問が出てくるんですよ。

  • どの色に変わるのか(RGB値?デザインファイルのどのカラー?)
  • アニメーション時間は何秒か
  • トランジションのイージングは?
  • モバイルではどうなるのか(タップ時?長押し時?)
  • デバイスがホバーに対応していない場合は?

これらが明確になっていないから、エンジニアが「こんな感じかな」って実装して、レビューで引っかかるんです。
実は「修正が多い」のって、エンジニアのせいじゃなくて、事前の擦り合わせが不足してるんですよ。ほんま。

エンジニアに「実装の前」に確認してもらうべき3つのこと

僕が現場で気をつけるようになったのは、実装前に「技術的な詳細」をエンジニアと一緒に詰めることです。
具体的には、下記の3つですね。

1. ブラウザやデバイスごとの動作の違い

デザイナーが作ったビジュアルは、めっちゃ綺麗なPC画面で見た状態なんです。
でもエンジニアは「タブレットではどうなるの?」「古いブラウザでは?」って自動的に考えるんです。
実装前に「このデバイスはサポート対象?」「このブラウザのバージョンは対応する?」って確認しておくと、後でやり直しになりません。

例えば、position: stickyを使う要件があったとしましょう。
IE11を対応ブラウザに含める場合、このプロパティは使えないので、JavaScript代替案が必要になります。
実装後に「あ、IE11対応だった」ってなると、めっちゃ手戻りですやん。

2. エッジケース(想定外の状況)の扱い

これは現場あるあるなんですけど、要件書には「成功時の画面」しか書いてないんです。
でも実装するには「テキストが長かったら?」「画像が読み込めなかったら?」「エラーメッセージが複数出たら?」みたいな例外処理も考えておく必要があるんですよ。

実装前にエンジニアと一緒に「こういうケースはどうする?」って話し合っておくと、コードレビューで「あ、これはどうするんですか?」って止まることがなくなります。

3. パフォーマンスや技術的な制約

デザイナーが「このセクションに30個の画像をスライドショーで表示する」って要件を出したとします。
エンジニアからすると「30個全部読み込むと、ページ速度が落ちるな」って気づくんです。
実装前に「遅延読み込みでいい?」「最初は5枚だけ読み込んで、あとはオンデマンド?」って決めておくと、スムーズですよ。

技術的な制約も早めに共有しておくことが大事です。

要件を「実装できる言語」に翻訳するコツ

ここからが僕が一番大事だと思ってることなんですけど、要件をエンジニアが「実装しやすい言葉」に落とし込むことなんです。

デザインの指示を「具体的な数値」に変える

NG例:「ボタンを目立つようにしてください」
OK例:「ボタンのパディングを左右16px、上下12px。フォントサイズは16px、背景色は#FF6B35、テキストカラーは#FFFFFFです。」

要件書に「目立つ」って書いてあっても、エンジニアは実装できません。
デザインファイル(FigmaとかXDとか)から、実装に必要な情報を抽出して、テキストで伝えるといいですよ。

条件分岐を「if-then-else」で書く

NG例:「レスポンシブ対応でお願いします」
OK例:「画面幅768px以上ではグリッドレイアウト3列。767px以下ではスタック表示(1列)です。」

エンジニアは基本的に「条件付きの指示」で思考します。
「いつ、どうなるか」を明確に書いてあると、実装が早いし修正も少ないんです。

代替案も一緒に提案する

例えば、デザイナーが「このテキストはホバーでツールチップを表示」って要件を出したとします。
エンジニアの視点では「タッチデバイスではツールチップが使えないから、タップ時にモーダル開く?」みたいな質問が出てくるんです。

実装前に「モバイルではこうする」って決めておくと、エンジニアは迷わず実装できるんですよ。

まとめ

コードレビューで修正が増える理由は、ほぼ「実装前の擦り合わせ不足」です。
デザイナーやディレクターが「要件書に書いてある」と思ってることでも、エンジニアにとって曖昧な部分がいっぱいあるんですよ。

大事なのは、実装前に「技術的な詳細」を一緒に詰めること。
ブラウザ対応、エッジケース、パフォーマンスの制約を事前に共有しておくと、コードレビューはめっちゃ早く進みます。
そして何より、修正指摘が減るから、エンジニアのモチベーションも上がるんです。

要件を「実装できる言葉」に翻訳するクセをつけると、チーム全体の効率が上がりますよ。
ぜひ試してみてくださいね!

Web制作で困ったことがあったら、またこのブログを覗いてくださいね!

― クリオ