jQueryを使うための準備

ここからは、jQueryについて、簡単に説明します。
『Web制作の現場で使えるjQuery　UIデザイン入門』（書籍『Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)』）を一通りやってみると、なんとなくわかるかと思います。
ほかにもいろいろ解説サイトや書籍はありますが、とりあえずこれをやってみて、興味を持ったらもう少し難しい書籍などを入手してみるとよいのではないかなと思います。

ここでは難しい解説はなるべく避けて、おまじない的にjQueryを使うための準備について、さらっと触れていきたいと思います。

jQueryを使う前に・・・

jqueryを使うには、まずjQueryライブラリをダウンロードしなければなりません。
jquery提供元サイトからダウンロードして、適切なサーバの適切なディレクトリにアップしてください。

ローカル環境で使用したければ、使用PCの適当なディレクトリに格納します。

ダウンロード方法の詳細については、ここでは説明しません。自分で調べて憶えた方が、確実だからです。
google先生に聞いたり、以下のwebページを参考にしてください。

jQuery・・・本家サイト
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など－ WPC
使い方－ jQuery入門講座

ここで、一つ問題があります。
どのバージョンをダウンロードすべきかということです。
ユーザの環境であるとかを考えず、とりあえず勉強したいだけであれば最新版でも良いのですが、古いブラウザにも対応させたいとか、特定のプラグイン（下記の「予備知識」参照のこと）を使いたいとか、何か条件がある場合はjqueryのどのバージョンを使うか考えなければなりません。

2015/06現在、jqueryのバージョンが2.x.x（xは任意の自然数）の場合はIE8以前のことはなかったことになっています。
業務で使うのなら、コーディングするwebページがサポートする対象がIE8以降とかになっていたら、使わないようにしましょう。
また、一部のプラグイン（およびそのバージョンによって）は、jqueryのバージョンが1.7.x～1.8.xでしか動かないなど、特定の範囲のバージョンでしか動作しないものもあります。使用したいプラグインが動作するバージョンにも注意しましょう。

なんかよくわからないけど、たいていのプラグインも使えて、ちょっとした手書きもできるのがいいという場合は、とりあえず1.7.2あたりを使うといいんじゃなかなー。体感的に（←無責任発言）。

ダウンロートが済んだら、まず、jqueryを導入したいページのhtmlソースを見て、次のことを意識してください。

HTMLのバージョン ⇒ doctypeを確認 ⇒ ルールに則ってコーディング
charset ⇒ Content-Type ⇒ 同じ文字コードでcss・js（jquery）も記述

これらを意識して、ルールに則ってhtml・css・js（jquery）をコーディングするようにしてください。
ルールとはW3C大先生をはじめとするweb標準のことです。
めんどうですが、ルールを守っておけば、思わぬエラーに悩むことも少なくなります（なくなりはしないけど・・・）。

いまどきのだいたいのwebページはhtml4.01かxhtml1.0かHTML5だと思います。
たまにdoctype宣言がないwebページがあると思いますが、適宜ソースを見てなんとなく判断してください。
ちなみに
<!DOCTYPE html>
だけだったら、HTML5です。

charsetもいまどきはたいていUTF-8かShift_JISのどちらかだと思われます。たまに、違うのにお目にかかったりしますが・・・

ちなみに、jQueryはUTF-8なのでHTML/cssファイルもUTF-8で記述した方がいいです（charsetの設定がUTF-8になっているだけでなく、ファイルがUTF-8で保存されているかも重要です→参考）。

headタグ内にjQueryを読み込む

簡単なheadタグを例に見てみます。

この例ではXHTMLですが、HTMLの場合は、<meta ～ />や<link ～ />やの最後の / は不要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>ページタイトル ｜ サイトタイトル</title>

<link href="cssファイルのパス" media="screen" rel="stylesheet" type="text/css" />

<script src="jqueryのパス" type="text/javascript"></script>
<script src="jsファイルのパス" type="text/javascript"></script>
<script src="プラグインのパス" type="text/javascript"></script>

<!-- ～～～～～ 省略 ～～～～～ -->

</head>
<body>

<!-- ～～～～～ 省略 ～～～～～ -->

</body>
</html>

XHTMLでは、js（jquery）を使うときは必ずContent-Script-Typeでjavascriptを使うことを明記します（7行目）。
jqueryライブラリを読み込みます（13行目）。
（XHTMLでは）scriptタグにtype属性を必ず明記してください（13行目）。

jqueryを使う準備はこれだけです。

ちなみに、ローカル環境やサーバにjqueryをダウンロードするのではなく、CDNを使うという方法もあります。

CDNを使うといろいろメリットもありますが、CDNの提供側に何らかの問題が発生したときに、動かなくなってしまう場合もあります。
業務で使用する場合は、お勤めの企業のルールなり、サイトの運用方針などと照らし合わせて、CDNにするか自社のサーバ（自社と契約しているサーバ）にダウンロードするかを決定しましょう。

予備知識

ここまで、jQueryが何であるか周知の事実として書いてきましたが、念のため簡単に説明を・・・（勤めていた企業の、ある程度コーディングができるデザイナーさん向けの説明なので、細かいことは気にしないでください）。

jQueryはJavascript(以降js)をベースにしたjsライブラリです。jsをさらに簡単に記述できるようにしたものです。
このように、ベースのプログラム言語の良く使う記述パターンをひとまとまりにしたものの集まりをライブラリといいます。
たとえば、クリックしたら・・・といった、ユーザーがアクションを起こしたこと（イベント）に対して、
$(なにを).click(＜クリックしたら＞どうする);
といった感じで書けます。
jsのみだと、「なにを」の部分（たとえばinputタグ）にonclick属性でjsの関数（命令のひとまとまり）を呼び出します。よびだされる関数に処理（色を変えるとかテキストを表示させるとか）を書きます。
複雑な処理になればなるほど、jsのみでは複雑なコードになるところを、jQueryを使うと（多少は）すっきりと記述できます。

ちなみに、ライブラリだけでは複雑な記述を簡単にしただけで、何をどうするという部分は自分で記述することになります。
たとえば、小さな写真をクリックすると元のページは暗くなって、前面に拡大写真が表示されるといったものを見たことがあると思いますが、有志の方がこういう処理を全てあらかじめ記述して提供してくれている場合があります。
こういうものをプラグインと言います。有料のものもありますが、商用利用も無料で提供してくれている場合もたくさんあります。
世間ではプラグインも「ライブラリ」と呼んでいる場合がありますが、プラグイン提供者や参考・引用するwebページ側で「プラグイン」＝「ライブラリ」という言い方をしていない限り、「コーダー日誌」ではこの二つの言葉は違うものとして記述します。

戻る

Top