前提
プログラミングを始めたて（1~2ヶ月）の自分が学習した内容をまとめています。
実際の現場では通用しないことや間違っていることなどあるかもしれませんが、
お気づきの際はコメントにてご報告いただければ幸いです。

プログラミング初学者の私が、

読みやすいコードを書く必要性
どのようにすればわかりやすいコードを記述できるのか

について学んだことをまとめました。

なぜ読みやすいコードを書く必要があるのか

読みやすいコードを書く理由には大きく３つあります。
・個人、組織の生産性が上がる
・保守性が上がる
・柔軟な開発体制が構築できる
プログラミングでの開発は基本的には複数人で行うため、自分さえわかればいいというコードの書き方では生産性は頭打ちになり、柔軟な開発体制からは程遠くなってしまいます。

この３つを実現するためにリファクタリングが行われています。
リファクタリングとは
実装した機能に影響を与えずにソースコードを読みやすい状態に改善することです。
このリファクタリングによって一緒に開発に携わる人が実装されているコードの理解や修正を簡単に行うことができるようになります。

実際にコードを書く時に注意すべき点

変数が他者を考慮した命名になっていること（変数と関数の命名）
複雑なロジックがなく、読みやすい（ロジックの単純化）
コメントが記載されていて、全体像を把握しながらコードが読める（正確で端的なコメント）

変数と関数の命名

変数や関数を命名する際には、抽象的な名前は避けて、具体的な名前をつけます。
変数名の場合
その変数がどんな役割を持った値かわかるように定義する。
関数名の場合
動詞+名詞の形で何をどうする処理かわかるように定義する。

変数名の例

悪い例

const one = 1;

良い例

const userId = 1;

悪い例では変数oneの名前から1という値がどんなものか、どんな役割をもつ値なのかがわかりません。
良い例では変数がuserIdとなっており、1という値がユーザーIDだということがひと目でわかります。

関数名の例

悪い例

const add = () => {
処理
};

良い例

const addTask = () => {
処理
}

悪い例では、何かを追加することはわかりますが、何を追加するのかがわかりません。
良い例ではTaskがついているため、Taskを追加する処理だと一目で理解することができます。

ロジックの単純化

コードが複雑化していく要素として、大きく２つあります。
ネスト中にネストの記述がある場合
条件式が複雑化している場合

ネスト中にネストの記述がある場合

ネストとは？
ネストは入れ子構造のことです。
条件式で例えると、ifのなかにif、そのifの中にさらにifといったような記述の時にネストが深いと言ったりします。
入れ子構造が多く含まれているということです。

この例からもわかるように、１つの構造の中に多数の構造が増えれば増えるほどその構造は複雑化していきます。
つまりネスト中にネストの記述はできる限り少なくすることがより見やすいコードになるということです。
具体的な対策方法
・早い段階で戻り値を返し、処理自体を小分けにする。
・論理演算子を用いる。

条件式が複雑化している場合

条件式が長い場合も処理の内容を把握するのに最初から最後まで読まないといけないため、わかりにくいコードとなってしまいます。

条件式の記述が長くなってしまった場合には、条件式を関数化しその記述を呼び出すように書くことで、より簡潔でわかりやすいコードになります。

それでもそもそも記述内容に複数の条件式があって複雑だ。
という場合には複数の条件式を分解し、複数のifに分けることで記述が簡潔になります。

コメントで正確な情報をうまく伝える

コード中にはコメントアウトでコメントを残すことができます。
このコメントを用いて、記述をより分かりやすく見てもらえるようにできます。

コメントを残すべき場面

・複雑なロジックを記述した場合は処理の概要と自分の考えをコメントで残す
・なぜそのような記述をしているか残す

コメントを残すべきではない場面

・コメントの補足コメント
・処理が複雑すぎるコードを補う「補助的コメント」
そもそもコメントは注釈的に残しておくものなので、そのコメントをたくさん読むようでは簡潔なコードとは言えません。
それに加えて、処理が複雑すぎて１つのコメントでは補えない場合があります。
これらの場合はコメントに頼るのではなく、複雑なソースコードを修正するという視点が重要です。

以上でプログラミング初学者の私が学んだわかりやすいコードを書く時に意識すべき基本的ルールでした。
追記や訂正等ございましたら、是非コメントにてお願いします。