jQuery を使ってみよう

JavaScript jQuery

JavaScript の歴史と jQuery

JavaScript はもともと Netscape 社が LiveScript という名前で開発をしていました。それが Sun Microsystems 社との共同開発により JavaScript という名前になり、Netscape Navigator 2.0 に実装されるようになったのが始まりで、その後 Internet Explorer 3.0 にも JScript という形で実装されました。

最初のうちは「ステータスバーに関係のないメッセージを流す」などの「お遊び」的な用途に使われるケースが多かったこと、また、Netscape Navigator と Internet Explorer の「ブラウザ戦争」に巻き込まれて実装が異なった結果、使えない機能があったり動作が違ったりなど不都合が多く、JavaScript を嫌う人は多かった印象があります。

HTML と CSS が W3C によって標準化されたように JavaScript に関しても ECMA がその核となる部分を標準化して ECMAScript という形でまとめたことにより、一部のブラウザ*1を除くブラウザで JavaScript は同じ動きをするようになりました。

また、動的な Web ページの作成には欠かせないということもあり、JavaScript が見直された、ということもあって、現在では JavaScript のない Web ページの作成はほとんど考えられない、と言えるまでになっています。

そのような中で jQuery が登場しました。HTML と JavaScript の相互作用を強化するライブラリで、DOM(Document Object Model)操作による動的な Web ページの作成がより簡便になり、さらには jQuery 用のプラグインも多数つくられていて拡張性があります。

ではどのくらい簡便になるのか、実例を見てみましょう。

jQuery のダウンロード

jQuery の公式サイトからダウンロードできます。Internet Explorer 8 以前のブラウザでないのなら 2.0.0 を使うことをお勧めします。使うだけなら jquery-2.0.0.min.js の方が軽量でお勧めです。Internet Explorer 8 以前のブラウザの場合は 1.9.1 を使います。この他、旧バージョンの jQuery を利用して書いたソースコードを動かすための Migrate plugin も公開されていますが、これから jQuery を始めるのであれば必要ありません。

他にも

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>

のように記述することで、ファイルをダウンロードせずに直接読み込む方法もあります。

HTML の用意

<!doctype html>
<html>
  <head>
    <title>進数変換</title>
    <link rel="stylesheet" href="parse.css" type="text/css">
    <script src="lib/jquery-2.0.0.min.js"></script>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>入力</legend>
        <input type="text" id="input" size="30"><br>
        <label><input type="radio" name="inRadix" value="2">2 進</label>
        <label><input type="radio" name="inRadix" value="8">8 進</label>
        <label><input type="radio" name="inRadix" value="10" checked>10 進</label>
        <label><input type="radio" name="inRadix" value="16">16 進</label>
      </fieldset>
      <p><input type="button" value="変換"></p>
      <fieldset>
        <legend>出力</legend>
        <input type="text" id="output" size="30"><br>
        <label><input type="radio" name="outRadix" value="2">2 進</label>
        <label><input type="radio" name="outRadix" value="8">8 進</label>
        <label><input type="radio" name="outRadix" value="10" checked>10 進</label>
        <label><input type="radio" name="outRadix" value="16">16 進</label>
      </fieldset>
    </form>
    <script src="parseNum.js"></script>
  </body>
</html>

まずは元となる HTML を作ります。これは 2 進・8 進・10 進・16 進の相互変換をするためのフォームです。以前 Struts のサンプルを紹介したときに作ったものですが jQuery 向けに書き直しています。

jQuery のソースを書く

$(":button").on("click", function () {
  var inRadix = parseInt($('[name = "inRadix"]:checked').val());
  var outRadix = parseInt($('[name = "outRadix"]:checked').val());

  var input = $("#input").val();

  $("#output").val(validate(input, inRadix) ? parseInt(input, inRadix).toString(outRadix).toUpperCase() : "Error!");
});

function validate(str, radix) {
  switch(radix) {
    case 2:
      return str.match(/^[0-1]+$/);
    case 8:
      return str.match(/^[0-7]+$/);
    case 16:
      return str.match(/^[0-9a-fA-F]+$/);
    default:
      return str.match(/^[0-9]+$/);
  }
}

jQuery の特徴は $ 関数です。

$("#foo")

で id 属性の値が foo である HTML の要素を取得します。今回は使っていませんが

$(".bar")

で class 属性の値が bar である HTML の要素すべてを取得します。

$('[name = "hoge"]')

は name 属性の値が hoge である HTML の要素全てを取得します。さらに、サンプルのソースにもあるように

$('[name = "inRadix"]:checked')

のように書くことで、radio button などの要素でチェックされているものを取得することができます。また

$(":button")

で input 要素の type が button であるものや button 要素を取得できます。

on はイベント属性を追加する jQuery の関数です。val はフォームの部品の入力値を取得したり、引数を渡して使用するとフォームに値をセットすることもできます。さらっと書いているようですが、on 関数の第二引数に無名関数を引数として渡しています。つまり on は高階関数です。まぁでもそこら辺をあまりごちゃごちゃいうと「('A`)ｳﾞｧｰ」ってなるのであまり言わないでおきます。on は第一引数にイベントを、第二引数にそのイベントが起きたときに行う動作を書くものだと理解していただければいいと思います。

jQuery の詳しい API については jQuery API Documentation を見ていただければと思います。

$ 関数、on 関数、val 関数以外は普通の JavaScript の関数やメソッドです。

普通の JavaScript で書くとこうなる

<!doctype html>
<html>
  <head>
    <title>進数変換</title>
    <link rel="stylesheet" href="parse.css" type="text/css">
    <script src="parseNum.js"></script>
  </head>
  <body>
    <form name="parseForm">
      <fieldset>
        <legend>入力</legend>
        <input type="text" id="input" size="30"><br>
        <label><input type="radio" name="inRadix" value="2">2 進</label>
        <label><input type="radio" name="inRadix" value="8">8 進</label>
        <label><input type="radio" name="inRadix" value="10" checked>10 進</label>
        <label><input type="radio" name="inRadix" value="16">16 進</label>
      </fieldset>
      <p><input type="button" value="変換" onclick="parse()"></p>
      <fieldset>
        <legend>出力</legend>
        <input type="text" id="output" size="30"><br>
        <label><input type="radio" name="outRadix" value="2">2 進</label>
        <label><input type="radio" name="outRadix" value="8">8 進</label>
        <label><input type="radio" name="outRadix" value="10" checked>10 進</label>
        <label><input type="radio" name="outRadix" value="16">16 進</label>
      </fieldset>
    </form>
  </body>
</html>

function parse() {
  var input = document.parseForm.input.value;
  var output;
  var inRadix;
  var outRadix;

  for(i = 0; i < document.parseForm.inRadix.length; i++) {
    if(document.parseForm.inRadix[i].checked) {
      inRadix = parseInt(document.parseForm.inRadix[i].value);
    }
  }

  for(i = 0; i < document.parseForm.outRadix.length; i++) {
    if(document.parseForm.outRadix[i].checked) {
      outRadix = parseInt(document.parseForm.outRadix[i].value);
    }
  }

  document.parseForm.output.value = validate(input, inRadix) ? parseInt(input, inRadix).toString(outRadix).toUpperCase() : "Error!";
}

function validate(str, radix) {
  switch(radix) {
    case 2:
      return str.match(/^[0-1]+$/);
    case 8:
      return str.match(/^[0-7]+$/);
    case 16:
      return str.match(/^[0-9a-fA-F]+$/);
    default:
      return str.match(/^[0-9]+$/);
  }
}

radio button の値の取得とかかなり面倒ですね。jQuery のありがたみがわかると思います。

*1:具体的には言いませんが察してください。