【保存版】JavaScript ファイルに jQuery を追加する方法：CDN、ダウンロード、npm & Browserify、RequireJS、webpack を徹底比較

2024-06-26

JavaScript ファイルに jQuery を追加する方法

CDN を利用する

CDN (Content Delivery Network) を利用すると、自分のサーバーに jQuery ファイルをダウンロードすることなく、jQuery を利用することができます。

手順は以下の通りです。

HTML ファイルの <head> タグ内に、以下のコードを追加します。

<script src="https://releases.jquery.com/"></script>

jQuery ファイルをダウンロードして利用する

jQuery の公式サイトから jQuery ファイルをダウンロードし、自分のサーバーにアップロードして利用することもできます。

ダウンロードしたファイルを、自分のサーバーの適切な場所にアップロードします。

<script src="[アップロードしたjQueryファイルのパス]"></script>

jQuery コードの記述方法

上記の方法で jQuery を読み込んだ後、JavaScript ファイル内に jQuery コードを記述することができます。

jQuery コードは、以下のようにはじめに記述します。

$(function() {
  // jQuery コードを記述
});

このコードは、DOM が完全にロードされた後に jQuery コードを実行します。

例

以下のコードは、ボタンをクリックすると、そのボタンの背景色を赤に変更します。

$(function() {
  $("#button").click(function() {
    $(this).css("background-color", "red");
  });
});

このコードを実行するには、HTML ファイル内に以下のボタンを追加する必要があります。

<button id="button">ボタン</button>

注意事項

jQuery コードは、jQuery ファイルの読み込み後に記述する必要があります。
複数の JavaScript ファイルで jQuery を利用する場合は、各ファイルで jQuery を読み込む必要はありません。1 つのファイルで読み込めば、他のファイルからも利用することができます。

HTML ファイル (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>jQuery の例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <button id="button">ボタン</button>
</body>
</html>

JavaScript ファイル (script.js)

$(function() {
  $("#button").click(function() {
    $(this).css("background-color", "red");
  });
});

説明

HTML ファイル (index.html) は、<head> タグ内に jQuery CDN の URL を含む <script> タグを含んでいます。また、script.js ファイルへの参照を含む別の <script> タグもあります。
script.js ファイルは、jQuery の ready イベントハンドラを使用して、ボタン (#button) がクリックされたときに実行される関数を定義します。
ボタンがクリックされると、this キーワードはクリックされたボタンを参照します。css() メソッドを使用して、ボタンの背景色を "red" に設定します。

このコードを実行すると、ブラウザで index.html ファイルを開き、「ボタン」をクリックすると、ボタンの背景色が赤に変わります。

補足

このコードは、jQuery の基本的な使用方法を示しています。jQuery でできることは他にもたくさんあります。
コードをより洗練させるには、エラー処理やアニメーションなどの追加機能を実装できます。

JavaScript ファイルに jQuery を追加するその他の方法

npm と Browserify を使用する

長所:
短所:
- Browserify の設定に慣れていない場合は、セットアップが複雑になる可能性があります。
- Node.js と npm がインストールされていない場合は、追加のセットアップが必要となります。

手順:

プロジェクトディレクトリで、以下のコマンドを実行して Browserify をインストールします。

npm install --save-dev browserify

以下のコマンドを実行して、jQuery をインストールします。

npm install jquery

browserify.js ファイルを作成し、以下のコードを追加します。

const fs = require('fs');
const browserify = require('browserify');

browserify('./script.js')
  .external('jquery')
  .bundle()
  .pipe(fs.createWriteStream('./bundle.js'));

以下のコマンドを実行して、バンドルファイルをビルドします。

browserify ./browserify.js

<script src="bundle.js"></script>

RequireJS を使用する

長所:
- モジュラーな開発に適しています。
- コードの依存関係を管理しやすい。
短所:
- RequireJS の設定と使い方を覚える必要がある。
- 追加のライブラリが必要となります。

npm install requirejs

require(['jquery'], function($) {
  $(function() {
    $("#button").click(function() {
      $(this).css("background-color", "red");
    });
  });
});

<script data-main="app.js" src="requirejs/require.js"></script>

webpack を使用する

長所:
- コードのバンドルと圧縮を容易にする。
- ホットリロードなどの高度な機能を提供します。
短所:
- 他のツールよりも複雑な設定が必要となる場合があります。

npm install webpack webpack-loader

const path = require('path');

module.exports = {
  entry: './script.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: require.resolve('jquery'),
        use: {
          loader: 'expose-loader',
          options: {
            exposes: ['$']
          }
        }
      }
    ]
  }
};