カテゴリー
読みやすいコード

最後の例/A Final Example

この章の最後の例では、今まで説明した多くの原則を示す例を示したいと思います。
次のように配置された多数の入力テキストフィールドを持つWebページがあるとします。

<input type="text" id="input1" value="Dustin"> 
<input type="text" id="input2" value="Trevor"> 
<input type="text" id="input3" value="">
<input type="text" id="input4" value="Melissa"> 
...

ご覧のように、IDはinput1から始まり、そこからインクリメントします。
あなたの仕事は、文字列を受け取りページの最初の空の(この例では "input3")に置くsetFirstEmptyInput()という関数を書くことです。 この関数は、更新されたDOM要素を返す必要があります(空の入力が残っていない場合はnull)。 これを行うためのコードは、この章の原則を適用しないものです:

var setFirstEmptyInput = function (new_value) {
    var found = false;
    var i = 1;
    var elem = document.getElementById('input' + i);
    while (elem !== null) {
        if (elem.value === '') {
            found = true;
            break;
        }
        i++;
        elem = document.getElementById('input' + i);
    }
    if (found) elem.value = new_value;
    return elem;
};

このコードは仕事を終わらせるが、それほど美しいものではない。 何が問題なのですか?それをどのように改善しますか?
このコードを改善する方法はたくさんありますが、使用する変数の観点から検討します。

・var found
・var i
・var elem

これら3つの変数はすべて関数全体に存在し、複数回書き込まれます。 それぞれの使い方を改善しようとしましょう。
この章の前半で説明したように、発見されたような中間変数は、しばしば早期に返すことで排除することができます。 ここにその改善があります:

var setFirstEmptyInput = function (new_value) {
    var i = 1;
    var elem = document.getElementById('input' + i);
    while (elem !== null) {
        if (elem.value === '') {
            elem.value = new_value;
            return elem;
        }
        i++;
        elem = document.getElementById('input' + i);
    }
return null;
};

次に、elemを見てみましょう。 コード全体で複数回使用されていますが、その値を把握するのが難しい非常に「偽の」方法です。 コードは、elemが私たちが反復処理している値であるかのように見せます。 ですから、whileループをforループに再構成しましょう。

var setFirstEmptyInput = function (new_value) {
    for (var i = 1; true; i++) {
        var elem = document.getElementById('input' + i);
        if (elem === null)
            return null;  // Search Failed. No empty input found.
        if (elem.value === '') {
            elem.value = new_value;
            return elem;
        }
    }
};

特に、elemがどのように寿命がループ内に含まれる追記型変数として機能するかに注目してください。 true for aループ条件の使用は普通ではありませんが、代わりに、私は1行でiの定義と修正を見ることができます。 (伝統的な(真実)も合理的です。)

参考文献:

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

The Art of Readable Code: Simple and Practical Techniques for Writing Better Code (English Edition)

The Art of Readable Code: Simple and Practical Techniques for Writing Better Code Kindle (English Edition)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です