jQueryとは？ 書き方と使い方をマスターしよう！
HTMLとCSSだけじゃ表現できないけど、
こんな動きができたらもっと良いサイトが作れるのになあ。
と思ったことありませんか？
jQueryなら、CSSを指定するのと同じような感覚で、
簡単にWEBサイトにもっとたくさんの動きがつけられるようになるんです。
今回はそのjQueryの超入門編として、
導入の仕方から、簡単な動作デモを紹介します。
1、jQueryとは？
jQueryとは、JavaScriptを簡単に使えるように
ライブラリ化したものです。
JavaScriptでは何行にもわたり書かなきゃいけなかったコードが
jQueryなら数行で済みます。
まずは、jQueryの使い方を順番に説明します！
2、jQueryを読み込む
まずはjQueryをサイトで使えるように、
jQueryそのものを読み込む必要があります。
jQueryを読み込む方法は２つあります。
jQueryを読み込む方法01：公式サイトからDLする
jQueryのサイトにアクセスし、ライブラリを任意の場所にダウンロードします。
ダウンロードしたライブラリを、
サーバーの任意の場所にアップロードします。
アップロードが完了したら、
jQueryを使用したいサイトのheadタグ内に、
以下のようにscriptタグで記述します。
【HTML】
|
1 2 3 4 5 |
(中略) (中略) |
ダウンロードして読み込む方法はこれで完了です！
jQueryを読み込む方法02：URLで指定する
jQueryのサイトにアクセスし、
downloadのページにアクセスしたら、
画像の箇所のURLをコピーします。
コピーしたURLをjQueryを使用したいサイトのheadタグ内に、
以下のようにscriptタグで記述します。
【HTML】
|
1 2 3 4 5 |
(中略) (中略) |
こちらもここまでで完了です。
URL指定の場合は、
インターネット接続のある環境でないとjQueryが正常に機能しないので
その点だけ気をつけましょう。
また、上記の読み込み方法２つに共通して注意したいのが、
head内の記載する場所。
jQueryのscriptタグは、
必ずCSSを読み込んだあとに記述するようにしましょう。
jQueryはCSSと違い、
同時に読み込むことができないので、
処理に時間がかかかってしまいます。
HTMLは上に書いてあるものから順番に読み込みますので、
同時に読み込むことができるCSSを先に読み込んでもらうためにも、
記載する箇所は必ず守るようにしましょう。
3、jQueryを書く
３−１、jQueryのコードを書く場所
CSSと同様、headタグ内に記載することができます。
しかし、ソースコードが混在していると、修正などが大変になりますので、
できる限り外部ファイルで読み込むようにしましょう。
拡張子は ” ○○○.js ” となります。
３−２、jQueryの基本
jQueryの基本的な記述形式は以下の通りです。
【jQuery】
|
1 2 3 |
$(function(){ ここに行いたい処理を記述する }); |
$はjQueryの別名です。
記述のたびにjQueryと書くのは大変なので、
基本的には$を使用するようにしましょう。
例外として、WordPressでは$が使えないファイルなどもありますので、
書いたjQueryがうまく動作しないときは、
$をjQueryに書き直してみましょう。
処理の部分は以下のように記述します。
【jQuery】
|
1 2 3 |
$(function(){ $("セレクタ").メソッド(パラメータ); }); |
セレクタとは、HTMLとCSSでも使っているセレクタのことです。
「”セレクタ”に対して、”メソッド”する」というイメージです。
パラメータ部分は必ずしも必要というわけではないので、
状況や使用するメソッドに合わせて内容を記述します。
それでは、実際に簡単な処理を書いてみましょう。
３−3、jQueryを使って文字の色を変えてみる
まずはメソッドの中でも比較的理解しやすい
CSSのスタイルを適用するコードを書いてみます。
【HTML】
|
1 2 3 |
上記の「サンプル」という文字に対して、
CSSを使わずに文字色をオレンジ色にしてみます。
【jQuery】
|
1 2 3 |
$(function(){ $(".txt").css("color","orange"); }); |
【結果】
スタイルシートにcssを記述しなくても
文字色を変更することができました。
CSSでは
|
1 2 3 |
.txt{ color: orange; } |
と書くのと同じ処理となります。
セレクタ部分は、
class指定であれば ” . ”を、
id指定であれば “ # ” をつけることを忘れないようにしましょう。
３−４、jQueryのイベントを使ってみる
せっかくjQueryを覚えるなら、動きのあるサイトを作ってみたいですよね。
jQueryのメソッドには、イベント処理というものがあります。
イベント処理とは、
“ クリックした時 “ に○○を実行する
“ カーソルが乗った時 “ に○○を実行する
など、○○が実行されるきっかけを指定するものです。
基本型は以下の通りです。
【jQuery】
|
1 2 3 4 5 |
$(function(){ $("セレクタ").イベント(function(){ $("●").メソッド(); }); }); |
“セレクタ”を”イベント”したとき、
“●”を”メソッド”する
イベント処理にはさまざまな種類がありますが、
今回は、「 ” クリックした時 “ に背景が青くなる 」処理を書いてみましょう。
【HTML】
|
1 2 3 |
【jQuery】
|
1 2 3 4 5 |
$(function(){ $(".button").click(function(){ $(this).css("background-color","blue"); }); }); |
【結果】
（文字をクリックすると背景が青色に変わります）
今まででてこなかった $(this) というものがありますね！
これは、
$(this)より上にあるセクレタを指しています。
コードを日本語にすると、
“.button”というセレクタがクリックされたら
これ(.button)の背景を青にするCSSを追加してね！
ということになります。
WEBサイトの情報入力画面で出てくる、
アラートもjQueryのクリックイベントで出現させることができます。
【HTML】
|
1 2 3 |
【jQuery】
|
1 2 3 4 5 |
$(function(){ $(".button02").click(function(){ alert("クリックされました"); }); }); |
【結果】
（文字をクリックするとアラートが表示されます）
４、メソッドを複数指定したいとき
メソッドを複数指定したい時は、
メソッドチェインと呼ばれる書き方をします。
メソッドチェインは
主語を省略化するようなイメージで使用することができます。
日本語で、「自分が何と何をしたい」と言いたいとき、
「私は●●がしたい、私は□□がしたい」
と、逐一主語を入れることはなかなかないですよね。
jQueryも一緒で、逐一主語の指定をしていると
コードが長くなってしまい、処理にも時間がかかってしまいます。
ですので、できるだけメソッドチェインを使って、
短くスマートなコードになるように心がけましょう。
【HTML】
|
1 2 3 |
【jQuery】
|
1 2 3 4 5 |
$(function(){ $(".button03").click(function(){ $(this).css("color","red").text("クリックされました"); }); }); |
【結果】
(文字をクリックすると文字色が赤に変わり、テキストの内容が変更されます)
５、まとめ
jQueryの使い方から、簡単なコードまでを紹介しました。
応用的な使い方をすれば、タブメニューやページトップに戻るボタンを作成することができますので、
まずは基本を覚えて、自分でコードが書けるようにがんばりましょう！
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
