サンプルで学ぶjQuery：(X)HTML/CSSを操作する (7/7)

• 
• ツイートする

複数の命令をまとめて指定できる「メソッドチェーン」

　ここまで(X)HTMLとCSSを操作するさまざまな命令を紹介してきました。最後に、1つのセレクターに対して複数の命令を同時に指定できる「メソッドチェーン」について触れておきたいと思います。

　以下のサンプルコードを見てください。

▼サンプルコード（スクリプト部分）

$("p").prepend("<strong>先頭に挿入</strong>");
$("p").append("<strong>最後に挿入</strong>");

　このサンプルでは、$("p") というセレクターに対して、prepend() と append() の2つの命令を実行しています。このように複数の命令がある場合、jQueryはいったんp要素を探してきて prepend() を実行し、次にまたp要素を探してきて append() を実行します。p要素を2回も探しに行くのは、ちょっと効率が悪いですね。そこで登場するのがメソッドチェーンと呼ばれるjQueryの文法です。

▼サンプルコード（スクリプト部分）

$("p").prepend("<strong>先頭に挿入</strong>").append("<strong>最後に挿入</strong>");

　今度のコードは1行ですが、実行してみると先ほどのスクリプトと同じように動作します。jQueryでは命令と命令を .(ドット)をつなげて記述することで、2つの命令を連続して実行できるのです。これが、メソッドチェーンです。

　記述が単に短くて済むだけでなく、内部的にもp要素を探してきて prepend() を実行し、そのまま次の命令である append() を実行するので、効率よく処理できます。同一のセレクターに対して複数の命令を指定する場合は、メソッドチェーンを利用するように心がけましょう。

(X)HTML/CSSを操作するjQueryの命令のまとめ

　今回紹介したjQueryの命令を以下にまとめます。

◆

　次回は、jQueryの命令が実行されるタイミングを制御する、「イベント」について解説します。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。