【作業効率up】すぐにできるリファクタリング5選

朝の人も夜の人もおはようございます。ザワです。自然の雄大さを感じる年頃のフロントエンドエンジニアです。

さて、私は仕事柄、ソースコードのレビューをします。その最中、気づいたんです。比較的簡単にできるリファクタリングってあるよねって。今回はそんなお得なリファクタリング項目を五つに絞って紹介いたします。

普段vueを触ることが多いので、一部vueでソースコードを紹介いたします。

関数名変更

変更前

<button @click="onClick">トップへ</button>

const onClick = () => {
  router.push('/')
}

変更後

<button @click="goToRoot">トップへ</button>

const goToRoot = () => {
  router.push('/')
}

変更前のonClickでも別におかしくはありませんが、vueのテンプレートをコードリーディングしているときにonClickが出てきてもどんな処理をするのかは把握できず、関数を見にいかないといけません。変更後のgoToRootであれば、関数を見にいかずとも何をするのかなんとなくわかります。

これはルートに移動するという単一の機能だから成り立つ命名で、複数の処理を行う場合は、onClickの方が妥当な場合もあるでしょう。

mapを適切に使う

変更前

const sweets = ['シュークリーム', 'エクレア']
const messages = []
sweets.map(item => {
  messages.push(`${item}が好き`)
})

変更後

const sweets = ['シュークリーム', 'エクレア']
const messages = sweets.map(item => `${item}が好き`)

mapは新しい配列を生成するメソッドです。しかし、配列をループするために使っているのを見かけることがあります。正しい使い方をしていれば、mapによって何か新しい配列が生成されているんだなと直感的に読みやすくなるでしょう。

配列をループさせたいだけであれば、forEachなどを使うと処理まで追う必要があるというふうに頭の切り替えができます。ソースコードを読む上で考えるコストをなるべく下げられればいいですよね。

ロジックの集約

変更前

<div v-if="onigiriCount === 5">
  おにぎり全部食べた
</div>

変更後

<div v-if="isCompleted">
  おにぎり全部食べた
</div>

const onigiriCount = ref(0)
const onigiriTotal = 5
const isCompleted = computed(() => onigiriCount.value === onigiriTotal)

vueのテンプレート側に計算式や条件式が書かれていることがよくあります。テンプレートはhtmlと変数、script側にロジックというふうに分かれていると、これまた考えるコストが少なくなり読みやすくなるでしょう。

何でもかんでも変数にしない

変数前

const path = response.url
if (path) {

変数後

if (response.url) {

APIレスポンスのオブジェクトの扱いなどで目にすることがあります。変数に格納したほうが一見読みやすくなりそうですが、変数に入れても一度しか使わなかったり、変数に入れなくても十分意味が伝わる場合は、無理に変数にしないほうがソースコードの量も少なくなり読みやすくなる場合があります。

マジックナンバー撲滅

変更前

const onigiriCount = ref(0)
const isCompleted = computed(() => onigiriCount.value === 5)

変更後

const onigiriTotal = 5
const onigiriCount = ref(0)
const isCompleted = computed(() => onigiriCount.value === onigiriTotal)

マジックナンバー。何を意味しているか一見わからない数値のことですよね。変更前のソースコードを見ると、onigiriCountが5になればtrueになることがわかりますが、5という数値は何の意味を持っているのかわかりません。

自分が書いたソースコードでも（私は）1ヶ月も経てば何を意味していたか思い出せなくなります。自分にも他人にも優しいソースコードを残しておくために命名しておきたいところです。少しの労力で皆が救われます。

まとめ

可読性を上げるリファクタリングや拡張性を担保するためのリファクタリングなど、リファクタリングの中にも種類があると思います。今回取り上げた五つの項目は可読性を上げるためのリファクタリングにあたるでしょう。絶対的に必要ではないけれども、やっておけば作業効率が上がるかもしれません。

人に優しいソースコードを書くことで作業効率が上がり、ストレスを下げ早く仕事を終わらせられることに一役買いたい今日この頃でした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。