html jquery cdn

CDNを使用してHTMLプロジェクトにjQueryを簡単に追加する方法

このチュートリアルでは、CDN（コンテンツデリバリーネットワーク）を使用してjQueryをHTMLプロジェクトにすばやく追加する方法、CDNの利点、適切なjQueryバージョンの選択方法について説明します。

CDNとは？なぜ使用する必要があるのか？

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

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

CDNを使用する利点は次のとおりです。

ウェブサイトの読み込み速度の向上
サーバー負荷の軽減
高可用性と信頼性の提供
ファイル管理の簡素化

適切なjQuery CDNの選択方法

一般的に使用されるjQuery CDNプロバイダーは以下のとおりです。

プロバイダー	URL
Google Hosted Libraries	https://ajax.googleapis.com/ajax/libs/jquery/
Microsoft Ajax CDN	https://ajax.aspnetcdn.com/ajax/jQuery/
jsDelivr	https://cdn.jsdelivr.net/npm/jquery@

バージョンを選択する際は、以下の点に注意してください。

最適なパフォーマンスとセキュリティを得るには、最新の安定バージョンを使用します。
プロジェクトの要件に応じて、特定のバージョン（例：古いブラウザとの互換性）を選択します。

HTMLプロジェクトへのjQuery CDNの追加

jQuery CDNリンクをHTMLの<head>セクションに追加するコード例を以下に示します。

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

コードの説明：

<script>タグは、JavaScriptコードを埋め込むために使用されます。
src属性は、jQueryライブラリファイルのURLアドレスを指定します。

ページの読み込みを最適化するために、<script>タグにdefer属性を追加することをお勧めします。

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

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

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

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

【 CDNを利用したjQueryファイル | jQuery公式サイト】
https://jquery.com/download/

jQuery公式サイトにアクセスすると、CDNで利用できるjQueryのバージョンごとのURLが記載されています。例えば、jQuery 3.6.0を利用したい場合は、以下のURLをHTMLファイルの<head>タグ内に記述します。

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

上記のように<script>タグのsrc属性にCDNのURLを指定することで、jQueryを利用することができます。

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

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

【 GoogleのCDNサービスリスト | Google公式サイト】
https://developers.google.com/speed/libraries/

GoogleのCDNを利用する場合は、以下のようにHTMLファイルに記述します。

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

jQueryが正常に読み込まれたかどうかの確認

簡単なJavaScriptコードを使用して、jQueryが正常に動作するかどうかをテストする例を以下に示します。

<script>
$(document).ready(function() {
  // jQueryコードをここに記述します
  console.log("jQueryが正常に読み込まれました！");
});
</script>

コードの説明：

$(document).ready()は、DOMの読み込みが完了した後にjQueryコードが実行されることを保証します。
console.log()は、ブラウザの開発者コンソールに情報を表示し、デバッグに使用されます。

上記の手順に従うことで、CDNを使用してjQueryをHTMLプロジェクトに簡単に追加し、その強力な機能を使用して動的でインタラクティブなWebアプリケーションを構築することができます。

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

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

メリット

ファイルのダウンロード・アップロードの手間が不要
URLをscriptタグに記述するだけなので手軽に利用できる
ブラウザにキャッシュされるので高速に読み込める
世界中にサーバーがあるため、ユーザーに近いサーバーから配信されアクセスが高速になる
サーバー負荷を軽減できる

デメリット

SSLの対応状況によっては利用できない場合がある
配信が停止されると当然ながら利用できない
CDNサーバーの障害発生時は利用できない
セキュリティリスクの可能性がある (悪意のあるコードが仕込まれる可能性)

jQuery UIのCDNについて

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

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

jQuery UIとは？

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

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

jQuery UI公式サイト

jQuery UIの特徴

ウィジェット: ボタン、タブ、ダイアログ、日付ピッカーなど、様々なUIコンポーネントが用意されている
インタラクション: ドラッグ＆ドロップ、リサイズ、ソートなど、要素を操作するための機能が提供されている
エフェクト: アニメーションやトランジション効果を使って、UIに動きを与えることができる
テーマ: UIの見た目をカスタマイズするためのテーマが用意されている

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

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

jQuery UIも公式サイトやGoogle Hosted LibrariesなどでCDNが提供されています。

例えば、jQuery UI 1.13.2を利用する場合は、以下のようにHTMLファイルに記述します。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

jQuery UIを利用するには、jQuery本体を読み込んだ後に、jQuery UIのCSSファイルとJavaScriptファイルを読み込む必要があります。

まとめ

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

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

CDNを利用することで、Webサイトの開発効率を向上させることができます。ぜひ積極的に活用してみてください。