【基礎編】リファクタリングとは？：初心者向け解説ガイド

2023年7月27日2023年11月17日

Webエンジニアのキャリアをスタートしたばかりのみなさん、こんにちは！

早速ですが、みなさんはリファクタリングという手法をご存じでしょうか？

リファクタリングは、コードの品質を維持し、開発効率を向上させるための重要なテクニックです。

今回は、リファクタリングの基本的な概念から具体的な手法までを、初心者向けにわかりやすく解説します！

リファクタリングとは？

リファクタリングとは、ソフトウェアの外部の振る舞いを保ちながら内部の構造を改善していく作業のことです。

リファクタリングによってコードの可読性が上がると、改修時のコードの変更がしやすくなるほか、設計時や実装、テストなどの工程の助けにもなり、結果的に今後の開発にも役立ちます。

リファクタリングのメリット

リファクタリングを行うメリットとして、以下の3点が挙げられます。

可読性の向上

リファクタリングの1番のメリットは、ソフトウェアの内容を理解しやすくなることです。

リファクタリングが行われていないと、コードの読み込みに時間がかかったり、意図の分からないコードの理解に苦戦したりすることがあります。

そのような状態のコードにリファクタリングを行うと、コードの目的が分かりやすくなり、実現したいことを明確に表現できるようになります。

コードの変更が容易になる

整理されたコードでは、変更が簡単に行えます。

仮に重複コードがあった場合は同じ変更を複数箇所で行う必要がありますが、リファクタリングによって重複コードを除いておけば一箇所の変更だけで済み、修正漏れの心配もありません。

開発スピードが向上する

内部設計が優れているコードは、新規開発時にどこを変更すれば良いかがすぐに判断できます。

リファクタリングによってコードがうまくモジュール化されていると、修正するために読み込む箇所が限定的になるうえ、機能開発を進めていくなかでバグが見つかったとしても、デバッグが容易ですぐに対応することが可能です。

このように開発時に無駄なことが省かれるため、開発スピードの大幅な向上に繋がります。

リファクタリングの対象

リファクタリングの対象となるコードには、以下のような特徴があります。

わかりにくい名前

コードの理解を進めるために大切なのは、適切な名前付けです。

クラス・関数・変数などに意図のわからない名前があったり、名前と異なる処理が混じっていたりする場合は、それらを適切な名前に変更する必要があります。

重複コード

同じコードの構造が複数箇所に存在している場合は、1箇所にまとめることでコードが改善されます。

重複コードがあると、コピーされた箇所がある度に差分がないか確認する手間がかかります。

さらに、修正時には重複部分も同様に修正しなければなりません。

変更可能なデータ

変更可能なデータは、予期せぬ挙動や厄介なバグを引き起こす原因となりえます。

仕様変更によって処理が変わった際に意図しない値に書き変わる可能性もあるため、設計時に可変にすべきか不変にすべきかをしっかりと見極めることが重要です。

長い関数

コードの理解は、関数が長くなればなるほど難しくなります。

長いコードを見つけたら、関数として切り出せる処理がないかを確認してみましょう。

リファクタリングの手法

リファクタリングの手法は多岐にわたりますが、ここでは基本的なリファクタリングと条件分岐のリファクタリングについて、いくつか例を紹介します。

関数として切り出す

処理ごとのまとまりを、独立した一つの関数として切り出します。

コードの解読時に何をしているのか分かりにくい箇所があったら、目的を示す名前で関数として抽出することで、可読性を向上させることができます。

// Before
function printOwing(invoice) {
  printBanner();
  let outstanding = calculateOutstanding();

  // print details
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${outstanding}`);
}

// After
function printOwing(invoice) {
  printBanner();
  let outstanding = calculateOutstanding();
  printDetails(outstanding);

  function printDetails(outstanding) {
    console.log(`name: ${invoice.customer}`);
    console.log(`amount: ${outstanding}`);
  }
}

変数のインライン化

一度しか使われていない変数は、その変数が持つ式を直接使用することでコードをシンプルにできます。

// Before
let basePrice = anOrder.basePrice;
return (basePrice > 1000);

// After
return anOrder.basePrice > 1000;

条件分岐のリファクタリング

条件分岐のリファクタリングは、コードの可読性を向上させるだけでなく、バグを防ぐ働きもあります。

例えば、条件分岐が複雑になってきた際に、それを単純化することでコードを理解しやすくなります。

// Before
let charge;
if (customer === "preferred") {
  charge = quantity * 0.9;
} else {
  charge = quantity * 1.0;
}

// After
let charge = (customer === "preferred") ? quantity * 0.9 : quantity * 1.0;