jQueryどのファイルをダウンロードすればいいの?種類と違いを知りたい!

jQueryを使ってサイトに動きをつけたい!

でも使い方がよくわからない・・・。

だいじょーーーぶっ!コピペして少し変える。これだけです。

最新のバージョンjQuery 3.1.1を導入してみましょう!

jQueryとJavaScriptの違い

jQueryとJavaScriptって、何が違うの?

簡単に言うと、何も違いません。

jQueryは、JavaScriptでできてるんです。

サイトでアイコンを動かしたり、メインビジュアルを切り替えたり・・・。

あらかじめ動きの種類をいくつかまとめてあるファイルが用意されていて、JavaScriptで複雑なコードをちまちまちまちま書かなくても、超簡単なコードを書くだけで動きを実装できる。それがjQueryです。

サイト制作の初心者にとっては、とっても助かるライブラリです。

jQueryはどうやって使うの?

コピペです。

全ての答えはこれです。

もちろん、動かす部分の要素名や属性名を指定しなければ動かないので、コピペしたコードの一部を変える必要はありますが。

簡単です♪

手順としては、

  1. サイトにjQueryのファイルを作成する
  2. htmlファイルにjQuery本体を読み込む
  3. htmlファイルにコードを書く

これだけです!

サイト内にフォルダを作成しよう!

jQuery本体を入れておくためのファイルを作成しましょう。

サイトのディレクトリフォルダ内に、「jq」という名前でファイルを作成します。

jqは、jQueryの略です。

JavaScriptの略で「js」でもいいと思います。お好きな方で。

jQuery本体をファイルに読み込もう!

jQueryのサイトにアクセスします。

→ jQueryのサイトを開く

左上の「Download」をクリック。

英語ですね。日常で英語を全く必要としない私にとっては見た瞬間クラリとしますが、この全てを読んで理解する必要はありません。

まず、黄色い枠で囲ってある部分は、初心者は使いません。

「slim version」といって、jQueryを軽くスリムにしたものなんですが、上級者じゃないと使えないのでスルーしましょう。

ピンクの枠が必要なところです。

compressedファイル

これ!「Download the compressed, production jQuery 3.1.1」

ダウンロードするのはこれです。

「compressed」とは、圧縮された、という意味です。

ファイルはこんな風に、改行もスペースもインデントもなく、余計なものを省くことで軽量化しています。

ファイルは少しでも軽い方がいいし、jQuery本体の中身を書き換えるなんてことはまずないので、これがベストです。

クリックしてダウンロードし、サイトのjqフォルダ内に保存しましょう。

ファイル名は「jquery-3.1.1.min.js」となっているはずです。「min」が圧縮されたファイルという意味です。

uncompressedファイルとmapファイル

真ん中の「Download the uncompressed, development jQuery 3.1.1」。

uncompressedファイルとは、圧縮していないファイルのことです。

このように、読みやすく改行やインデントが入っています。

読みやすい・・・けど、重い!!

先述したとおり、本体のコードを書き換えることはまずないので、読む必要もないということです。

重くて読み込みに時間がかかるファイルはお勧めしません。こっちはダウンロードしない方がいいと思います。

一番下の「Download the map file for jQuery 3.1.1」。

マップファイルです。説明は省きます。これは不要!

htmlファイルに本体を読み込もう!

フォルダとファイルができたら、htmlファイルに本体のファイルを読み込みましょう。

index.htmlファイルからのパスを記述します。

書くところは</body>タグの真上です。

昔はhead内に書くこともあったようですが、今は</body>タグの真上に書くのが基本。

なぜなら、htmファイルは上から順に読み込まれるからです。

head内でjqファイルを読み込むと、ブラウザの表示に時間がかかってしまいます。

だから、一番下に書くというわけなんですね。

あとは、プラグインを使うなり、自分でガシガシとコードを書くなりしてjQueryを実装するだけ!

便利に楽しく使いこなしましょう♪

ちなみに、もっと簡単に読み込む方法もあります。

CDNから直接読み込む方法です。 ↓

たった1行でjQueryを読み込む方法!