スパゲッティ・コード：愛憎半ばする物語

2022年1月17日
午前4時43分

スパゲッティは、マリナラやペスト、クリーミーなパスタソースで覆われているときはとてもおいしいのですが、それが私のコードと関係あるときは最悪です。この記事は、私のスパゲティコードとの（愛と）憎しみの関係に捧げます。

この記事が終わるころには、あなたも私と同じようにスパゲッティ・コードを嫌いになっていて、私たちの経験を共有することで互いに慰め合うことができればと願っています。そうでなくても、少なくともあなたが何かを学び、あるいは笑えたのなら幸いです。

では早速ですが、スパゲティコード🙄とは何でしょうか？

これは、健全なソフトウェア開発プラクティスに従わないコードを書いたときに起こることです。この記事の終わりまでに、スパゲッティ・コードとは何か、少なくともどのようなものなのか（そして何をしてはいけないのか）が明らかになることを願っています。

スパゲティコードの正式な意味は、「深い依存性」または「広い依存性」と呼ばれるものがあるときに起こるものです。この意味は、あなたのコードが正しく機能するために、アプリケーションのあまりに多くの、あるいはあまりに少数の部分に依存しているということです。

しかし、何をもってスパゲッティ・コードとするかについては、さまざまな考え方があります。私が一番好きな定義は、Alex Martelliの「スパゲティコードとは、適切なトップダウン分解のルールに従わないときに起こるものだ」というものです。

トップダウン」という言葉に馴染みのない方のために、この件に関してWikipediaを引用させていただきます。"トップダウン設計は、階層設計とも呼ばれ、高レベルのモジュールを定義することから始まり、個々のルーチンが定義されるまで、順次低レベルのサブモジュールを定義していく。"

つまり、理想的なスパゲッティは、以下のステップを踏むことで、現在書かれているものから、あるべきコードになるのです。

1) このスパゲッティが何をするものかを特定する。

2) 現在やっていることが、やるべきことでないなら、やるべきことをやるように書き直す（この段階は、あなたのコードが何をする必要があるかに分けることができる）。

3) コードを書く。

4) スパゲッティがすべて非スパゲッティコードに置き換わるまで繰り返す。

しかし、多くの場合、この3や4をスキップして、2や1（通常は1）に直行し、クリーンコードの実践を顧みず、狂った科学者のようにコーディングを始めるのです。

スパゲッティ・コードの見分け方は？

まず、あなたのコードがわかりにくいものであれば、それが最初のヒントでしょう。もっと難しいスパゲッティ・コードの場合は、他のヒントをご覧ください。

もし、コードを編集したり、デバッグしたりすることが大きなフラストレーションになるなら、それはスパゲッティ・コードである可能性があります。
もし、どの開発者も特定のプロジェクトで一緒に仕事をしたがらなかったり、PRリクエストを確認したがらなかったら、それはスパゲッティコードである可能性があります。
もし、あなたの上司があなたに対してランダムに怒りを爆発させるなら、それはあなたが多くのスパゲッティ・コードを書いている可能性があります。

重要なのは、あなたのスパゲッティ・コードがどのようなものであるかということです。

では、スパゲッティ・コードとはどのようなものなのでしょうか。

これは、どのような言語で書いているか、どのようなフレームワーク/ライブラリを使用しているかによります。ここでは、例としてjQueryを使ってJavaScriptで書かれたスパゲッティ・コードを紹介します。

function KFCSecretMenu() { //constructor

this.getKrushers = function() {.

} } $(document).ready(function(){ //event listener for DOM Ready $(‘.welcome’).click(function (){ //event listener for click on element with class name of welcome $(‘.menu-item’).addClass(‘active’); //class to be added if the submenu is opened.

$(‘.menu-item’).find(‘.description’).slideDown(); //sliding down effect for description text }) }); function MenuItemClicked (e) { var itemID = $(e.target).parent().attr(‘id’); //gets ID of parent menu item var description = $(e.target).next().text() KFCSecretMenu.getKrushers({‘itemID’:itemID,’description’:description}); //calling function below }

続く？いや、ちゃんとスパゲティだよ！？🕵️

このスパゲッティ・コードの何がそんなに悪いのか、何が他のコードよりスパゲッティなのか、そしてそれを修正するために何ができるのかを見ていきましょう。では、何がスパゲッティ・コードを悪くしているのでしょうか？これは、スパゲッティコードをそうさせるものの中で最も有用なリストだと思います。関数、メソッド、変数が重複していたり、複雑すぎたりするフォローしにくい、インデントされていない構造フォローしにくい、長い関数読みにくい余白ロジックに従いにくいコメントがない変わったコーディングスタイル（頑張りすぎ）変数名がいい。

また、必ずしもスパゲッティ・コードになるわけではありませんが、コードを混乱させるものもいくつかあります。非効率なアルゴリズムファイルサイズが大きい設計が悪いテストの不足スパゲティコードの見た目は言語やフレームワーク、ライブラリによって異なります。そのため、スパゲッティ・コードがどのようなものかを定義するのは難しいのですが、数年前の自分にとってスパゲッティ・コードであったものを思い返してみる必要があります - 自分のコードの最大の問題点は何だったでしょうか？おそらく上記のリストにあるような間違いを犯したと思いますので、過去のコードの何が悪かったのかを比較し、この記事を読みながらこのリストを心に留めておいてください。

さて、スパゲッティ・コードを特定したところで、どのように対処すればよいのでしょうか。

スパゲッティ...つまりコードの一部をあるべき姿にする方法を実際に議論する前に、いくつか重要なことを書いておきます。

注1：コードを書いてはいけない方法については、何百（もしかしたら何千）もの方法が存在します。ここで書いていることは、コードの書き方についてごく基本的な知識を持つ人のためのもので、できるだけシンプルにしようと思っています。空白とコメントを加えるだけで何ができるのか、あなたは実際に驚くことでしょう!

注2：スパゲッティ・コードを自分で直そうとする前に、自分が何をしているかを理解することが重要です。そうでない場合は、この記事をもう一度読んで、理解できるようになってから、ここに戻ってきてください。

注3：現在、スパゲッティが乱れる原因について調べていますが、そもそも何が原因なのかについては調べていません（したがって、エディタを開く前にもう一度考える必要があります）。

スパゲティコードのメリットは？

何もない。次のポイント!

将来のスパゲッティ・コードを防ぐには？

イタリアに移住して、不潔なコードを一行書くたびに、怒ったイタリア人に生のスパゲティの束で頭を殴られる以外に、以下のことを試してみてはどうでしょう...。

スパゲッティ・コードを避ける良い方法は、関数やメソッドを短くすることです。つまり、関数はそれが想定していることだけを行うべきであり、10種類のことを行う関数や100行もある関数は必要ありません。
つまり、ループの中にループを深くネストさせないということです。
空白とインデントがスパゲッティコードに奇跡を起こします！コードの書式も忘れてはいけません。コードが見栄えの良いものであればあるほど、読みやすくなります。
レトロ - 何がうまくいったかを常に振り返り、それを追跡し、次回に反映させることができるようにします。
または、コーディングを改善することもできます
スパゲッティコードをどのようなものにするか計画するときの最後のヒントとして、エディタで直接コードを書くのではなく、何をさせたいかをグラフにしてみましょう（つまり、実際に実装する前に各機能が何をする必要があるのかを見るということです）。もしこれがうまくいかなかったら、一歩下がってやり直しましょう。

この簡単なルールに従えば、あなたが書いているものがスパゲッティにならないことは、ほぼ保証できます - でも、どうでしょう？もしかしたら、あなたのおばさんがスパゲッティと呼んでいたものは、実はスパゲッティ・コードの仮の姿かもしれないのです。