【初心者向け】jQueryをCDNで導入する方法！

HTML/CSSの勉強を進めていくと、「もっと動きをつけたい！」と思うことはありませんか？

そんなときに役立つのが jQuery（ジェイクエリ） です。

本記事では、CDNを使ってjQueryをHTMLに導入する方法を、初心者の方でも理解できるように丁寧に解説します。

そもそもjQueryとは？
CDNとは？
jQueryをCDNで導入する手順【コピペでOK】
バージョンの選び方
jQueryをCDNで読み込むときの注意点
まとめ

そもそもjQueryとは？

jQueryは、JavaScriptをより簡単に書けるようにするライブラリです。
難しいコードを短く、シンプルに書けるのが特徴です。

例えば、あるボタンをクリックして要素を表示する場合、JavaScriptなら10行近くかかる処理も、jQueryならたった1行で書けます。

// jQueryの例
$('#button').click(function() {
  $('#text').show();
});

このように、jQueryは特にWeb制作の現場で即戦力になる技術のひとつです。

CDNとは？

CDNとは Content Delivery Network の略で、インターネット上にあるサーバーからファイル（今回はjQuery）を読み込む仕組みです。

CDNを使うメリットは以下の通りです：

jQueryファイルを自分のPCにダウンロードしなくても使える
サーバーが高速で安定している（Googleなどが提供している）
ブラウザがすでにキャッシュしている場合、読み込みがより速くなる

つまり、CDNを使えば、手軽にjQueryを導入できるということです。

jQueryをCDNで導入する手順【コピペでOK】

以下の手順で、HTMLにjQueryをCDNで追加できます。

① HTMLファイルを用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery CDNの導入例</title>

  <!-- ここにjQueryのCDNを記述 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <h1>jQueryテスト</h1>
  <button id="btn">クリックして表示</button>
  <p id="msg" style="display: none;">こんにちは、jQuery！</p>

  <script>
    $('#btn').on('click', function() {
      $('#msg').fadeIn();
    });
  </script>

</body>
</html>

② ブラウザで表示して動作確認

「クリックして表示」ボタンを押すと、下の文章が表示されれば成功です！

バージョンの選び方

CDNを使う際は、jQueryのバージョンにも注意しましょう。

よく使われるのは以下の形式です：

<!-- 最新の安定版（minified） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 開発用（可読性が高くデバッグ向き） -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

基本的には「.min.js」の方を使えばOKです（ファイルが軽く、読み込みが速いです）。

jQueryをCDNで読み込むときの注意点

必ず<script>タグは</body>の前または<head>内に書く
複数のJavaScriptファイルを読み込む場合は順序に注意（jQueryを先に読み込む）
インターネット接続が必要（オフラインでは動作しない）

まとめ

今回は「jQueryをCDNで導入する方法」について解説しました。

jQueryはJavaScriptを簡単に使えるようにするライブラリ
CDNを使えば、ファイルをダウンロードせずにjQueryを利用できる
<script>タグで読み込むだけで導入完了
初心者の練習や、ちょっとしたUI実装には今でも便利！

jQueryはすぐに使えて結果がわかりやすいので、学習のモチベーションが上がりやすい技術です。
ぜひ今日から使ってみてください！

この記事が役に立ったと思ったら、SNSでシェアしてもらえると嬉しいです！