# jQuery に取って代わるライブラリになるか？！ Umbrella JS を使ってみた

Tags: JavaScript jQuery メモ

お疲れ様です、ナガです。

先日、Twitter だったか Facebook を見てたら「2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？」っていう Qiita の記事が流れてきまして、気になったので読んでみました。

ツールの羅列ですが、めちゃくちゃ長い記事です。

その記事で Umbrella JS を発見しました。

みんな大好き jQuery と同じ DOM 操作が得意なライブラリです。

# Umbrella JS の凄いところ

# 容量が軽い

なんと言っても容量が軽いです。

• Umbrella（v2.6.7 min）：9.15 KB
• jQuery（v3.1.1 slim.min）：67.6 KB

# jQuery のように書ける

みんな大好き jQuery のようにメソッドチェーンで書けます。

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

# .handle()　メソッドが地味に便利

この .handle() メソッドを使うと a タグで click を発火させるのに event.preventDefault(); が不要。

u('button').on('click', function(event){
  event.preventDefault();
  // 処理を書く
});

u('button').handle('click', function(){
  // 処理を書く
});

# Umbrella JS の微妙なところ

# jQuery のプラグインが使えない。

使用しているライブラリが違うので、使えません。 jQuery にはあって Umbrella JS には無い（逆もまた然り）メソッドもあるので。

# each で回した時の this の値が jQuery のそれと違う。

触ってみたときにこれがハマった。

# jQuery

$('li').each(function( index ){
  console.log( $(this) );   // 繰り返し処理中の参照中のDOM要素
});

# Umbrella JS

$('li').each(function( node, index ){
  console.log( u(this) ); // Umbrella のインスタンスを返す
  console.log( u(node) ); // 繰り返し処理中の参照中のDOM要素 （jQuery の $(this) と同等）
});

# まとめ

やっぱり jQuery が大好きです。 情報の豊富さ、会社で使う場合、社員のライブラリに対してのナレッジも考えると使用するメリットは小さいかもしれません。

# 参考

Umbrella JS