jQueryのチェーンメソッドはなぜ動くのか

jQueryのチェーンメソッドはなぜ成立するのか

jQueryの「$().addClass().css().hide()」のような書き方は、単なる書き方のルールではありません。
実はこれは、JavaScriptのオブジェクト指向の仕組みをかなりうまく利用した設計です。

そして結論から言うと、jQueryのチェーンメソッドはすべてのメソッドが「同じオブジェクト」を返しているから成立しています。
魔法でも特殊な文法でもありません。return this だけです。

この仕組みを理解すると、jQueryだけでなく、最近のライブラリ（Reactの一部APIやPromiseなど）も急に読みやすくなります。

そもそもjQueryは何を返しているのか

まず、多くの人が誤解している点があります。

jQueryの「$('div')」は、DOM要素を返していません。

JavaScriptの素のDOM取得はこれです。

const el = document.getElementById("sample");

これはHTMLの要素そのものです。

一方、jQueryのこれ。

const el = $("#sample");

これはHTML要素ではありません。
「jQueryオブジェクト」という、jQueryが独自に作ったラッパーオブジェクトです。

つまりjQueryはDOMを直接操作しているのではなく、DOMを包んだ専用のオブジェクトを通して操作しています。

この「ラップ」が、チェーンメソッドの出発点になります。

チェーンメソッドの正体 ― return this

では、なぜ連続してメソッドを呼び出せるのでしょうか。

例えばこれです。

$("#box").addClass("red").hide().fadeIn();

普通の関数なら、addClass()を呼んだ時点で処理は終わります。
ですがjQueryは次のメソッドを呼べています。

理由は単純です。
addClass()が「自分自身」を返しているからです。

実際のイメージはこうです。

addClass: function(name){
    // クラスを付与する処理
    return this;
}

this は「現在のjQueryオブジェクト」です。

つまり処理の流れはこうなっています。

1. $("#box") がjQueryオブジェクトを作る
2. addClass() を実行
3. 同じオブジェクトが返る
4. そのまま hide() を呼べる
5. また同じオブジェクトが返る
6. fadeIn() が呼べる

これは「連続している」のではなく、同じ対象に対して処理を積み上げているだけです。

なぜreturn thisが重要なのか

もし addClass() が何も返さなかったら、こうなります。

$("#box").addClass("red").hide();

この時点でエラーになります。
addClass() の戻り値は undefined だからです。undefined に hide() は存在しません。

つまり、jQueryの設計思想はとても明確です。

• 1つの要素集合に対して
• 複数の操作を
• 連続して書けるようにする

そのために、すべての操作系メソッドが return this を採用しています。

ではreturn thisは常に正しいのか

ここが重要なポイントです。

jQueryのメソッドには、実は2種類あります。

種類	例	戻り値
操作系	addClass, hide, css(設定)	jQueryオブジェクト
取得系	text(), val(), width()	値

例えばこれです。

$("#box").text();

これは文字列を返します。
つまりこの後に .hide() は呼べません。

$("#box").text().hide();

これはエラーになります。
text() はreturn thisではなく、内容の文字列を返すからです。

ここが、jQuery初心者がつまずく典型的なポイントです。
「チェーンできる時とできない時」があるのは、この違いです。

thisがjQueryで混乱を生む理由

さらに混乱を増やしているのが this です。

次のコードを見てください。

$("#box").click(function(){
    console.log(this);
});

この this は「jQueryオブジェクト」ではありません。
クリックされたDOM要素そのものです。

つまりjQueryの外側に戻っています。

そのため、次のコードは失敗します。

$(this).hide();   // OK
this.hide();      // エラー

this はDOM要素なので、hide() を持っていません。
$(this) に変換して初めて jQuery のメソッドが使えます。

ここで多くの人が「jQueryのthisは気持ち悪い」と感じます。
実際、jQueryの難しさの半分はこの挙動です。

実務で起きる失敗パターン

実際の現場でよく起きるミスがあります。

イベント内でこう書いてしまうケースです。

$(".btn").click(function(){
    $(".btn").addClass("active");
});

これだと、押したボタンだけでなく、すべての.btnにクラスが付きます。

正しくはこうです。

$(".btn").click(function(){
    $(this).addClass("active");
});

jQueryは「対象集合」を扱うライブラリなので、どの集合に対して操作しているかを意識しないと、意図しない挙動になります。

jQueryチェーンメソッドのメリットと注意点

メリットは明確です。

• コードが短くなる
• 対象が明確になる
• 可読性が上がる

ただし注意点もあります。

チェーンが長くなりすぎると、逆にデバッグが困難になります。
どのメソッドで状態が変わったのか追いにくくなるからです。

例えばアニメーションやAjaxと混ざると、意図しない順序で実行されることもあります。

まとめ

jQueryのチェーンメソッドは特殊な技術ではありません。
return this という、非常にシンプルな設計の積み重ねです。

しかし、この単純さが大きな価値を生みました。
DOM操作を「命令の羅列」から「対象への操作の連続」に変えたからです。

jQueryを単なる古いライブラリと見るか、設計思想の教材と見るかで、JavaScriptの理解度はかなり変わります。
実際、現在の多くのライブラリのAPI設計には、この発想が強く残っています。

「なぜあの書き方ができるのか」を理解したとき、jQueryは急に過去の技術ではなくなります。