【jQuery入門】よく利用するメソッドまとめ

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

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

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

この記事では

・メソッドとは?

・メソッドの呼び出し方

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

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

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

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

メソッドとは?

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

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

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

メソッドの呼び出し方

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

[基本構文]
jQueryオブジェクト.メソッド()
jQueryオブジェクト.メソッド(第一引数,第二引数,…)
[実例]
$(‘p’).text(‘contents’)
$.each(array,function(){...})

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

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

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

メソッドチェーンとは?

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

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

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

[基本構文]
jQueryオブジェクト.メソッド().メソッド()・・・

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

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

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

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

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

[HTML]
<div>アラート表示</div>
[jQuery]
$('div').css("background-color","yellow").text('システムメンテナンス中です。').fadeOut(10000)

実行結果

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

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

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

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

[メソッドチェーンを利用しない例]
var $div = $('div').css("background-color","yellow")
$div.text('システムメンテナンス中です。')
$div.fadeOut(10000)

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

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オブジェクトにカンマを付けメソッド名を記述し、カッコを付けることで呼び出すことができました。

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

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

侍テック編集部

侍テック編集部