本シリーズは、jQueryの書き方を勉強し、その結果をまとめたものになる。
今回は、JavaScriptで使っていた変数や関数をjQueryと組み合わせてみようと思う。
初回に解説した通り、jQueryの実体はJavaScriptなので、当然ながら使うことができる。
一応復習もしながら進めていくので、そもそものJavaScriptが不安な方もしっかり身に付けながら進めていこう。
前回の内容の復習
前回は、とりあえずjQueryを動かしてみた。
とりあえずと言いながら、基本となる書き方も紹介しているので、そこは確実にしておきたい。
また、今回も当然その内容を理解している前提で使うので、不安な方はさきにそちらを見ておこう。
以下がその記事だ。
復習：JavaScriptの変数と関数
さて、先にJavaScriptの復習をしていこう。
一応本シリーズの前提として持っている知識のはずなので、知っている方はサンプルページのところまで飛ばしてもらって構わない。
変数
変数とは、ある情報を一時的に入れておく箱のようなものだった。
書き方は以下の通り。
var 変数名 = 値;このように書くことで、変数を新たに確保し、その中に値を入れることができる。
変数名はダブルクォーテーション等で囲む必要はない。
実際に使う時は、その変数名をそのまま書けばOKだ。
また、先頭のvarを付けるのはそれぞれの変数で最初一回だけで、同じ変数を後で使う時はvarは不要だ。
後で代入だけするような時はvarをつけないよう注意。
例えば、二つ数字を入れてその合計をコンソールに出力してみよう。
var num1 = 10;
var num2 = 20;
var sum = num1 + num2;
console.log(sum);こう書けば、コンソールに「30」と表示されるはず。
今回は数字を入れたが、文字列やオブジェクトなども入れられる。
その他、変数絡みで配列についても復習しておこう。
配列とは、複数の値を入れておく、連なった箱のようなもの。
定義する部分は以下のような書き方だった。
var 配列名 = [値1, 値2, ..., 値n];こうすることで、値1から値nまでのn個のデータを、一つの配列というもので保持することができる。
その、特定の値を使う時は添え字で表現していた。
例えば、先頭のデータを持ってくる時は…
配列名[0]このように書けばOK。
ただ、先頭が0から始まるので、今回の例のようにn個のデータが入っていた場合には、添え字は0からn-1となるのでそこは注意しておこう。
もう一つ、オブジェクトも復習しておこう。
オブジェクトは、様々な情報を一つのモノとして扱おうという考え方で、配列と似ている。
異なる点は、その順番だけ保持されているか、あるいは取り出す時にキーとなる情報も併せて保持するかというところだろうか。
定義方法は以下の通り。
var オブジェクト名 = {
キー1: 値1,
キー2: 値2,
...,
キーn: 値n
};配列は要素を大括弧で括っていたが、オブジェクトは中括弧で括るのに注意だ。
こちらの使い方は配列とは少々異なり、二つの方法がある。
一つはオブジェクト名、ドットを挟んでキーを書くというもの。
オブジェクト名.キーこれで、キー名に対応する値を持ってくることができる。
もう一つは、連想配列という考え方。
通常の配列では数字で何番目の要素かを指定していたが、こちらは文字列でキーを指定する。
オブジェクト名["キー"]これでOKだ。
一つ注意として、キー名の指定を見てみる。
定義するときは、キー名をダブルクォーテーションで囲んでも囲まなくても大丈夫。
取得するときは、ドットで繋げるタイプはダブルクォーテーションで囲んではいけなくて、逆に連想配列はダブルクォーテーションが必須だ。
このあたりにも気を付けておこう。
細かいところを見るとまだまだ解説することはあるが、復習という位置づけなのでこのくらいで。
メインのjQueryとの話を理解するためだけであれば、このくらいが分かってもらえれば大丈夫だ。
関数
関数とは、ある一連の処理を行うような複数命令の集まりのことだ。
例えば色々な箇所で同じ処理をしたい時、この関数を使えば一か所で定義して必要なところから呼び出す、ということが可能になる。
定義方法は以下の通り。
function 関数名(引数1, 引数2, ..., 引数n){
/* 処理中身 */
}先頭にfunction、半角スペースを挟んで関数名をつけてあげる。
その後小括弧で引数を定義。
引数がない場合は、中身のない小括弧が必要だ。
そして、その後に中括弧で処理を囲む。
こうすることで、その関数を呼び出せば処理がされる、という流れになる。
例えば、以下の関数を定義したとしよう。
function showSum(num1, num2){
var sum = num1 + num2;
console.log(sum);
}これで、二つの数字を受け取ってその合計をコンソールに出力する関数showSumの出来上がりだ。
この関数を使う時は以下のような形。
showSum(10, 20);関数名をいきなり書き、その後ろに小括弧で引数をコンマ区切りで入れてあげれば呼び出すことができる。
実際にこれらを実行すると、コンソールに「30」と出るはずだ。
なお、呼び出す時も定義時と同じく引数が0個の場合でも小括弧は必要なので覚えておこう。
なんとなく思い出せただろうか。
細かい注意点などは省略しているので、これでも不安な方は調べながら進めていただきたい。
今回のサンプルページ
では、ようやくだが今回のメインへ。
まずはサンプルページを紹介しよう。
リンクはこちらで、ファイル構造は以下の通り。
- jQuery
- course-03.html
- js
- jquery-03.js
- css
- style.css
- style-03.css
さて、ページにアクセスしてもらえれば分かると思うが、今回のサンプルページは処理的には前回と全く同じことをしている。
見た目で違うのは、第2回が第3回になっている部分だけ。
では他に何が違うのかというと、jQueryの中で変数や関数を使うようにしている。
他のファイルは前回とほぼ同じなので省略して、そのjquery-03.jsを見てみよう。
$(function(){
/* スタイル変更 */
$(".change-01").css("color", "red");
/* 元のスタイルのオブジェクト */
var defaultStyle = {
"color": "black",
"background-color": "white"
};
/* 変更時のスタイルのオブジェクト */
var changedStyle = {
"color": "white",
"background-color": "black"
}
/* イベントハンドラ用関数その1 */
function changeStyle1(){
$(".change-02").css(changedStyle);
}
/* イベントハンドラ用関数その2 */
function changeStyle2(){
$(this).css(defaultStyle);
}
/* マウスを乗せた時にスタイル変更 */
$(".change-02").on("mouseover", changeStyle1);
/* マウスを外した時にスタイル変更 */
$(".change-02").on("mouseout", changeStyle2);
});こんな感じだ。
では、細かく見ていこう。
cssメソッドの引数
前回、cssメソッドの引数は2種類の指定方法があることを解説した。
具体的には以下二つだ。
css(プロパティ, 値);css({
プロパティ: 値,
プロパティ: 値,
...
プロパティ: 値
});この二つ目の指定方法について、これはオブジェクトを渡すことができると見ることができる。
そのため、上で解説したように別でオブジェクトを定義しておき、それを渡すことで同じ処理ができるのだ。
今回はオブジェクトを使っている部分がそれぞれ1か所しかないのでありがたみが薄いが、同じ情報を使いまわしたい状況も出てくるはず。
その時はこの方法でやっておけば、変更時などは1か所修正するだけで済むので便利になるだろう。
イベントハンドラの指定方法
今度はonメソッドについて。
前回はイベントハンドラを指定するときに、そこで関数を定義していた。
これも、別であらかじめ関数を定義しておくことにより、それを使いまわすことができる。
ただし、一つ注意点がある。
この関数を指定するときは、関数名だけを指定しなければいけないという点。
実際に定義している部分を見てみよう。
/* マウスを乗せた時にスタイル変更 */
$(".change-02").on("mouseover", changeStyle1);
/* マウスを外した時にスタイル変更 */
$(".change-02").on("mouseout", changeStyle2);イベントハンドラにはそれぞれ関数名だけを指定しており、小括弧がついていない。
これは、この時にこの関数を呼び出すわけではないからだ。
小括弧をつけると、そこでその関数が実行されることを意味することになる。
が、今回は関数自体を引数として渡す必要がある、というイメージだ。
つまり、この書き方では引数を渡すことができないので注意しておこう。
…ちなみに、引数を渡す方法もある。
本記事のオマケでやってみることにしよう。
さて、この書き方で、一つ目はクラス名change-02のタグにカーソルを重ねたら関数changeStyle1の中身を事項する、という指定になる。
二つ目も同様なので、是非覚えておこう。
特殊なセレクタ「this」
今度は、上のイベントハンドラで指定した関数側を見ていこう。
/* イベントハンドラ用関数その1 */
function changeStyle1(){
$(".change-02").css(changedStyle);
}
/* イベントハンドラ用関数その2 */
function changeStyle2(){
$(this).css(defaultStyle);
}一つ目は、そのままクラス名change-02のタグを持ってきて、それに対してスタイルの変更を行っているので問題ないと思う。
二つ目に関して、セレクタのところにthisと書かれている。
このthisは特殊な変数で、取得専用のあらかじめ用意されている変数になる。
つまり、自分で定義したり、値を代入したりすることはできない。
じゃあ何を表しているかというと、イベントハンドラの中で、そのイベントが発生したタグをそのまま持ってきてくれる。
今、この関数はクラスchange-02のイベントハンドラとして登録されている。
関数を別ではなく中に直接定義した場合の書き方の方が分かりやすいだろう。
その形に書き換えると、以下のようになる。
$(".change-02").on("mouseout", function(){
$(this).css(defaultStyle);
});このとき、まずクラスchange-02のタグからカーソルが離れた時に関数の中身が実行される。
その中のセレクタで$(this)としてあることで、今イベントが発生したタグを持ってきてくれるのだ。
つまり、これでもchange-02クラスのタグに対してスタイルの変更ができる。
これがあると何が嬉しいかというと、大きく以下三つ。
- 別のセレクタに対して同じ処理が一つの書き方で指定できる
- 処理が軽くなる
- 同じセレクタに該当する複数のタグに対し、一括で処理を指定できる
それぞれ何を言っているか、見ていこう。
まず一つ目、別々のセレクタで取得した対象に対し、このthisを使わないと別々で処理を書かなければいけなくなる。
例えば以下のような感じだ。
function changeStyle1(){
$(".class1").css("color", "red");
}
function changeStyle2(){
$(".class2").css("color", "red");
}
$(".class1").on("mouseover", changeStyle1);
$(".class2").on("mouseover", changeStyle2);このように、セレクタが異なるのでそれぞれを書く必要が出てくる。
しかし、今回のthisを使えば…
function changeStyle(){
$(this).css("color", "red");
}
$(".class1").on("mouseover", changeStyle);
$(".class2").on("mouseover", changeStyle);このように書くことができる。
こうすれば、クラスclass1のタグにカーソルが重なればそのタグのみ文字色が変わり、class2側は変わらない。
逆にclass2のタグにカーソルが重なっても、そのclass2側だけ文字色を変える、ということができる。
そのため、複数の内容に対して同じ動作をそれら自身にだけ行うという時に、このthisを使って一つの関数を定義しておき、それを呼び出すだけで実現できてしまうのだ。
二つ目、処理が軽くなるとはどういうことかだが、これを理解してもらうために内部動作を軽く見てみる。
このthisを使わなかった場合、イベントハンドラ内で同じクラス名を指定してもHTML全体の中からそのクラス名のタグがどれか探しに行ってしまう。
しかし、イベントが発生したタグに対して処理を行いたい場合、そのイベントの情報ですでにタグが取得できているはず。
その時はこのthisを使えばすでに取得されている情報を使うようになるので、もう一回探しに行く手間が省けるのだ。
ソースが長ければ長いほど探す時間もやはりかかるので、これが使える場面ではできる限り使うようにしよう。
三つ目、これは言葉で説明するより具体例で見た方が分かりやすいだろう。
例えばpタグが100個入ったHTMLがあり、それに対して以下のソースを書いたとする。
$("p").on("mouseover", function(){
$("p").css("color", "red");
});これを実行するとどうなるか、分かるだろうか。
まず、pタグに対してカーソルが重なった時のイベントハンドラを登録している。
その中身は、pタグの文字色を赤にする、というもの。
これをすると…ある一つのpタグにカーソルが重なったら、全てのpタグに対して文字色の変更が入ってしまうのだ。
それが想定した動作であればいいのだが、例えばカーソルが重なった部分だけ変えたい場合もあるだろう。
その時に、thisによる指定が使える。
thisを使ったパターンは以下のようになるだろう。
$("p").on("mouseover", function(){
$(this).css("color", "red");
});先ほど書いたように、thisはイベントが発生したタグを持ってくる。
そのため、このイベント自体は全てのpタグに登録されるのだが、実際にイベントが発生したら、そのカーソルが重なったpタグのみに変更が入るようになる。
これがなかなかに使えるので、是非動作を理解しておこう。
おわりに
今回は、JavaScriptの変数や関数をjQueryと組み合わせてみた。
また、特殊なセレクタであるthisについても解説した。
やはりまだ恩恵は薄いが、こういった細かい部分が後々重要になってくる。
むしろ、まだ慣れているJavaScriptと近い感覚のうちに、使い方をマスターしていきたい。
さて、次回は見た目をより変化させてみようと思う。
分かりやすく、アニメーションをつけてみよう。
このあたりから見た目にも大きい変化が出てくるので、楽しくなってくると思う。
是非色々組んでみて、その効果を実感していってほしい。
2021/2/13追記
次回の、アニメーション解説を公開した。
中で紹介しているメソッドチェーンも非常によく使われるので、是非身に付けておきたい。
オマケ：イベントハンドラへ引数を渡す
さて、本編で保留していた事項を見ていこう。
本編では、イベントハンドラに指定するのは関数名だけで、引数は指定できない、と書いた。
しかし、実は書き方を少し変えることで、引数を渡すことができるようになる。
その場合、ソースの該当部分を以下のように変更する。
/* イベントハンドラ用関数 */
function changeStyle(event){
$(this).css(event.data);
}
/* マウスを乗せた時にスタイル変更 */
$(".change-02").on("mouseover", changedStyle, changeStyle);
/* マウスを外した時にスタイル変更 */
$(".change-02").on("mouseout", defaultStyle, changeStyle);onメソッドに、一つ引数が増えているのが分かるだろうか。
このように、イベントハンドラの前にオブジェクトを渡すことで、それをイベントハンドラ内で使用することが可能になる。
この時のイベントハンドラ用の関数では、一つオブジェクトを受け取るように引数を指定する…のだが、ここにそのまま指定したオブジェクトが入るわけではない。
今回は引数をeventという名前で受け取っているが、この中にはイベントオブジェクトと呼ばれる特別な情報が格納されている。
中身は色々あるが、そのうちdataというキーに、このonメソッドの第二引数で渡したオブジェクトが入っている。
要するに、例えば以下の部分。
$(".change-02").on("mouseover", changedStyle, changeStyle);これでカーソルが重なると、changeStyle関数が実行される。
その引数として受け取ったイベントオブジェクトeventについて、さらにその中のdataというキーに、changedStyleの情報が入っている、ということだ。
そのため、関数内のevent.dataでそれを持ってきて、cssメソッドに渡している。
もちろんonメソッドでのイベント登録時に別のデータを渡してあげればそれが適用され、あたかも引数を渡しているかのような動きをすることができる。
これを知らないと色々と面倒なことをする羽目になるので、せめてこんなこともできるのかくらいの認識はしておこう。
コメント