美しいプログラムを書く(業務用Webアプリケーション保守編)

(0) できあがったコード

$(document).ready(function () {
    // seq: シーケンス番号
    $.each(["new_version", "old_version"], function () {
        $("input[name='" + this + "']").each(function (idx, elem) {
            if (idx == 0) $(elem).attr('checked', 'checked');
            $(elem).attr('seq', idx);
        });
    });
    $("input[name='new_version']").change(function () {
        var seq = parseInt($(this).attr('seq'));
        $("input[name='old_version']").eq(seq).attr('checked', 'checked');
    });
});

これはまたリファクタリングのしがいのあるコードです。 ちょっと本腰を入れて直すことにしましょう。

(1) 独自のデータを紐付けるには $.data を使う

まず「対応するラジオボタン」を選ぶための処理が臭います。 上の行のものから順に番号を振っているのですが、 この番号を紐付けるために $.attr を使っています。 $.attr は対象の要素の属性の値を参照/設定するためのものであって、 設定するならば属性の名前や値は HTML 的に妥当なものにすべきです。

$.data という、任意の要素に任意のデータを紐付けるための API が用意されているので、 ここではそれを使うべきです。また、 $.data を使えば parseInt 等をする必要もなくなります。

$(document).ready(function () {
    // seq: シーケンス番号
    $.each(["new_version", "old_version"], function () {
        $("input[name='" + this + "']").each(function (idx, elem) {
            if (idx == 0) $(elem).attr('checked', 'checked');
            $(elem).data('seq', idx);
        });
    });
    $("input[name='new_version']").change(function () {
        $("input[name='old_version']").eq($(this).data('seq')).attr('checked', 'checked');
    });
});

(2) 一つのループ内で複数の処理を行わない

次に $.each でのループ処理ですが、

• 各列の最初のラジオボタンに初期状態でチェックを入れておく
• 「対応するラジオボタン」を得るために番号を紐付ける

という2つの処理が混ざっています。 これは jQuery がどうこう言う以前の問題です。 混乱を避けるために各処理を分割しておきます。

$(document).ready(function () {
    var $new_versions = $("input[name='new_version']");
    var $old_versions = $("input[name='old_version']");

    $new_versions.eq(0).add($old_versions.eq(0)).attr('checked', 'checked');

    // seq: シーケンス番号
    $.each(["new_version", "old_version"], function () {
        $("input[name='" + this + "']").each(function (idx, elem) {
            $(elem).data('seq', idx);
        });
    });
    $("input[name='new_version']").change(function () {
        $("input[name='old_version']").eq($(this).data('seq')).attr('checked', 'checked');
    });
});

(3) 添字ではなく要素そのものを使う

さて、「対応するラジオボタン」を得るための処理なのですが、どうにもまどろっこしい感じが拭えません。 $.data で任意のデータを紐付けられるのですから、 わざわざ添字を使わなくとも、 直接「対応するラジオボタン」を紐付ければ良いのです。 そうすれば「seq: シーケンス番号」という謎のコメントを書くこともなくなります。

$(document).ready(function () {
    var $new_versions = $("input[name='new_version']");
    var $old_versions = $("input[name='old_version']");

    $new_versions.eq(0).add($old_versions.eq(0)).attr('checked', 'checked');

    $new_versions.each(function (i0) {
        $(this).data('pair', $old_versions.eq(i0));
    });
    $("input[name='new_version']").change(function () {
        $(this).data('pair').attr('checked', 'checked');
    });
});

(おまけ) セレクターを動的に作らない

今回の場合は(2)から(3)になる過程でごっそり削除していまいましたが、

$("input[name='" + this + "']")
    .each(function (idx, elem) {
        ...

のように動的にセレクターを作成しているのも良くありません。 この書き方では this の値に妙な文字が混ざっていると破綻します。 例えば this の値が "'foo'" の場合、上記のコードは

$("input[name=''foo'']")
    .each(function (idx, elem) {
        ...

と書いたものと同じになります。 $.filter で絞り込めばこのような事態には遭遇しません:

var targetName = ...;
$("input")
    .filter(function () {return $(this).attr("name") == targetName;})
    .each(function (idx, elem) {
        ...

まとめ

今回の場合は $.data を知っているかどうかで読み易いコードを書けるかどうかが変わってきます。 不慣れなライブラリーでも API リファレンスには一通り目を通しましょう。

合わせて読みたい

• 美しいプログラムを書く(脱添字職人編)、
• 美しいプログラムを書く(リスト処理ライブラリ編)、