綺麗なコードとは、読みやすいコードのこと
具体的には２つだけ
- 同じことを２回書かない
- プログラマじゃない人が読んでも、何をしているのか分かるように書く
1. 同じことを2回書かない
こう書いてくれれば、何も問題ないんです。
きれいなコード.ts
if (eatsApple) eatFruit(new Apple())
else if (eatsPeach) eatFruit(new Peach())
/**
* @private
*/
function eatFruit(fruit: Fruit) {
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
こう書かかないように、気をつけてください。
２回書いてるコード.ts
function eatApple() {
const fruit = new Apple()
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
function eatPeach() {
const fruit = new Peach()
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
cutFruit() ~ eatFruit() までが共通です。
共通の部分を外に切り出す、それだけです。
2. プログラマじゃない人が読んでも、何をしているのか分かるように書く
こういうコードを書いてくれたら、とても頼もしいです
プログラマじゃない人が読んでも何をしているか分かるコード.ts
if (isWinter) eatApple()
else if (isEarlySummer) eatPeach()
/**
* @private
*/
function eatApple() {
eatFruit(new Apple())
}
/**
* @private
*/
function eatPeach() {
eatFruit(new Peach())
}
/**
* @private
*/
function eatFruit(fruit: Fruit) {
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
逆に、以下はプログラマじゃない人が読んでも分からないコードです。
プログラマじゃなかったら多分わからないし、プログラマも、ぱっと見て何をしているか分からないコード.ts
const month = new Date().getMonth() + 1
let fruit
if (month > 9 && month < 2) {
fruit = new Apple()
}
else if (month <= 7 && month >= 5) {
fruit = new Peach()
}
eatFruit(fruit)
/**
* @private
*/
function eatFruit(fruit: Fruit) {
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
それで、分かりやすいように、コメントをつける人もいると思うのですが、コメント部分を１つの関数に切り分けてくれた方がずっと読みやすいと思います。
つまり、次のようなコードも、読みやすくはないと思っています。
コメントがないと、ぱっと見て何をしているか分からないし、コメント書くくらいなら、関数切り分けて分かりやすい名前をつけてほしいコード.ts
// 今月の季節を調べる
const month = new Date().getMonth() + 1
const isWinter = month > 9 && month < 2)
const isEarlySummer = month <= 7 && month >= 5)
// 季節によって、旬のフルーツを食べる
if (isWinter) eatFruit(new Apple())
else if (isEarlySummer) eatFruit(new Peach())
/**
* @private
*/
function eatFruit(fruit: Fruit) {
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
コメントを書くくらいなら、次のように関数に切り分けた方が、はるかにすっきりと読みやすいコードになると思います
コメントを書くぐらいなら、関数を切り分けて、分かりやすい名前をつけたコード.ts
eatSeasonalFruit()
/**
* @private
*/
function eatSeasonalFruit() {
eatFruit(getSeasonalFruit())
}
/**
* @private
*/
function getSeasonalFruit(): Fruit {
const thisMonth = new Date().getMonth() + 1
if (isWinter(thisMonth)) return new Apple()
else if (isEarlySummer(thisMonth)) return new Peach()
}
/**
* @private
*/
function isWinter(thisMonth: number): boolean {
return month > 9 && month < 2
}
/**
* @private
*/
function isEarlySummer(thisMonth: number): boolean {
return month <= 7 && month >= 5
}
/**
* @private
*/
function eatFruit(fruit: Fruit) {
cutFruit(fruit)
putFruitOnTray(fruit)
sitAtTheTableWith(fruit)
eat(fruit)
}
要は、プログラマじゃない人が読んでも何をしているか分かるように書く、というのは、処理ごとに１つの関数に切り分けて、何をしているのか分かる名前をつけるということです。
もし初心者さんで、まだコーディングのこだわりを持っていらっしゃらない方は、ぜひ検討をお願いします。
そうすると、自然な文章を読むように、コードを読むことができるからです。
お願いします。