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

それが、Umbrellaです。

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

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

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

Umbrellaとは?

umbrella.png

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

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

Umbrellaの特徴

feature.jpg

それでは、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上で公開されており、無料で導入することができます。