うねりコード

数学ガールの著者である結城浩さんの、かなり昔のページにこんなものがありました。

うねりコード – 【アンチパターン】遠くから見ると、画面上でコードがうねっている。
http://www.hyuki.com/yukiwiki/wiki.cgi?%A4%A6%A4%CD%A4%EA%A5%B3%A1%BC%A5%C9

記事を引用いたします。

98/ 3/17 (火) うねりコード
大学時代に私の同期のN村がモニタを見ながら、「悪いコードは遠くから見てもわかるんだよ、ほら、うねってるだろ」と言っていた。当時は笑うだけだったが、今は溜め息をつくばかりである。身の回りにあるコードはこんなのばかりだ。

一応、「うねりコード」とは何であるのか説明すると、一つの関数のコードが異常に長く、インデントが異常に深く、そしてこれが一番重要なのだが、読んでいるうちに既視感 (デジャブ) に襲われるようなコードの事である。

うねりサンプル

うねりコードを具体的なサンプルで見るとこんな感じです。
(あくまでイメージとしてご覧ください。)

var dispShopList = function(var userId, var shopId) {
    var shopItem = Shop.get(shopId);
    if (shopItem.type == "Boost") {
        // 前回購入日からN日間は割引適用
        if (hasHistory(userId, shopId)) {
            var waribiki = Shop.getWaribiki(shopId);
            if (waribiki) {
                var price = shopItem.price - waribiki;
                if (price <= 0) {
                    exit("無料はあり得ない");
                }
            }
        } else {
           var price = shopItem.price;
        }
        // Boostアイテムはリアル通貨のみ
        if (hasMoney(userId, price)) {
            if (confirm("購入します。よろしいですか??")) {
                Shop.buy(userId, shopId);
            } else {
                dialog("キャンセルしました。");
            }
        } else {
            dialog("お金が足りません");
        }
    } else if (shopItem.type == "Ticket") {
        // Ticketアイテムはゲーム内通貨のみ
        if (hasGold(userId, shopItem.price)) {
            var itemId = Shop.toItemId(shopId);
            if (isMax(userId, itemId)) {
                if (confirm("購入します。よろしいですか??")) {
                    Shop.buy(userId, shopId);
                } else {
                    dialog("キャンセルしました。");
                }
            } else {
                dialog("これ以上所持できません。");
            }
        } else {
            dialog("通貨が足りません");
        }
    } else if (shopItem.type == "Extend") {
        // Extendアイテムはゲーム内通貨のみ
        if (hasGold(userId, shopItem.price)) {
            var itemId = Shop.toItemId(shopId);
            if (isMax(userId, itemId)) {
                if (confirm("購入します。よろしいですか??")) {
                    Shop.buy(userId, shopId);
                } else {
                    dialog("キャンセルしました。");
                }
            } else {
                dialog("これ以上拡張できません。");
            }
        } else {
            dialog("通貨が足りません");
        }
    }
}

うねっていますね。
ある程度経験があるエンジニアは既視感を感じるサンプルでしょう。

上記はネストが4つ程度のため、まだ読めると思います。
しかし(コードの負債が)過酷なプロジェクトは、四万十川のように、もっともっと長大で、もっともっと深いうねりを内部にたたえています。

腐るシステム

うねったコードは絶妙なバランスの上に成り立っている場合が多いです。

たとえば、機能追加で何か変数に代入したり、処理の順序を変更した場合にすぐ何かしらの影響が出てしまいます。
修正が終わってからテストすると、不具合が連発して巻き戻す羽目になることも珍しくありません。

変更に弱く、そもそもコードを読むことがプログラマの大きな負担になってしまうため、誰も触れたがらずに塩漬けになってしまうのですね。
塩漬けになったコードがあるプロジェクトは、大抵が最終的に腐ります。

うねったコードと戦う武器を持つ

プロジェクトを腐らせずに成長させるには、、、

やはり、銀の弾丸はありませんから、地道に改善を重ねる体制を構築するしかないと考えています。

たとえ1週1時間でも、1日30分でも、継続的に手を加えていってコードと仲良くなることが大切ではないでしょうか。

具体的なテクニック

大抵のコードはパーツをメソッドに切り出していくだけで、格段に良くなります。

これはメソッド抽出として、書籍『リファクタリング』でも第一に紹介されているパターンであり、長すぎる関数と戦うために必ず身に着けておきたいテクニックです。


先のコードに手を加えてみましょう。
ブーストアイテムの価格決定は、関数化することですっきりしそうです。

※実際にはテストを書いてから、リファクタリングすることを推奨します!

ステップ1. 切り出す部分のマーキング

先ほどのサンプルで、切り出す部分をコメントアウトしました。

if (shopItem.type == "Boost") {
/*
    // 前回購入日からN日間は割引適用
    if (hasHistory(userId, shopId)) {
        var waribiki = Shop.getWaribiki(shopId);
        if (waribiki) {
            var price = shopItem.price - waribiki;
            if (price <= 0) {
                exit("無料はあり得ない");
            }
        }
    } else {
        var price = shopItem.price;
    }
*/
    // Boostアイテムはリアル通貨のみ
    if (hasMoney(userId, price)) {
        if (confirm("購入します。よろしいですか??")) {
            Shop.buy(userId, shopId);
        } else {
            dialog("キャンセルしました。");
        }
    } else {
        dialog("お金が足りません");
    }
    :

ステップ2. 切り出しの実行

マーキング部分を、単純に別関数として切り出します。

このステップではブロックを移動するだけなので、当然まだ動きません。

if (shopItem.type == "Boost") {
/*

*/
    // Boostアイテムはリアル通貨のみ
    if (hasMoney(userId, price)) {
        if (confirm("購入します。よろしいですか??")) {
            Shop.buy(userId, shopId);
        } else {
            dialog("キャンセルしました。");
        }
    } else {
        dialog("お金が足りません");
    }
    :

var getPrice = function() {
    // 前回購入日からN日間は割引適用
    if (hasHistory(userId, shopId)) {
        var waribiki = Shop.getWaribiki(shopId);
        if (waribiki) {
            var price = shopItem.price - waribiki;
            if (price <= 0) {
                exit("無料はあり得ない");
            }
        }
    } else {
        var price = shopItem.price;
    }
}

ステップ3. 前後処理を整える

移動元、移動先の処理を整えます。

if (shopItem.type == "Boost") {

    var getPrice(shopId, shopItem);

    // Boostアイテムはリアル通貨のみ
    if (hasMoney(userId, price)) {
        if (confirm("購入します。よろしいですか??")) {
            Shop.buy(userId, shopId);
        } else {
            dialog("キャンセルしました。");
        }
    } else {
        dialog("お金が足りません");
    }
    :

var getPrice = function(var shopId, var shopItem) {
    // 前回購入日からN日間は割引適用
    if (hasHistory(userId, shopId)) {
        var waribiki = Shop.getWaribiki(shopId);
        if (waribiki) {
            var price = shopItem.price - waribiki;
            if (price <= 0) {
                exit("無料はあり得ない");
            }
        }
    } else {
        var price = shopItem.price;
    }
    return price;
}

とりあえずこれでコードが動くようになりました。

ほんのわずかですが、本体コードを短くすることができ、そのコードが何をやっているか把握しやすくなりましたね。

このように1つ1つのコードを短くすることに成功すれば、コードの把握が容易になり、改善しやすさは格段に向上します。


ついでに切り出した関数をもうちょっとだけ良くしてみましょう。

if elseを逆にして、すぐreturnすることで、さらにコードを整理することができます。

var getPrice = function(var shopId, var shopItem) {
    // 前回購入日からN日間は割引適用
    if (hasHistory(userId, shopId) == false) {
        return shopItem.price;
    }
    var waribiki = Shop.getWaribiki(shopId);
    if (waribiki == false) {
        return shopItem.price;
    }
    if (shopItem.price <= waribiki) {
        exit("無料はあり得ない");
    }
    return shopItem.price - waribiki;
}

終わりに

先頭でご紹介した結城浩さんの記事日付は1998年です。
私がプログラミングを勉強するずっとずっと前から、コードと戦ってベストプラクティスを模索してきた方がおられることに感動、感謝いたします。

上記の記事から20年近く経過した今でも、うねったコードは量産され続けているとかんじます。

プログラミングと作文は似ています。

想いを書きなぐっただけでは良いものにはなりません。
ですから、推敲に推敲を重ねて良くしていくステップが必要なのですね。

コードは3回書き直す」ぐらいがちょうどいいのです。

この記事はtomita@atuwebがお届けしました。


スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
ad_336