既存コードを変更するときに気をつけているポイント

こんにちは、 Gaji-Labo フロントエンドエンジニアの鈴木です。

自分が触ってこなかった既存コードに手を入れるタスクって結構あると思うのですが、ついこの間も弊社メンバーにアサインして作業してもらいました。
その時のレビューで「自分が気をつけているポイント」をコメントしたので、改めて普段どうしていたかを整理してみました。

自分が気をつけているポイント

普段気をつけているポイントはこのあたりかなと思います。

• 既存コードを読む
• 条件によって表示・非表示される要素の確認
• 変更箇所以外に影響を及ぼしていないか確認

既存コード読む

まずは変更したい箇所がどういう動きをしているのか、その上でどう変更するのかを把握します。

既存コードを読む時は、自分が作業する範囲より少し広めの範囲で読むようにしています。
例えば1コンポーネントの一部を変更する場合、その親のコンポーネントあたりまでざっくり見ます。
読み込んで完全理解を目指すというより、なにがどこまでの責務なのかなどを見ています。

条件によって表示・非表示される要素の確認

一定の条件で表示される要素や、エラーメッセージなど、なにか操作した後に変化するものが含まれているか確認します。
そういった実装が変更箇所に含まれる場合は、変化後も仕様通り実装できているかを確認しています。

このあたりの情報は仕様書やデザインデータで拾えることもあるのでチェックしています。
仮にあまり整備されていない状況であっても、前述の既存コードを読むことでカバーできます。

変更箇所以外に影響を及ぼしていないか確認

影響範囲の見落としと、変更によって既存の挙動から変わっていないかの2つの視点があります。
既存の挙動から変わっていないかというのは、元々できていたことは維持されている、という見方をしています。

影響範囲に関しては変更箇所が他で使われているかを確認し、該当画面を確認します。
既存の挙動との確認は、 master や develop、ステージング環境など、変更前の環境との比較をしています。

まとめ

これらをテストなどで保証する方法もあると思いますが、いつでもどこでもテスト環境万全！という訳にもいかないのが正直なところだと思います。
押さえるべきポイントを意識しつつ、テストに任せられるところは任せていけるのが理想かなぁと感じます。