あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

body要素のid属性またはclass属性をJavaScriptのディスパッチャーに使う

最近、実案件で実験していたのですが、仕様が固まってきたのでメモしておきます。

JavaScriptを特定のページで実行したいというニーズがあるけれど、head要素内に書くとか、body要素内に書くとか、そのページ限定でscript要素を使って読み込むとかいろんな方法があります。

ただ、コードが散らばると管理が面倒なので、一つのファイルにまとめたい派です。まとめれば、HTTPリクエストが減るし、キャッシュもされるし、何かと都合が良かったりします。

ひとつにまとめると、「そのページで実行するスクリプト」を一つのファイルから切り分けないといけなくなるので、ディスパッチャーが必要です。

@kyo_ago さんの「そこそこ規模が大きくても何とかなるjavascriptの設計(URL dispatcherの薦め) | tech.kayac.com - KAYAC engineers' blog」という記事がアイディアの出発点で、参考にさせてもらいました。

とりあえずサンプル

サンプルコードはこんな感じ。

元々、案件ではjQueryを使っていたので、実際はjQueryで書いてるんですけど、サンプル用にJavaScriptで書き直しました。ついでに、案件ではid属性しか使っていませんでしたが、複数のページで実行したい機能がある時にちょっと面倒だったので、class属性も使用するように改変しました。

正規表現を使わないので、自由度は今ひとつですが、逆に正規表現を使えないデザイナさんとかは使いやすいのかも。

ソース中にreduceとかforEachとか使ってるので、IEや最新でないFirefoxSafariなどを使う場合は、for文等に直す必要があります。

CSSシグネチャにも使う

CSSファイルもJavaScriptファイルと似たような理由で、一つのファイルにまとめていたので、body要素のid属性はCSSシグネチャCSSで各ページのスタイルを切り分ける用途としても使ってました。*1

そんなこんなでJavaScriptのディスパッチャーでも、body要素のid属性をキーにすると、管理運用上楽かなと感じたのでこうなりました。

これは今後も使っていきそうな気がしてます。

まとめ

コーディングもプログラミングもまだまだ半人前だけど、将来的にまたディレクターに戻ると思うので、全体的にうまく進められるように日々考えながら作業ができればと思ってます。時間はかかる。

おまけ

jQueryを使うのであれば、body要素のid属性に値を入れると、こういう書き方もできたり。

(function() {
  var MySite = {};
  var Pages = ['index', 'contact', 'about', ...];
  $.each(Pages, function() {
    var self = this;
    MySite[self] = function(q) {
      return $('#' + self).find(q);
    };
  });
  
  MySite.index('#hoge').fadeIn('slow'); //トップページのhogeにナニするってのがわかりやすくなる気がする
  MySite.contact('#form').submit(function() {
    ...
  });
})();

似たようなことはやってた。

追記

id:cos31さんのブコメにCMSで便利そうとのコメントがありましたが、実際、Wordpress案件で、is_page('hoge')is_category('fuga')みたいな条件分岐タグで分岐してid属性に値を代入してたりしました。

追記2

CSSシグネチャという用語を誤用していたようだったので訂正しました。ごめんなさい。何かのセミナーで聞いて、各ページに固有の記号を付けるような意味で理解していて、その言葉が生まれた経緯とか知りませんでした。

Twitter上で何名かの方が言及してくれていたのを見つけましたので、引用します。

*1:CSSシグネチャという用語を誤用していたので、追記しました。 [追記2]