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

Rails Webook

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

HTML/CSS/JavaScriptを疎結合にする方法

Javascript HTML CSS 設計

HTML/CSS/JavaScriptは相互に関係しています。
f:id:nipe880324:20150312021825j:plain:w360

しかし、それぞれが関係しているからといって、不必要に複雑にして良いわけではありません。

理想としては、

  • テキストや構造に関する問題がある場合は「HTML」
  • スタイルの問題がある場合は「CSS」
  • 振る舞いに問題がある場合は「JavaScript」

を確認し、修正するだけで良いようにしたいです。

こうすることで、デバッグのしやすさ、コードの理解しやすさ、保守性が上がり、幸せになれます!(きっと)

パフォーマンスなどの事情で理想通りにはできないので、あくまで理想として。


それぞれができるかぎり関係しないようにし、疎結合にする方法を説明します。

目次

  1. HTMLからJavaScriptを隔離する
  2. JavaScriptからCSSを隔離する
  3. JavaScriptからHTMLを隔離する


1. HTMLからJavaScriptを隔離する

イベントの登録には、onclickなどのon属性を使ってイベントを割り当てないようにすることで、HTML内にJavaScriptのメソッドが入ることを避けるようにします。

<!-- Bad: HTML内にJavaScriptのコードが入ってしまっている -->
<button onclick="doSomething()" id="action-btn">Click Me</button>


代わりに、ライブラリが提供するメソッドを使って要素へのイベントハンドラを行うようにします。

// Good
$("action-btn").on("click", doSomething);


また、イベントハンドラと同様に、JavaScriptをHTML内にインライン化せず、すべて外部ファイルに格納するようにしましょう。

<body>
  <!-- Bad: HTML内にJavaScriptコードを記載している -->
  <script>
  function doSomething() {
    // コード
  }
  </script>

  <!-- Good: 外部ファイルとしてJavaScriptを読み込んでいる -->
  <script src="js/all.min.js"></script>
</body>

外部JavaScriptファイルへのリクエストを抑えパフォーマンスを優先させるなどの場合は、やむを得ない。




2. JavaScriptからCSSを隔離する

可能な限り、DOM要素のstyleプロパティを使ってJavaScriptからスタイリング情報を設定しないようにしましょう。

// Bad: JavaScript内にスタイリング情報が入ってしまっている
element.style.color = 'gray';
element.style.text-decoration = 'line-through'; // line-through: 取り消し線


代わりに、要素のclass属性の追加/削除によってJavaScript内からスタイリング情報を分離するようにする。

// Good
/* CSS */
.completed {
  color: gray;
  text-decoration: line-through;
}


// JavaScript (jQuery)
$(element).addClass('completed');
$(element).removeClass('completed');


3. JavaScriptからHTMLを隔離する

innerHTMLプロパティを使って、JavaScript内でHTMLを設定しないようにしましょう。

// Bad: JavaScriptコード内でHTMLコードが混入してしまっている
$('my-div').html("<h3>Error</h3><p>Invalid e-mail address.</p>");

解決策1: サーバーからHTMLをロードする

$.get('', function(data) {
    // サーバーから取得したHTMLを設定する
    $('my-div').html(data.res);
  })
  .fail(function(data) {
    // エラー処理
  };

サーバーから取得したHTML片を設定することで、JavaScriptからHTML片を取り除くことができます。


解決策2: クライアントサイドのテンプレートを使う

JavaScriptのテンプレートエンジンのHandlebarsを使って、テンプレートを使った流れを説明します。


まず、HTMLのテンプレートファイルを用意します。

<!-- account-validation-template.hbs -->
<h3>{{account.error.title}}</h3><p>{{account.error.message}}</p>


そして、JavaScript側でテンプレートファイルを設定します。

var html = Handlebars.templates['account-validation-template.hbs']({
   account : {
    error : {
      title : 'Error',
      message : 'Invalid e-mail address.'
    }
  }
});
$('my-div').html(html);

こうすることで、JavaScriptからHTML片を取り除くことができます。