スライドショー

【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()で文字列を置換する方法まとめ!
更新日 : 2019年5月8日

eachメソッド

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

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

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

【jQuery入門】2種類のeach()による繰り返し処理まとめ!
更新日 : 2019年5月26日

inArrayメソッド

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

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

【jQuery入門】inArray()で配列要素を検索する方法まとめ!
更新日 : 2019年5月17日

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

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

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

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

jQuery公式サイト

まとめ

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

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

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

湯浅 桃太郎

湯浅 桃太郎

20代は役者、30代はエンジニア、そして40代を迎えた現在、Webライターとして活動しながら、3人の息子たちの家庭教育、アンチエイジングなどにも力を入れて日々ノマドライフを楽しんでいます。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説