tobijibu-ashiato: Umbrella.jsを調べる

jQueryみたいに書けて、とても軽いということで、今年に入ってから少し話題になっているようです。

jQueryに強く影響を受けているようで、 jQueryコールの先頭に付ける$をuに変えるだけで何となく動きます。慣れている人にとって学習コストはほぼ0です。メソッドはjQueryに比べるとかなり少なく、Umbrellaには実装されていないメソッドが多くあります。とはいえ、ちょっとしたDOM操作には充分な機能を持っています。

メソッドで使うセレクタの指定方法も色々なパターンが許容されています。 .addClass()の場合、文字列だけでなく、配列、関数などが使えます。これはjQueryでも同じですね。

他には、Ajaxを実装する時に、Ajaxの処理をjQueryより簡潔に書く方法もありますし、「Ajaxを楽に使いたいけど、jQueryはちょっと重いなぁ」という場合にぴったりです。

良いことばかりではなく、気をつけなければいけないこともあります。

当たり前のことではありますが、jQueryではないのでjQueryプラグインは使えません。ここ数年で脱jQueryの流れが来ており、jQueryを使わないライブラリが増えてきてはいるものの、やはり便利なプラグインは多いので、うまく使い分けたいところですね。

また、同じメソッドでも引数や処理が違うものがあります。例えば.after()が該当します。

以下のようなHTMLがあるとして、

<div id='jquery'>jQuery</div>
<hr>
<div id='umbrella'>Umbrella</div>

以下を実行すると同じ内容になります。


$("#jquery").after('<a>One</a>');
u("#umbrella").after('<a>One</a>');

結果

<div id="jquery">jQuery</div>
<a>One</a>
<hr>
<div id="umbrella">Umbrella</div>
<a>One</a>

しかし、以下の場合は結果が変わってしまいます。


var cb = function(txt){ return "<a>" + txt + "</a><br>" };
$("#jquery").after(cb, ["One", "Two", "Three"]);
u("#umbrella").after(cb, ["One", "Two", "Three"]);

結果

<div id="jquery">jQuery</div>
<a>0</a><br>
OneTwoThree
<hr>
<div id="umbrella">Umbrella</div>
<a>One</a><br>
<a>Two</a><br>
<a>Three</a><br>

jQueryとUmbrellaで引数の種類が違うので、結果に差異が出てしまいます。仮にjQury→Umbrellaに置き換えようとした場合、たとえ小さなjQueryのスクリプトであっても、メソッドの確認が必要です。単純に$とuを置き換えるだけでは不具合が出てしまう場合があります。

がっつりと使うわけではなく、CSSを組み合わせた小さなアニメーションや、簡単なDOM操作をするだけであれば、Umbrellaは良い選択肢になりそうです。

ということで、公式ドキュメントを翻訳しました。

[Umbrella - にほんご。]

是非Umbrella.jsを使ってみてください。

2017-10-27

Umbrella.jsを調べる

結果

結果