第3部 コードの再構成 ~一度に一つのタスクを~

コードからタスクを抽出する

一度に一つのタスクを行うようにコードを書くべき、とのこと。確かに、一度に複数のタスクを行うコードは複雑で読みにくい。

タスクの単位はリーダブルコードではユルく書かれており、明確な基準はない。自分なりに考え、コードを言葉にした時に「~する」になる単位と理解した。以下のコードを例にタスクを抽出してみよう。

function FormatDate(strDate, format) {
    //1. 引数が日付型かチェックする。
    if (!strDate) return '';
    if (!strDate.match(/^\d{4}\/\d{1,2}\/\d{1,2}$/)) return '';

    //2. 日付型に変換する。
    var date = new Date(strDate);

    //3. 指定したフォーマットに置換する。
    format = format.replace(/YYYY/g, date.getFullYear());
    format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
    format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));

    return format;
}

3つのタスクを抽出できた。今まで学んできたことを活用してコードを分割してみよう。

function FormatDate(strDate, format) {
    //1. 引数が日付型かチェックする。
    //  ⇒独立したコードなので再利用できるようメソッド化。
    if (!IsDate(strDate)) return '';

    //2. 日付型に変換する。
    //  ⇒既に明確なので変更しない。
    var date = new Date(strDate);

    //3. 指定したフォーマットに置換する。
    //  ⇒説明変数を使い、メソッドチェーンで重複するコードを減らした。
    var yyyy = date.getFullYear();
    var mm   = ('0' + (date.getMonth() + 1)).slice(-2);
    var dd   = date.getDate()).slice(-2));

    return format.replace(/YYYY/g, yyyy )
                 .replace(/MM/g,   mm)
                 .replace(/DD/g,   dd);
}

function IsDate(strDate) {
    if (!strDate) return false;
    if (!strDate.match(/^\d{4}\/\d{1,2}\/\d{1,2}$/)) return false;
    return true;
}

今の自分のレベルだとこれぐらいかな。ムリにコードを弄ると逆に読みにくくなりそうだし。多分、リーダブルコードを読む前なら「1」だけしか書かなかったと思う。もしくは「1」と「2」を1つのメソッドに書くという暴挙に出ていたと思う。少しは成長したかなぁ。。。

この記事が気に入ったらサポートをしてみませんか?