jQueryを使ってみよう！

PRTIMESのいちエンジニアです。

jQueryという単語、もはやWeb系のデザインや開発では使わないところの方が少ないのではないでしょうか。
これは一体どういうものなのか、簡単にいえばWeb開発でよく使用するJavaScriptの記述をより短く簡単に書くことを助けてくれるものだと思います。

実際に、通常のJavaScriptがどのようにjQueryで記述出来るかを見てみます。

環境の準備

JavaScriptが動く環境として、Google Chromeを使います。
また、コンソールのログを見るのに、F12を押して開発ツールを開いておきましょう。
ログは、一番下の「Console」に出力されるのでそのタブを選択しておきます。
jQueryは1.11.0を使っています。

f:id:breaktimes:20140709181429p:plain

HTMLの準備

今回は、ボタンを一つだけ配置したHTMLページを作成し、そのボタンをクリックしたらコンソールにログを出力する処理を最終的にjQueryで書いてみましょう。
準備するHTMLは下記のようなものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  <button id="mybutton" type="button">ボタン</button>
</body>
</html>

このHTMLのボタンをすると開発ツールのコンソールのログに出力されるようにします。

onclickイベント属性でJavaScriptを実行する

まずは基本的なやり方でイベントを書いてみましょう。

<button id="mybutton" type="button">ボタン</button>

を

<button id="mybutton" type="button" onclick="console.log('hello world! from attribute');">ボタン</button>

のように変更してみます。その状態でボタンを押すと、コンソールに「hello world! from attribute」と出力されるのが見えると思います。
この出力のやり方を置き換えていきます。

f:id:breaktimes:20140709180936p:plain

関数化してonclickで呼び出す

onclickに直接実行するJavaScriptを記載しましたが、これをJavaScriptの関数として定義し、それを呼び出す形にしたいと思います。
mybottonのonclickでは、hello();を呼び出すようにし、bodyの直前のところに下記のように追記します。

  :
  <button id="mybutton" type="button" onclick="hello();">ボタン</button>
  <script type="text/javascript">
    var hello = function(){
      console.log('hello world! from function');
    };
  </script>
</body>

これでページをリロードしてボタンをクリックしてみると「hello world! from function」と出力されると思います。

JavaScriptだけでイベント定義する

onclick属性に記載せず、JavaScriptだけでclickが呼ばれたらこの処理を実行する、ということを定義することも出来ます。
先ほどの例を下記のように書き換えてみます。

  :
  <button id="mybutton" type="button">ボタン</button>
  <script type="text/javascript">
    var mybutton = document.getElementById('mybutton');
    mybutton.onclick = function(){
      console.log('hello world! from onclick in script')
    };
  </script>
</body>

これでも「hello world! from onclick in script」と出力されることが確認できます。

clickイベントリスナに登録して呼び出す。

前述のように、onclick属性に実行するものを指定して呼び出すのではなく、「これがクリックされたらこれを実行する」というものをJavaScriptで定義することが出来ます。
clickイベントをリッスン(聞き耳を立てる、のような意味)するということで、これをイベントリスナーに登録する、と言います。
前述のようにonclick = function()でも出来るのですが、リスナを使うと同じclickイベントに複数の関数を登録して実行する事ができます。
onclickイベントに登録した場合は、関数を登録すると上書きされて、最後に登録した関数だけが実行されます。

  :
  <button id="mybutton" type="button">ボタン</button>
  <script type="text/javascript">
    var mybutton = document.getElementById('mybutton');
    mybutton.addEventListener('click', function(){
      console.log('hello world! from listner 1st');
    });
    mybutton.addEventListener('click', function(){
      console.log('hello world! from listner 2nd');
    });

  </script>
</body>

イベントリスナに登録するにはaddEventListenerという関数を使用します。第一引数はイベントを表す文字列で、要素の種類によって色々ありますが、今回の場合は「click」という事になります。
第二引数に実行する関数を指定します。
このように登録すると、「hello world! from listner 1st」「hello world! from listner
2nd」と二行のログが表示されるのが確認できると思います。

イベントに関しては、mozillaの下記ページが参考になるでしょう。
Event reference | MDN

jQueryのイベントハンドラへ登録して呼び出す

このイベントリスナに登録するやり方をjQueryで記載してみます。

  :
  <button id="mybutton" type="button">ボタン</button>
  <script type="text/javascript">
    $('#mybutton').on('click', function(){
      console.log('hello world! from jQuery');
    });
  </script>
</body>

処理内容が少ないのでなんとも言えないところですが、記述が大分直感的になったのではないでしょうか。
$はjQueryのグローバルオブジェクトを指し、$('#mybutton')はドキュメント内のid=mybuttonの要素を指します。
on(イベント, 関数)と指定するとイベントと関数が紐付けられます。
また、このイベントハンドラ系のメソッドは返り値として自分自身（つまり操作した要素）を返すのでこのままいくつも処理をつなげることが出来ます。
下記はclickとdblclickイベントの処理を追加したところです。

  :
  <button id="mybutton" type="button">ボタン</button>
  <script type="text/javascript">
    $('#mybutton')
      .on('click', function(){
        console.log('hello click! from jQuery');
      })
      .on('dblclick', function(){
        console.log('hello doubleclick! from jQuery');
    });
  </script>
</body>