Facebook Twitter RSS
jQueryってなに?超初心者向け入門講座

jQueryってなに?超初心者向け入門講座

facebook twitter hatena Pocket

jQuery入門

もう少しで長かった冬も終わり、春を迎えますね。
春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。

昔とは違い、最近は「デザイン+htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「Word Press」などのCMSの扱い、プログラム言語の「PHP」「Java Script」などプラスアルファを求められることが多くなっているように感じます。

そこで今回は、先述したプログラム言語「Java Script」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない!」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。

jQueryを使えるデザイナーは、今後必ず重宝されますので、今のうちからスタートダッシュをかけて自分の強みにしましょう!

そもそもjQueryって何?

jQueryをざっくりと説明すると「Java script」と呼ばれるプログラムをより扱いやすくしたファイルのことです。(通称:ライブラリ)
本来であれば煩雑なプログラムの記述も、jQueryを使用すると少ない記述で実現できてしまいます。

具体的には、Java Scriptで一から書くと何十行にもなる記述が、jQueryを使用すると、ほんの数行で済んでしまうことも。こういった理由から、プログラムが出来ない方でも扱うことが簡単になり、多くのWeb関係者に愛されるライブラリとなっているんですね。

jQueryで何ができるの?

例えば、

  • クリックしたら画像が入れ替わる
  • マウスオーバーした要素がアニメーションのように動く
  • フォームの中の要素を動的に変更する
  • スクロール量によって見た目や数値を変更する

などなど、Webサイトにとっても簡単に「動きをつける」ことができます!

グループ 2

jQueryの読み込み方

jQueryを利用するには、あらかじめjQueryをHTML上に記述し、読み込んでおく必要があります。

読み込み方の主な方法は2パターンあります。

  • 1.Web上のソースを読み込む方法
  • 2.ダウンロードしてローカルで読み込む方法

読み込む場所は、近頃は(体感としての)ページ速度向上の為に</body>の直前で読み込むことが多いようです。特に気にしないのであれば、最初は<head>~</head>でもOKです。

【読み込み方法1】Web上のソースをそのまま読み込む

<head>
  <!--メタデータなどいろいろ-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

See the Pen bNWeQm by wkkk (@wkkk) on CodePen.

【読み込み方法2】ダウンロードしたjQueryを読み込む

まずは、jQueryライブラリの公式ページからダウンロードをしましょう。
http://jquery.com/download/(公式ページ)

ページ内には、jQuery1.x系と、jQuery2.x系がありますが、2.x系はIE6,7,8がサポートされていませんので、特に理由がなければ、1.x系をダウンロードでよいかと思います。(2016/02/03現在)
「Download the compressed, production jQuery (バージョン)」というリンクがあるので、そちらからダウンロードをして下さい。

格納先としては、ルート階層に「js」フォルダを作り、そこに格納する形が一般的かと思います。
格納したjQueryをhtmlで読み込めば完了です。

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

See the Pen myWayj by wkkk (@wkkk) on CodePen.

プログラムの読み込み方

次は、プログラム用の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>

See the Pen プログラムの記述 by wkkk (@wkkk) on CodePen.

別ファイルにし、それを読み込む方法

<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>

See the Pen プログラムの記述2 by wkkk (@wkkk) on CodePen.

ここで注意すべき点は、どちらの場合も「jQueryを読み込んでから、プログラムを読み込む」ということです。HTMLは上から順に読み込まれますので、動作記述よりも先にライブラリの記述をしないと、プログラムが実効されないのです。
時々ハマってしまう箇所ですので、ご注意を!

これでようやく、スタートラインに立てました!
今回は、プログラムを別ファイルにして読み込んでいるという形で話を進めます。

実際に書く

さて、jQueryの指定ですが、基本は、「要素」に対し、「実行タイミング」を選び、「処理」を実行するという流れです。

例えば下記の例のような感じです。

  • 「画像」を「クリック」で「入れ替える」。
  • 「テキスト」を「マウスオーバー」で「フェードアウトさせる」。
  • 「背景画像」を「マウスアウト」で「表示する」。

どうでしょう。感覚はつかめましたでしょうか。それでは、具体的な指定をしていきたいのですが、jQueryには必ず書かなければいけない基本形があります。

それがコチラ。

$(function(){
  // ここにプログラムを記述
});

See the Pen jQueryの基本形 by wkkk (@wkkk) on CodePen.

この記述は、「htmlを読み込んでから処理を実行する」という意味です。詳細は省きますが、jQueryの指定に必要な記述ですので、忘れないようにして下さい。

1.「要素」を選ぶ

要素を選ぶ記述を、通常「セレクタ」と呼びます。cssを使える人にはピンとくるのではないでしょうか?
このセレクタにもいろんな種類がありますが、基本となるいくつかをご紹介します。

idセレクタ

$(function(){
  $('#test').click(function () {
    $(this).text("クリックされました");
  });
});

See the Pen idセレクタ by wkkk (@wkkk) on CodePen.

classセレクタ

$(function(){
  $('.test').click(function () {
    $(this).text("クリックされました");
  });
});

See the Pen MYmvJa by wkkk (@wkkk) on CodePen.

要素セレクタ

$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});

See the Pen 要素セレクタ by wkkk (@wkkk) on CodePen.

子孫セレクタ

$(function(){
  $('div p').click(function () {
    $(this).text("クリックされました");
  });
});

See the Pen 子孫セレクタ by wkkk (@wkkk) on CodePen.

2.「実行タイミング」を選ぶ

実行タイミングを選ぶことに相当するものを通常「イベント」と呼びます。
このイベントも様々な種類があります。

クリックイベント

$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});

See the Pen クリックイベント by wkkk (@wkkk) on CodePen.

マウスオーバーイベント

$(function(){
  $('p').hover(function () {
    $(this).text("マウスオーバーしました");
  });
});

See the Pen マウスオーバーイベント by wkkk (@wkkk) on CodePen.

マウスアウトイベント

$(function(){
  $('p').out(function () {
    $(this).text("マウスアウトしました");
  });
});

See the Pen マウスアウトイベント by wkkk (@wkkk) on CodePen.

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を覚えて、自分の強みを見出しましょう。
この記事がその足がかりになれば幸いです。

facebook twitter hatena Pocket
前のページ
次のページ
ページトップ