jQuery をインポートする

さまざまなプラットフォームを使用して jQuery をインポートする方法はいくつかあります。このチュートリアルでは、jQuery を環境にインポートするさまざまな方法を示します。

Script タグを使用して jQuery をインポートする

これは、jQuery ファイルを HTML の script タグにインポートするための最も一般的な方法です。ソースへのリンクを指定するか、ファイルをダウンロードしてソース内のファイルへのパスを指定することができます。

例を参照してください：

リンクの使用：

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

ダウンロードしたファイルの使用：

<script src="C:\Users\etc\jquery-3.6.0.min.js"></script>

どちらの方法も、基本的な jQuery のインポートに役立ちます。

ES6 構文を使用して jQuery をインポートする

Babel は次世代の JavaScript コンパイラです。Babel には、JavaScript コードの ES6 および ES2015 モジュールをコンパイルする機能があります。

このメソッドは、Babel などのコンパイラでのみサポートされています。ブラウザは ES6/ES2015 をサポートしていません。以下の ES6 構文を使用して jQuery をインポートする方法を参照してください。

import {$, jQuery} from 'jquery';
// to use jQuery
window.$ = $;
window.jQuery = jQuery;

または、より簡単な方法：

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

どちらの方法も、Babel のようなコンパイラには便利です。

Browserify/Webpack を使用して jQuery をインポートする

Browserify と Webpack はいくつかの方法で使用できます。Browserify/Webpack の変数として jQuery をインポートできます。

例を参照してください：

var $ = require('jquery');

詳細については、公式ドキュメントを以下に示します。

1. Browserify
2. Webpack

AMD（非同期モジュール定義）を使用して jQuery をインポートする

非同期モジュール定義（AMD）は、ブラウザー用に作成されたモジュール形式です。関数を使用して AMD に jQuery をインポートできます。

例を参照してください：

define(['jquery'], function($) {
  // code here
});

AMD の詳細については、こちらを参照してください。