jqueryとは？手軽に導入する方法を初心者向けに解説

システム
エンジニア

jqueryとは、どのようなことができるのでしょうか？

プロジェクト
マネージャー

JavaScriptのコードを簡単にしてくれる役割があります。

jqueryとは

2006年1月にリリースされたJavaScriptのライブラリと呼ばれるものです。開発者はジョン・レシグです。

ライブラリとは、プログラムのまとまりをある程度、あらかじめ作っておいてくれるファイルのことです。料理に例えると分かりやすくなります。具体的には、使いたい材料の下ごしらえをあらかじめしてくれるのがライブラリ、つまりjqueryの仕事です。実際に材料を合わせて料理を完成させる手順というのが、コードを書く作業ということになります。

この様に、下ごしらえの手間を削減してくれるのがjqueryの役割です。単純に手間を削減してくれているだけなので、下ごしらえ自体はやろうと思えばjqueryなしでも可能です。

つまり、jqueryでできる事は、JavaScript単体でも実現可能です。しかし、完成形が同じならばなるべく手間がかからない方がいいですよね。初心者でも少ない労力で様々な表現を作ることができるのがjqueryです。

cdnを使うと簡単にjqueryの導入ができる

jqueryを初心者が手軽に導入しようと思った時におすすめの方法は、cdnを使う事です。cdnを使うと、誰でも簡単にjqueryの導入ができます。cdnを使わない方法としては、jqueryの本体をダウンロードして使う方法もあります。

結論を言うと、ダウンロードするよりもcdnを使った方が簡単です。cdnを使った導入方法・用語の紹介・メリットとデメリット比較などをご紹介致します。

cdnとは

cdnとは、Content Delivery Networkの略語です。URLは自分のサイトのままで、別のサーバーからデータを配信することが可能なDNS設定の仕組みを利用したデータ配信の仕組みです。同じコンテンツを、より多くの方へ配布する為に使われます。

簡単に説明すると、配布したいコンテンツの元データを保管しているサーバーと、配布するためのサーバーを分けている仕組みです。そして、その配布するためのサーバーが複数あります。ユーザーがアクセスする時は、ネットワーク的に最も近い配布するためのサーバーへ行きます。

cdnを使ったjqueryの設定方法

それでは、実際にcdnを使ったjqueryの設定方法をご紹介します。設定方法は実に簡単です。内容としては、コードを1行書くだけで完了します。この設定の事を「ライブラリを読み込む」と言います。

＜script src=”この中にcdnのURLを記入する”>＜/script＞

設定自体はこの1行で設定が完了します。このコードをコピー＆ペーストする場合は、＜＞を半角表記に直して入力してください。

cdnのURLの見つけ方

cdnのURLを見つける方法は、jqueryの公式サイトを確認することです。公式サイトのURLは下記に記載しておきます。

こちらのURLにアクセス後、jquery coreという項目の中からjqueryのバージョンを選んで選択しましょう。初心者の方向けの記事なので、ひとまず最新版である一番上の項目を選びましょう。

クリックできる英単語が4つ並んでいますが、uncompressedという項目を選んでください。この4つの英単語はそれぞれ、jqueryの種類なのですが詳しくは後述します。

uncompressedをクリックするとcdnのURLが含まれたscriptタグが表示されます。右側にあるアイコンをクリックすると、クリップボードにURLがコピーされます。これをそのままHTMLファイル内に貼り付けを行うと、設定完了です。

コードを書く際の注意点

コードを書く際の注意点としては、HTMLは上から順番に読み込まれるという点です。実際に実装させたいjqueryのコードは、先ほどcdnを読み込むための設定用コードよりも下に記入してください。

設定用のコードより上にjqueryの実行文を記入してしまうと、ライブラリが読み込まれる前にjqueryの実行分が読み込まれてしまいます。その順番で記入するとエラーが出てしまい、正常に動作しません。

jqueryの読み込みを確認する方法

通常のJavaScriptの記述方法としては、

＜script>function myFunction(){
}

という様な書き方をします。

jqueryの記述方法は、

＜script＞$(function(){
}
＜/script＞

という様な書き方をします。

先ほどの設定用のコードよりも下の行にjqueryの記述方法として例示した上記のコードを入力してみましょう。その状態で、Google Chromeというブラウザで開き、右クリックをして「検証」ボタンを押すと開発者用コンソールが表示されます。

開発者用コンソール内に「Uncaught ReferenceError: $ is not defined」というエラー文が表示されていなければ成功です。上記のエラー文が表示されると、jqueryの読み込みがうまくいっていない状態になっています。

こちらのコードもコピー＆ペーストする場合は、＜＞を半角英数に直して記述してください。

jqueryの4つの種類

jqueryには4種類のソースコードがあります。それぞれ、uncompressed, minified, slim, slim minifiedという名前がついています。先ほどご紹介したcdnのURLを取得する為の公式サイトにもこの4種類が表記されていました。

初心者の方は基本的に、uncompressedを選択して頂ければ問題ありません。uncompressedとは、jqueryのコードをそのまま使っており、何の圧縮もされていない状態のソースコードです。これを選択すると他のソースコードを選んだ際よりもエラー箇所が分かりやすいというメリットがあります。

minifiedは、uncompressedの中からコメント文などを削除しファイルを圧縮した形式のものです。特徴としては、uncompressedのソースコードよりも軽量です。

slimは、Ajaxモジュール、effectsモジュール、非推奨となっているAPIを削除したソースコードです。Ajaxなど一部機能を削除している為、初心者が使うとエラーが出る原因になる場合があります。基本的には、jqueryをカスタマイズする方が使うものなので、初心者には非推奨です。

slim minifiedは、slimからコメントなどを削除しファイル圧縮したものです。こちらもslim同様に一部の機能を削除していますので、初心者の方が使うのには適していません。

結論としては、初心者はuncompressedを選択することをおすすめします。

cdnを使うメリットとデメリット

cdnを使うメリットは大きく分けて3つあります。その3つとは、サイトの表示が早くなること、自前のサーバーに対する負荷が減ること、セキュリティが向上することです。

一つ目のメリットの理由は、cdnを利用することでjqueryの読み込みがキャッシュからされることになるからです。自前のサーバーとやり取りすることなく読み込みが発生するので、その分高速になります。

二つ目のメリットの理由は、HPが公開しているサーバーからjqueryを読み込むのではなく、外部のサーバーからjqueryを読み込むからです。その分、自前のサーバーにかかる負荷が減ることになります。

最後のメリットに関してですが、こちらも自前のサーバーからjqueryを読み込んでいない事が理由です。サーバーの負荷が軽減されて、DoS攻撃などのサーバーに負荷をかけるものに強くなるのでセキュリティが向上します。

また、デメリットに関してですが、jqueryの読み込み元となるサイトの不具合の影響を受けるという事です。しかし、cdnは複数のサーバーを用いているので障害には元々強い作りをしています。ですので、デメリット自体は存在しますがその影響度はさほど大きいとは言えません。

システム
エンジニア

jqueryにはメリットがたくさんあるのですね。

プロジェクト
マネージャー

そうですね。初心者にも簡単に使えるので、まずはつかってみるのがおすすめです。

メリットの大きいcdnを利用したjqueryの導入がおすすめ

結論として、cdnを使ったjqueryの導入はメリットが多い為、おすすめです。サイトの読み込みが遅くなるとユーザーの離脱率も高まる為、サイトの高速表示が見込めるcdnの利用はユーザーフレンドリーの観点からもおすすめできます。

初心者にも簡単で、メリットも大きいcdnを利用したjqueryの導入をぜひ試してみましょう。