2016/03/17

これだけみれば大丈夫!jQueryについて簡単にまとめてみた

jQueryとはJavaScriptライブラリの1つでJavaScriptを扱いやすくしたライブラリのことです。JavaScriptで一から書くと何十行にもなる記述が、jQueryを使用することにより数行の記述が書けたりすることからプログラミング初心者でも扱いやすく、マイクロソフトやTwitterなどの大企業にも支持されています。

jQueryを使用するには、jQuery本体(jQuery Core)とjQueryプラグイン(jQuery UI)が存在し、jQuery本体を読み込み、プラグインを記述することで簡単に動的ページや、処理を行うことができるようになります。

jQueryプラグインには公式プラグインのほか世界中の開発者により無数のプラグインが公開されています。

別記事にておすすめプラグインを紹介しますが、今回はプラグインを使用するまでの導入方法を紹介したいと思います。

 

 

 

jQuery本体のダウンロード方法とバージョンの注意点

まずjQueryを導入する場合、jQueryの本体をプラグインしないと動作しません。

ダウンロード方法はjQueryのサイトにアクセスします。

jQuery

jquery

赤枠で囲んだ右上にあるDownload jQueryをクリックします。

 

バージョンは1.X と 2.Xが公開されており(2016年現在)

jquery2

1.xは IE8以前をサポートするバージョン。2.xは IE8以前のサポートはしない代わりに安定して高速に動かせるように組まれたバージョンとなってますので用途に応じてお選びください。

 

 

さらにその中から4つのファイルタイプに分かれており、

※○○○には現在のバージョンが入ります

 

Download the compressed,production jQuery ○○○

圧縮されたものとなり、実際に使用する場合にファイルサイズが出来る限り小さいほうがいいので基本的にこちらをダウンロードします。

 

Download the uncompressed,development jQery ○○○

非圧縮ファイルとなり、コメント・空白・改行などで人の目には見えやすいものとなってますのでどのような処理が行われているのかを確認するのであればこちらの方が適しています。

 

 

必要なデータをクリックしてダウンロード。

ダウンロードしたファイルを読み込む為、head内に<script type="text/javascript" src="jダウンロードしてきたファイル名"></script>を記述します。

これでjQueryプラグインが使えるようになります。

 

 

 

jQueryプラグインの使い方

jQuery本体の読み込みが完了したので、いろいろなプラグインが使用可能になりました。

次に実際に使いたいプラグインを設置します。jQuery公式サイトからダウンロードするものや、ちょこっとコードを書くものなどがあります。

ダウンロードする場合、jQuery公式プラグイン

などから使いたいプラグインをダウンロードしてきてその中に.jsファイルがあると思いますのでそのファイルを使用したいHTMLに読み込ませます。

<script type="text/javascript" src="ダウンロードしたプラグイン.js"></script>

※記述の順番はjQuery本体を先に読み込み、プラグインを後に読み込みます。HTMLでは上から順に読み込んでいくのでプラグインを先に書いてしまうと正常に動かないので注意!

 

実際に実行するコードを設定します。

無数にプラグインがあれば実行用のコードもさまざまなので一概にこのコードと言うのはありませんので、おすすめのプラグインの設置方法は別記事にて詳しく説明を載せています。

 

最後に正しい動作をしているか、一通り確認して終わりです。