こんにちは、yutaです。
Webページを扱うフロントエンドエンジニアの方であれば聞いたことない方はいないであろうjQueryですがその概要と導入方法についてのメモです。
1.jQueryとは
2.jQueryの種類
2-1.jQuery
2-1-1..minと.slimについて
2-2.jQuery UI
2-3.jQuery Mobile
2-4.Sizzle
2-5.Qunit
3-1.jQueryの導入方法
3-1-1.公式ページからjQueryをDL
3-1-2.jQuery CDNを利用
3-2.jQuery UI、jQuery Mobileの導入方法
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
1.jQueryとは
jQueryは、JavaScriptライブラリです。ライブラリとは、便利な機能がまとまったものの事です。自分でコーディングして機能を実装しようとすると沢山書かなきゃいけないところを命令1つ呼び出すだけで実現できたりするので便利です。
2.jQueryの種類
一言でjQueryと言っても下記のとおりいくつかの種類があります。
・jQuery
・jQuery UI
・jQuery Mobile
—以下はjQueryのサポート的な位置付け?—
・Sizzle
・Qunit
2-1.jQuery
jQueryの一番基本的な機能が集められたものです。以下で説明する他の種類のjQueryでもこのjQueryの機能が使用されています。
機能としては例えば、ユーザーがWebページ上のある要素をクリックした時にイベントを発生させる.click()や、要素のスタイル属性を取得したり設定したりするための.css()などがあります。
2-1-1..minと.slimについて
jQueryのDLページに行くとわかりますが、jQueryのファイル名に.minや.slimが付いているもの、あるいは付いていないものがありどれをDLしたら良いのか分かりづらいので違いをメモしておきます。
.minも.slimもついていないもの(通常版) : 全てが詰まったjQuery本体
.min : jQuery本体のコードから改行やスペースを取り除いてファイルサイズを軽くしたもの。jQuery自体のコードを見る方のために通常版では改行やスペースが入れてありますが、jQuery自体の開発を行わない限りはこちらで良いでしょう。
.slim : jQuery本体からアニメーション関係の機能などを取り除いたもの。ファイルサイズは確かに軽くなるのでアニメーションなどをjQueryで実装しない場合はこちらで良いですが、詳しくないうちは通常版か.minを入れておくのが無難だと思います。
2-2.jQuery UI
名前の通り、User Interfaceの実装をサポートするJavaScriptライブラリです。Web上でテキストボックスをクリックするとカレンダーを表示して日付を選択するUIなどを簡単に実装できます。ホテルの予約サイトなどでよくあるやつですね。
2-3.jQuery Mobile
スマホ、タブレット、パソコンといった様々なデバイスに対応したレスポンシブなWebページの制作をサポートするHTML5ベースのJavaScriptライブラリです。まだ利用したことがないのですが、どうやらタッチパネルにも対応してるっぽい？
2-4.Sizzle
公式ページには、「純JavaScriptのCSSセレクタエンジン」と書かれています。これはjQueryの機能をサポートしているものという位置付けですかね。
2-5.Qunit
公式ページには、「JavaScriptユニットの試験用プラットフォーム。jQuery、jQuery UI、jQuery Mobileおよびその他のJavaScriptコードをの試験に利用されるもの」と書かれています。
3-1.jQueryの導入方法
導入方法は主に2つあります。1つ目は公式ページからjQuery本体をDLして、HTMLに読み込む方法で、2つ目はjQuery CDNを利用する方法です。僕は後者をオススメします。
3-1-1.公式ページからjQueryをDL
jQuery公式のDLページからjQuery本体(jsファイル)をDLして、HTMLの</body>前に読み込めば導入完了です。DLリンクをクリックするとjsファイルの中身が表示されてしまうので、DLリンクをクリックではなく右クリックして「リンク先のファイルをダウンロード」でDLしてください。また、jQueryを使用したスクリプトは、jQueryの読み込みコードより後に記述してください。
3-1-2.jQuery CDNを利用
CDNとは、Content Delivery Networkの略でコンテンツを多くのユーザーに配布する際に用いられる手法の一つです。(筆者も全然詳しくないです。)
要するに公式サイト以外で同じものを提供しているという事ですね。俗にいうミラーサイト的なものでしょうか。
GoogleがjQueryをホスト(提供)しているので公開されているURLをHTMLの</body>前にコピペすれば導入完了です。ローカルにファイルをDLする必要がないのでオススメです。pathを気にする必要もないですしね。
3-2.jQuery UI、jQuery Mobileの導入方法
jQuery同様、公式ページから本体をDLするかCDNを利用するかです。CDNに関しては、googleがjQueryと同じページでjQuery UI、jQuery Mobileも提供しているのでjsファイルのURLを</body>前にコピペすればOKです。
また、jQuery UI、jQuery Mobileはcssもあるので、cssは<head></head>内にコピペしてください。自分で作成するcss(style.cssとか)より先に読み込むようにしてください。cssは読み込まれた順に適用され、競合がある場合は最後に読み込まれたスタイルが適用されます(たぶん)。
以上、jQueryの概要と導入方法のメモでした。では、また！
