jQueryを使うと、Webページは一気に華やかになります。
同じデザインのページでも静的なものと動的なものでは大きく印象が変わるはずです。
そんな魔法のようなjQueryについて、その基本をまとめていきます。

INDEX

1. jQueryとは
2. jQueryプラグインの導入方法
3. jQueryプラグインの問題点

1.jQueryとは

jQueryとは、Webブラウザで使われるJavaScriptのコードを、簡単に記述できるよう設計されたJavaScriptのライブラリです。
（ライブラリとは、プログラムで頻繁に使う複数の機能をまとめたもののことです。）
そもそもJavascriptとは、プログラミング言語の一つのスクリプト言語です。
スクリプト言語という点ではPHPと一緒ですね。

そのJavascriptは、覚えて使えるようになるまでかなりの時間を要します。
まず、プログラミング言語とは何たるか、というところから始めないといけないはずです。
また、そのコードもかなりの量が必要となります。
つまり、JavaScriptはすぐに使えるものではないのです。

そこで出てきた便利なもの、それがjQuery です。
jQueryは、コードの記述が圧倒的に少なくて済みます。
その上、<CSSにとても近い記述方法なので、プログラミング初心者にも覚えやすいと言われています。

さらに、その使いやすさからか、現在では爆発的に普及し、数多くのプラグインがあります。
プラグインとは、jQueryとセットで使用するJavaScriptライブラリのことで、動作に必要なプログラムはすでに書いてあります。
（ただし実際には、ページ内のコードによって動作しないものや、干渉してしまうものもあります）
そのため、全くプログラミングの知識がない人でも、気軽に動的なページを作ることができます。

とにかく、むちゃくちゃ便利なものなんです。

2.jQueryプラグインの導入方法

jQueryプラグインをWebページに導入するには、まずjQuery本体を対象となるWebページに組み込む必要があります。

jQuery本体は、jQueryの公式ページからいつでもダウンロードできます。
また、jQueryはバージョンの違いが重要で、最新バージョンでは動かないプラグインもあります。
その場合は、プラグインを配布しているサイトのサンプル等で使用されているjQuery本体のバージョンをチェックし、同じバージョンかそれよりも古いバージョンのjQueryをダウンロードして下さい。
古いバージョンも公式ページからダウンロードすることができます。（参考）

プラグインの中には、プラグインが入っているフォルダの中にjQuery本体が入っていることも少なくありません。
その時は、それをコピー&ペーストで自分のWebサイトに組み込んでも良いでしょう。

jQuery本体は、head要素内にscriptタグを使って組み込みます。

ここではjsフォルダを作成し、その中にjQuery本体を入れています。
続いて、プラグインを組み込みます。
プラグインはjQuery本体を組み込んだscriptタグの後に、記述します。
もし、プラグインの方が先に書かれていた場合、プラグインは機能しません。
それは、html内の命令は上から順番に実行されていくため、jQuery本体がないままプラグイン内の命令が実行されてしまうからです。
jQueryを使う時は必ず、jQuery本体を先に記述すると覚えておきましょう。

ここではプラグインのjsファイルと、そのオプション設定のためのjsファイルを記述しています。

このようにして、jQuery本体とプラグインを対象のWebページに組み込めば、あとはプラグインの命令に対応しているhtml要素や属性等が、ブラウザウィンドウ内で発生したイベント（マウスクリック等）に合わせて、自動的に変更されます。
プラグインの命令がどの要素に対応しているのか、はプラグイン作成者のマニュアルを熟読して理解するしかありません。
多くのプラグインは英語圏の方が作成されているので、英語が苦手な方は苦労するかもしれません。
ものによっては、日本でもよく使われ、日本語化されたマニュアルのマニュアルが検索するとありますので、それを使うのもアリです。

今回サンプルとして挙げたのは「flexslider」というスライドショーのプラグインです。
スライドショーの中では比較的導入しやすくメジャーなプラグインだと思います。（やっつけ仕事の実装サンプルはこちら）

3.jQueryプラグインの問題点

プラグインは非常に便利なものですが、問題点もいくつか存在します。
例えば、

• 拡張性に乏しい
• 動かない場合、原因を見つけづらい
• 商用利用できないものもある

といった点でしょうか。

プラグインは基本的にワンアンドオンリーで作られています。
そのため、サンプルとは別の動きをさせたいとなると、当然プログラミングの知識が必要となってきます。
中にはたくさんのオプションが用意されていて、ユーザーが自由にカスタマイズできるものありますが、そのようなプラグインは導入の難度もやや高めになっています。

また、正しく導入しても動かない時もあります。
ものによっては、プラグイン側に原因があることもあります。
その場合、対処方法は自分でプログラムを書き換える以外はありません。

さらに、プラグインにはライセンスがあります。（ライセンスについての参考はこちら）
フリーで使えるものもたくさんありますが、高機能かつカスタマイズ性の高いものは有料であったり、商用のみ有料であったりと様々です。
先ほどの書き換えをしてはいけないものあります。

上記に挙げたように、プラグインはとても便利なものですが、依存してしまうとWebページが正しく閲覧できないなど、本来の目的を果たせない可能性があります。
局所的にワンポイントとして使っていくのが賢い使い方なのかもしれません。
そして何より、プラグインの問題点をクリアする一番の方法は、自分で作ることです。
jQueryの便利さは一度プラグインを使えば理解できると思います。
その便利なものを自分で作ってみることで、よりjQueryを自分のものにしていけるはずです。
私もこれから頑張ります！

Thanks for reading to the end!!