はじめに
皆さんはリファクタリングをしていますか？
最近では人員不足の影響であとからコードを見返すといったことやリファクタリングをする時間がない人が多いのではないでしょうか？
私のその中のひとりでした。最初から最高のコードが書けるといいのですが、そんなことは常人では難しいですよね。
そこで私は、リファクタリングをする前にしっかりルールを決めることにしています。
今回は、リファクタリングとはなにか、リファクタリングをすることでのメリット、リファクタリングの作業をできるだけ減らせるようにルール決めをしっかりすることについて話していきます。
さっそく、リファクタリングについて見ていきましょう！
リファクタリングとは？
リファクタリングとは、簡単にいうと「外見は変えずに、中身を整理する」といったことを言います。
例えると、リファクタリングは部屋の片付けのようなものです。今は片付ける必要はないけど、次買い物に行ったときにすぐに収納できるように整理整頓をするのがリファクタリングです。
リファクタリングはあくまで外部から見たときの挙動は変えないので、新しい機能を追加することや機能を改修するといったことはリファクタリングには含まれません。
冷蔵庫の中身を例にリファクタリングとはどういったものかのイメージしてみましょう。
変更前はとにかく乱雑に入っている状態で、リファクタリング後は野菜と果物が整理されて視認性が向上していますね。
内容は変わっていないけど、配置（構造）や視認性（可読性）が向上していますね。
整理することで実作業になったときに、ぐちゃぐちゃになっているよりも作業効率が上がることは一目瞭然ですね。
リファクタリングのメリット
リファクタリングのメリットは大きく3つあります。
- 設計を向上させる
- コードの可読性の向上
- 修正や機能追加をより早くかつ正確に行える
設計を向上させる
まず、リファクタリングをすることで設計の劣化を防ぐことができます。
劣化を防ぐことで当然システムを長く使うことができます。
今回、設計の劣化と言うのは、コードが乱雑になって行くことを意味します。
なんか動いていると言った状況になるとそこからの修正が大変になり、気づいた頃にはリファクタリングもどこから手をつければいいのかわからない状態になるので、手遅れになる前にリファクタリングをする必要があります。
コードの可読性の向上
リファクタリングをすることによって、コードが理解しやすくなり、誰が見てもきれいと思えるようなコードにすることができます。
可読性をよくすることで、作業効率を上げることができます。
コードを書く役割に分けるといったことでも、どこに何があるのかがわかりやすくなり、修正箇所などをすぐに見るけることができます。
修正や機能追加をより早くかつ正確に行える
リファクタリングによってコードがシンプルになることや前述でも上げた用にコードの可読性が上がります。
コードがシンプルになることでトラブルを避けることができる他、修正箇所を把握しやすくなる、機能追加の際にどこにどういう記述をするのかを把握しやすくなります。
リファクタリングによって、トラブルを避けることができることや正確に作業をできるといったメリットがあります。
リファクタリングも重要だけどルール決めが大事な話
ここまでリファクタリングとはなにか、リファクタリングのメリットはなにかについて話して来ましたが、
私はリファクタリングの作業をなるべく減らせるように、コーディングをするときのルール決めが非常に重要になってくると考えています。
コーディング規約をもとにルール決め
コーディング規約をもとにルールを決めて行く必要があります。
以下は一例にはなりますが、
- コーディングスタイル(改行、空白、名前などのルール)
- プログラム(画面、バッチ、帳票、APIなど)の標準的な作り方
- プログラムを作る上での推奨事項、禁止事項
- その他、プログラムを作る時のルール全般(レビューの仕方やプログラムの管理方法など)
と言ったような内容のことを決めておくだけで、コードの品質を保つことができます。
コーディングのルールを決めたらツールの導入
コーディングのルールを決めても、それに沿ってコードを書けないと意味がないですよね。
私が開発を行うときエディタはVScodeを使うので、整形のプラグインを導入するようにしています。
- prettier
- ESLint
- editorconfig
上記の3つを導入することが多いです。
それぞれせってファイルを準備することで保存時に自動で整形をしてくれるといった機能になります。
一例にはなりますがそれぞれの設定ファイルを見ていきましょう。
prettier
{
"semi": false,
"singleQuote": true
}
ESLint
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false
},
extends: [
'@nuxtjs',
'standard',
'prettier'
],
plugins: [
],
// add your custom rules here
rules: {}
}
editorconfig
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
それぞれにメリットはありますが、私が一番オススメするのはESLintになります。
理由は後ほど説明します。
こういったツールを導入することで、誰がコードを書いてもある程度、体裁の整ったコードになります。
CI/CDツールの導入 ←ESlintをおすすめする理由
ソース管理をするツールとしてGithubを使っています。
そこで、Githubの1機能として導入されているCI/CDツールのGithub Actionsを用いることで、ソースをプッシュしたタイミングなどでコマンドを実行することができます。
ESlintをおすすめした理由は、まさにコマンドを実行できることです。
npmを例にして説明をしますが、各ブランチにプッシュした際にnpm run lintを実行するように設定をしておけば自動で整形を行ってくれる仕組みを作ることができます。
そのため、うっかり整形を忘れた際にもコーディングのルールに基づいたコードに書き換えることができます。
こういった一手間でリファクタリングの難易度を下げることや着手までのハードルを下げることで、リファクタリングがより簡単にできる環境を作るように心がけています。
まとめ
リファクタリングとは、「外見は変えずに、中身を整理する」などのことを表します。
リファクタリングは品質を担保するためや設計の劣化を防ぐことが出来るほか、修正が楽になること、追加機能のハードルが下がること出来るメリットがあります。
また、リファクタリングも重要ですが、その前にコーディングのルールを決めることも非常に重要になってきます。
自動整形ツールを使うことで楽にコーディングルールを守ることができます。
整形ツールは以下の3つが有名でしょう。
- prettier
- ESLint
- editorconfig
上記を応用して、CI/CDツールを使ってGitへプッシュしたタイミングなどでコマンドを実行することでうっかり整形ツールの実行を忘れたときなどでも自動で整形してくる仕組みを作ることができます。