【完全初心者向け】はじめてのjQuery【保存版】
Webサイト制作の現場で当たり前に使われているjQuery。この記事では、はじめてjQueryを触る初心者の人に向けて、 僕がWebを始めた時につまづいた経験を踏まえて、 できるだけ優しく、迷わないように解説していこうと思います。
そもそもjQueryとは？
そもそもjQueryとはいったい何なのでしょうか。Wikipediaにはこう書かれています。
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
https://ja.wikipedia.org/wiki/JQuery
…なるほど。何かが簡単に書けるんだということは分かりましたね。笑
Webサイトを作る際、要素を動かしたりユーザーの操作によって画面に変化を加えたいという時があります。タブを切り替えたり、フォームを送信するまえにバリデーション（きちんとした値が入っているかのチェック）を行ったりしたい 時などです。
そういう時に使われる一番ポピュラーな言語に「 JavaScript 」があります。jQueryは簡単に言うと、それをもっとシンプルな書き方で書けるようにしたものです。
この記事を見ている人が今どのくらいの理解度なのか、差があると思いますので、リストで各章に飛べるようにしています。読む必要がないな、と思ったら飛ばして読んでOKです。
jQueryのメリット、デメリット
jQueryでできることは全てJavaScriptでもできるのですが、コードが短く早く書けることにより、覚えやすく、そして読みやすくなるのが最大のメリットです。これが人気の理由ですね。例えばこんな感じで短く書けます。
id=”title”の要素内の文章を「タイトルです」に変更する
// JavaScript
document.getElementById('title').innerHTML = 'タイトルです';
// jQuery
$('#title').html('タイトルです');上と下の行は同じ結果になります。jQueryのほうがかなり短く書けているのがわかるかと思います。コードの意味については後の章で解説しますね。
jQueryのデメリットとしては、生のJavaScriptで書くよりも若干処理に時間が掛かることです。ですが、全然体感できるレベルではないので、先程のメリットのほう遥かにが大きいと思ってもらって大丈夫です。
改めて言うと、コードを短く書けることにより、学習しやすく読みやすくなるのがメリットです。
jQueryの読み込み方2種類
同サーバー内から読み込む方法と、CDNから読み込む方法があります。
サーバー内から読み込む方法は、公式サイトからダウンロードして、あらかじめサーバーにアップロードしておく必要があります。それをこんな感じで読み込みます。
<script src="jquery.js"></script>一方、CDNは1行書くだけで使えます。下記で説明していますが、メリットしかないので基本的はこちらがおすすめです。
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>公式サイト内CDNのページから、jQueryの各バージョン（1.x、2.xなど）のコードを入手できますが、主な違いはIE8をサポートするかどうかなので、初心者は特に気にせずどのバージョンでもOKです。
コラム：CDNとは？
コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
コンテンツデリバリネットワーク – Wikipedia
CDN（コンテンツデリバリーネットワーク）とは、簡単に言うとjQueryなどの情報を配信してくれる仕組みです（もちろん無料）。これを使えば、わざわざjQueryをダウンロードしてサーバーにアップしなくても、1行書くだけで使う事ができます。デメリットとしてはネット環境が必須な点ですが、通常サイトは必ずネットに繋がっているので、基本デメリットはありません。読み込みもこっちのほうが早いので、使わない手はないです。おすすめ！
jQueryを配置する場所
DOM（HTML要素など）を読み込む前にスクリプトを実行しようとすると、エラーになることもあります。なので、最近はbody閉じタグの直前で読み込むことが多いです。
jQueryは後述する$(function()～の記述により場所に関係なくDOMの読み込みを待ってから実行しますが、他のJavaScriptなどのことも考えて、body閉じタグの直前に書いておくのが間違いないです。
書き方の基本
jQueryの基本的な書き方について書いていきます。最もシンプルな書き方はこんな感じです。
$( A ).B(); // Aの要素（セレクタ）に対してBの行動（メソッド）を実行Aを「セレクタ」、Bを「メソッド」と言います。かっこいいですね（？）
実際の使い方はこんな感じになります。
$('h2').css('color','red'); // h2のCSSを「color: red」に変更！h2というセレクタに対して、css()というメソッドを実行しています。css()は、カッコ内のCSSをセレクタに適用するというメソッドです。このコードを実行すると、H2要素の文字色が赤になるというわけです。当たり前ですが、これは元々CSSで設定されていた値より優先されます。
ちなみに、セレクタは$('p')のような書き方でHTML要素を、「#」を付けて$('#container')でID名を、「.」を付けて$('.title')でクラス名を指定できます。ほかにも色々な指定方法がありますが、これ以外は慣れてからでいいと思います。
また、先程jQueryを配置する場所でも触れた、 $(function()～ についてです。このおまじないの中にコードを書くことで、ほぼ確実にDOMを読み込んだ後に実行させる事ができます。※例外もあります
<script>
$(function(){
// ここにjQueryのコードを書く
});
</script>jQueryを使うときはまずこれを書いてから、中身を書いていくといいですね。ちなみに、jQueryはJavaScriptでできているので、その２つを一緒に書いていっても全く問題ありません。
jQueryでできること基本
さあ、全部読んできた方はここまで長かったですね。これから実際にどういうことが出来るのかをざっくりと説明していきます。最初から読んでいる方は一旦お茶を挟みましょう。
jQueryには便利なメソッドがたくさんあるので、時間がある時にドキュメントを眺めておくと、便利なメソッドに出会えるかもしれませんね。
・公式ドキュメント（英語）
・jQuery日本語リファレンス
CSSを変更する
// 文字色を変える。基本の使い方
$('.title').css( 'color', 'red' );
// ハイフンが付いてたやつはキャメルケースで書くのに注意
$('.title').css( 'marginTop', '5px' );
// 波括弧で囲うと複数記述できる。コロンになってるのに注意
$('.title').css({ 'color': 'red', 'margin': '10px' });要素の中身を変える
// text()は純粋に中の文字列を変更する
$('.title').text('変更！！');
// html()はHTML要素も反映される
$('.title').html('<a href="http://example.com">変更！！</a>');要素を表示非表示
// 単純に消したり表示したり
$('.title').hide();
$('.title').show();
// フェードアウト、フェードインもできる。
// ()内で動きにかかる時間を設定できる（単位：ミリ秒）
$('.title').fadeOut();
$('.title').fadeIn( 500 ); // 0.5秒でふわっと表示
// スライドもあるので、slideDown()、slideUp()などで調べてみてねクラスを追加、削除する
// クラスを追加。addClass()等の中に「.」は要りません
$('.title').addClass('active');
// 同じくクラスを削除
$('.title').removeClass('active');ひとまずこんなところですかね。この辺は無理に覚えなくても、必要に駆られた時に覚えていくのでざっくりこんなことが出来るんだな、くらいで問題ないです。
イベントハンドラでユーザーの動きを感知
ここがjQueryというか、フロントエンド言語の真骨頂。ユーザーの操作によって動的に画面を変えることができます。まずは下の画面内「押してみて」ボタンを押してみてください。
See the Pen jQueryのイベントハンドラ基本 by はとむぎ (@hatomugi_s) on CodePen.
はい。変わった内容は置いておいて、大事なのは「あなたのクリックによって実行された」ということです。これはこんな感じで書いています。
<button>押してみて</button>
<p></p>$('button').click(function(){
$('p').append('押されました！<br>');
});$('button')をclick()した時に、2行目のコードを実行しています。function(){～の部分は無名関数と言いますが、今はおまじないとして、こう書いたら動くんだということだけ覚えておいてください。無名関数はjQueryでよく出てきます。
click()の他にも、キーを離したときに動くkeyUp()、マウスカーソルを乗せたときに動くmouseover()などがあります。こういう何かが起こることを「イベント」と言い、イベントを監視するメソッドのことを「イベントハンドラ」と言います。jQueryを使う理由に直結するほど便利なので、ぜひ使えるようになりましょう！
まとめ
長い記事になってしまいましたが、保存版としていつでも見返すことができるように、僕がWebを始めた時につまづいた経験を踏まえて、 0からとりあえず書けるようになるまでを紹介しました。少しでもお役に立てれば嬉しいです。
ここからより高度で便利な使い方も今後ブログ内で紹介していければと思います。また、僕が駆け出しだった頃にお世話になった書籍も紹介しておきます。今は無くなってしまったものでも、改訂版になっているものや、同じ著者のものは載せています。ぜひ参考にしてみてください。
それでは。
