HOWTO · jQuery
NPM jQuery モジュールを使用する
このチュートリアルでは、npm jQuery モジュールをインストールして使用する方法を示します。
このページの内容
NPM は node.js パッケージの一部です。このチュートリアルでは、npm jQuery モジュールのインストールと使用について説明します。
NPM jQuery モジュールを使用する
NPM を使用して Node.js をインストールする
最初に npm jQuery モジュールを使用するには、node.js パッケージに含まれている npm モジュールをインストールする必要があります。このリンクに移動して、インストーラーをダウンロードします。
インストーラーがダウンロードされたら、次のステップはインストーラーを実行することです。
インストーラーを実行した後、次へを押して同意します。その後、次へを 3 回押します。
[必要なツールを自動的にインストールする]オプションをオンにし、[次へ]をクリックしてから、[インストール]をクリックします。
インストールが完了したら、完了をクリックすると、npm を含む Node.js がインストールされます。
コマンドプロンプトまたは PowerShell を使用してインストールを確認します。次のコマンドを実行します。
npm -v
npm を使用して Node.js をインストールしたら、次のステップは npm を使用して jquery モジュールをインストールすることです。
NPM で jquery をインストールする
jQuery ではなく、モジュール jquery をインストールしてください。以下の手順に従ってください。
手順 1：コマンドプロンプトで次のコマンドを使用して package.json ファイルを作成し、依存関係とモジュールを追跡します。
npm init -y
上記のコマンドの出力は次のようになります。
C:\>npm init -y
Wrote to C:\package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
ステップ 2：jquery モジュールをインストールします。次のコマンドを使用します。
npm install jquery
ステップ 3：jquery モジュールがインストールされたら、次のステップは jsdom をインストールすることです。これは、jQuery がフロントエンドライブラリであるためです。そのため、バックエンド操作用のウィンドウが必要です。次のコマンドを使用して、jsdom をインストールします。
npm install jsdom
ステップ 4：JavaScript で jsdom モジュールをインポートします。
const dom = new jsdom.JSDOM("")
ステップ 5：パラメータとして HTML コードを使用して、JSDOM オブジェクトによって作成された新しい jsdom ウィンドウを作成します。以下の例を参照してください。
const dom = new jsdom.JSDOM("")
ステップ 6：jquery をインポートしてウィンドウを提供します。次のコードを使用します。
const jquery = require('jquery')(dom.window)
それでは、npm で jquery を使用する例を試してみましょう。例を参照してください：
// Import the jsdom module
const jsdom = require('jsdom');
// Create a window with a document
const dom = new jsdom.JSDOM(`<!DOCTYPE html>
<body>
<h2> DELFTSTACK </h2>
<p>This is delftstack.com</p>
</body>
`);
// Import the jquery with window
const jquery = require('jquery')(dom.window);
// Append a HTML element to the body
jquery('body').append('<p> The Best Tutorial Site </p>');
// Get the content of the body
const Body_Content = dom.window.document.querySelector('body');
// Print the content of body
console.log(Body_Content.textContent);
上記のコードは、npm jquery を使用して、本文に HTML コンテンツを追加します。出力を参照してください：
