jQueryってなに？超初心者向け入門講座
こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。
もう少しで長かった冬も終わり、春を迎えますね。
春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。
昔とは違い、最近は「デザイン＋htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。
そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない！」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。
jQueryを使えるデザイナーは、今後必ず重宝されますので、今のうちからスタートダッシュをかけて自分の強みにしましょう！
また最近はjQuery以外にもReactなど優秀なJavaScriptライブラリが出現してきています。Reactについても学びたいという方は下記リンクよりどうぞ。
【関連記事】初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！
目次
そもそもjQueryとは？
jQueryをざっくりと説明すると「JavaScript」と呼ばれるプログラムをより扱いやすくしたファイルのことです。（通称：ライブラリ）
本来であれば煩雑なプログラムの記述も、jQueryを使用すると少ない記述で実現できてしまいます。
具体的には、JavaScriptで一から書くと何十行にもなる記述が、jQueryを使用すると、ほんの数行で済んでしまうことも。こういった理由から、プログラムが出来ない方でも扱うことが簡単になり、多くのWeb関係者に愛されるライブラリとなっているんですね。
jQueryで何ができるの？
例えば、
- クリックしたら画像が入れ替わる
- マウスオーバーした要素がアニメーションのように動く
- フォームの中の要素を動的に変更する
- スクロール量によって見た目や数値を変更する
などなど、Webサイトにとっても簡単に「動きをつける」ことができます！
jQueryの読み込み方
jQueryを利用するには、あらかじめjQueryをHTML上に記述し、読み込んでおく必要があります。
読み込み方の主な方法は2パターンあります。
- 1.Web上のソースを読み込む方法
- 2.ダウンロードしてローカルで読み込む方法
読み込む場所は、近頃は（体感としての）ページ速度向上の為に</body>の直前で読み込むことが多いようです。特に気にしないのであれば、最初は<head>～</head>でもOKです。
【読み込み方法1】Web上のソースをそのまま読み込む
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
【読み込み方法2】ダウンロードしたjQueryを読み込む
まずは、jQueryライブラリの公式ページからダウンロードをしましょう。
http://jquery.com/download/（公式ページ）
現在はjQuery3.x系が主流となっておりますので、特に古いブラウザなどに対応したいという希望が無ければ、そのままダウンロードしてください。（2019/06/07現在のバージョンは3.4.1）
「Download the compressed, production jQuery （バージョン）」というリンクがあるので、そちらからダウンロードをして下さい。
格納先としては、ルート階層に「js」フォルダを作り、そこに格納する形が一般的かと思います。
格納したjQueryをhtmlで読み込めば完了です。
<script type="text/javascript" src="格納場所/jquery.min.js"></script>
プログラムの読み込み方
次は、プログラム用のjsを書いていきましょう。
主に2パターンの方法があります。
- 1.html内に直接書く方法
- 2.「◯◯.js」として別ファイルにし、それを読み込む方法
一般的には、2の方法が多いかと思います。
htmlに直接書く方法
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> <!-- この部分にプログラムの内容を記述します --> </script>
別ファイルにし、それを読み込む方法
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="格納場所/プログラム用.js"></script>
ここで注意すべき点は、どちらの場合も「jQueryを読み込んでから、プログラムを読み込む」ということです。HTMLは上から順に読み込まれますので、動作記述よりも先にライブラリの記述をしないと、プログラムが実効されないのです。
時々ハマってしまう箇所ですので、ご注意を！
これでようやく、スタートラインに立てました！
今回は、プログラムを別ファイルにして読み込んでいるという形で話を進めます。
実際に書く
さて、jQueryの指定ですが、基本は、「要素」に対し、「実行タイミング」を選び、「処理」を実行するという流れです。
例えば下記の例のような感じです。
- 「画像」を「クリック」で「入れ替える」。
- 「テキスト」を「マウスオーバー」で「フェードアウトさせる」。
- 「背景画像」を「マウスアウト」で「表示する」。
どうでしょう。感覚はつかめましたでしょうか。それでは、具体的な指定をしていきたいのですが、jQueryには必ず書かなければいけない基本形があります。
それがコチラ。
$(function(){
// ここにプログラムを記述
});
この記述は、「htmlを読み込んでから処理を実行する」という意味です。詳細は省きますが、jQueryの指定に必要な記述ですので、忘れないようにして下さい。
1.「要素」を選ぶ
要素を選ぶ記述を、通常「セレクタ」と呼びます。cssを使える人にはピンとくるのではないでしょうか？
このセレクタにもいろんな種類がありますが、基本となるいくつかをご紹介します。
idセレクタ
<p id="test"><a href="javascript:;">idセレクタで指定をしています。ココをクリックすると文字が変更されます</a></p>
$(function(){
$('#test').click(function () {
$(this).text("クリックされました");
});
});
classセレクタ
<p class="test"><a href="javascript:;">classセレクタで指定をしています。ココをクリックすると文字が変更されます</a></p>
$(function(){
$('.test').click(function () {
$(this).text("クリックされました");
});
});
要素セレクタ
【pタグのみに実行されます】 <p><a href="javascript:;">（これは、pタグ）ココをクリックすると文字が変わります</a></p> <div><a href="javascript:;">（これは、divタグ）ココをクリックしても何も起こりません</a></div> <ul> <li><a href="javascript:;">（これは、liタグ）ココをクリックしても何も起こりません</li> </ul>
$(function(){
$('p').click(function () {
$(this).text("クリックされました");
});
});
子孫セレクタ
【divの中のpタグのみに実行されます】 <div><p><a href="javascript:;">（divの中のpタグ）ココをクリックすると文字が変わります</a></p></div> <p><a href="javascript:;">（ただのpタグ）ココをクリックしても何も起こりません</a></p>
$(function(){
$('div p').click(function () {
$(this).text("クリックされました");
});
});
2.「実行タイミング」を選ぶ
実行タイミングを選ぶことに相当するものを通常「イベント」と呼びます。
このイベントも様々な種類があります。
クリックイベント
<p><a href="javascript:;">これはクリックイベントです。ココをクリックすると、テキストが変更されます。</a></p>
$(function(){
$('p').click(function () {
$(this).text("クリックされました");
});
});
マウスオーバーイベント
<p><a href="javascript:;">これはマウスオーバーイベントです。ココをマウスオーバーすると、文字が変更されます。</a></p>
$(function(){
$('p').mouseover(function () {
$(this).text("マウスオーバーしました");
});
});
マウスアウトイベント
<p><a href="javascript:;">これはマウスアウトイベントです。ココをマウスアウトすると、文字が変更されます。</a></p>
$(function(){
$('p').mouseout(function () {
$(this).text("マウスアウトしました");
});
});
3.実行する処理を書く
ここで何をするかが重要です。
色を変えたり、形を変えたり、位置を移動させたり…アナタの頭の中にはどんな処理を考えていますか。
ここでは、簡単なDEMOを用意しました。
ここまで見て下さった方は、何がどのようになっているかが、おぼろげながら分かるのではないでしょうか。
1.テキストボックスの色を変更する
See the Pen インプットの背景変更 by wkkk (@wkkk) on CodePen.
2.マウスオーバーでdivの背景色を変更する
See the Pen divに背景をつける by wkkk (@wkkk) on CodePen.
3.マウスオーバーでdivをフェードアウトする
See the Pen GoBVXP by wkkk (@wkkk) on CodePen.
4.クリックで新しいdivを作り出す
See the Pen divを新しく創りだす by wkkk (@wkkk) on CodePen.
5.クリックでdivの幅と高さを変更する
See the Pen 高さと幅を変更 by wkkk (@wkkk) on CodePen.
6.クリックでclassの付け替えをする
See the Pen classのつけかえ by wkkk (@wkkk) on CodePen.
最後に
さてどうだったでしょうか。かんたんな説明でしたが、jQueryに興味を持ってもらえましたでしょうか。こういったものは何事も実際に手を動かすことが重要です。
まさに「習うより慣れろ」ですね！
今回を機にjQueryを覚えて、自分の強みを見出しましょう。
この記事がその足がかりになれば幸いです。
おすすめの記事はこちら
-
ウェブデザイン ｜ 2018/02/082019年新卒採用サイトのトレンドは？おしゃれなデザインまとめ16選
-
ウェブデザイン ｜ 2017/12/13
ウェディング関連の素晴らしいウェブデザインのサイト21選まとめ
-
ウェブデザイン ｜ 2017/05/24
JavaScriptを使ったアニメーションが効果的！「グラフ」デザインの参考になる日本のウェブサイトをご紹介！
-
ウェブデザイン ｜ 2017/05/23
たった1分で簡単補正！Photoshopのゆがみフィルター「顔立ちを調整」が想像以上にすごかった！
-
ウェブデザイン ｜ 2017/01/30
日本語Webフォントを使い倒そう！モリサワ・Adobe・フォントワークスのWebフォント使い方・価格＆イケてるデザイン15選！
-
ウェブデザイン ｜ 2014/07/22
高品質なデザインを目指して、デザイン時にこれだけはチェックしたいポイント31
