jQuery をインポートする

Sheeraz Gul 2023年10月12日
  1. Script タグを使用して jQuery をインポートする
  2. ES6 構文を使用して jQuery をインポートする
  3. Browserify/Webpack を使用して jQuery をインポートする
  4. AMD(非同期モジュール定義)を使用して jQuery をインポートする
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 の詳細については、こちらを参照してください。

著者: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook