フロントエンドのスキルとチームの生産性を向上するコードレビュー

はじめまして、即戦力人材と企業をつなぐ転職サイト「ビズリーチ」でフロントエンドエンジニアを担当している相澤です。

私は一年ほど前にビズリーチに入社したのですが、それまでは受託のWeb制作会社で働いていました。入社してすぐに、他の人が書いたソースコードが適切かどうかレビューする「コードレビュー」を依頼されたのですが、それまでソースコードをレビューしたことも、レビューしてもらったこともなく、とても不安でした。

今回は、そんな私がコードレビューを通して得たナレッジやメリットなどをお伝えしようと思います。これからコードレビューをはじめる方や、コードレビューを導入しようと考えている方、当時の私のようにコードレビューに対して不安がある方の参考になれば幸いです。

不安だらけのコードレビュー

冒頭でも述べましたが、ビズリーチに入社してすぐに、チームのメンバーからコードレビューを依頼されました。

しかし、ビズリーチに入社するまでは、一度もコードレビューをしたことがなく、恥ずかしながらコードリーディングもそれほどできませんでした……。

というのも、制作会社の在籍時は、規模にもよりますがプロジェクトに対して、フロントエンドエンジニアは一人だけアサインされることがほとんどで、実装が終わったあとの動作確認も自分で行い、クライアントに納品という形式が多かったので、極端に言うと「動けばOK」という感覚でした。そのため自分のソースコードを見てレビューをもらったり、他社が書いたソースコードを見てレビューするという機会がなく、さらに納品後はそのファイルを触ることはないので、ソースコードの美しさや更新性などをあまり考慮していなかったのも事実です。

なので、コードレビューを依頼されたときは、チームの全員でプロダクトを作っていることや、チームで品質担保できることを感じ、嬉しかったのを覚えています。ただ、それまでコードレビューをやったことがなく、正直なところ不安しかありませんでした。

当時は、下記のような点が特に不安でした。

• 自分のスキルレベルでコードレビューして意味があるのか
• コードリーディングもそれほどできないのにコードレビューなんてできない
• 自分がコードレビューしたものがマージされても大丈夫だろうか

二次レビュー者によるフォロー

そんな不安な状態でどのようにコードレビューをはじめたのか。

まずは、二次レビュー者を立てる形を取りました。自分のレビュー結果に対して、先輩エンジニアなどの有識者の目を通す事によって、自分の実力で足りない部分やレビュー不足を先輩エンジニアに補ってもらうことができます。

先輩エンジニアに二次レビューをしてもらうことで下記のメリットがありました。

• 実装者も安心してコードレビュー依頼を出せる
• 先輩エンジニアが返すレビューを見ることで、自分では得られない視点を得られるので勉強になる
• プロダクトとしてもコードの品質が担保できて、技術的負債を取り込まなくて安心

コードレビューでぶつかる壁

コードレビューを進めていくうちに、徐々に簡単なものは一人で対応できるようになってきて、このまま順調にステップアップしていけるように思えました。
しかし……、ある時壁にぶつかります。

コードレビューをしていても自分が返すレビューに自信が持てなかったり、先輩エンジニアのように実装難易度の高いコードに対して、的確で技術レベルの高いレビューが返せず、悩むようになってしまったんです。
どうしたら先輩エンジニアのように質の高いレビューフィードバックを返せるようになるのか……。
この悩みにぶつかり、先輩エンジニアと相談したり、いろいろ調べたりする中で気づいたことがありました。

冒頭でも触れたように、入社当初の私はコードリーディングを満足にできませんでした。
そもそも、コードレビューをするには「コードを読んで正しく理解する」ということが必要です。それにもかかわらず、当時の私は簡単なものはレビューできても、難易度の高いコードについては、「読んで正しく理解する」ということができていませんでした。
それでは先輩エンジニアのように質の高いレビューができないのは当たり前です。そこで、まずは自分にできる、「コードに対して疑問を持つ」ということからはじめました。

疑問を持つようにすると、

1. 疑問を持つ
2. 悩む
3. 質問する
4. 理解する

という思考の流れが身に付き、コードリーディングのレベルが上がります。

そして、コードリーディングのレベルが上がれば、コードレビューのレベルも上がります。なので、まずは「疑問を持つ」「違和感を感じとる」ことを意識するのがおすすめです。

疑問を持って質問するときに、疑問を持った理由や根拠、代替案まで提示することができると良いですが、まずはどうしてそのようなコードを書いたのか質問するだけでも十分です。
まずは、できることから徐々にはじめるのが良いと実感しました。

また、疑問を持って質問をすると、自分自身のレベルアップに加えて以下のようなメリットもあります。

• 疑問や違和感があるということは、コードに問題がある可能性がある
• レビュイーが再考するきっかけをつくることができる
• 具体的なコードをもとにして議論がされたり、コミュニケーションが発生するので、知識の共有につながる

コードレビューは学びのチャンス

コードレビューをしてきて、気がつけばコードリーディングもコードレビューもできるようになり、大きくスキルアップすることができました。
記事を読んでインプットしたり、プライベートの時間で何かを作るのも良いですが、実践を通じて学ぶコードレビューは優れた学習機会であり、育成機会でもあると感じています。

そのため、ビズリーチでは、新卒入社のメンバーにも積極的にコードレビューを行ってもらっています。

さらに、最近ではニ次レビュー者育成目的で、レビュー観点を養うためにチームでのコードレビュー会を行っています。

より深く学ぶためのペアプログラミング

ビズリーチには、コードレビュー以外にも新人エンジニアが先輩エンジニアから知識を学び取る機会が多くあります。

その一つがペアプログラミングです。ペアプログラミングとは、同じプログラムに対して、二人でプログラミングをすることです。
新人エンジニアは、業務に関係することであれば先輩エンジニアに対してペアプログラミングをいつでも申し込むことができます。先輩のライブコーディングを見る機会にしたり、実装中のタスクで分からないところがあれば解決法を一緒に考えたりします。

また、ペアプログラミングを行うようにしたことで、先輩エンジニアがアラートを吸い上げやすい状態にすることができました。若手と熟練者の双方にとって、とても意義のある時間になっています。

最後に

ここまででお伝えしてきたような方法でコードレビューに取り組んできたことで、最初は不安でいっぱいだったコードレビューが、今ではとても楽めるようになりました。また、コードレビューを通して、どういった設計をしたら良いのか、どんな実装方法があるのか、プロダクトの今後の拡大や成長を見据えたコードを書くにはどうしたら良いか、などを含めて、多くのことを学ぶ機会となっています。
私自身以前に比べ、より良いコードを書くことを強く意識できるようになりましたし、チームとしてもソースコードの品質が担保されるので、バグを減らすことに繋がっていたり、命名規則などの共通認識を持ちやすくなったことで開発工数の削減にも繋がったりしています。

全員で協力し、プロダクトを成長させることはもちろん、表には見えないコードの美しさも含めて良いプロダクトを作っていけるのは、内製でプロダクトに向き合い続けられる事業会社ならではの醍醐味だと感じています。
この機会に、みなさんもコードレビューを始めてみてはいかがでしょうか。

また、弊社では「Front-end Beer Bash」（FBB）という、フロントエンドエンジニア向けのイベントも開催しています。昨今のフロントエンド界隈は技術的なトピックが非常に流動的で、ビズリーチ内で蓄えたナレッジを発信してフロントエンド界隈に貢献したいという思いで開催しています。

前回のイベントレポートもぜひご覧ください！
Front-end Beer Bash #1 Angular vs React vs Vue.js を開催しました！

次回は今年の初冬に開催予定ですので、詳細が決まりましたら、ブログにて発信させていただきます！