読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

JavaScriptで設定データをコードと分離する

Javascript 設計

f:id:nipe880324:20150312210900j:plain
Photo by Flickr: BlueisCoool's Photostream

良い設計のアプリケーションは、「生きた設定データ」をソースコードのメイン部分と分離し、設定データの変更を容易にし、意図しないバグを含まないようにします。

「URL」、「UIに表示される文字列」、「繰り返される一意の値」、「設定(ページごとの項目など)」、「変更されるかもしれない値」といった値が変わるかもしれない設定データをソースコードと分離します。


コード内に設定データが含まれています。

// Bad
function validate(value) {
  if (!value) {
    alert("Invalid value");                // 設定データ(メッセージ)
    location.href = "/errors/invalid.php"; // 設定データ(URL)
  }
}

function tobbleSelected(element) {
  if (hasClass(element, "selected")) {  // 設定データ(class属性)
    removeClass(element, "selected");   // 設定データ(class属性)
  } else {
    addClass(element, "selected");      // 設定データ(class属性)
  }
}


コードから設定データを分離します。
こうすることで、複数の箇所に同じデータが使われている場合、変更し忘れがなくなります。また、テスト用や開発用など設定データを環境に応じて簡単に変更できるようになります。

// Good
var config = {
  MSG_INVALID_VALUE: "Invalid value",
  URL_INVALID:       "/errors/invalid.php",
  CSS_SELECTED:      "selected"
};

function validate(value) {
  if (!value) {
    alert(config.MSG_INVALID_VALUE);
    location.href = config.URL_INVALID;
  }
}

function tobbleSelected(element) {
  if (hasClass(element, config.CSS_SELECTED)) {
    removeClass(element, config.CSS_SELECTED);
  } else {
    addClass(element, config.CSS_SELECTED);
  }
}


以上です。

参考文献

  • メンテナブルJavaScript