jQuery入門 2020 #01:セレクターと Vanilla JS

jQuery(ジェイクエリー)は、2006年に開発されたJavaScriptライブラリーです。ウェブ開発で絶大な人気を誇り、多くのクリエイターが現在も利用しています。とはいえ、さすがに現代ではその後開発された、多くのライブラリーに押されて、利用者が減ってきていると言われています。

では 2020年の今、jQueryの使いどころはどんなところなのでしょう。他のライブラリーが優れているのはどんな部分なのでしょうか。この講座では、そんな「jQueryの今」を紹介していきましょう。

jQueryのライブラリーファミリー

jQueryには、jQuery本体のほかにも次のようなファミリーライブラリーがあります。

  • jQuery UI
  • jQuery Mobile
  • Sizzle
  • QUnit

ただし、残念ながら現在ではこれらのライブラリーを積極的に活用している例は多くなく、これから習得をするというのはあまり得策とは言えません。 同じような可能なBootstrapなどを利用するとよいでしょう。 そのためここでは、jQuery本体のみに絞って紹介しましょう。

jQueryを利用する

jQueryを利用するには、公式サイトから「Download」メニューをクリックします。次の種類のjQueryをダウンロードできます。

  • compressed – ファイルサイズを小さくしたバージョン。軽い
  • uncompressed – ソースを変更可能にしたバージョン。主に開発用。
  • jQuery slim – jQueryからアニメーション機能などを省いたスリムバージョン

通常は「compressed」のバージョンを使うとよいでしょう。一番上のリンクをクリックします。

なお、ダウンロードするとファイル名に「jquery.3.4.1.min.js」などバージョン番号が付加されているので、利用するときはこれを外して「jquery.min.js」などにしておくとよいでしょう。バージョンアップするときなどにややこしいことになります。

jQueryを利用するには、HTMLの中(</body>の直前など)で、次のように書き込みます。

<script src="jquery.min.js"></script>

これで、jQueryが利用できるようになります。

jQueryのプログラムを作成してみよう

それでは、jQueryでプログラムを作成してみましょう。まずは、HTMLを記述します。

<div id="message"></div>

空の<div>要素を準備しました。ここに、文章を挿入してみます。先ほどの、jQueryを取り込んだ行の後に次のように追加します。

<script src="jquery.min.js"></script>
<script>
  $('#message').html('jQueryで書き換えました');
</script>

これでブラウザーで表示すると、画面にはメッセージが表示されました。

それでは、このプログラムについて紹介していきましょう。

jQueryまたは$

jQueryは「$」という記号から始まります。

$('...')

実はこれは、次の記述と同じ意味です。

jQuery('...')

これでjQueryの機能を使っていくのですが、毎回「jQuery」と書くのが面倒なため、「$」がショートカットのような役割をしています(ただし、一部の環境ではこれが使えないため、jQuery('..')の書き方が使われます)

セレクター

$またはjQueryの直後のカッコの中には、jQueryが対象とする要素を指定します。この時使われるのがCSSではおなじみの「セレクター」です。例えば、次の記述を見てみましょう。

$('#message')

「#」というのは、CSSで「ID属性で指定する」という意味を持ちます。つまりここでは「ID属性がmessageの要素」という意味になります。jQueryでも、CSSと全く同じ意味で使われ、ここでは次の要素を指定しています。

<div id="message"></div>

もし例えばこれがクラス属性だった場合はどうなるでしょう。

<div class="box"></div>

この場合は「.box」がセレクターになります。

$('.box')

メソッド

セレクターによって対象となる要素が指定できたら、「メソッド」で具体的な動作を指示します。例えば次のメソッドは「画面上のHTMLを書き換えてください」という指示になります。

$('#message').html(...);

この他にもさまざまなメソッドがあるので、この後紹介しましょう。

パラメーター

最後に、メソッドにより具体的な情報を伝えるのがカッコの中の「パラメーター」です。例えば、「html」メソッドには「書き換えたい内容」を指定することができます。次のプログラムを見ていきましょう。

$('#message').html('jQueryで書き換えました');

この場合は、「”jQueryで書き換えました”という内容に書き換えてください」という意味になります。なお、パラメーターに文章を指定する場合は前後にクオーテーション記号が必要になるので注意しましょう。クオーテーション記号にはシングルクオート(’)とダブルクオート(”)がありますが、どちらを使っても基本的には問題ありません。

これで、プログラム全体を紹介すると次のようになります。

ID属性がmessageという要素の内容を、”jQueryで書き換えました”に書き換えてください。

こうして、jQueryでプログラムを作成していきます。

jQueryを利用しない『Vanilla JS』

このように、jQueryは便利なものの、ライブラリーとしてのファイル容量がそれなりに大きく、ウェブページの動作速度などに影響を与えてしまうことがネックでした。特に、スマートフォン時代になってモバイル通信の速度が遅い時などは、jQueryの影響が大きかったため、「jQueryを使わずにJavaScriptでプログラムを組もう」という流れが出てきます。

これを、Vanilla JSといい、アイスでトッピングなどをしない素のバニラアイスから「Vanilla」と呼ばれていました。

それでは、先ほどのプログラムをVanilla JSで作成してみましょう。

document.getElementById('message').innerHTML = 'JavaScriptで書き換えました';

これでもプログラムが動作します。このプログラムについて紹介しましょう。

オブジェクト

先頭の「document」というのは「オブジェクト」と呼ばれるもので、ここでは表示されている画面全体を差します。JavaScriptでは画面内を自由に制御できます。

メソッド

「getElementById」とは、その名の通り「ID属性を使って要素(Element)を取得する」という意味で、documentオブジェクトに対して命令することができます。

パラメーターとしてID属性を指定すれば(ここでは、#は不要です)、その要素が取得できます。つまり、ここまででjQueryの$('#message')と同じ意味になります。

プロパティ

続いて「innerHTML」というのは、「その要素の内容のHTML」という意味です。つまり、先のメソッドで取得した要素のHTMLの内容です。ここに=の記号で、値を指定しています。

プロパティには値を「代入」することができ、指定した内容で書き換えることができます。そのためここでは、「JavaScriptで書き換えました」という文章で置き換えているため、画面の表示内容が変わったというわけです。

若干プログラムとしては長くなりますが、全く問題なく動作します。それは当然でjQueryというライブラリーは、本来のJavaScriptでできないことは、そもそもjQueryでもできないため、置き換えているにすぎません。

getElementByIdメソッドは、ID属性しか使えませんが、別のメソッドでクラス属性なども指定できます。例えば、boxというクラスの要素を取得するには次のようにquerySelectorメソッドを使います。

document.querySelector('.box').innerHTML = 'JavaScriptで書き換えました';

jQueryとVanilla JS

では、jQueryとVanilla JSはどちらが優れているでしょう?

これについては、「小さいプログラムならVanilla JS、ややこしいことをするならjQuery」と言えます。1行や2行のプログラムのために、jQueryを使うのは少しライブラリーの容量がもったいないので、JavaScriptで書くべきでしょう。

しかし、この後紹介するAjax通信などのややこしいプログラムは、Vanilla JSで作ろうとするとかなりややこしくなります。そのような場合は遠慮せずにjQueryを利用するとよいでしょう。スマートフォンの回線速度も、現在ではほとんど気にならなくなっています。無理に開発難易度を上げるよりは、便利に使えるライブラリーは使っていくとよいでしょう。