簡単なjQueryの使い方・jQueryをすぐに利用したい人のためのクイック導入

  • このエントリーをはてなブックマークに追加

jQueryというのはJavaScriptファイルです。
どういった内容のJavaScriptファイルかというと、何かのHTML要素を動かしたり、動きをつけたりといったことを一からJavaScriptで記述するよりは簡単に実現することが可能になるような、いわば準備・下ごしらえ的な内容のファイル(ライブラリ)です。
基本的にはjQueryファイルは変更しません。あなたが、動きを付けたいJavaScriptの記述よりも前に外部読み込みをして利用します。

流れ

  1. jQueryの本体をダウンロードする
  2. ダウンロードしたjQueryファイルをサイトのどこかに配置します。
  3. 配置したjQuery本体を<head>~ここ~</head>に読み込ませます
  4. 実行したいjQueryの命令を記述します
  5. 動作確認します
  6. ファイルを適切な場所にアップロードします
  7. 完成

 jQueryの本体をダウンロードする

https://jquery.com/
※jQueryは過去のブラウザでも動作するものと、最新のブラウザのみ動作保証する2パターンのファイルが用意されています。
これから作成するサイトやページ、コンテンツを利用するユーザーに合わせてどちらか選択してください。
jQuery 1.x(jQuery1系)はIE6等のブラウザでも動作するもの
jQuery 2.x(jQuery2系~)は最新のブラウザのみ動作するもの
さらに
jQuery本体を変更したい方は、jquery-x.x.x.min.jsではなく、jquery-x.x.x.jsをダウンロードします。
minは改行やタブ・コメントなどが排除された軽いファイルで改変を前提に使わないので、そのまま利用したい人が使います
開発者版はタブ・コメントなどが入っています。

ダウンロードしたjQueryファイルをサイトのどこかに配置します。

例えば、jquery-1.11.2.min.jsをjsフォルダに配置します。

大手企業やサービスサイトなどが、jQueryファイルを読み込めるように提供していますが、そこがサービスを停止した途端に動かなくなるので、自前のサーバーにコアファイルを配置したほうがいいかもしれません。動作が人間には分からない程度ではありますが、軽快になります。

配置したjQuery本体を<head>~ここ~</head>に読み込ませます

本体(コアファイル)は基本的には<head>内に設置しますが、共通のヘッダーやあるいは、javascriptの記述をフッターにまとめるということも可能です。

※<body>でも、<div>でも、その他のタグ内でも可能、殆どの場合は<head>に入れます

実行したいjQueryの命令を記述します

簡略化したjQueryの例
※文字の色が赤くなる
<html>
<head>
<script type=”text/javascript” src=”js/jquery-1.11.2.min.js”></script>
</head>
<body>
<p>文字文字文字文字</p>
<script type=”text/javascript”>
$(“p”).css(‘color’,’#f00′);
</script>
</body>
</html>

動作確認します

あなたの記述した命令が正しく動作しているかどうか確認します。問題なく動けばOKです。ローカルとサーバーの環境が同じであれば、ほぼそのまま動作します。サーバー、本番環境に設置するときに様々なミスがあったり、忘れがあると動かないので1つずつ着実にすすめていきましょう。

ファイルを適切な場所にアップロードします

必要なファイルをアップロードします。CSSも必要であればそちらも忘れずにアップロードします。
パスを本番用に変えた場合は、正しいパスになっているか確認します。

こういったつまらないミスが多いのも事実。パスを上手くコピーしたはずがミスしていたり、jsフォルダに設置しているのに、jsのフォルダ指定を忘れていたり、SSLのサーバーに設置したjsを読み込まなければいけないのに、絶対パス「/example/dir/」のように同サーバーから参照するような記述になっている等。

完成

よほど重いとか、動作が不安定でなく、論理的に問題ないのであれば、ソースコードが長くてもそれでOK、本番環境でもうまく動いていればOKです。

注意

ASPなどではすでにjQueryがhead内などに読み込まれている可能性があります。原因は様々ですが、不安定になったりあるいは動作しないことも。すでに読み込まれている時には、そのjQueryを利用するか、他のjQueryが使用できそうなASPに乗り換えたほうが良さそうです。

jQueryのコアファイルと、プラグインのバージョンがうまく合致しないと動作しないことがあります。具体的には、関数が廃止されているとか、反対に新しい関数の記述で、コアファイルが古い際には、その関数がないため動作しなくなるということがあります。また、同じ関数でも微妙に動作が違うことがあります。テキトーにコアファイルやプラグインのバージョンの選定をすると、動作不具合に陥り、納期に迫られることに。必ず事前確認しておきましょう。