同じような命令を繰り返すプログラムの例…
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]);
でも、なんだかまだ見づらいような…
複数の関心を一度に扱わない
なぜ見づらいかというと、一度の処理で複数の事柄を扱っているからです。
この処理では、大きく２つの分岐を扱っています。
- テスト環境（
test1/test2）の分岐 - プラットフォーム（
ios/android）の分岐
こういった場合、関心をひとつづつ分ける方が読みやすく保守しやすいコードになることがあります。
const host = env === 'test1' ? 'aaa' : 'bbb';
const platform = os === 'ios' ? 'apple' : 'google';
const url = `https://${host}.example.com/${platform}`;
setUrl(url);
最初のコードと比べて、ずいぶん短くすっきりした印象になりました。
まとめ
命令ではなく、宣言で表現することで、簡潔にできることが多々あるようです。
- 必要な処理やデータをあらかじめ用意する
- 複数の関心は、分離する
という意識が必要な気がしています。
いろいろなバリエーションを使いこなして、見通しの良い記述をしたいですね。