jQueryとは

jQueryとは
jQueryの使い方

jQueryとは

jQueryはJavaScriptフレームワークの一つで、JavaScriptを書きやすくするためや、Web技術を簡単に利用できるようにサポートされたものです。jQueryの主な機能として、DOM操作、イベント操作、Ajaxを簡単に扱えることが挙げられます（DOMとはHTMLのタグ構造のことです）。

jQueryを利用することで、JavaScriptをそのまま使ったものよりも簡潔に記述することができます。

例えば、JavaScriptでid=sampleのDOMを取得する場合は下記のように書きます。

document.getElementById(‘sample’);

さらに中の値を取得して書き換えて・・・など操作していくとコードが煩雑になっていくと思います。

これがjQueryでしたら、下記の書き方で済みます。

$(‘#sample’);

非常に簡単に取得できますね。

取得するだけではなく、値を更新するときも簡潔に書くことができます。

jQueryの使い方

on

jQueryはまずセレクタというものの中に、HTMLのidやclassなどのタグ要素を指定して、それを起点に様々な処理を行う流れになっています。

ではまず最も使う頻度の多いonメソッドの使い方の例を見てみましょう。

<script src=”https://code.jquery.com/jquery-3.3.1.js”></script>
<button id=”tag”>ボタン</button>

<script>
$(‘#tag’).on(‘click’, function() {
alert(‘クリックされました’);
});
</script>

上記ではまず最初にscriptタグでjQueryをロードしています（このタグは以降の例では省略します）。

onメソッドは、その後に続くイベントとハンドラで構築されているメソッドになります。

セレクタである$()の中で指定されているのはtagというidです。DOM要素の中からtagというidをとってきて、それに対してonメソッドが実行されます。

onの引数の中を見てみましょう。

第一引数にclickという文字列が指定されていると思います。

これはセレクタの要素がクリックしたイベントを取得するという意味になります。そして第二引数にあるfunctionをハンドラとして処理が走る仕組みになっています。

なので、この場合ですとid=”tag”というタグを選択して、それに対して処理をする。という流れです。

ちなみにclickに関してですが、別途clickメソッドが存在します。こちらは下記のような記述になります。

$(‘#tag’).click(function() {
console.log(‘クリックされました’);
})

このclickメソッドはバージョン1.9以上では非推奨になっているので、今はonを使うほうが良いです。

ちなみに上記の処理をJavaScriptで書くとこうなります。

document.getElementById(‘tag’).onclick = function() {
alert(‘クリックされました’);
};

change

次にchageメソッドについて説明します。

changeは、セレクタに入っている要素が何らかの変化をしたときに動作するメソッドです。例えばセレクトボックスが選択されたときや、テキストボックスに入力された時など、様々なシーンで使用することが出来ます。

書き方は下記の通りです。

<input type=”text”>

<script>
$(‘input’).change(function() {
alert(‘入力されました’);
});
</script>

inputタグに入力されて、フォーカスが外れたタイミングでアラートがでるようになっています。

主に入力した文字列などをチェックするときに使えそうですね。

fadeIn・fadeOut

jQueryはイベントハンドラとしての機能だけではなく、アニメーションを制御する機能もあります。

fadeInとfadeOutメソッドはその名の通り、セレクタに入れた要素に対してフェードインとフェードアウトのアニメーションをさせるメソッドです。

基本的な使い方としては下記になります。

<p id=”tag” style=”display: none”>サンプル</p>

<script>
$(‘#tag’).fadeIn();
</script>

これだけでフェードインのアニメーションが走ります。

1点だけ気をつけないといけないのは、フェードインなので最初は非表示になっていないといけない点になります。

上記のようにCSSで非表示にしておく方法もありますが、hideメソッドを使って非表示にしてあげる方法もあります。

$(‘#tag’).hide().fadeIn();

これだけでもアニメーションが簡単に出来るのですが、フェードインの時間を指定したいという時があると思います。

その場合は、時間をミリ秒単位で指定してあげる事ができます。

$(‘#tag’).fadeIn(1000);

上記の例ですと、1秒かけてフェードインします。

更にフェードイン後に処理を走らせる事もできます。

$(‘#tag’).fadeIn(1000, function(){
alert(‘フェードインしました’);
})

このような書き方をすると、functionの中のアラートが走ります。

find

jQueryでは特定の要素を検索する機能も充実しています。そのうち最もよく使われるのがfindメソッドです。

これはセレクタで指定した要素の中にある子要素を探してくるメソッドになります。

例えば下記のようなDOM構造があったとします。

上記のimgタグを探してくるときはこう書きます。

<script>
$(‘#parent’).find(‘.child-image’);
</script>

parentというidをセレクタで選択してその子要素であるchid-imageというクラスを探して選択しています。

この後にonやchangeなどのメソッドを繋げる事ができます。

ちなみにfindは子要素と更にその中にある孫要素など、子要素以下全ての要素を探してくるのですが、子要素の中だけ探したいという場合はchildrenというメソッドもあります。状況に応じて使い分けていきましょう。