コーディング習慣改善

はじめに

これは「Linkbal Advent Calendar 2019」の19日目の記事です！
今年の10月から弊社に入ったばかりなのでなかなか勉強しなければならないことは全くたくさんあるはずです。新し技術だけではなくコーディング規約も身につけるようにしています。
その中に非常に細かいことですが改善しないと悪い影響を与えることはコーディング習慣です。つまり、悪い癖を直すべきです！以下はよくつける癖です。

コードブロックは短いの方が良い？

確か皆さんはプログラミングすると、コードブロックをきなるべく縮小するようにしますね。「コードが短いと実行時間も短いはずだ」と考える人は少なくないと思っています。僕もそう思いましたが、実はそのことが本当でしょうか。いつも正解訳ではないんです。

コードブロックを縮小するために関数を何回も無駄に呼び出すと時間がかかることもあります。以下の例を一緒に見ましょう。これは例だけなのでコードの目的はこだわらないでください。

console.time();
function getMulti(foobar) {
  if(foobar.split(" ")[0] == "multi"){
    return foobar.split(" ")[1].split("&")[0] * foobar.split(" ")[1].split("&")[1];
  } else {
    return false;
  }
}
console.log(getMulti("multi 3&4"));
console.timeEnd();
// > 12
// > default: 0.210205078125ms

この関数はインプットストリングを分裂してかけ算結果を出すのです。一見すると短いブロックが感じますが分かりづらい気持ちもするかも知れません。
じゃ、変数をはっきりと割り当てて計算すればどう？このようにします〜

console.time();
function getMulti(foobar) {
  const mathTypeAndArgs = foobar.split(" ");
  const mathType = mathTypeAndArgs[0];
  const argsArray = mathTypeAndArgs[1];
  const fooAndBar = argsArray.split("&");
  const foo = fooAndBar[0];
  const bar = fooAndBar[1];
  if (mathType === "multi") {
    return foo * bar;
  } else {
    return false;
  }
}
console.log(getMulti("multi 3&4"));
console.timeEnd();
// > 12
// > default: 0.155029296875ms

へえ、マジか！0.05msだけなんですが、長いコードの実行の方が速いと分かりました。なぜかというと、一つ目はsplitメソッドを５回も使いましたが、二つ目はsplitメソッドを２回だけ使います。メソッドを使ってからら変数に価値を与えるので実行時間は短くなります。
コードが短ければ実行時間も短いとは限らないということがわかってきました！メソッドを控えて使って読みやすいコードを書いた方が良いです。

三項演算子を利用する（Ternary operator）

プログラマにとってif−else文（Wikipedia）は基礎な知識なのでよく使っていますね。

if文（イフぶん）はプログラミング言語において、真理値に従って「もしXならば、Yせよ、さもなくばZせよ」というような条件実行の「文 (プログラミング) 」で、制御構造のひとつである。if else文と呼ばれることもある。

しかし、何場合でも使用すれば良いのか、それと三項演算子を使った方が良いのか。一緒に見てみましょう。

三項演算子って何？

普段の三項演算子はこのように書かれます：<条件式> ? <真式> : <偽式>
条件式は真理値を返す論理式です。というのはtrueいずれかfalseしか返しません。
返される価値は条件式の値によって決められるようになっています。trueの場合は真式、またはfalseの場合は偽式の値になります。

function sellAlcohol(age) {
  return age > 18 ? 'OK' : 'NG';
}
console.log(sellAlcohol(19));
// > OK

いつ使った方が良い？

if-else文より三項演算子文の方がもっと便利だと考えてしまいますが、使いすぎると悪影響を与えることはあります。
分かりやすいように「フィズ・バズ、FizzBuzz」というゲームを見ましょう！

ルール：
１から数字を数えますが、３で割り切れると「フィズ」、５で割り切れると「ブズ」、両者で割り切れると「ふイズ・バズ」を発言します。ためらったプレイヤーは脱落となります。

最も短いように三項演算子を無理につ使いたいならジョンダイ、このようなコードを書きます。

function fizzBuzz(value) {
  for (i = 1; i < value; i++) {
    console.log(i % 15 == 0 ? "FizzBuzz" : i % 3 == 0 ? "Fizz" : i % 5 == 0 ? "Buzz" : i);
  }
}
fizzBuzz(16);
// > 1
// > 2
// > Fizz
// > 4
// > Buzz
// > Fizz
// > 7
// > 8
// > Fizz
// > Buzz
// > 11
// > Fizz
// > 13
// > 14
// > FizzBuzz

しかし、メンテナンスの時、こんなコードを見ると分かりづらい感じがするかも知れません。どうして普通なif-else文を使いませんかって。

function fizzBuzz(value) {
  for (i = 1; i < value; i++) {
    if (i % 15 == 0) {
      console.log("FizzBuzz");
    } else if (i % 3 == 0) {
      console.log("Fizz");
    } else if (i % 5 == 0) {
      console.log("Buzz");
    } else {
      console.log(i);
    }
  }
}
fizzBuzz(16);
// > 1
// > 2
// > Fizz
// > 4
// > Buzz
// > Fizz
// > 7
// > 8
// > Fizz
// > Buzz
// > 11
// > Fizz
// > 13
// > 14
// > FizzBuzz

これの方が長いですが、見やすくて他の人は一見してもこの関数の目的がすぐに分かってくれるはずです。
つまり、三項演算子文は便利ですが状況によって使いべきです。複雑な条件なら普通なif-else文の方が好ましいです。

終わりに

コードはなるべく清潔ように書くことはいいですが、読みにくければ意味がありません。
プログラムを書くのは人間が読める文章を書くことです！
プロジェクトにコードは切りがなく変更されますから、覚えられてるのは自分のコードではなく自分のコーディング習慣です。難しい問題を小さくて簡単な問題にぶつけて読みやすいコードを書くべきです。

日本語はなかなか間違いだらけなので大目に見てください。ありがとうございました。

参考

https://ja.wikipedia.org/wiki/If%E6%96%87
https://ja.wikipedia.org/wiki/Fizz_Buzz
https://medium.com/swlh/excellent-code-clean-and-beautiful-code-b541ca4b5a39