おじさんの毎日

おじさんですぅ

トップ > プログラミング > 美しいコードへ。脱スパゲッティーコードへの道。

美しいコードへ。脱スパゲッティーコードへの道。

プログラミング スパゲッティコード 初心者

こんにちは。おじさんです。



今回はプログラミング初心者がよくなりがちな「スパゲッティーコード」を改善する方法を解説していこうと思います。
主もある程度人様に見せられるようなコードになったので。





スパゲッティーコードってなに？



スパゲッティーコードってのは、wikiによると

スパゲティプログラムまたはスパゲティコードとは、コンピュータプログラムの状態を指すための表現であり、命令の実行順が複雑に入り組んでいたり、遠く離れた関連性の薄そうなコード間で共通の変数が使われていたりするなど、処理の流れや構造が把握しにくい見通しの悪い状態になっているプログラムのことである。

wiki より



だそうです。難しい。
要するに「きたねえコード」だってことです。



改善するメリットって？



「別に自分しか見ないならきれいじゃなくてもよくね？」って思った方。その考えはまずいです。
なんで改善しないとまずいのか、改善するメリットについて解説していきます。


デバッグしずらい


これですね。一番は。
まずコードを見比べてもらいたいと思います。

window.onkeydown = function(e) {
    if(e.keyCode == 49) {    //数字の１
        console.log("1が押されました");
    } else if(e.keyCode == 50) {    //数字の2
        console.log("2が押されました");
    } else {    //それ以外
        console.log("1と2以外が押されました。");
    }
}



これと

var text = [
    "1が押されました",
    "2が押されました",
];

window.onkeydown = function(e) {
    var keycode = e.keyCode-49;     //数字の1キーを0として数字の2を1とする
    console.log(text[keycode] == undefined ? "1と2以外が押されました。" : text[keycode]);  
}

この二つは1か2のキーが押されたらそれに応じてコンソールに出力するコードなのです。



前者はたくさん条件分岐を書いていてどの分がどの条件かがわかりずらいですね。
逆に後者はコードがすっきりしててやりたいことがわかりやすいです。

そしてやりたいことがわからなければどのように直せばいいのかもわかりません。
つまりデバッグしずらいってことです。



やりたいことがわかりやすいコードにすればデバッグしやすいです。



意識すること



続いては意識することです。


似たような処理をまとめる。


これです。



まず、コードがクソ長くなって見る気がまずなくなります。
そしてどこの処理がどのような処理なのかがわかりません。
これだけでデバッグがきつくなります。



それを関数などを使ってまとめることで、

  • 関数を呼び出したところの引数とかでどのような処理なのかがわかる。
  • コードが短くなる。（重要）

こんなになります。



処理をまとめましょう。


定数を使おう


つづいてはこれです。　



ちょっとさっきのコード持ってきます。

var text = [
    "1が押されました",
    "2が押されました",
];

window.onkeydown = function(e) {
    var keycode = e.keyCode-49;     //数字の1キーを0として数字の2を1とする
    console.log(text[keycode] == undefined ? "1と2以外が押されました。" : text[keycode]);  
}



ここのkeycode変数の49っていう数字。
解説したらわかったと思うんですが、初見じゃ「何の数字？」ってなりますよね。



こういう「何を指した数」がわからないやつが多いと、デバッグしてる最中に困ります。
忘れなければいいけど、いちいち確認しなきゃいけないからね。



でも、ここで定数を使うと？...

const KEYCODE_1 = 49;

var text = [
    "1が押されました",
    "2が押されました",
];

window.onkeydown = function(e) {
    var keycode = e.keyCode-KEYCODE_1;     //数字の1キーを0として数字の2を1とする
    console.log(text[keycode] == undefined ? "1と2以外が押されました。" : text[keycode]);  
}



このように「49っていう数字はキーボードの1のキーコードなんだな」って一目でわかります。
つまり定数を使えば数字が何さしてるのかがわかりやすくなるってことです。



まとめ



まとめです。