Javascriptのコードレビュー時によく指摘しがちなこと
前置き
こんばんは。お久しぶりです。
コロナコロナで色々大変な昨今ですが、この業界に影響が出るのはもう少し先の話かなぁと思ったりもしています。
さて、今日はJavascriptのコードレビューでの指摘ポイントのお話です。
処理自体(俗に言うビジネスロジックってやつ)は仕様に合わせて書いたときにどの様に効率的に書くかがポイントになるので置いておいて、今日はそれ以前のコードの書き方についてです。
自分、コードは可読性重視の人です
人によってコードレビューの観点は色々ですが、私のレビューポイントはまず、可読性重視です。
それは、大体案件の最後まで残ることが多いためです。
最後まで残るとどういったことが要求されるかですが、大体短納期で作業をすることを求められることが多くなります。
そういったときに理解に時間がかかる可読性が悪いコードが大半を締めていると作業が遅くなり、結果的に他の工程を圧迫し、品質が悪くなると私は考えています。(読むのがしんどいコードを見るのがいやとも言う)
処理の速度とかそういうのよりまず、
最低限、コメントがなくても人が読めるコードを書くことを重視するようにしています。
上記のことを念頭に以下を読みすすめるようにお願いします。
多分人によって違うので、全部信じなくていいです。
が、私が受け持つメンティさんは以下の点を指摘しますので、気をつけるようにしましょう。
早速、悪い例をごちゃごちゃと。。。
// フラグをtrueにする ★見てわかるコメントは書かない!
var flg = true; // ★letを使いましょう。★flgとかわけのわからない変数名をつけるのはやめましょう。
if(flg){ /// ★if文を見やすくしましょう。
console.log('true'); // ★インデントを下げましょう
} // ★行間空けてくれ!
for(var i=0;i<10;i++){ // ★for文を見やすくしましょう。★iとかなるべく使わないようにしましょう。スコープが小さければ使っても良い。
console.log(i); // ★インデントを下げましょう
}
var membername=get(); // ★コラ!スペースあけて!★ロワーキャメルケース使おう
if(membername == 'tanaka'){ // ★明確にStringで比較したいのなら、厳密に比較しましょう
console.log('同じ');
}
// 取得 // ★そんなんわかってるって!
function get(){ // ★メソッドを見やすく書きましょう。★getってなんやねん!
return 'saitoh';
}
解説
インデント
これは一番大切です。
自分はインデントが気になっていしかたない年頃なので、ずれてると無性に気になります。
これでどこに属してるのかがパッと見でわかるので、インデントが揃っていないと自分で揃えたりします。
// こういうのがいいんだよ
if (true) {
console.log('true');
}
ちなみにインデントにはタブ派と空白派に分かれていて、更に空白派には空白2つ派と4つ派に分かれていると思っています。
行間
以外にやってない人が多いのですが、行間が空いてないとかあります。
処理単位であけると見やすくなるのでそのへんも意識して欲しいかなと思ったりますね。
if (true) {
console.log('true');
}
// ここ、空けよ
let getName () {
return 'yamada';
}
構造分岐や繰り返し処理などの書き方
多分最初に学んだ言語の癖が出るようなところですが、自分は以下のように書くのが見やすいかなと思っています。
// こういうのがいいんだよ
// 構造分岐
if (true) {
console.log('true');
}
// 繰り返し構造
for (let index = 0; index < 10; index++) {
console.log(index);
}
// 関数
let getUserName () {
return 'yamada taro';
}
foreachの書き方
繰り返し処理でindexを使う必要がないならforeach(inやof)を使いましょう
// ofを使う例
let itemList = ['item1', 'item2'];
for (let item of itemList) {
console.log(item);
}
// inを使う例
let itemList = ['item1', 'item2'];
for (let index in itemList) {
console.log(index, itemList[index]);
}
今日はここまで。
あとあと追記していきます。