おすすめのjQuery代替ライブラリ

jQueryがオワコン扱いされるようになって久しいですが、書くのが楽、というメリットは捨てがたいと思います。
というわけで、以下のようなことができる代替ライブラリがありましたらご紹介ください。

######DOM処理を書くのがダルイ。

javascript
1Array.prototype.forEach.call(document.querySelectorAll('div'), function(elem) { elem.styles.color = 'red'; });

この程度ならいいですが、イベントリスナとかつけて回るようなコードだと可読性がjQueryと比べてかなり劣る印象。
その他、:hasセレクタとか、フォームの操作とかも、Vanillaで書くのダルイです。

######Ajaxを書くのがダルイ。

javascript
1var xhr = new XMLHttpRequest();
2xhr.open("GET", "/bar/foo.txt", true);
3xhr.onload = function (e) {
4  if (xhr.readyState === 4) {
5    if (xhr.status === 200) {
6      console.log(xhr.responseText);
7    } else {
8      console.error(xhr.statusText);
9    }
10  }
11};
12xhr.onerror = function (e) {
13  console.error(xhr.statusText);
14};
15xhr.send(null);

特にjsonpとかめんどくさいです……

######Deferred使いたい。
まあ、これは Promise の Polyfill でいいと言えばいいんですが……
エフェクト系ライブラリがPromiseに対応してるわけじゃないのでなんか面倒です。

以上、よろしくお願いします。

#####追記
オールインワンのライブラリじゃなくてもかまいませんよ。

行動規範の内容に同意します

回答5件

jQueryがかつてほどの勢いを失っているのには、大きく分けて3つの理由があると考えています。

ブラウザの互換性向上

今でこそ標準規格で書いても素直に動くようになってきましたが、昔のIEは特に癖が強く、ライブラリで補わないと同じことを実現できない、というような環境でした。そのIEすらWindows 10ではEdgeが導入され主流の座を追われていくことになるので、基本的なDOM操作についてjQueryを挟んで互換性を図る必要は少なくなっています。

ブラウザの機能向上

一昔前は、ブラウザ内でアニメーションさせようとすればJavaScriptで値を変えるしかありませんでしたが、今はCSSレベルでアニメーションできるようになっています。また、汎用で使えるセレクタのquerySelectorAllや、jQueryのaddClassやhasClassがそのままDOMに移植されたかのようなclassListなど、ブラウザのDOM機能自体も拡張されています。

フロントエンドフレームワークの隆盛

JavaScriptの性能向上・機能強化が行われてきたことで、ちまちま既存のDOMを更新するというのではなく、どかっとJavaScriptからDOM全体を更新する、という実装も現実的となってきました。そうなれば、jQueryの出る幕ではありません。

とはいえ、「フロントエンドフレームワークを使わない」という条件下では、「DOMで直書きする」「機能ごとにライブラリを拾ってくる」「jQueryを使う」という3択になる感じで、jQueryを代替できるようなオールインワンのライブラリはなさそうです。

投稿2015/10/27 01:11

maisumakun

総合スコア145183

Lhankor_Mhy

2015/10/27 01:16

ありがとうございます！

行動規範の内容に同意します

ベストアンサー

ライブラリではありませんが、全て自前で便利関数を定義するのはどうでしょうか。
取り上げられた事例は決して難しいものではないので不可能ではないと思います。

Array.prototype.forEach.call(document.querySelectorAll('div'), function(elem) { elem.styles.color = 'red'; });

Array.prototype.forEach や document.querySelectorAll をローカル変数にキャッシュすれば短く書けます。

JavaScript
1var forEach = (function (_forEach, slice) {
2  return function forEach (thisArg) {
3    return _forEach.apply(thisArg, slice.call(arguments, 1));
4  };
5}(Array.prototype.forEach, Array.prototype.slice));
6
7var queryAll = (function (querySelectorAll, doc) {
8  return function queryAll (selectorText /*, contextObject */) {
9    return arguments.length < 2 ? doc.querySelectorAll(selectorText) : querySelectorAll.call(arguments[1], selectorText);
10  };
11}(document.querySelectorAll, document));
12
13var query = (function (querySelector, doc) {
14  return function query (selectorText /*, contextObject */) {
15    return arguments.length < 2 ? doc.querySelector(selectorText) : querySelector.call(arguments[1], selectorText);
16  };
17}(document.querySelector, document));
18
19console.log(query('p'));
20forEach(queryAll('div'), function (element) {
21  console.log(element);
22});

「いやいや、メソッドチェーンでやりたいんだ」というのであれば、jQuery のようにコンストラクタ内にラップします。
(ただし、このラップ処理はそれなりのコストを支払うのでパフォーマンス低下を惜しむのであれば避けるべきです)

JavaScript
1var QueryAll = (function (querySelectorAll, doc) {
2  function QueryAll (selectorText /*, contextObject */) {
3    var elements;
4
5    if (!(this instanceof QueryAll)) {
6      throw new TypeError('Constructor QueryAll requires \x27new\x27');
7    }
8
9    elements = arguments.length < 2 ? doc.querySelectorAll(selectorText) : querySelectorAll.call(arguments[1], selectorText);
10
11    for (var i = 0, l = elements.length; i < l; ++i) {
12      this[i] = elements[i];
13    }
14
15    this.length = l;
16  }
17
18  return QueryAll;
19}(document.querySelectorAll, document));
20
21Object.defineProperty(QueryAll.prototype, 'forEach', {
22  writable: true,
23  enumerable: false,
24  configurable: true,
25  value: Array.prototype.forEach
26});
27
28new QueryAll('p').forEach(function (element) {
29  console.log(element);
30});
31QueryAll('p'); // TypeError: Constructor QueryAll requires 'new'

この程度ならいいですが、イベントリスナとかつけて回るようなコードだと可読性がjQueryと比べてかなり劣る印象。

おそらく、複数の要素に同じイベントハンドラを定義する場合と想定しているのだと思いますが、上位ノードで定義してイベントバブリングを利用すれば複数の要素に定義して回り必要はほぼなくなります。
それでも必要な状況があれば、先のコードと同じく、ラップしてください。

Ajaxを書くのがダルイ。

やることがほぼ決まっているのであれば、便利関数 xhr を定義するとか。

Deferred使いたい。
まあ、これは Promise の Polyfill でいいと言えばいいんですが……
エフェクト系ライブラリがPromiseに対応してるわけじゃないのでなんか面倒です。

jQuery ライブラリを jQuery 以外で使おうとすれば無理が生じるので、他作ライブラリ前提なら jQuery 以外の単機能ライブラリを探すのが良いと思います。

怠惰はプログラマの美徳

この格言は「楽をする為の努力を惜しまずしなさい」の意であって「出来るだけ自分の労力を惜しんで楽をしなさい」の意ではないと思います。
小飼弾さんが紹介されている "Programming Perl" では「怠慢(Laziness)」を「全体の労力を減らすために手間を惜しまない気質」と説明されていますね。
楽をする為の仕組み、コードを発明することにプログラマの美徳が存在するのではないでしょうか。

小飼弾 404 Title Not Found - #1 プログラマーの三大美徳その1「怠慢」ITpro

投稿2015/10/27 04:55

編集2015/10/27 09:13

think49

総合スコア18162

Lhankor_Mhy

2015/10/27 08:32

なるほど、大変参考になりました。 > 楽をする為の仕組み、コードを発明することにプログラマの美徳が存在するのではないでしょうか。おっしゃる通りです。コードを拝見していてひとつ疑問があったのですが、 ` return function forEach (thisArg) {` この部分を匿名にしていないのにはなにか理由があるのでしょうか。

think49

2015/10/27 08:53 編集

> ` return function forEach (thisArg) {` > この部分を匿名にしていないのにはなにか理由があるのでしょうか。「匿名にしていない」とは「無名関数式」ではなく、「名前付き関数式」を使っている事を指しているのでしょうか。関数名は Function#name や Function#toString で参照可能な情報ですから、即時関数のような後で参照しない関数を除いて出来る限り付けるべきだと思います。ネイティブ関数でも Array.prototype.forEach.name === 'forEach' のように関数名が割り当てられています。

Lhankor_Mhy

2015/10/27 10:27

ありがとうございます、勉強になりました。改めて`Function.name`を確認してみましたが、ES6からの標準でIE未対応なんですね、びっくりです。（というか、日本語版のMDNではまだ非標準仕様になってる）

行動規範の内容に同意します

DOM操作の時代は終わった！
これからはReactですよ、奥さん。

AngulerJSのほうがいいって？
駄目だ、奴にはjQLiteなるjQueryの亡霊がついて回るぞ。
いつまでもjQueryからは逃れられないのだ！！！

といいながらajaxはjQueryを使い続けているんですけどね。だって便利なんだもん。

投稿2015/10/27 10:46

raccy

総合スコア21735

Lhankor_Mhy

2015/10/27 11:10

なにを言ってるんですか、時代は Web Components ですよ！それまでは Polymer を使いながら Google お得意の仕様変更に恐れおののくのが正しい Javascript 使いの姿ってもんです。ご意見ありがとうございましたｗ

行動規範の内容に同意します

Angular.js（1.*系）

Promiseの拡張実装であるQを内蔵しています。
xhrのラッパ$httpを内蔵しており、ajaxをPromiseで発行できます。デフォルトでjsonを待ち、パース済みのオブジェクトを受け取れます。
DOM操作を抽象的に行えます。<div hoge>と書かれたタグをdirective('hoge',function(scope,element,attrs){})という風に処理できます。
jQueryの簡易実装であるjQLiteを内蔵しています。
windowに依存した実装のライブラリが殆どなのでNodejs上で動作しません。phantomjsを使用して間接的にServerSideRenderingを行うか、jsdomを利用する方法があります。

React.js（0.14系）

Promiseを内蔵していません。
xhrのラッパを内蔵していません。superagentかaxiosを使うのがオススメです。
DOM操作を抽象的に行うことに特化しています。また、**htmlを直接操作することには向いていません。**これはReactの基本コンセプトに基づくものです。
Nodejs上で動作します。NodejsのExpress4と併用することでServerSideRenderingが可能です。これについて日本語の記事は存在しませんので、細部を自力で実装する必要があります。

Vue, MagJS, Mithril, Riotについては、コードを書いたことがないので割愛します。
各フレームワークについて、何があって何が無いのか。何が出来て何が出来ないのか。ご存じの方居ましたら、情報を頂けると嬉しいです。
文中の間違いも指摘して頂けると嬉しいです。

投稿2015/10/31 09:17

編集2015/10/31 09:26