こんにちは！フリーランスの桃太郎です。

jQueryでは複雑な処理を実現するための便利な仕組みとして様々なメソッド(関数)が用意されています。

そのようなメソッドを必要な場面で取捨選択しながら使いこなすことができれば、初心者から一歩進んだプログラマーとなることでしょう。

この記事では

・メソッドとは？

・メソッドの呼び出し方

という基礎的な内容から、

・ jQueryでよく使われるメソッド一覧

など実践で活用する際の参考となる内容についても解説していきます。

jQueryのメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！

メソッドとは？

プログラミングにおいて、オブジェクトに対してある操作を行い、その操作の結果で得られるものをまた別の処理で利用することが多々あります。

そのようオブジェクトに対する操作を行うものがメソッドです。

操作にあたる内容としては、例えば、ある文字列を別の文字列に置換する操作であったり、配列の要素を順番に処理する操作であったりと様々です。

メソッドの呼び出し方

では、具体的にメソッドはどのように使用するのかを見ていくことにしましょう。

[基本構文]

jQueryオブジェクト.メソッド()
jQueryオブジェクト.メソッド(第一引数,第二引数,…)

[実例]

$(‘p’).text(‘contents’)
$.each(array,function(){...})

実例のtextやeachなどがメソッドにあたり、そのメソッドのあとはカッコ()を付与します。

そのカッコの中身は引数を必要とするメソッドであれば、引数を記述し、必要がないメソッドはカッコだけを書きます。

jQueryオブジェクトにドットを付けた後にメソッド名を記述することで、メソッドを呼び出すことができます。

メソッドチェーンとは？

メソッドを学習していくと、メソッドチェーンという言葉を耳にしたことがある方もいるかもしれません。

メソッドチェーンとは何か？

まずは以下の基本構文を見てください。

[基本構文]

jQueryオブジェクト.メソッド().メソッド()・・・

メソッドがカンマを介して鎖のように繋がっている様子からメソッドチェーンと呼ばれています。

このメソッドチェーンはどのような働きをするかと言いますと、jQueryオブジェクトに一番近い左のメソッドの操作がおこなれた後に、次のメソッドの操作が続けて行われます。

ただし、１点注意があります。

メソッドチェーンとして繋げることができるメソッドには条件があり、それはjQueryオブジエクトを戻り値として返すメソッドである事という条件です。

具体的な例で見てみましょう。

[HTML]

<div>アラート表示</div>

[jQuery]

$('div').css("background-color","yellow").text('システムメンテナンス中です。').fadeOut(10000)

実行結果

//システムメンテナンス中です。と黄色背景で表示された後、10秒後にフェードアウトする。

jQueryのサンプルにある通り、cssメソッド + textメソッド + fadeOutメソッドがメソッドチェーンとして一続きになっています。

メソッドチェーンを利用するメリットは、１行づつメソッドの処理を個別に書くよりも処理速度が早くなること、そして、jQueryオブジェクトの変数を用意する手間が省けるということです。

メソッドチェーンを利用せずに先ほどのサンプルの処理を実現する場合は以下の通りとなります。

[メソッドチェーンを利用しない例]

var $div = $('div').css("background-color","yellow")
$div.text('システムメンテナンス中です。')
$div.fadeOut(10000)

varでjQueryオブジェクトの変数を用意する必要があり、かつ１行づつメソッド処理を呼び出すことでメソッドチェーンよりも処理速度は遅くなる傾向にあります。

jQueryでよく使われるメソッド一覧

では、次にjQueryでよく使われるメソッドについてご紹介します。

replaceWithメソッド

文字列の置換を行うメソッドとしてreplaceWithメソッドがあります。

メソッドの詳しい機能については以下の記事を参考にしてください。

【jQuery入門】replace()で文字列を置換する方法まとめ！

更新日 : 2020年3月10日

eachメソッド

配列の要素を順番に操作するためのメソッドとしてeachメソッドがあります。

JavaScriptで同操作を行うためにはfor文を利用しますが、jQueryではeachメソッドを使います。

この辺りの詳しい解説は以下の記事が参考になりますので、ぜひ学習に役立てて下さい。

【jQuery入門】2種類のeach()による繰り返し処理まとめ！

更新日 : 2020年3月10日

inArrayメソッド

配列の要素の対して、検索する値が含まれているかを確認するメソッドとしてinArrayメソッドがあります。

こちらも詳しい内容は以下の記事を参考にしてみて下さい。

【jQuery入門】inArray()で配列要素を検索する方法まとめ！

更新日 : 2020年3月10日

メソッドの機能を調べるためには

jQueryのメソッドは実に様々な種類があります。

そのようなメソッドについて機能や使い方を調べたい場合には以下の公式リファレンスを利用するのも一つの方法です。

公式サイト自体は英語ですが、調べたいメソッドのサンプルなどを参考に自分のプログラムで動きを確認することもできるので、有効な手立ての一つとして覚えておきましょう。

jQuery公式サイト

まとめ

本記事ではjQueryのメソッドについてご紹介しました。

メソッドはjQueryオブジェクトにカンマを付けメソッド名を記述し、カッコを付けることで呼び出すことができました。

また、メソッドチェーンを利用することで、処理が高速化し、簡潔なプログラムコードを記述することができました。

もし今後、メソッドに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。