【jQuery入門】CDNを読み込む方法と使い方まとめ!

こんにちは、ライターのマサトです!

今回は、jQueryやjQuery UIをCDN経由で利用するための方法について学習をしていきましょう!

この記事では、

  • 「CDN」とは?
  • 「CDN」の使い方
  • 「CDN」のメリット・デメリット
  • jQuery UIのCDNについて

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、CDNをしっかり学習して自分のスキルアップを目指しましょう!

「CDN」とは?

それでは、まず最初に「CDN」について基本的な知識から学んでいきましょう!

「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がありません。

もちろん、自分のサーバーへjQueryのファイルをアップロードしなくても良いわけです。手軽に使える便利なしくみなので、すぐにjQueryを使ったプログラミングをしたい時には最適と言えるでしょう。

「CDN」の使い方

この章では、「CDN」の基本的な使い方について見ていきましょう! CDNを利用したjQueryファイルの読み込み方やGoogleが配信しているCDNの使い方について学んでいきます。

jQueryをCDNで読み込む方法について

まずは、基本的なCDNの使い方から見ていきましょう!

現在、jQueryのファイルは以下の公式サイトからCDN経由で利用できるURLが公開されています。

【 CDNを利用したjQueryファイル | jQuery公式サイト 】

uncompressed」「minified」の2種類ありますが、どちらも同じjQueryファイルになります。

「minified」はソースファイルのコメントや改行などを排除しているので容量が少なく軽量で高速です。「uncompressed」は容量が大きいですが、何かエラーが起きたときにどの箇所が要因なのかをデバッグできます。

そのため、開発中は「uncompressed」を使い公開する段階になったら「minified」に切り替えると良いでしょう。使い方ですが、HTMLファイルに通常通りscriptタグから読み込むだけなので簡単です!

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

「src属性」にCDN経由で配信されているURLを記述するだけです。

GoogleのCDNを使ったjQueryの読み込み方

jQuery公式以外にもCDNを使ってファイルを配信しているサーバーがあります。もっとも有名なのはGoogleが提供している以下のCDNでしょう。

【 GoogleのCDNサービスリスト | Google公式サイト 】

jQueryは現在「1系」「2系」「3系」の3種類が存在しています。

そこで、それぞれのjQueryファイルを分けて以下のようなURLを使って利用できるように配信されています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery公式のCDNよりも高速な配信サーバーであり、多くの人が利用しているという特徴があります。

「CDN」のメリット・デメリット

基本的な「CDN」の利用方法が分かったところで、おさらいを含めてメリット・デメリットをまとめてみましょう!

<メリット>

  • ファイルのダウンロード・アップロードの手間が不要
  • URLをscriptタグに記述するだけなので手軽に利用できる
  • ブラウザにキャッシュされるので高速に読み込める

<デメリット>

  • SSLの対応状況によっては利用できない場合がある
  • 配信が停止されると当然ながら利用できない

メリットに関しては、これまで解説した通りなのですがキャッシュについて紹介しておきます。CDN経由で読み込まれたファイルはブラウザにキャッシュされるので、次回読み込む時はブラウザ内のキャッシュを使います。そのため2回目以降の読み込みが高速になり、もし他のサイトも同じCDNを使っていれば同様に高速になるわけです。

デメリットに関しては、ほとんど心配いらないレベルです。SSL対応については、例えば時分のWebサイトが「https://」から始まる場合にCDNのURLもhttps://からでなければ読み込まれません。ただ、ほとんどのCDNはSSL対応しているので問題にはならないでしょう。

問題は配信が停止された場合ですが、複数のCDNサービスが存在しているので代替を見つけるのは簡単です。

jQuery UIのCDNについて

この章では、jQueryで画面の構築を簡単にできる「jQuery UI」のCDN利用について見ていきましょう!

jQuery UIの基礎知識とCDNの使い方について学んでいきます。

jQuery UIとは?

まずは、jQuery UIについての基本を見ていきましょう!

jQuery UIは、jQueryをベースにインタラクティブなWebサイトを構築するための機能を盛り込んだライブラリです。
https://jqueryui.com

例えば、以下のような特徴があります。

  • マウスのドラッグ操作などを扱えるインタラクション機能
  • カレンダー、アコーディオンメニュー、ツールチップなどのウィジェット機能
  • アニメーションやエフェクト効果などを扱える機能

これらの機能を簡単にサイトへ組み込めるのが魅力で、プログラミング方法もjQueryライクに扱えます。

つまり、jQueryでDOM操作を行いつつ画面UIの設計まで一緒に実現できるというわけです。

CDNを使ってjQuery UIを読み込む方法

それでは、jQuery UIをCDN経由で利用する方法について見ていきましょう! といっても、jQueryをCDNで利用する場合とほとんど同じなので簡単です。

例えば、最新のjQuery UIを利用するのであれば次のように記述します。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

1つ注意点としては、先にjQuery本体のファイルを読み込む必要があるという点です。理由は簡単で、jQueryをベースにしているので先に使えるようにしておかなければいけないわけです。

つまり、以下のようになります。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

このように、jQuery本体を読み込んだあとにjQuery UIを読み込みましょう!

まとめ

今回は、CDNを使ってjQueryやjQuery UIを読み込む方法について学習しました。最後に、もう一度ポイントをおさらいしておきましょう!

  • CDNはさまざまなファイルを配信するための仕組み
  • CDN経由で配信されているURLをscriptタグで読み込むだけ
  • jQueryで画面UIの設計が可能な「jQuery UI」もCDNで利用できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説