今回は、JavaScriptの人気のライブラリ、jQueryについての解説です。
以前ほどの勢いはありませんが、いまだに利用されているサイトはかなり多いです。
jQueryとは？
jQueryとは、JavaScriptをより楽に書けるようにするためのライブラリです。ライブラリというのは、よく使う機能をまとめたファイルのことです。
jQueryを使うメリット
jQueryの利用には、いくつかのメリットがあります。
少ない記述で処理を実装できる
上記のリンク先にロゴがあると思いますが、ロゴのサブタイトルに「write less, do more」を書かれています。これは、「少ない記述で多くの処理ができる」という意味になります。
jQueryは、よりコードをシンプルにするために開発されています。ですので、JavaScriptを始めたばかりの初心者でも扱いやすいはずです。
プラグインが豊富
普段jQueryを使わない人でも、プラグインが使いたくてjQueryを利用することがあると思います。私もそうです。
jQueryのプラグインはとても豊富で、便利なものがたくさんあります。
読み込み速度・実行速度は遅くなる
jQueryを使う上で頭に入れておいて欲しいのが、ページの読み込み速度と処理の実行速度が遅くなるということです。
CSSや素のJavaScriptでできることはそれらを使った方がいいです。今の時点ではjQueryを使いますが、今後CSSや素のJavaScriptのスキルをアップさせて、出来る限りjQueryに頼らないで実装できるようにしましょう。
jQueryを使用するには
jQueryを使う方法は二通りあります。CDNを使う方法と、jsファイルをダウンロードして使う方法です。
CDNを使う方法
CDNというのは、リクエストの集中による負荷を軽減し、高速に配信できる仕組みで、説明すると長くなるので詳しくはググってください。
要はCDNを利用して保存されているファイルを読み込んで使って下さいということです。CDNの方が速く読み込める上に、準備が楽なのでこちらを使っています。
CDNでjQueryを配信しているサービスはいくつか存在します。
jQuery本家
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>MicrosoftのCDNが速い説があるので、今回はMicrosoftのCDNを利用します。
これをbodyの閉じタグ前に追加して読み込みます。
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="./js/script.js"></script>
</body>jQueryでコードを書く際、自分が書くjsファイルを読み込む前にjQueryのファイルを読み込みます。
自分が書くjsファイルが先になってしまうと、エラーになって動きません。
ダウンロードして使う方法
以下のサイトからダウンロードして下さい。
jQuery 公式
minと付いているタイプは圧縮されており、読み込みが速くなります。特別な理由がない限り、minが付いたタイプを利用して下さい。
以下はjsフォルダに「jquery-3.3.1.min.js」を保存した場合に指定方法です。同じくjsフォルダに「script.jp」も作成しておきます。コードを書くのは、このscript.jsの中です。
<body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/script.js"></script>
</body>このようにしてjQueryを使用することができます。
実際に使ってみよう
では実際に使ってみましょう。ここではCDNを利用した方法で進めていきます。
任意の場所にsampleフォルダを作って、その中にindex.htmlを作成します。
index.htmlには、以下のように記述をしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Sample</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>それができたら、次はsampleフォルダの中にjsフォルダを作成して下さい。
jsフォルダが作成できたら、その中にscript.jsというファイルを作成します。
script.jsには以下のように記述して下さい。
$(function(){
console.log('read jQuery File!');
});index.htmlとscript.jsを保存してブラウザでindex.htmlを表示させてください。
Developer ToolsのConsoleに「read jQuery File!」と表示されれば、問題なくjQueryのファイルが読み込まれています。
お次はbodyの中に以下のHTMLを書いてください。
<div id="js-target">ここの文字色が変わります</div>HTMLを編集したら、script.jsを以下のように書きます。
$(function(){
$('#js-target').css('color', '#ff0000');
});index.htmlとscript.jsを上書き保存して表示を確認すると、「ここの文字色が変わります」という文字色が赤になっているはずです。
このように、jQueryを使ってCSSを書き換えることができます。
jQueryは以下のような構造になっています。
$('セレクタ').メソッド(引数);メソッドの種類によって、引数の数は異なります。
$('セレクタ').メソッド(引数, 引数, ...);セレクタ
どの要素に処理を行うかは$(‘セレクタ)という形で指定します。
セレクタの指定方法は以下のようになります。
$('#id') // idの指定方法
$('.class') // classの指定方法
$('li') // 要素での指定
$('.class p') // 子要素での指定
$('.class > p') // こういう書き方も可能見てすぐ気付いたと思いますが、CSSのような指定ができるのです。これが初心者でも分かりやすい所です。
メソッド
JavaScriptにおけるメソッドというのは、関数の一種です。
先ほどのコードを再度見てみましょう。
$(function(){
$('#js-target').css('color', '#ff0000');
});ここに出てくる.css(‘引数’,’引数’)の部分がメソッドです。
jQueryファイルの中でcss(‘引数’,’引数’)の挙動が定義されており、それを呼び出して使うことができるのです。
メソッドチェーン
メソッドは、つなげて記述することができます。
例えば、index.htmlを以下のようにHTMLを記述します。
<div id="js-target">
<p>ここの文字色が変わります</p>
<p>ここの文字色が変わります</p>
<p>ここの文字色が変わります</p>
</div>そして、script.jsを以下のように書き換えて下さい。
$(function(){
$('#js-target').children('p').css('color', '#ff0000');
});これで<div id=”js-target”> </div>の中にあるp要素の文字が全て赤くなりました。
children()というメソッドは、指定の子要素（直下にある子要素）を取得します。取得したら、次にcss()メソッドで色を変えています。
このように、複数のメソッドを繋げることをメソッドチェーンと言います。
色んなメソッドを試してみよう
jQueryにはとても便利なメソッドが豊富にあるので、その一部を使って遊んでみましょう。
cssメソッド
先ほどの例に出てきたcssメソッドの使い方を解説します。
index.htmlに以下を記述して下さい。
<div id="js-target">
<p>このテキストのスタイルを変えます</p>
</div>script.jsは以下のようにします。
$(function(){
$('#js-target p').css('color', '#ff0000');
});これは先ほど出てきました。
color以外のプロパティを追加してみましょう。css()メソッドを使って複数のプロパティを指定するには、引数を連想配列にします。
↓↓これが連想配列です。
{
'color': '#ff0000',
'background-color': '#eee',
'font-size': '20px'
}つまり、こんな感じです。
$(function(){
$('#js-target p').css({
'color': '#ff0000',
'background-color': '#eee',
'font-size': '20px'
});
});文字色、背景色、フォントサイズが変わりましたね。
以下のような書き方もできます。キャメルケースと呼ばれる書き方ですね。
$(function(){
$('#js-target p').css({
color: '#ff0000',
backgroundColor: '#eee',
fontSize: '20px'
});
});onメソッド
index.htmlに以下を記述して下さい。
<button type="button" id="js-button">色を変える</button>
<div id="js-target">
<p>ここの文字色が変わります</p>
</div>そして、script.jsを以下のように書きます。
$(function(){
$('#js-button').on('click', function(){
$('#js-target p').css('color', '#ff0000');
});
});onメソッドの第一引数にはイベント、第二引数には関数が入ります。ここではclickというイベントを使っています。
$('#js-button').on('click', 関数)クリックイベントが発生すると関数が実行されます。
$('#js-button').on('click', function(){});こうなって、
$('#js-button').on('click', function(){
// ここの処理が実行される
});こうなります。
他にも色んなメソッドがあるので試してみて下さい。
まとめ
サイトの読み込み速度を低下させるというデメリットがありますが、JavaScriptの入門としてjQueryはかなりおすすめです。
jQueryに慣れてから、本格的にJavaScriptの勉強をすれば良いと思います。
jQueryには便利なプラグインも豊富にあり、使えるようになるとWebサイト制作が楽しくなります。
まずはjQueryで様々な処理ができるように頑張って学習してみて下さい。
JavaScriptについてはこちらの記事もどうぞ。
他にもこんな記事があります。
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
WEBデザインの勉強におすすめの書籍、入門書の紹介 | SHIROMAG
