読みやすいコードを書くのが大事！とよく言われますが、
「読みやすいコードってどうやって書けばいいんだ？？？」
と疑問に思ったため調査をし、取り組みやすいことに絞ってまとめてみました
1. なぜ読みやすいコードを書く？
変更しやすいコードになるからです
そもそも前提として
「コードは必ず変更される」
というものがあります。コードは一度書いてそれで終わりという事はなく、機能の修正や拡張などによって書き換えられますし、書いている途中で修正されることも頻繁にあると思います
本質的にコードとは必ず変更されるものです
なので、変更しやすいコードを書くということが開発工数の削減という意味で重要です
では、変更しやすいコードとは何か？
それは「読みやすいコード」です。コードを変更する際、
「ここのロジックどうなってたっけ？」
「この関数どういう動作してるんだ？」
とコードを読み、理解するまでの時間は長いですよね。
理解した後、コードを書くのは意外とあっという間だったりします。
コードを書く時間よりも読む時間の方が長いです。
この「読む時間」が短くなれば嬉しいですよね？
そのためには書きやすいコードを書くより、読みやすいコードを書くことが大事です。
つまり、
読みやすいコードを書くことで変更しやすいコードとなり、後の開発工数削減に繋がるのです
2. まず取り組むこと
読みやすいコードを書くことの重要性がわかったところで、何から始めれば良いのでしょうか？
それは「そもそも自分が書いているコードは本当に必要か？」と自問することです
読みやすいコードを書くためには、無駄なコードを書かないことが一番です
コードは書けば書くほど、システムは複雑になり保守の手間がかかります
「今は必要ないけれど、将来必要になりそうだから書いとこ」
「新しく覚えた技術、ちょっと読みにくいけどかっこいいから使っちゃえ」
「この機能あった方が良くない？要件にないけど作っちゃえ」
このように考えてコードを書こうとした時は、一旦手を止めて「本当に必要か？」と自問していきたいですね
3. 名前に意図を込める
読みやすいコードを書くために、とても重要な事は「適切な名前をつけること」です
極端な例ですが、以下のサンプルコードを見てください
const a = 100;
const b = 0.1;
console.log(a * (1 + b));
これではなんの計算をしているかわかりません
const price = 100;
const tax = 0.1;
console.log(price * (1 + tax));
税込価格を計算していることがわかりますね
const coffeePrice = 100;
const tax = 0.1;
console.log(coffeePrice * (1 + tax));
コーヒーの値段を計算しているのかな？とわかります
このように変数にどのような名前をつけるかで、読み手に与える印象が大きく変わります
また、以下のようにif文の条件に対して名前をつけることも効果的な場面があるかもしれません
if(hour < 10 && hour >= 5) {
console.log('おはよう');
}
const morning = (hour < 10 && hour >= 5);
if(morning) {
console.log('おはよう');
}
読み手にとってわかりやすい名前をつける事は時間がかかりますが、とても大事なことです
何回も読まれ、使われるコードほど名前をつけることに慎重になりたいですね
4. 一貫性を持たせる
皆さんはよく使うアプリがアップデートされ、使いづらくなったなと思った経験はありませんか？
よく使う機能の配置場所が変わっていたりすると違和感を感じ、使いづらいなと感じるものです。
逆に言えば、「いつもと同じ」が一番わかりやすいのです
コードも同じで、コードの書き方や並び方が「いつもと同じ」だと読みやすくなります。
今書いているコードは周辺と書き方が似ていますか？コーディング規約通り書けていますか？
読み手（未来の自分かも？）から見て、一貫性のあるコードを書くように意識したいですね
まとめ
調査した結果「読み手にとってわかりやすいかな？」と自問しながらコードを書く意識が重要だと思いました
読みやすいコードを書く工夫には他にも「わかりやすいコメントを書く」「冗長なロジックは関数に切り出す」「抽象度を揃える」など様々あると思いますが、ひとまず取り組みやすそうなことに絞ってまとめてみました。
もっと詳しく知りたい場合は参考文献の書籍をあたってみてください。
間違い等があれば指摘していただけますと幸いです