cdnで簡単導入！jquery uiの基本から活用法まで解説

2025 9/28

2025/09/28

はじめに

本記事の目的

本記事は、jQuery UIをCDN（Content Delivery Network）経由で手軽に導入する方法を、初心者向けにわかりやすく解説します。専門用語は最小限にし、具体例を交えながら進めますので、初めての方でも無理なく理解できます。

対象読者

Web制作の基礎を学んだ方
jQueryやJavaScriptの導入に興味がある方
ページに簡単な対話型UI（カレンダーやドラッグ操作など）を追加したい方

この記事で学べること

jQuery UIの役割と使いどころ
CDNを使う利点と注意点
実際の読み込み手順と記述例
代表的なCDNリンク一覧とよくある質問

進め方

章ごとに手順とサンプルを示します。まずは本書の流れをつかみ、実際に手を動かして試してみてください。疑問が出たら該当章に戻るだけで解決しやすく作っています。

jQuery UIとは？Web制作での役割

概要

jQuery UIは、jQuery（軽量なJavaScriptライブラリ）を拡張して、画面の操作を簡単にするための部品集です。難しい処理を自分で一から書かなくても、ドラッグやモーダル（ダイアログ）など直感的な動作をすぐに組み込めます。

主な機能（具体例で説明）

インタラクション：ドラッグ＆ドロップやリサイズ。画像を並べ替えたり、パネルの大きさを変えたりできます。
ウィジェット：カレンダー（Datepicker）、アコーディオン、タブ、ダイアログ、ツールチップなど。予約フォームや設定画面でよく使います。
効果（エフェクト）：フェードやスライド、ハイライト。ユーザーの視線を誘導しやすくします。

Web制作での役割

jQuery UIは、少ないコードで見た目と操作性を向上させる道具です。特にプロトタイプ作成や、小〜中規模サイトで迅速に機能を追加したい場合に有効です。ブラウザ間の差も吸収しやすく、保守が楽になります。

使うときの目安

既存のJavaScriptフレームワークを使っていない、または短期間で実装したい場合に向きます。逆に、大規模アプリや最新のフレームワークを前提にする場合は、必要な機能だけを選んだり別のライブラリを検討してください。

CDNとは？jQuery UIをCDNで利用する利点

まずはCDNとは

CDN（Content Delivery Network）は、世界各地に分散したサーバーからファイルを配信する仕組みです。ファイルは利用者の近くにあるサーバー（エッジ）から届けられるため、ダウンロードが速くなります。

jQuery UIをCDNで使うメリット

設置や配布が不要で手軽に利用できます。HTMLにCDNのURLを入れるだけで使い始められます。
キャッシュ効果で表示が速くなります。訪問者が別サイトで同じCDNのファイルを既に読み込んでいれば、再ダウンロードが不要です。
サーバー負荷を減らせます。ライブラリ配信をCDN側に任せるため、自分のサーバーの帯域が節約できます。
グローバル配信で遅延を抑えられます。海外の利用者にも高速に届きます。
バージョン管理や配信の信頼性が高いです。CDNは多くの場合HTTPS、圧縮や冗長化にも対応しています。

簡単な利用イメージ

HTMLにCDNのスクリプトやCSSへのリンクを記述するだけで、すぐにjQuery UIが利用できます。次章で具体的な記述例を示します。

注意点（簡単に）

外部依存になるためCDNが利用できない環境や、特定バージョンを必ず使いたい場合はローカル保持やフォールバックの検討が必要です。

jQuery UIをCDNで読み込む手順・記述例

概要

基本は2ステップです。1) まずjQuery本体を読み込む（jQuery UIはjQueryに依存します）、2) jQuery UIのCSSとJSを読み込みます。順序を守ることでウィジェットが正しく動作・表示します。

手順（簡潔）

jQuery本体を先に読み込む
jQuery UIのCSSを読み込む（見た目用）
jQuery UI本体（JS）を読み込む

記述例

以下は最もシンプルなHTMLの例です。バージョンは必要に応じて読み替えてください。

<head>
  <!-- CSSはhead内に置くと良いです -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
  <!-- コンテンツ -->

  <!-- jQuery本体（必ず先） -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- jQuery UI本体（CSSを読み込んだ上で） -->
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</body>

補足と注意点

必ずjQuery本体→jQuery UI本体の順序で記述してください。順序が逆だと動作しません。
CSSを読み込まないとボタンやダイアログなどの見た目が崩れます。見た目を整えるためにCSSも忘れずに読み込みます。
CDNのURLに含まれるバージョン番号は、プロジェクトの互換性に合わせて選んでください。
必要ならSRI（integrity）やcrossorigin属性を追加してセキュリティを高めると良いです。

代表的なCDNリンク一覧

概要

主要なCDNから提供される、jQuery / jQuery UI（JS と CSS）の代表的なリンク例を示します。バージョンは安定版の例です。

公式（jQuery CDN）

jQuery: https://code.jquery.com/jquery-3.6.0.min.js
jQuery UI JS: https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
jQuery UI CSS: https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Google Hosted Libraries

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
（Googleは jQuery UI の配信を行っていません）

CDNJS

jQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
jQuery UI JS: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
jQuery UI CSS: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css

jsDelivr

jQuery: https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
jQuery UI: https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js
jQuery UI CSS: https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.css

Microsoft CDN

jQuery: https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js
jQuery UI JS: https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js
jQuery UI CSS: https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/base/jquery-ui.css

利用時のポイント

1) jQuery を先に読み込み、次に jQuery UI を読み込みます。CSS はで指定してください。
2) バージョンを合わせると互換性の問題を避けられます。

よくある質問・注意点

Q. jQuery UIはどんな場面で使う？

カレンダー入力（datepicker）、モーダルダイアログ、アコーディオン、ドラッグ＆ドロップ、ツールチップなど、短時間で動きのあるUIを追加したい時に便利です。プラグインを自作するより手早く実装できます。

Q. バージョンはどう選ぶ？

基本は公式の最新安定版を使ってください。既存プロジェクトと組み合わせる場合は、互換性を確認してプロジェクト指定のバージョンを優先します。互換表がある場合は必ず参照してください。

Q. jQuery本体との依存関係は？

はい。jQuery本体を先に読み込み、その後にjQuery UIを読み込みます。順序が逆だと動作しません。

Q. CSSは必須？

はい。ウィジェットの見た目はCSSに依存します。CDNからCSSを読み込むか、テーマをローカル保存して読み込んでください。

注意点・運用上のヒント

CDN利用時はSRI（integrity）とcrossorigin属性を設定すると安全です。
オフラインやCDN障害に備え、ローカルにフォールバックを用意すると安心です。
複数バージョンのjQueryやjQuery UIを同ページで読み込まないでください。競合やエラーの原因になります。
カスタムテーマを作る場合は、対応する画像やフォントも忘れずに配布します。
パフォーマンスに注意し、不要なウィジェットは読み込まないでください。
アクセシビリティ（キーボード操作やスクリーンリーダー）を確認してから公開してください。

不明点があれば、ご利用の環境（jQueryのバージョンや使いたいウィジェット）を教えてください。具体的にお手伝いします。

実際の利用サンプル

以下では、jQuery UIのカレンダーウィジェット（datepicker）をCDNで読み込み、簡単に使う例を示します。HTMLのheadにCSSとスクリプトの順で記述し、bodyにinputを置くだけでカレンダーが開きます。

コード例

<head>
  <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>
  <script>
    $(function(){
      $("#date").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        minDate: 0
      });
    });
  </script>
</head>
<body>
  <label for="date">日付:</label>
  <input type="text" id="date">
</body>