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

そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

最近よく使うJavascriptライブラリ

本業はPerlでサーバサイドのプログラムをカリカリいじる仕事なのだけど、管理画面の作成なんかだとJavascriptをいじる機会も少なくはない。

そんなわけで今回は管理画面作成なんかでよく使うライブラリ紹介。

Underscore.js/Lo-Dash.js

配列・オブジェクト操作の簡単化とテンプレート機能を持ったライブラリ(とその互換高速版)。

_.[method]の形で使用する。

jQueryと組み合わせて使うと良い感じ。

配列操作

Perlをメインで使い、たまにJavascriptを使っていると、常々配列まわりで何かしらの操作をするのが非常にかったるく感じることが多い。


例えばオブジェクトの格納された配列を、特定のキーを持ったオブジェクトに変換しようとした場合の話。

Perlなら

my $array = [ { a => 1,  b => 'hoge'}, { a => 2, b => 'moge'} ];
my $hash = { map { $_->{a} => $_ } @$array };

↓とでもすれば一行でサクッと変換できる。

{1 => { a => 1, b => 'hoge'}, 2 => { a => 2, b => 'moge' }};

だが、Javascriptでこれをやろうと思うとArray.forEach文をゴリゴリ書いてやらなければならない。

この程度の例ならまだ良いのだが、ここに更にgrepやらsortやらを絡めるような話になってくると俄然面倒くさくなってくる。


そこでUnderscore.js(Lo-dash.js)が登場。

面倒くささを幾らかは緩和してくれる。

例えば先ほどの配列→オブジェクト変換でいえば

var array = [{ a:1, b:"hoge" }, { a:2, b:"moge" }];
var hash = _.indexBy(array, 'a');

↓という形で目的の達することができる。

{ 1:{ a:1, b:"hoge"}, 2: { a:2, b:"moge" }}

他にも特定の条件のオブジェクトだけ取り出せるfindとか内容に特定の操作をした結果を返すmapとか、色々と気の利いたメソッドが揃っている。



旧来的なWebシステムのセオリーでいえば「コストのかかるデータ操作はサーバ側でこなしてクライアント側は表示に徹するべし」ではあるのだけど、インタラクティブな表現が求められる昨今ではそれにも限界があるわけで、凄く助かるのである。

テンプレート

インタラクティブな表示」といえば、ユーザ操作に従ってHTMLを生成して挿入する機会は多い。

しかしJavascriptで文字列をどんどん結合して長文を生成していくのは非常にコストがかかるし、何より可読性も悪くなる。

そんな時助かるのがtemplateメソッド。

var compiled = _.template(
  '<p><%=title%></p><ul><%_.each(list, function(str){%><li><%=str%><%})%></ul>'
  );
$(''#target").html(
  compiled({title:"タイトル", list:[data:"あああ"], [data:"いいい"]})
  );

みたいな感じの記述で#targetに↓のようなHTMLが挿入できる。

タイトル

  • あああ
  • いいい

公式ドキュメントがめちゃめちゃ読みやすいのも好感度高い。

Underscore.js

Sammy.js

手の込んだページのJavascriptがスパゲティ化する原因としては、場当たり的にイベントハンドラを追記していった結果「ある状態の時どういう挙動をするか」が読み取りにくくなってしまうというのが一因としてある思う。


そこでSammy.js。

URLのコメント項(http://hoge.com/hoge#/[ココ!])で処理を分けることができる。

var app = $.sammy(function(){
  this.get('#/action1', {
    #/action1にアクセスした時の処理を記述
    
  });

  this.get('#/action2', {
    #/action2にアクセスした時の処理を記述
    
  });
  
};

app.run();

例えば$('#btn').click(function(){〜})みたいなイベントをキャッチしてその中で処理を記述する形だったものを、ボタンをページ内リンクに変更してそのURL毎の処理を記述するように変えることによって、状態と処理との対応が読み取りやすい形に書き換えることができる。

また、動作によりURLが書き換わる構造なためブラウザバックが使用できるし、「ある状態」を指定した形でリンクを貼れるので運用的にも便利な側面がある。


こっちは簡素なページだけど、そんなに覚えなきゃいけない要素はないから問題ない。

Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス