スパゲッティコードを減らそう

こんにちは！ 入社２年目のスパゲッティコード量産型の瀬川です。

２年目になり、ある程度のことは実装できるようになったのですが、
保守などコードのレベルを上げるために、基本的ではありますが最近工夫するようにしていることを書きます！

そもそもスパゲッティコードが発生する原因
私の中では、スパゲッティーコードを量産している一番の原因は、可読性にあるかと思います。
理由としては、スパゲッティーコードの場合 「このコードは修正したくないなー」 「この処理が何をしているかに時間がかかってしまう」 と思った方も多いのではないでしょうか？その点は自身のコードの全体を把握しづらいコード、つまり可読性の悪いコードを書いていると思っております。

可読性が低いコードの共通点は主にこの6点かと思います。
・可読性が低い
・修正に時間がかかってしまう
・変数名がわかりづらい
・関数に機能を持たせすぎている
・コメントが全くない
・トリッキーなコードを書いている

最近はそう思った時がチャンスと思い、まずは修正する前に下記の工程で頭の中を整理して考えます。

可読性の低いコードを実際に修正してみよう
・実装内容全体を明確にし、何をしたいかを改めて考える
・その中で特に分かりづらい部分をどうすれば改善できるか
・自分の理想像も明確にし、実際に書き換えてみる
業務で手がいっぱいの時は難しいかもしれませんが、この工程を繰り返すことにより自身のコードがレベルアップするのではないかと思っております。 コードで手がいっぱいな時にはなかなか難しいですが、メモをして時間が空いた時に考えるようにしております。


ポイント
ただ修正しても実際にあまり改善しない場合は、特に下記のポイントに気を付けて実装してみましょう。

・1つの関数に多くの機能を実装している
　私もよく実際にしていることなのですが、最近のコードレビューで指摘を受けました。
　関数に機能をもたせすぎると、使いまわすことができない、エラーの修正が追いづらくなるなどのデメリットが生まれます。
　要件定義の際に細分化して実装する必要があります。誰もがわかる簡易的な関数や変数名にしたいですね。

・変数名や関数名を明確にする

//①わかりやすい変数名と関数名
const  customerData = customerDataBasefetch（）
//②わかりにくい変数名と関数名
const data = dataBaseCustomerSortDateGetParentKye（）

上記に例を2つ挙げましたが、
①の場合、お客様データを格納している変数だととてもわかりやすいですね。
②の場合、お客様データのキーだけが格納されているのかは変数名が抽象的なのでわかりにくいですし、関数名がとても長いですよね。
この場合は①のように定義してからcustomerDataを元にデータベースの加工用の関数として定義をするといいと思います。

・変数名は翻訳に突っ込まない
変数名も難しい単語を使うのではなく、誰もが知っている単語を組み合わせる方が読みやすくなりますね。

・マジックナンバーを使用している部分は変更する

//マジックナンバーを使用した例
const taxInPrice = price * 1.10;
//マジックナンバーを回避した例
const tax = 1.10
const taxInPrice = price * tax;

このように1.10が意味を持つ理由が明確になりますよね。マジックナンバーを使用している場合は回避した例のように回避しましょう。

最後に
コードを触るのは自分だけではないことを考えて、より可読性を向上させ、次に触る人がわかりやすいコードを心がけることで、おのずと保守性が上がったり、自分自身の技術向上や今必要なことが明確になってきますね。
まだまだポイントはいくつもありますが、今回は一部特に重要な部分を抜粋して書きました。
自身もまだまだ意識できていないこともあるので、今後も保守性の高いコードを書けるように尽力いたします。