この記事は「HTMLやCSSはわかるようになったけど、jQueryはよくわからない」といった初心者の方向けに書いたjQuery入門編です。

HTMLやCSSも分からないよ!?という方でも、なんとなーくjQueryとは何ぞやということが伝わるように書いてます。

最初の入門編としての記事なので、深入りせず基本的な部分をなるべくかみくだいて説明したいと思います。

jQueryってなに?

jQueryってなに?

jQuery(ジェイクエリー)というのは、JavaScript(ジャバスクリプト)のライブラリです。何ですかそれって感じですよね…。

JavaScriptを簡単に説明すると、主にブラウザ上で使われる言語(※1)でWebサイトにアニメーション効果をつけたり、フォームのエラーチェックをしたりなど様々な場面で使われています。

JavaScriptがあるおかげで、Webサイト上の色々な要素を動かしたり操作することができるんです。それ以外にもアプリケーションの開発などにも使われています。まさにJavaScriptさまさまで、人気の高いプログラミング言語です。

ライブラリというのは英語で「図書館・書庫」といった意味がありますが、ここで出てきたライブラリというのは「よく使う機能をパーツ化してまとめたもの」という意味です。

JavaScriptのライブラリ、と呼ばれているだけあってまさに「図書館」のようにJavaScriptの利用度の高いものをギュッとまとめたものなんですね。

ここまで読むとjQueryがどんなものが少し分かると思いますが、つまりJavaScriptが世の中に出てこなかったら、jQueryも存在していません。ニワトリがJavaScriptで、卵がjQueryのようなもの。jQuery生みの親がJavaScriptという関係です。

※1: サーバー側で使われるJavaScriptもありますが、ここでは必要ないので省略します

jQueryを使うメリット

jQueryを使うメリット

jQueryがJavaScriptのライブラリというのはわかったけど、元のJavaScriptを使えばいいんじゃないの?と思う人もいるかもしれません。

ですが、jQueryを使う大きなメリットがあるんです。それは「短いコードで実装できる」ということです。便利でカンタン!

記述が長いと管理も大変だし、データも大きくなるので大変ですよね。jQueryではその点を解消していると言えます。

jQueryには専用の「命令文」が用意されているので「こう記述したら、こう動く!」といったものがJavaScriptよりも短いコードで実装できます。JavaScriptの短縮簡易版ですね。

また基本的にどのブラウザでも問題なく動作するのも使いやすいメリットのひとつだと思います。

特定ブラウザに依存せず、よく使う機能を命令文を使ってコンパクトに実装できるJavaScript、それがjQueryです。

jQueryが使えるようにするための準備

jQueryが使えるようにするための準備

jQueryについてのざっくりとした紹介はひとまず終了して、ここからは実際にWebサイト上でjQueryが使えるようにするための準備についてご紹介します。

jQueryを動かすためには、jQueryのファイルを読み込んでおかないといけません。

CSSを使う時も、CSSのファイルを

<link rel="stylesheet" type="text/css" href="./css/style.css">

といったようにHTMLに記述して適用するのと似ています。

方法は2種類あって

(1)jQueryをダウンロードして使う場合

(2)jQueryをダウンロードせずに、他のサーバーにあるものを使用する場合

というのがあります。1つずつ順番に説明しますね。

(1)jQueryをダウンロードして使う場合

まずは自分でダウンロードして使う場合です。ローカルで使うもよし、Webサイトを保存しているサーバーにアップロードして使うもよしです。

まずはjQueryのサイトを開いて、ダウンロードページに進みます。

http://jquery.com/download/

jQueryのサイト

jQueryのファイル名で「production」と「development」の2種類がありますが、

production:圧縮版

development:非圧縮版

という違いがあります。圧縮しているほうのファイルには名前に「min」がついているので、分かりやすいです。

圧縮しているほうがサイズ容量が小さいのでproductionがおすすめですが、コードが読みやすいのはdevelopmentのほうです(改行などが入っているため)

ひとまず好きなほうを選んで、ダウンロードします。ダウンロードすると(jQueryの名前).jsというファイルがダウンロードできると思います。

JSファイルをフォルダに移動

構造が分かりやすいように専用のフォルダを作って、その中に入れると分かりやすいですね。

レンタルサーバーなど契約していて、サーバー上で使う場合はファイルをアップロードしておきます。ではHTMLファイルにそのjQueryファイルを紐付けしましょう。

HTMLのheadの中に以下のコードを追加してください。

<head>

<!-- headの中に以下のように記述 -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

</head>

src=””のリンク先は、それぞれのパスで記述してくださいね。

これでjQueryのファイルが紐付けされて、実際にjQueryを使用できるようになりました!

続いてもう1つの方法です。

(2)jQueryをダウンロードせずに、他のサーバーにあるものを使用する場合

次はダウンロードをせずに、他のサーバーにあるjQueryファイルを使う方法です。具体的にはGoogleやMicrosoft、jQuery本家などのサーバーが配信しているjQueryを使います。

CDNをつかう

専門用語でCDN(コンテンツデリバリネットワーク)と言って、アクセス元から近いサーバーと通信をとって高速化をはかるものですが難しい話は置いといて、ダウンロードしなくても使える方法があるんだなと思っていただければ大丈夫です。

ちなみにjQueryファイルはバージョンが1〜3まであるんですが、どういう違いがあるかというと「対応ブラウザの違い」です。例えば1.xという古いバージョンだとIE(インターネットエクスプローラ)6〜8にも対応しています。古いブラウザにも対応したい、という場合は1.xなど前のバージョンを使ったほうが良いです。

例としてGoogleの配信しているものを使う場合、以下のように記述します。src=””のリンク先については、それぞれ希望のCDNのURLを入れます。これでjQueryファイルの紐付けができました。

<head>

<!-- headの中に以下のように記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

この(2)の方法を使えば、自分でダウンロードせずにjQueryを使えるので、こちらのほうがミスもなく簡単だと思いますよ。

CDNの各URLは対処ページに掲載されていますのでチェックしてみてください。

https://jquery.com/download/
※英語のページですが、下の方に「Other CDNs」という欄があるので、そこから確認できます。

jQueryのCDN確認先

ひとまずjQueryを使えるようにするには、HTMLファイルのhead内への記述が必須です!

JavaScript(jQuery)のコードを書く場所

jQueryの紐付けが終わったので、実際にjQueryが使える準備はできましたね。

でも実際にJavaScript(jQuery)のコードはどこに書けばいいの…?となるので、次はどこに書けば良いかを説明します。

これも2パターンあって、ひとつはHTMLファイルの中に直接記述する方法、もうひとつはJavaScriptのファイルを作って記述する方法です。

(1)HTMLファイルの中に直接記述する場合

直接記述する場合はHTMLのheadかbodyの中に<script>を使って記述できます。

<script type="text/javascript">

/* この中にjQueryのコードを記述 */

</script>

(2)JavaScriptのファイルを作って記述する場合

HTMLの中に直接記述せずに、別にファイルを作って記述する場合はテキストエディタなどで「sample.js」というように、jsの拡張子で保存します。最初はファイルの中は空欄でも構いません。

作ったものは各自Webサイトが保存されているサーバー上にアップロードしてください。ローカル環境で試しても大丈夫です。

jQueryのファイルのように、別にファイルを作った場合は同様に紐付けをしないと機能しないのでHTMLのhead内に

<head>

<!-- headの中に以下のように記述 -->
<script type="text/javascript" src="js/sample.js"></script>

</head>

という風に、作成した.jsファイルへのリンクを作れば紐付けが完了です。src=””のファイルへのパスについてはそれぞれ変更してください。

HTMLの中に全て記述するとHTMLのコードがだらだらと長くなってしまうので、(2)のように別ファイルを作ってまとめて管理する方法が分かりやすいと思います。

ちなみにこのコードの記述は、先にjQueryを読み込む必要があるので

<head> 

<!-- 先にjQueryを読み込む記述を書く --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script> 

</head>

こんな風に先にjQueryを読み込む記述をしてください。

jQueryの基本的な書き方

まず押さえておきたいこととして、HTMLは上から順番に読み込まれていくので、HTMLのコードよりも先にjQueryが実行されると結果的にjQueryが動かない…( ;∀;)という不具合が起こります。

HTMLが読み込まれてからjQueryを実行する

そのため以下のように

 $(function(){

/* ここにjQueryのコードを記述 */

 });

という記述をすることで、「ページの読み込みが終わったらjQueryを実行する」という処理ができます。

なぜかjQueryが動かない!というトラブルがあった時は、これを忘れてないか思い出してみてください。

jQueryの基本的な構成

jQueryは基本的な記述では「セレクタ」と「メソッド」で構成されています。

jQueryの基本的な構成

セレクタ部分について

「セレクタ」の部分には、操作をする対象が入ります。例えば色を変えたい時に、どの部分の色を変えるかという具合です。指定の仕方は色々な書き方がありますが、CSSの書き方と同じです。CSSを知ってる方は、ここは理解しやすいと思います。

id名で指定 #sample
class名で指定 .sample
p タグで指定
.sample01, .sample02 複数指定

こんな風に、対象となる要素をclass名・id名を使ったり、タグで直接指定したり、また複数指定したりできます。CSSで要素を指定する時と同じ書き方ですね。

書き方はまだたくさんありますが、最初のセレクタの部分にはこんな風に「操作をする対象」を入れます。

メソッド部分について

続いてメソッド部分には、指定した要素に何をするのかを書きます。

メソッドは.(ドット)をつけてセレクタにつなげて書きます。メソッド部分は後述のカッコ内で「具体的にどんな処理をするのか」というのを細かく指定することができますが、書かなくても動作するものもあります。

jQueryはこのように、「セレクタ」と「メソッド」で「何をどうするか」というコードを書いていくのが基本です。

$()は、jQuery()とも書ける

上の構成の記述の中に$()というコードが出てきましたが、これはjQuery()という書き方もできます。

どちらも同じ意味で使われますが、jQuery以外のJavaScriptライブラリが使われている場合は、jQuery()を使って書かないと機能しないので頭の片隅になんとな〜くでいいので覚えておいてください。

ちなみにWordPressでjQueryを書く時はjQuery()を使います。

簡単なサンプルで実際にjQueryを書いてみる

では実際に簡単なものを書いてみて、どんな風に使ったらいいのかを覚えてみましょう。

CSSがわかる方のために、まずはCSSでもできることをjQueryでやってみたいと思います。

(例) pタグの文字の色を青に変える

< CSSの場合 >

p{
 color: blue;
}

これをjQueryで記述するときは、このように記述します↓

< jQueryの場合 >

$(function(){ 
   $('p').css('color','blue');
});

具体的に説明すると、最初のセレクタでpタグを指定しました。

続くメソッドでは「cssメソッド」というものを使います。.css(‘color’,’blue’); という記述をして、「文字を青にする」という命令文を書きました。

単純に1つの設定を記述する時は、それぞれのプロパティ(この場合color)やその値を'(シングルコーテーション)で囲んで,(カンマ)で区切るという書き方が基本になります。シングルコーテーションはダブルでも基本的に大丈夫です。

ちなみに複数設定したい、という時はちょっと書き方が変わって

$(function(){ 
   $('p').css({'color':'blue','font-size':'20px'});
});

という風に、それぞれの設定を,(カンマ)で区切る代わりに、プロパティは:(コロン)で区切ります。

丸かっこ()の中に波かっこ{}が入るのも忘れずに。

例として他にも簡単なものをご紹介したいと思います。いくつかサンプルを見てもらって、こんな書き方ができるんだな、というのをつかんでもらえれば大丈夫です。

対象を削除するremoveメソッド

(例)sampleというクラス名のp要素を削除する

$(function(){ 
   $('p.sample').remove();
});

removeメソッドには丸かっこ()の中にセレクタが入るので、以下のような書き方もできます。

$(function(){ 
   $('p').remove('.sample');
});

p要素でsampleというクラス名がついたものを削除する、という意味になります。

指定した要素の前にHTMLを追加するbeforeメソッド

(例)divの前にh3の見出しを入れる

$(function(){
  $('div').before('<h3>見出し</h3>');
});

beforeメソッドを使うと、指定した要素の前にHTMLを挿入することができます。またHTMLを追加する以外にも、すでに存在する要素を移動する時にも使います。

メソッドは他にもたくさん!

簡単なものをいくつか紹介してみましたが、他にも便利なメソッドはまだまだたくさんあります。

いきなり全部覚えるのは大変だと思うので、まずは基本的な書き方やここまで書いた内容がなんとなく理解できた!となった時に他のメソッドはどんなものがあるのか調べてみると良いと思います。

他にもよく使う「イベント系メソッド」というのもある

イベント系メソッドを覚えるとさらに便利

今回の記事ではあまり深入りして混乱するとイヤなので説明していませんが、他にもよく使うもので「イベント」というものがあります。

・ボタンをクリックした時
・マウスカーソルが乗った時

といったように、特定の動作にあわせて実行するものです。幅広くメソッドを覚えると組み合わせでさらに出来ることが増えていきますよ!

補足ですが、基本の書き方で説明したこのコード↓

$(function(){ 

/* ここにjQueryのコードを記述 */ 

});

上のコードは、readyというイベントメソッドの記述を省略させて書いたものです。readyというイベントメソッドは、HTMLが読み込まれた時に実行されますが、省略して書くこともできるのでここでは書いていません。

この記事で伝えたことをおさらい

基本的な内容にとどめましたが、長くなってしまってすみません ( ;∀;)

ひとまずこの記事で伝えたことを、箇条書きでざっとおさらいします!

  1. jQueryはJavaScriptのライブラリ
  2. 短い記述で実装できるのがjQueryのメリット
  3. jQueryを使うには、head内に記述が必要
  4. jQueryのコードはHTML内に直接記述するか、jsファイルを作るかの2パターン
  5. ページ読み込み完了のタイミングで実行するために、$(function(){ });を使う
  6. 基本的な構成は「セレクタ」と「メソッド」でなりたっている
  7. $()は、jQuery()とも書けるがWordPressではjQuery()を使う
  8. メソッドを覚えていくと、色々な処理を実行できる

jQueryってこんな風に使うのか〜、というのが少しでも伝われば嬉しいです。

おわりに

全然わからない!と思っていたjQueryでもHTMLやCSSで覚えたことが役に立つので、少しずつ練習していくと徐々に慣れてくると思います。

自分自身も最初はわけがわからない状態からスタートしましたが、色々使っていくうちにjQueryの便利さにはまりました。それでもまだまだ知識は少ないです( ;∀;)でも実際に動いた時はHTMLやCSSを勉強した時とは違った、新鮮な感動がありました!

今後はjQueryに関する記事もどんどん増やしていきたいので、ぜひ一緒に覚えていただけると嬉しいです。jQueryの基本を知る上での参考になればと思います。