軽量なのに強力！jQueryそっくりなJavaScriptライブラリ「Umbrella」とは？

オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。
JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。
JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。

それが、Umbrellaです。

UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。
また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。
それでは、これだけjQueryが普及しているにもかかわらず、あえてUmbrellaを使う理由はどこにあるのでしょうか。

今回は、今注目のJavaScriptライブラリである「Umbrella」について詳しく解説していきます。
jQueryについて復習したい方は、以下の記事も参考にしてみてください。

参考：
ノンデザイナーのためのjQuery入門

Umbrellaとは？

Umbrellaはオープンソースの超軽量なJavaScriptライブラリです。
使い方がjQueryと極めて似ているため、学習コストが少なく、すぐに導入できる点が、今注目を集めている理由です。

2006年に最初のバージョンがリリースされて以来、jQueryは今日のWeb開発を支える上で重要な役割を担ってきました。
しかし、10年以上経過した上で機能の見直しや文法の効率性の見直しがあり、そこで登場したJavaScriptライブラリのひとつが、Umbrellaなのです。

Umbrellaの特徴

それでは、jQueryと比べて、Umbrellaにはどのような特徴があるのでしょうか。

1. 超軽量

多くのフロントエンドエンジニアが口を揃えて言うのが、「Umbrellaは超軽量」ということです。
jQueryライブラリは全て読み込むと250KBかかりますが、Umbrellaは圧縮していないコードでもたったの4KBです。
もちろんページの読み込みスピードはGoogleのページ評価にも影響するので、軽量であるということは意味のあることです。

2. 学習コストが少ない

UmbrellaはjQueryから大きく影響を受けています。
jQueryの文法を知っているのであれば、簡単にUmbrellaを導入することができます。具体的には「$('要素')」という書き方を「u('要素')」に変えればいいだけです。
また、クリックやホバーといったイベントハンドラーもそのまま扱うことができます。

3. 必要十分な機能

UmbrellaはもともとjQueryの中でも特に頻繁に使われるDOM操作に特化して開発されたという経緯があります。
UmbrellaはDOM操作、イベント、AjaxなどのjQueryでも使える機能的な側面は残しつつ、他のライブラリでも代用できるようなアニメーション機能などはカットすることで、軽量かつ扱いやすいライブラリに仕上がっています。

4. もちろん無料

MITライセンスでGithub上で公開されており、無料で導入することができます。

Umbrellaの導入方法

Umbrellaを導入するのは簡単です。
JSdelivr CDNを使うか、JavaScriptファイルをダウンロードしてHTMLに設置すれば完了です。

<script src="umbrella.min.js"></script>

あとはjQeuryと同じようにJavaScriptエリアにコードを書くか、外部ファイルを読み込めばOKです。

Umbrellaの使用例

イベント

イベントを操作するのも簡単です。
以下の例は、ボタンをクリックするごとに「Hello World」を表示するためのコードです。

u("button").on('click', function(){
　　alert("Hello world");
});

自動的に新規窓を立ち上げるリンクにする

「each()」関数を使って全てのノードに「target="blank"」を付加してみましょう。

u('a').each(function(node, i){
　　u(node).attr({ target: '_blank' });
});

Ajaxを使う

jQueryに比べてUmbrellaを使った方がずっと簡単にAjaxを利用することができます。

u('form').ajax(function(err, data){
　　if (!err) alert('Done! Thanks, ' + data.name);
});

ある要素までスクロールする

さまざまなホームページで見られるように、ある特定のclassをつけてそこまでスクロールできるようにコードを書くこともできます。

u('a.team').on('click', function(e){
　　e.preventDefault();
　　u('section.team').scroll();
});

10秒ごとに自動保存する

「10秒ごとに自動保存」という一見複雑そうな機能も、Umbrellaでは下記のように非常にシンプルなコードで実装することができます。

// Ajax経由でフォームを送信する
u('form.edit').ajax();

// 10秒ごとに送信する
setInterval(function(){
　　u('form.edit').trigger('submit');
}, 10000);

まとめ

jQueryと非常に類似性が高いだけでなく、AjaxなどはUmbrellaを使えばjQuery以上にシンプルに書くことができます。
また、とても軽量で学習コストも低く、すぐに導入することができます。

利用に関しての文法ルールや注意事項はDocumentationに記載されています。
ぜひ一度Umbrellaを使ってみてください。