Umbrella といえばバイオハザードくらいだった私が、Web 開発の現場で注目の軽量な JavaScript ライブラリ Umbrella JS を使ってみました。
その経緯やメリットをご紹介いたします。

Umbrella JS

Umbrella JS とは

Small, lightweight jQuery alternative
ライブラリ本体より

そう、Umbrella JS は「小型で軽量な jQuery の代替ライブラリ」です。 (jQuery については後述いたします。)

Official

Umbrella JS official site
Umbrella JS official site
Umbrella JS
https://umbrellajs.com/

ライセンス

MIT License

Umbrella JS 登場の背景

WordPress など Web の開発現場では長らく jQuery が圧倒的なシェアを占めていました。

jQuery
https://jquery.com/

jQuery は JavaScript 人気を下支えしたと言っても過言ではないオープンソースのライブラリです。
汎用性と拡張性を備えており、知識がなくても組み込める手軽さと、プラグイン機構で機能拡張が容易な点が高い評価を受けておりました。

こういった jQuery の良さは変わりません。 それでも、登場から 10 年程度経過し、Web 技術の発達や流行など変化のなかで、必ずしも jQuery がベストな選択ではないというシーンが増えていきました。

そう、もっとライトに、カジュアルに、ミニマムなライブラリ が求められるようになったのです。

それを実現するものの一つが、Umbrella JS です。

Umbrella JS の特徴

軽量である

Umbrella JS が注目される一番の理由は、なんといっても 軽い ことではないでしょうか。

サイズを比較してみましょう。

名称 サイズ 備考
jQuery 3.3.1 87 KB minify 版
Umbrella JS 2.10.0 10 KB minify 版

minify 版でこれだけの差がありますから、かなりの軽量化に成功していると言えます。


肥大化を防いでいる要因は、API を最小限に絞り込んでいる ためです。

機能は大きく次に分類できます。 - DOM操作 - イベントハンドリング - Ajax

ブログやコーポレートサイトであれば、この機能があれば十分にいろいろなことができますよ。

学習コストが少ない

「軽量な jQuery 代替」というとおり、Umbrella JS は文法や関数名など多くの点で jQuery との近似させており、スムーズに移行できるようになっています。

また、Umbrella JS は機能を絞り込んでいるため、提供 API もそれほど多くありません。

「指定要素にクラスを追加する」処理は、ほぼ同じコードになります。

// jQuery
$('#hoge').addClass('fuga');
// Umbrella JS
u('#hoge').addClass('fuga');

ほぼ jQuery で慣れ親しんだ文法でコーディングできます。 そのため、過去 jQuery にしっかり取り組んでこられた方であればほとんど苦労せずに Umbrella JS に乗り換えられるでしょう。

もちろん、両者全く同じではありませんから、移行後のデバッグは必須ですよ。

組み込みやすい

ライブラリの責務が小さく、すでに完成しているサイトであっても簡単に Umbrella JS を差し込むことができます。 これは jQuery も同じですね

Umbrella JS は現場で使えるか

コーディングのブレが減る

jQuery では次のように on() でも click() でもクリックイベントを表現できます。

// jQuery
$('#hoge').click(callback);
$('#hoge').on('click', callback);

このように jQuery は数多くのシンタックスシュガーを提供しており、同じイベント処理でも複数の書き方ができました。 これは表現力がある反面、書き方にブレが生じてしまいやすいことにつながります。


Umbrella JS はイベントハンドリング に on() を提供しています。

// Umbrella JS
$('#hoge').on('click', callback);

click とコーディングできる方が直感的ではありますが、上記の表現であっても全く困りませんし、逆に表現が統一できるメリットのほうが大きいと感じます。

animate が使えない

Umbrella JS では jQuery の特徴の一つである animate() が提供されていないため、単体でアニメーションが組めなくなります。

しかしながら、JavaScript でアニメーションする必要は、今はもうありません。
アニメーションは CSS に担当してもらったほうがヌルサクです。

ここは適切に役割分担ができると理解しましょう。

また、演出が閲覧者の心をつかむのはほんの一瞬です。

で複雑な通信処理にはは向かない

Umbrella JS にも Ajax 機能が提供されていますが、Deferred など対応しておらず、正直に複雑な実装は不向きです。

そもそもが、なんでもできるライブラリを目指していません。
もし Ajax のコールバックが重なるなど、複雑なことをしたいのであれば SPA 化するなど別の方法を検討したほうが良いですね。

jQuery プラグインの再利用ができない

別ライブラリですから当然ですが、膨大な jQuery 系のプラグインは利用できません。

柔軟な拡張性、既存プラグインの有効活用を前提にしている場合、Umbrella JS ができることは少ないと言わざるを得ません。

移行コストをかけられるか

いくら文法が似ていると入っても、「 $ を u に置き換えるだけ」というイージーなものではありません。

実際に手を動かすと、細かい点ではいくつも両者に相違があることがわかります。
稼働中のものを Umbrella JS に移行する場合はちょっと規模が大きくなりやすいと思います。

結論

Umbrella JS は十分に使えるライブラリです。

「とりあえず jQuery」ではなく「まずは Umbrella JS」というように選択肢が一つ増えたことの恩恵は大きいです。


ただし、ミニマムなライブラリであるため、要件が合うか のジャッジは必要ですね。
具体的には、新規プロジェクトで、かつフロントエンドの要件がミニマムであれば、Umbrella JS が真価を発揮しやすいと言えます。

Umbrella JS が幸せにできる人

  • 高速化の重要性を理解している人
  • 要件に合わせて適切なライブラリを選択できる人

Umbrella JS が幸せにできない人

  • プラグインを追加することで簡単に拡張することを期待している人
  • インターネット上で提供されているコードを切り貼りして済ませたい人

おわりに

私にそれは不要です、必要になる時までは
by みちひこ


システム開発に携わっている方であれば 小さくシンプルであること の維持がどれほど難しいか、実感できるのではないでしょうか。

機能が豊富なことにも価値がありますが、それ以上に「小さいこと」は価値がありますよ。

私は特に「小さいこと」「軽いこと」を重視しています。 ですから PC は macbook 12 で、カメラは EOS Kiss X7 です。

MacBook (12-inch/1.1GHz Dual Core Intel Core m3/256GB/8GB/802.11ac/USB-C/ローズゴールド)

最大10時間持続するバッテリーを搭載;802.11ac Wi-Fiワイヤレスネットワーク接続 本体ディスプレイで標準解像度、30Hzの外部ディスプレイで最大3,840 x 2,160ピクセル表示を同時サポート ※キーボード写真はイメージとなります。製品本体の状態についてご不明点がある場合は、各出品者に直接お問い合わせください。 フルサイズキーボード、12個のファンクションキーと4つの矢印キーを含む独立型LEDバックライトキーを装備 環境光センサー搭載(カスタマイズ構成オプションで米国仕様のUSキーボードを選択可能) 圧力感知機能を搭載した感圧タッチトラックパッド(強めのクリック、加速操作、感圧スケッチ、マルチタッチジェスチャー利用可

Amazonで詳細を見る

Canon デジタル一眼レフカメラ EOS Kiss X9 EF-S18-55 IS STM レンズキット(ブラック) KISSX9BK1855F4ISSTML

高画質な写真や動画を撮影できる基本性能はもちろん、一眼レフカメラを新たに使い始めるユーザーに向けて、小型・軽量化に加え、操作性やネットワークとの親和性を高めたデジタル一眼レフカメラ。

Amazonで詳細を見る

この記事の著者 Queue 8 Studio みちひこ