VS CodeでjQueryの導入方法（HTML,CSS,jQuery）

今回静的ページを作成する際にHTML,CSS(SCSS),jQueryの環境を作る必要があったため、その時の構築の手順をまとめます。

静的ページとは

静的ページとは、HTML、CSS、JavaScript（例：jQuery）で構成され、サーバーサイドの処理を必要としないウェブページのことを指します。

逆に動的ページとは文章や画像がアクセスする毎に変わり、ユーザーに適したHTMLファイルが都度サーバ側で作られるWEBページのことを「動的ページ」と呼びます。

構築環境

・VS Code
・MacBook

手順

１.　Node.jsのダウンロード

まず、公式サイトから必要なバージョンのNode.jsをダウンロードします。
https://nodejs.org/en

２.　npmコマンドでjQueryをインストール

npm install jquery

インストールが完了したら下記のコマンドでインストールができたか確認

node -v

３.　プロジェクトの初期化

次に下記のコマンドを打ってプロジェクトの初期化を行います。

npm init -y

このコマンドは、Node.jsプロジェクトをすぐに初期化して、プロジェクトの設定ファイル（package.json）を自動的に作成します。　噛み砕いて説明するとプロジェクトの基本情報を自動的に設定してくれます。

設定した場合には、下記のような内容がpackage.jsonに記述されます。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

しかし設定をしなくても、機能はしますが、package.json にスクリプトを設定することで、scripts セクションを簡単に追加して npm run コマンドで実行できるスクリプトを設定することができます。

４.　パスをheadタグに設定

実際にjsファイルを作成し、そのファイルに対してパスをheadタグに設定してあげることでjsがjQueryが機能するようになります。

<script src="js/jquery.min.js"></script>