WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > jQueryのメソッドチェーンの使い方

jQueryのメソッドチェーンの使い方

2020年4月9日

jQueryで同じ要素に対して複数のメソッド（命令）を適用させていた時に、便利な記述方法は無いだろうか？

jQueryには「メソッドチェーン」という便利な記述方法がある。

今回のjQueryのメソッドチェーンの使い方について、具体例を交えて解説していこう！

目次

jQueryのメソッドチェーンとは

jQueryのメソッドチェーンとは、同じ要素に対して複数の命令（メソッド）を鎖（チェーン）のように繋いで記述する方法だ。

メソッドチェーンの書き方

メソッドチェーンは１つの要素に複数のメソッドを「.（ドット）で連結」してつなげ、連結できる数は無制限となっている。

$("セレクタ").メソッド().メソッド().メソッド().メソッド()

メソッドチェーンの例

メソッドチェーンを使わない場合と使う場合で記述を比較しながらみてみよう。

例として$(".hoge")に対して.css("color","red")と.text("テキスト変更")という２つのメソッドを適用させる場合で比較してみよう。

メソッドチェーンを使わない書き方

$(".hoge").css("color","red");
$(".hoge").text("テキスト変更");

メソッドチェーンを使わない場合は、このように$(".hoge")という記述を２回書く必要があり、動作はするのだが、効率の悪い記述と言える。

メソッドチェーンを使った書き方

$(".hoge").css("color","red").text("テキスト変更");

このようにメソッドチェーンを使うと、短い記述で書く事ができ、それだけ動作も軽くなるのだ。

メソッドチェーンの使い方のまとめ

jQueryを少しずつマスターしてきた方は、次レベルとして「単純に動けばOK」という記述ではなく、メソッドチェーンのような記述を学んで、できるだけ効率的で動作の軽い記述を目指して書けるように学習していこう！

効率的な記述として、jQueryでは「変数」を使う事ができる。メソッドチェーンが使えるようになった方は、次のステップとして「変数」を学んでみよう！

初心者向け：jQueryの「変数の使い方」を基本から！

▶ 初心者向け：jQueryの「変数の使い方」を基本から！

jQueryを学び始めたけど「変数」の使い方をわかりやすく解説してほしい！そうだね「変数」を学ぶ事で、jQueryで出…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。免責事項

関連記事

Jqueryでクロスフェードスライドショーの作り方（デザイナーでも出来る自作編）

inview.jsで画面スクロールで特定位置に入ったら要素をアニメーション表示させる方法

jQuery｢.siblings() ｣ですべての兄弟要素を取得する方法

jQueryの全セレクタのまとめ「完全マスター辞典！」

jQuery｢.slideUp( )/.slideDown()/.slideToggle()｣で縦方向のスライドで表示・非表示する方法

jQuery｢toggleClass｣で指定のクラスを切り替える方法

jQuery｢length｣で要素の数を取得する方法

jQuery｢unwrap｣で指定要素を囲むタグを削除する方法

jQuery｢.prevUntil() / .nextUntil()｣で前後の兄弟要素を取得する方法

videoタグの使い方とJavaScriptでオリジナルコントローラーを自作する方法

jQueryでif文を使った条件分岐の書き方

初心者向け：jQueryの「変数の使い方」を基本から！

ナビゲーション

この記事を書いた人

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

サイト内検索

[ー]

目次

新着記事

カテゴリー

タグリスト