jQueryについて解説するよ！
私は以前の記事で、Web制作する際に使う言語HTMLとCSSについて、少しだけ紹介しました。
その記事については下のリンクから見られますので、興味がある方はそちらから足を運んでみて下さい。
Web制作においてHTMLとCSSはかなり大事ですが、それだけでは華やかなサイトは作れません。
ではどうすれば良いのかというと、jQuery という言語を使っていきます。
この言語を使うことで、Webサイトに大きな動きを与え、見るだけでも楽しいような格好いいWebサイトを作ることも可能になっていきます。
皆さんぜひ、今回の記事を通してjQueryを知り今後のWeb制作に役立てて行って下さい。
今回の記事を読むメリット
・jQueryとは何かがわかる
・jQueryの読み込み方法がわかる
jQueryとは
jQueryはJavaScriptの数あるライブラリの中で、最も有名なものです。
ライブラリというのは簡単に説明すると、
元の言語（JavaScript）→扱いやすいファイル（jQuery）
と言う感じで、使いやすくしたものです。
ですからjQueryはJavaScriptよりも扱いやすくなっており、JavaScriptで書くと何十行にもなってしまうコードがほんの数行で済んでしまいます。
こういったことからプログラミングを始めたばかりの方でも、扱うことが簡単になっているので、とても重宝されているライブラリになります。
jQueryは何が出来るのか
jQueryについては少しだけ分かったけれど具体的には何が出来るの？と思っている方なんかもいらっしゃると思います。
下にあるのが jQueryで行える事です。これ以外にもかなり出来ることがあるのですが今回はよく使う機能を紹介しています。
・クラスや id を指定してCSSやHTMLを変えることが出来る
・画像をスライドショーのように出来る
・ボタンをクリックするとページ内の指定箇所に飛ばすことが出来る
・画像をA地点からB地点に動かすことでWeb全体をダイナミックに見せることが出来る
など様々な事が出来ます。
【重要】jQueryの読み込み
それでは実際に jQuery を使用する際にやっていくことを紹介していきます。
jQueryはライブラリというファイルなので実際にはHTML内で読み込まなければ動作しません。
CSSのファイルなんかも<link>で読み込んでいるのですがそういった感じです。
jQueryを読み込ませる場合はHTMLの中の<head>内か</body>の直前に置きます。
</body>の直前に入れた方が読み込み速度が速いのでおすすめなのですが、最初の内は<head>内に入れて動作させておいた方が間違いが少なくなります。
ですので、最初のうちは<head>に入れておいた方が良いかと思います。
jQueryを読み込む方法としては2種類あり、以下の通りです。
1. Web上のソースを読み込む
2. ダウンロードしたjQueryを読み込む
1．Web上のソースを読み込む
以下のコードをHTMLに挿入します。
2．ダウンロードした jQuery を読み込む
まず、jQueryライブラリの公式ページからダウンロードをします。
https://jquery.com/download/ （このリンクからダウンロード画面へといけます）
特に古いブラウザに対応させたいとかの希望がなければ、そのままダウンロードしてもらって大丈夫です。
Download the compressed, production jQuery (バージョン)というリンクがあると思うのでそちらからダウンロードします。
ダウンロード場所はファイルの一番上（ルート階層）に持ってくるのがわかりやすいです。
そして、ダウンロードした jQuery をHTMLで読み込めば完了です。
プログラムコードの読み込み
次はコードを書いてく上での書き方を紹介します。
この方法も2種類あり、以下の通りです。
1. HTMLに直接書いていく方法
2. 別ファイルにしてそれを読み込む方法
1．HTMLに直接書いていく方法
2．別ファイルにしてそれを読み込む方法
2の方がよく使われる方法なのですが短い文のみでしたら1の方が良いです。
注意
これらの方法はどちらもjQueryを読み込んでからプログラムを書き込んでいるということに注意して下さい。
プログラミングというものは大体上から順に読み込まれて行きます。
ですから、動作刺せるよりも前にライブラリを読み込んでおいて置かないと迷子になってしまい、プログラムが実行しなくなってしまいます。
最初の内によく起こる間違いなので気をつけてください。
実際にjQueryを動かす
それでは一個だけプログラムを書いて、動作を確認しましょう。
今回はマウスを四角形までに持って行くと、色が変わっていくというプログラムを書いてみました。
See the Pen
jQuery説明 by 悠(人) (@yutohanabusa)
on CodePen.
このようにjQueryはアクションによってその要素のCSSを変えたり出来たりなど様々な事が出来ます。
jQueryのまとめ
・jQueryとはJavaScriptを使いやすくしたもの（ライブラリ）
・jQueryにはidを変えたり、スライドショーにしたりなど多くの動作が可能
・読み込み方法は2種類あり、上の通り
・jQueryでWebを華やかにできる
最後に
今回はjQueryというライブラリを紹介しました。
jQueryは簡単で意外と直感的に書くことも出来ます。
jQueryをマスターしてバリエーション豊かなWeb制作をやっていってみてはいかがでしょうか！
長くなってしまいましたが、最後まで読んでいただきありがとうございます。
