リファクタリングとは その種類と背景

リファクタリングとは、既に書かれたコードを
自分が見返したり、他の人が参照した時に
理解をしやすくする作業のことです。

具体的には、

・同じ処理を簡略化して書いて、コードを短縮する
・関数の宣言を、別の命令の内部に埋め込む
・同じ表記を繰り返す箇所を関数の箱に入れる

などの作業が、色々な機能を使って行われます。

何故リファクタリングが必要なのか

リファクタリングが必要な理由は色々ありますが、
代表的なものをいくつか挙げます。

サイトが重くなることを防ぐ為

WEBサイトを表示する際、変数を多く宣言するほど
パソコン内のメモリを消費するようになり、
サイトが表示されるまで時間がかかるようになります。

勉強を始めた段階では大した量のコードを書かないし
大規模なプログラムのテストをする機会も無いので
気になることはありません。

しかし、仮に何百行、何千行とコードを積んだり
たくさんのファイルを複雑に絡ませて動かす場合、
変数が少ないほど、メモリの占有する部分を減らし、
処理を速くしてユーザビリティを上げることができます。

サービスの保守/管理コストを減らす為

サービスは一度作った後も、改良を加えたり
ログを解析して問題個所に修正を加えるなど、
継続的に自分以外がコードを触る場合があります。

その時、修正箇所が少なくて済めば、
作業者がミスをする可能性も減りますし、
バグが発生する可能性も減らすことができます。

すると当然、その修正を行った後に行う
テストにかける時間や労力が減るため、
作業者の人件費にかかるコストが減らせます。

そういったコードの書き方を、現場の方々には
「保守性の高いコード」と呼ばれるそうです。

ウェブカツでは、鬼練という、有料の解放部分である
本編とは別に、ソースコード付きの問題や
その補足で、このリファクタリングに触れています。

今回は、備忘録として、以下、そこで既に学んだ
リファクタリングの方法をまとめていきます。

リファクタリングの具体的な方法例

1.ショートハンド(省略記法)を使う

answer = (rand) ? ‘りんご’ : ‘ミカン’;

こうやって表記すると、if-elseの文が一行で書けます。
元々4行あった命令が1行で済むので、スマートです。

2.変数を、定義した時点で初期化してしまう

変数を2つ定義し、それらを使って条件分岐を行う処理は

var answer; ※変数を定義
var rand = ※別の変数を定義
answer = (rand) ? ~※条件分岐

上記のように、3行のコードで設計されることが多いです。

しかし、ここでの変数randを仮に一回しか使わない場合、
変数を初期化した後に、箱に値を入れる(定義する)
必要がありません。

その場合、わざわざ一行使って変数を定義せず、
変数を他の命令の中で呼び出して初期化すれば
コードを減らしつつ、同じ命令をすることができます。

3.繰り返し使う定数を、配列で一斉に定義する

var answer = (Math.floor(Math.random()*2)) ?
‘朝になりました。係の学生は点呼をしてください’ :
‘夜になりました。係の学生は点呼をしてください’;
console.log(‘本日Y署は空いています’);
console.log(answer);
if(answer === ‘朝になりました。係の学生は点呼をしてください’){
console.log(‘こんにちは!’);
}else if(answer === ‘夜になりました。係の学生は点呼をしてください’){
console.log(‘こんばんは!’);
}

例えば、画面に表示させたり、繰り返し処理で何度も使う場合は
一定の語句を、冒頭で配列として定義しておくと

var CHOICES = [‘朝になりました。係の学生は点呼をしてください’,
‘夜になりました。係の学生は点呼をしてください’];
var answer = (Math.floor(Math.random()*2))?
CHOICES[0] : CHOICES[1];
console.log(‘本日Y署は空いています’);
console.log(answer);
if(answer === CHOICES[0]){
console.log(‘こんにちは!’);
}else if(answer === CHOICES[1]){
console.log(‘こんばんは!’);}

これくらいスッキリします。

4.配列に連想配列を使い、中身を想像しやすくする

例えば、上記の配列で言うと、if文の中に入った状態で
CHOICES[0] CHOICES[1]と書かれていても、
外から見たら、内容を一瞬で把握はできません。

これくらい少ないコード量ならともかく、
大量のコードの中からエラーを見つけたり
後からその変数の意味を解釈するのは大変になる時も。

だからこそ

CHOICES.MORNING CHOICES.EVENING

のように、キーを設定し、連想配列にすることで、
より理解を早めることができるようになります。

リファクタリングに役立つ本

リファクタリングをテーマにした本は色々ありますが、
リーダブルコードは特にお勧めします。

この本は、どちらかというと、具体的なノウハウ・
テクニックではなく、リファクタリングをする上で
あらゆる言語に対応する普遍的な考え方自体が
詳しくまとめられています。

WEB系の制作会社・開発会社を一通り回れば、
棚にこれは必ずあると言われているくらい、
プログラマー界隈では有名な本です。

初級者の段階では全ての内容を理解できなくても、
「理解がしやすいコードとは何か」ということを
理解することには、一役買ってくれます。

まとめ

リファクタリングを進めるとコードの保守性は上がりますが、
元のコードの意味を改めて把握するのは大変になるので、
まずは元の文章の各命令が何を指示しているのかを
しっかり把握してからリファクタを進めたいと思います。

また、ネット上のリファクタリング関連の技術記事を読むと、
言葉や概念の意味が分からないことが非常に多いため、
いきなりリファクタリングを完璧にやろうとすると
それこそ、無駄に遠回りをしてしまうことになります。

まずは、言語の基礎をしっかりと抑えましょう。