第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つのメソッドに書くという暴挙に出ていたと思う。少しは成長したかなぁ。。。
この記事が気に入ったらサポートをしてみませんか?