その他

【JavaScript】命令と宣言と関心の分離

その他
この記事は約3分で読めます。

同じような命令を繰り返すプログラムの例…

if (env === 'test1') {
  if (os === 'ios') {
    setUrl('https://aaa.example.com/apple');
  } else {
    setUrl('https://aaa.example.com/google');
  }
} else {
  if (os === 'ios') {
    setUrl('https://bbb.example.com/apple');
  } else {
    setUrl('https://bbb.example.com/google');
  }
}

・・・

・・・

・・・

読みやすいコードを書きたい

複雑な条件分岐は、書いている本人も、後からそれを読む他人も非常に疲れるものです。
令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついつい条件反射でif-elseを書いてしまいそうになります。

また、何度も同じ表現を繰り返すのは、あまり良くありませんね。

(*1: 令和になってからプログラミングを知った人。初心者のこと。)

命令ではなく、宣言で書く

if - elseは命令です。 例えるならトロッコに乗るように、線路に沿って進んだ先に分岐があります。
「右へ行け」「左へ行け」とマシンに命令しているのです。

では何が辛いかというと、トロッコにずっと乗ってないといけないのが辛いです。

条件を確認して、あっちへ行ったりこっちへ行ったり、時には線路を戻って(アレ? なんの条件にしたがってたんだっけ???)となったり。

常に頭の中でフローを意識しなければならないのは、かなり体力を使います。

宣言で書き直す

必要なデータをあらかじめ用意しておくことで、[if – else]を省略して簡潔に書くことができます。

if文という命令ではなく、変数を宣言し分岐を表現しています。

const url = {
  test1: {
    ios: 'https://aaa.example.com/apple',
    android: 'https://aaa.example.com/google',
  },
  test2: {
    ios: 'https://bbb.example.com/apple',
    android: 'https://bbb.example.com/google',
  }
}

setUrl(url[env][os]);

でも、なんだかまだ見づらいような…

複数の関心を一度に扱わない

なぜ見づらいかというと、一度の処理で複数の事柄を扱っているからです。

この処理では、大きく2つの分岐を扱っています。

  1. テスト環境(test1 / test2)の分岐
  2. プラットフォーム(ios / android)の分岐

こういった場合、関心をひとつづつ分ける方が読みやすく保守しやすいコードになることがあります。

const host = env === 'test1' ? 'aaa' : 'bbb';
const platform = os === 'ios' ? 'apple' : 'google';

const url = `https://${host}.example.com/${platform}`;
setUrl(url);

最初のコードと比べて、ずいぶん短くすっきりした印象になりました。

まとめ

命令ではなく、宣言で表現することで、簡潔にできることが多々あるようです。

  • 必要な処理やデータをあらかじめ用意する
  • 複数の関心は、分離する

という意識が必要な気がしています。

いろいろなバリエーションを使いこなして、見通しの良い記述をしたいですね。