【jQuery】メソッドチェーンの書き方と考え方

JavaScript
2026.05.22

こんにちは、かつコーチです。

jQueryのコードを読んでいると、.（ドット）がずらずらと繋がった長いコードを見かけることがあります。

「これは一体何をしているの？」「自分でも書けるようになりたい」と感じた方も多いのではないでしょうか。

この記事では、jQueryで多用されるメソッドチェーンの書き方と考え方を、なぜjQueryでこの書き方が広まったのかという背景も含めて解説します。

読み終える頃には、メソッドチェーンを恐れずに読み書きできるようになっているはずです。

メソッドチェーンとは？

複数のメソッドを繋げて書く記法

メソッドチェーンとは、あるメソッドの実行結果に対して、続けて別のメソッドを . で繋げて呼び出す書き方のことです。

まずはメソッドチェーンを使わない場合のコードから見てみましょう。

// メソッドチェーンを使わない書き方
$('#box').addClass('active');
$('#box').css('color', 'red');
$('#box').fadeIn();

同じ $('#box') を3回書いていて、少し冗長に感じます。

これをメソッドチェーンで書き直すと、次のようになります。

// メソッドチェーンを使った書き方
$('#box').addClass('active').css('color', 'red').fadeIn();

$('#box') を1回書くだけで、3つの処理を続けて実行できています。

なぜ繋げて書けるのか

メソッドチェーンが成立する理由は、jQueryのほとんどのメソッドが「処理を実行したあと、自分自身（jQueryオブジェクト）を戻り値として返す」という設計になっているためです。

.addClass() を実行すると、クラスを追加した後の $('#box') そのものが返ってきます。

その返ってきたjQueryオブジェクトに対して、続けて .css() を呼び出せる、という仕組みです。

メソッドチェーンがjQueryで多用される理由

コード量を減らせる

同じ要素に対して複数の操作をする場面は、実務でも頻繁に発生します。

対象を指定する $('#box') を毎回書かずに済むため、コード量が減り、タイプミスのリスクも下がります。

「対象→操作の流れ」が処理として読みやすい

メソッドチェーンは、「この要素に対して、このあとこの順番で処理をする」という流れを、コードの見た目からそのまま追いやすいという利点もあります。

$('.alert')
  .fadeOut(300)
  .delay(1000)
  .fadeIn(300);

「まずフェードアウトして、1秒待って、またフェードインする」という手順が、上から下に読むだけで理解できます。

可読性を保つコツ

手順1：改行してメソッドごとに1行にする

メソッドチェーンを1行で書き続けると、要素が増えるほど読みにくくなります。

❌ Before（1行に詰め込みすぎて読みにくい）

$('#box').addClass('active').css('color', 'red').css('font-size', '16px').fadeIn(300).delay(500).fadeOut(300);

✅ After（メソッドごとに改行する）

$('#box')
  .addClass('active')
  .css('color', 'red')
  .css('font-size', '16px')
  .fadeIn(300)
  .delay(500)
  .fadeOut(300);

改行してインデントを揃えるだけで、どんな処理を何個繋げているのかが一目で分かるようになります。

手順2：チェーンが長くなりすぎたら分割する

私が実務でつまずいたのは、機能追加を重ねるうちに、1つのメソッドチェーンが10行以上に膨れ上がってしまったケースです。

途中の処理でエラーが起きても、どのメソッドが原因か特定するのに時間がかかりました。

// 長くなりすぎたチェーンの例（デバッグしづらい）
$('.card')
  .addClass('active')
  .css('color', 'red')
  .attr('data-status', 'open')
  .find('.title')
  .text('更新済み')
  .end()
  .fadeIn(300);

こうした場合は、意味のまとまりごとにチェーンを分割し、変数に一度受け直すと管理しやすくなります。

// 意味のまとまりで分割する
const $card = $('.card').addClass('active').attr('data-status', 'open');

$card.css('color', 'red');
$card.find('.title').text('更新済み');
$card.fadeIn(300);

変数名の先頭に $ をつける（$card）のは、「このデータはjQueryオブジェクトである」と分かりやすくするための慣習的な書き方です。

手順3：途中でundefinedを返すメソッドに注意する

メソッドチェーンを組む際に私が実際にハマったのが、次のエラーです。

Uncaught TypeError: Cannot read properties of undefined (reading 'fadeIn')

原因は、.text() を「値を取得する用途」で使ったことでした。

// ❌ .text()を引数なしで呼ぶと「現在のテキストを取得」する動作になり、
// jQueryオブジェクトではなく文字列が返ってくる
$('#box').text().fadeIn();

.text() は、引数を渡さずに呼び出すと「現在のテキストを取得する」動作になり、jQueryオブジェクトではなく文字列を返します。

そのため、続けて .fadeIn() を呼ぼうとしてもエラーになってしまいます。

✅ After（値を設定する用途で使い、jQueryオブジェクトを維持する）

$('#box').text('更新しました').fadeIn();

このように、メソッドによっては「値を取得するモード」と「値を設定するモード」の両方を持つものがあり、取得モードで使うとチェーンが途切れる点に注意が必要です。

まとめ

この記事のポイント

  • メソッドチェーンとは、複数のメソッドを . で繋げて連続実行する書き方である
  • jQueryのメソッドが自分自身（jQueryオブジェクト）を返すため、チェーンが成立する
  • 対象の指定を1回で済ませられ、処理の流れも読みやすくなる
  • 長くなりすぎたら改行・分割し、値取得モードのメソッドの混入に注意する

次に読むべき記事

セレクタの基本から復習したい方は、「セレクタの書き方：$()の基本とCSSセレクタとの違い」をご覧ください。

jQueryの導入や現状が気になる方は、「jQueryとは？2026年でも使われる理由とインストール方法」もおすすめです。

タグ: jQuery, 初心者向け, 基本文法

タイトルとURLをコピーしました