軽量なのに強力!jQueryそっくりなJavaScriptライブラリ「Umbrella」とは?
オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。
JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。
JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。
それが、Umbrellaです。
UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。
また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。
それでは、これだけjQueryが普及しているにもかかわらず、あえてUmbrellaを使う理由はどこにあるのでしょうか。
今回は、今注目のJavaScriptライブラリである*「Umbrella」*について詳しく解説していきます。
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を使ってみてください。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング