動かして楽しいjQuery講座第1回「jQueryって何？」

何度も予定変更してすまなかった。

今回こそ、ついにjQuery編開始だ。

一応分類としてはJavaScriptなのだが、内容が非常に多いため、別講座として実施することにしよう。

で、初回はまずそもそもjQueryとは何かという部分から、使い方、さらには基本的な書き方まで扱おう。

前提知識

さて、解説に入る前に、これを書いておこう。

jQueryを始めるためには、そもそものHTMLとJavaScriptの知識が必要になる。また、CSSも必要だ。つまり、これまで講座で解説してきた内容全部。

そちらが心配という方は、復習しながら、あるいは復習も同時並行で進めていただきたい。

説明に入る前に

ちょっとサンプルページを作り込んでみた。次回以降の内容もここに追加していくつもりなので、よかったら参照して欲しい。

jQueryの説明

jQueryって何者？

では、本題だ。そもそもこいつは何者だ、と。

言葉で説明すると、「JavaScriptを使いやすくしたライブラリ」になる。

今度はライブラリってなんぞや…という話になるが、機能をまとめたファイル、と捉えてくれていい。

まあ、要するにJavaScriptで何かしたいってなった時に使いやすくしてくれる補助ツールみたいなものだ。

もちろん、jQuery以外にも様々なものがある。気になったら調べてみよう。

ちなみに、後でしっかり解説するが、jQueryの実体はJavaScriptファイルだ。

jQueryを使うと何が嬉しいの？

…正直、jQueryでできることはJavaScriptだけでも可能なはずだ。つまり、できることの幅自体は変わらない。

では何が嬉しいかというと、複雑な処理が簡単に書ける、という点に尽きる。

しかも、jQueryはそんなに難しくない。わざわざJavaScriptだけで書き込むのではなく、使えるものは使っていこう。

jQueryの使い方

ファイルへの読み込み

さあ、まずは準備をしていこう。

上でちらっと書いたが、jQueryとはJavaScriptファイルだ。

ということは…HTMLで読み込むことができる。これをすれば、それだけで準備完了だ。

で、これには2種類の方法がある。ファイルをダウンロードしてきてそれを読み込む方法と、Web上で公開されているファイルを直接読み込む方法。

今回は後者で説明しよう。とはいえ、一瞬で終わる。

以下一行をHTMLファイルのheadタグ内に書くだけだ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

これだけで、使う準備ができた。

で、実際に書くときは、外部のJavaScriptファイルに書き、これも読み込むこととしよう。当然だが、同HTML内に書いても問題はない。

このあたりについてはJavaScript編で解説しているので、そちらを参照頂きたい。

jQueryでよく使うもの

よく使うもの…と書いたが、仕組みさえ分かってしまえばなんてことはない。

とりあえず使ってみたい方はまず真似してくれればいい。が、理解しておくことを推奨する。

で、何を書くかだが、以下のように書く。

$(function(){
    // 実際の処理内容
});

何やらよくわからないものでくくっている。これから解説するので、よかったら見ておいてほしい。

まず、JavaScript…それ以前にHTMLは上から1行ずつ読み込んでいる。上に貼ったリンク先でも一度出している話題だ。

で、もちろんこのjQueryも例外ではなく、この処理部分でHTML要素を探しに行こうとすると、まだ読み込みが終わっていない場合はエラーが発生してしまう。

そこで、このよくわからないやつの出番だ。これは、いったんそこの処理を保留にしておいて、HTMLの読み込みが終わった後に実行してくれる。

window.onloadのjQuery版みたいなイメージだ。

基本的な書き方

というわけで、早速書き方を見ていこう。実際の処理は以下のような形で書いていく。

$(セレクタ).メソッド(引数);

こんな感じだ。

一つ目のセレクタというやつは、基本的にCSSでどこに適用するか書いていたものがそのまま来ると思ってもらっていい。

で、それをドルマークと括弧で囲むことによって、jQueryで扱うことのできるオブジェクトを生成しているのだ。

例えば、IDがsample01のタグを持ってきたいなら、$("#sample01")でこのオブジェクトを持ってこれる。

で、その後ろにjQueryで用意されているメソッドを実行してあげる。メソッドの考え方はJavaScriptのものと同じだ。

具体例

どんなものか、実際の例を見てみよう。

例えば、対象のHTML要素のCSSを変更するメソッドで、その名の通りcssというものがある。

それを使ってみよう。詳細は次回以降の講義で解説するので、とりあえず動くかどうかを見て欲しい。ソースコードは以下の通り。

$(function(){
	$("#sample01").css("background-color", "yellow");
});

こうすることで、sample01というID名がついたHTML要素の背景色を黄色にすることができる。

サンプルの実行結果と併せて確認しておこう。

おわりに

初回ということで、そもそもjQueryとは何かから使い方、基本的な書き方まで扱った。

最低限、書き方さえ分かれば一応書けるので、まずはそこから抑えよう。

次回は、ちょっと例にも出したcssメソッドをメインに扱っていく。

更新情報はTwitterでも呟いている。よかったらページ下部のアイコンから覗いていってほしい。

それでは。