どうも。WEBおじさんです。
思ったんですが、夜中に更新することが多いですねこのブログｗ
なぜかというと、それは夜中に仕事をした後に書くことが多いからなんですねー。
謎が解けましたねｗ
でも今日は夜中ではないですねー。
なぜかというと、夜中仕事が終わって書いてる途中で寝落ちしてしまい、今清書しているからですｗ
はい、今日はjQueryのイベント定義の際によく使用する「on」メソッドについて、ちょっと紹介しますね。
これを説明するときに他のメソッドが登場するのでちょっとわかりづらくなってしまうかもしれないですがご容赦ください。
注釈など入れたり例えを入れたりしてなるべく感覚的に理解できるように努力しますので。。
今回の内容自体、jQueryを使ってる人じゃないとあまりピンと来ないかもしれないので、中級者向けの内容かもしれませんね。
というわけで「on」メソッドについてですが、その前にまだ勉強を始めたばかりの方や知識が深くない方々はきっとある単語に対して一つ疑問が出たと思います。
「メソッド」って何？
ですよね。ボクも思いました。
気になっちゃうんですよねー、こういう呼び名。
で、気になっちゃうとその先の理解度が下がってしまうことがあるので、こういうのはあまり見ないようにしてきましたが、やっぱ知っといた方がいいと思ったので調べてみました。
「そんなのどうでもいいじゃん」という方は飛ばしていただいてオーケーです！
「メソッド」とは英語で「method」と書きます。
直訳すると「方法」とか「方式」とかそんなイメージです。
jQueryでは「命令文」のことをメソッドと呼びます。
つまり、わかりやすく言うと「Aの要素の背景色を青に変更する」という処理をjQueryでやる場合、どの部分がメソッドに当たるかというと「変更する」という部分ですね。
jQuery（JavaScript）に限らず、プログラムを構築する場合、必ず「何が何をする」とか「何をどうする」という命令を与える必要があります。
jQueryでは「何をする」「どうする」の部分をメソッドという呼び方をしています。
因みに「何が」「何を」の部分は「オブジェクト」と表現します。
・・・ボク、こういうカタカナの呼び名を理解するのが非常に苦手なので、もし間違ってたらごめんなさい。。
気になる方は一応Google（神）で調べてみてくださいｗ
じゃあ「on」メソッドはどういう命令をするのか？というと、「on」自体には確かこれという命令はなかった気がします。
つまり、単体ではあまり意味をなさないメソッドということになりますね。
先ほどの「何をする」という日本語で表現をするなら「する」の部分が近いですかねー。
「する」も単体で使うとよくわかんないですもんねｗ
まぁ、「する」自体は文脈次第では単体でも使えるんですけどｗ
では、その「on」メソッドの使い方を説明していきます。
上で話している通り「何をする」の「する」の部分が「on」ということは、じゃあ「何を」の部分は？となるんですが、これは「on」の中に具体的に記述していくことになります。
書き方としては、下のような書き方になります。
$(‘オブジェクト名’).on(‘イベント’,function(){
//どういう処理かを具体的に記述（cssの変更など）
});
「オブジェクト名」というのは、実際にイベントの対象になる要素のことです。
例えば、$(‘div’)と書いてあった場合は、そのファイル内のdiv全てに対してのイベント処理となりますし、$(‘div.box’)と書いてあればboxというクラスが指定されているdivがその対象となります。
で、さっきからあたりまえのように「イベント」とか使ってるけど、何なのそれは（怒）
となっている方、いらっしゃいますよねーｗ
はい、その方、ズバリ！
この「イベント」と呼ばれるものが先ほど説明した「何を」の部分になります。
イベントとは「具体的な動作」のことです。
例えば「クリック」や「マウスオーバー」や「キーボードのキーを押す」といった動作ですね。
もちろんこの3種類だけではなく、もっとたくさんあります。
イベントの種類については調べればたくさん出てくるので、色々調べてみてください。
自分で調べることも上達への近道の一つです。
今回は例として一番多く使われるであろう「クリック」を使って書き方を説明していきます。
では、例によってデモを作りましたので、見たい方は下のリンクから移動してください。
で、ソースはこちら。
【HTML】
<div id=”bluebox” class=”boxbox”>このスペースのことですよ</div>
【jQuery】
$(function(){
$(‘.boxbox’).on(‘click’,function(){
var boxid = $(this).attr(‘id’);
if(boxid == ‘redbox’){
$(this).attr(‘id’,’bluebox’);
}else if(boxid == ‘bluebox’){
$(this).attr(‘id’,’redbox’);
}
});
});
解説ですが、まぁ、HTMLの方は割愛します。
まず、冒頭の$(function()ですが、これも一応解説しますね。
これは、HTMLが読み込まれたら実行する、という宣言みたいなもんです。
これ以外にも書き方があるんですが、今回はこちらを使います。
自作関数の定義でなければ基本的にこの記述から始まることがほとんどでしょう。
で、次の行で「on」が出てきますね。
ここからが本題です。
今回は「boxbox」というクラスを追加したdivをHTMLに書きました。
2行目では、まずメソッド（命令）の対象となるオブジェクト（要素）を指定します。
その後にメソッドを書き、カッコでその範囲を囲む、という流れになります。
onメソッドの場合、第一引数にイベント、第二引数に対象のオブジェクト、最後にfunctionを使って実行内容を書くのですが、例文では第二引数がありませんね。
この場合、最初に対象のオブジェクトを指定しているので第二引数は省略することができます。
ホントはもうちょい細かな説明があるのですが、今回はこれで覚えてくださいw
で、onメソッドの第一引数には「click」と入ってますね。もちろんこれはクリックという動作です。
つまり、この1行を訳すと「boxboxというクラスの要素をクリックしたら」という感じになります。
では次ですが、2行目のfunctionの中に書かれていることを説明します。
まず、3行目（on > function内の1行目）は、変数の定義ですね。
boxidという変数名で定義しているのですが、$(this)というのは「クリックした要素を相対的に呼び出す」書き方です。
ここではboxboxというクラスを持った要素ということになります。
で、その後ろのattr(‘id’)というのは、idという属性を指定する時の書き方で、今回の場合はこのように書くことで「idという属性の値」を取得することができます。
つまり、boxidには「boxboxというクラスを持った要素が持っているid属性の値」が代入されるように定義されているのです。
ではその次の行ですが、こちらはif文ですね。
if文は色んなプログラム言語でほぼ同じ書き方で使えます。
直訳の通り、「もし〜ならば」という仮定の分岐で命令をしたいという時に使います。
今回は「boxidがredboxという値ならば」ということですね。
ここで注意したいのが「==」とすることです。ここで=が一つだと正しく動きません。
「==」とは「同じ値ならば」という比較をする時に使います。
今回の比較はboxidの値と「redbox」という文字列なので、「boxidに定義されている値がredboxならば」というように訳されます。
では、boxidがredboxだったら何が起きるのか？
答えは次の行にあります。
ここでさっき出てきた「attr」がまた使われていますね。
しかも今回は第二引数が入ってる！
attrでは、第一引数に属性、第二引数を省略した場合にはその時点で代入されている値を取得することができますが、第二引数を指定した場合は第一引数の属性の値に第二引数で指定したものを代入する、という臨機応変な機能が備わっています。
なので、結論としては「boxidがredboxだったら」→「クリックした要素のidの値を「bluebox」という値に書き換える」という命令がここには書いてあります。
で、次の行はその逆で「blueboxだったらredboxに書き換える」という内容が書かれています。
ここまでが今回書いた処理の解説です。
あとはちゃんとカッコやセミコロンなどでしっかりと構文を閉じて構文エラーにならなければ完成になります。
ということで「on」メソッドを使った使用記述例を解説しましたが、実はメソッドには「click」や「hover」などがあるため、わざわざ「on(‘click’,function(){ … })」と書かなくても
「click(function(){ … })」というような書き方でクリックイベントのコントロールができます。
では、なぜ「on」メソッドを使うのか？
これには理由がちゃんとあります。
それは、JavaScript（jQuery）の使用方法に関わってきます。
JavaScriptではHTMLを書き換えるような使い方をされることが結構多いかと思うんですが「click」メソッドを使用した場合、その書き変わった後のHTMLの要素を取得することができず処理が希望した形で実行されないケースがあるのです。
そうした場合に「on」メソッドを使用し、イベントにclickを指定することで処理がきちんと実行されるようになったりします。
もっと掘り下げると、thisを使った場合も同じようになってしまうことがあったような気がします。この対処は「できるだけクラスやIDを指定」することで改善することができます。
なので、簡単な処理やHTMLを書き換えない処理の場合はclickメソッドなどのイベントと同じ動きをするメソッドを使っても問題ないのですが、HTMLを書き換えたりする使い方をする場合はonメソッドを使用した方が良いでしょう。
ちなみに、下のデモではclickメソッドを使用しています。
動きは上のデモと全く一緒です。
処理が単純なので全く影響がありません。
何度クリックしてもバグらしいバグは全く出ません。
逆にバグを出したいくらいですｗ
というわけで、今回はここまでとなります。
いろいろと説明が込み入ってしまった感がありますが、一気に理解できない方も多くいらっしゃると思うので、そういった方々はゆっくり、何度も読み返してわかるところを抜粋して自分なりに理解してかみ砕いてご自身の血肉にしていただけたら幸いです。
以上、WEBおじさんでした！
また！
