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

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

具体的には、

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

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

目次

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

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

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

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

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

まとめ

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

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

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

よかったらシェアしてね!

この記事を書いた人

ハイジ/清瀬灰二のアバター ハイジ/清瀬灰二 地元と世界を繋ぐ長男

1986年生まれ。静岡県出身。
新卒入社の大企業→中小企業→個人事業主→破産→日雇いバイト→二度目の起業まで、一通り全部見てきて修羅場を味わった経験を元に、実家暮らし・地域ビジネス・副業・趣味に関する発信を行っています。

横浜DeNAベイスターズ応援歴24年。
最近の推しは遊戯王・進撃の巨人

コメント

コメントする

目次
閉じる