🐈
Tidy First? 第I部をJavaScriptで読む
今回は Tidy First? の例をJavaScriptに置き換えつつ、意識したい点をピックアップします。
全体
リファクタリング(整頓)をいつすべきか？どうすべきか？という内容。
第1章は具体的なコードの書き方ルールについて書かれている。
基本の書き方ルール
- 書き方を揃える意識を持つ。
- 読み手が理解しやすい順でコードを書く。
- 関連しているコード同士はなるべく近くに置く。
ガード節
ifはネストしないでreturnを活用する。
ただし複数のreturnが続くようであれば複雑になるので、メソッドを分割すべし
❌ NG
if (条件) {
if (条件) {
...
}
}
✅ OK
if(条件) return
if(条件) return
変数の宣言と初期化
変数の宣言(let, const)と初期値の代入は同じタイミングで行う。
❌ NG
function fn() {
let a;
...
a = 10; // このタイミングで初期値を代入している
let b;
...
b = a; // このタイミングで初期値を代入している
...
}
✅ OK
function fn() {
let a = 10;
...
let b = a;
...
}
分割する/まとめる
- 大きくなったコードは、変数に分割して理解しやすくする。
- 1つの処理のまとまりごとに、空行を入れる。
- 共通処理は1つのメソッドとして切り出し、再利用する。
- 細かく分割しすぎていることで理解しづらくなっているコードもある。その際は一度1つにまとめる。
定数化
マジックナンバー / 繰り返し現れる文字列は定数化する。
❌ NG
if(response.code === 404){...}
✅ OK
const PAGE_NOT_FOUND = 404;
if(response.code === PAGE_NOT_FOUND){...}
ただし、同じ値でも意味合いが異なる場合は、まとめない。
❌ NG
const ONE = 1;
// この場合の「ONE」は一番目の意味
if(index === ONE){...}
// この場合の「ONE」は計算結果
if(calc === ONE){...}
引数を分割して明示的に
❌ NG
const params = { a: 1, b: 2 };
foo(params);
function foo(params) {
console.log("a:", params.a);
console.log("b:", params.b);
}
✅ OK
const params = { a: 1, b: 2 };
function foo(params) {
fooBody(params.a, params.b);
}
function fooBody(a, b) {
console.log("a:", a);
console.log("b:", b);
}
削除
- 不要なコードは消す。(どうせGit上等に残しているので問題ない)
- デッドコードか否か判断しづらい場合は、該当箇所でログを出力するようにし、暫くログを監視する。
コメントについて
- コードからは読み取れないことは、コメントを入れておく。
- 質問されそうなことは先回りしてコメントとして記載しておく。
- 実装時の注意点もコメントを入れるべし。
- コードに書いてあることをそのまま書いてあるコメントは、消す。
- リファクタリングによって、コメントが不要になることもあるので、再度見直す。
関連記事
Discussion