前回の命名編に引き続き、実装面に関しても勉強した内容を備忘録としてまとめます。
はじめに
本記事はJavaScriptをベースに作成しています。
変数の定義
基本的にconstを使いましょう。
過去に書いたコードを振り返ってみると、letではなくconstでよかった変数がいくつもあります。
constでは処理できない場合にletを使いましょう。
簡単にはイテレータ変数やフラグなどです。
varはどうしても必要な場合のみ使いましょう。
ちなみにですが、今のところどうしても必要になったことはありません。
// OK
const test = "test";
// 状況に応じてOK
let test = "test";
// 基本的にNG
var test = "test";
変数の使い回し
これはNGです、新たに変数を定義しましょう。
使い回してはいけない理由として
- 変数の生存期間が長くなる
- 影響範囲が広くなる
- デバッグが難しくなる
など様々です。
constで定義することで防止することができます。
foreachは極力使わない
私のプロジェクトではコーディング規約がないながらもfor文よりもforeachを使うという暗黙のルールがあります。
それ故に例えば以下のようなコードが量産されていました。
const tests = [];
testList.foreach(test => {
if (test === "test") {
tests.push(test);
}
});
この場合はfilterを使いましょう。
const tests = testList.filter(test => test === "test");
他にも以下の辺りを積極的に使いましょう。
案外foreachを使わずに実装できるのでそうすべきです。
- find
- map
- reduce
ネスト
浅いほど良いです。
深ければ深いほど読みにくく、よいことがないです。
深くなるようであれば一部を関数として切り出すなどの対応が必要です。
条件式は整理する
長いor複雑な条件式は関数として切り出しましょう。
// NG
if (fileName !== null && filePath !== null && fileType !== null && fileSize !== null) {
// 処理
}
// OK
function existFile() {
return fileName !== null && filePath !== null && fileType !== null && fileSize !== null;
}
if (existFile()) {
// 処理
}
行数が少ない=正義ではない
少ない行数で書けたとしても、それがきれいで読みやすいかは別問題です。
書き方や程度によりますが、三項演算子はif文に変換、メソッドチェーンは程よいところで変数に代入した方がよいと思います。
読みにくいだけではなくデバッグもやりにくくなります。
即return
returnは早ければ早いほど良いです。
無駄な処理が動くことがない上に追いやすくなります。
// NG
function test(String string) {
// 処理
if (string === null) {
return;
}
}
// OK
function test(String string) {
if (string === null) {
return;
}
// 処理
}
コメントはとても大切
積極的に残すようにしましょう。
ただし、読めばわかるコードに残すのはNGです。
// NG：読めばわかるので不要
// testListの中で30未満のデータを抽出
const tests = testList.filter(test => test < 30);
以下例のように、読めばわかる実装ではありますが処理に意図がある場合は残す必要があります。
本当は変数名などで表すのがベストです。
// OK
// 赤点の人を抽出
const tests = testList.filter(test => test < 30);
最後に
どなたかの参考になりましたら幸いです。
参考
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
JavaScript で forEach を使うのは最終手段
変数の使い回しはなぜよくないのか