【初心者向け】NPMを使ってプロジェクトにインストールする方法

NPM（Node Package Manager）は、JavaScriptのライブラリやツールを簡単に導入・管理できるパッケージマネージャーです。
ただ、導入には少しハードルが高いのが欠点です。

「Swiper」や「GSAP」などの人気ライブラリには、NPMとCDN（Content Delivery Network）の2つの導入方法があります。

CDNとは、インターネット上に用意されたライブラリを外部から読み込む仕組みで、ブラウザで直接アクセスできるURLを使って簡単に使い始められます。
<script> タグにライブラリのURLを記述するだけで利用できるため、初心者でも手軽に扱えるのが特徴です。

ただし、CDNではプロジェクトで使用しない機能も一括で読み込まれてしまうため、ファイルサイズが大きくなりがちです。
一方、NPMを使えば必要な機能だけを選んで読み込めるため、無駄のない軽量な構成にできるのが大きなメリットです。

ヨシゾウ

この記事では、初心者の方でも安心して使えるNPMの基本的な使い方を、人気スライダーライブラリ「Swiper」を例にわかりやすく解説します。

✅ 本記事の内容

• NPMとは？
• Node.jsとNPMの確認方法
• package.jsonの作成方法
• Swiperの導入手順
• よくある注意点と対処法

1. Node.jsとNPMがインストールされているか確認する

まずは、Node.jsとNPMがパソコンにインストールされているかを確認します。

ターミナルで以下を入力：

npm -v

このように番号が出てきます。

バージョン番号（例：10.8.1）が表示されればOKです。
未インストールの場合は、以下の公式サイトからインストールしてください。

👉 Node.js 公式サイト

💡 Node.jsをインストールすると、NPMも同時に使用可能になります。

2. プロジェクトディレクトリの準備

💡 ここでいう「プロジェクト」とは？
Webサイトやアプリなど、特定の目的で作成する作業フォルダのことです。
たとえば my-portfolio/ や client-a-website/ など、1つの案件や開発対象に対応したディレクトリを「プロジェクト」と呼びます。
この単位ごとにNPMでライブラリの管理を行うことで、他の作業環境と依存関係を分離できます。

ライブラリを導入するには、プロジェクトのルートディレクトリに移動する必要があります。
ただし、コマンドで毎回ディレクトリを移動するのは少し手間に感じることもありますよね。

ヨシゾウ

私は普段、
「先にVS Codeでプロジェクトフォルダを作成してからエディタを開き、内蔵ターミナルを使って作業」しています。

こうすることで、「フォルダを開いた時点で自動的に正しいディレクトリに移動できる」ので便利です。

もちろん、ターミナルでコマンドを使って移動することも可能です。

既存プロジェクトの場合：

cd プロジェクト名

新規プロジェクトの場合：

mkdir my-project
cd my-project

3. package.json を作成する

次のコマンドで package.json を自動生成します。

npm init -y

このファイルは、インストールしたライブラリの情報やバージョンなどを管理するために必要です。

ヨシゾウ

複数プロジェクトでNPMを使う場合、必ずプロジェクトごとに package.json を用意しましょう！

4. package.json に書かれた、コンパイル対象ファイルの確認と変更（任意）

npm init -y で自動生成された package.json ファイルには、デフォルトで以下のような記述があります：

"main": "index.js"

この “main” は、外部からこのプロジェクトを読み込むときに、最初に参照されるファイル（エントリーポイント）を示しています。

ヨシゾウ

💡 通常のWeb制作では、自分だけが使用するケースが多く、main の設定は必須ではありません。
ですが、プロジェクトの構造を明確にするために、
「使用するメインのJavaScriptファイルを明示しておく」のがおすすめです。

たとえば、src/js/home.js がメインのファイルであれば、次のように変更します：

"main": "src/js/home.js"

こうすることで、自分や他の開発者がプロジェクトを見たときに「このファイルが中心なんだな」と理解しやすくなります。

5. Swiperライブラリをインストールする

以下のコマンドでSwiperをインストールします。

npm install swiper

インストール後は package.json に次のような記述が追加されます。

"dependencies": {
  "swiper": "^11.1.1"
}

また、package-lock.json と node_modules/ フォルダも生成されます。

ヨシゾウ

🧠 package-lock.json はプロジェクトの依存関係を固定するための重要なファイルです。編集・削除しないようにしましょう。

6. 複数ファイルで使う場合の設定

複数のJSファイルで使いたい場合、scripts に以下のように追記します。

"scripts": {
  "home": "node src/js/home-slide.js",
  "service": "node src/js/service.js"
}

7. .gitignore の設定

Gitで node_modules を除外したい場合は、以下のように .gitignore を作成・追記します。

node_modules/
.gitgnore
.vscode/*
!.vscode/tasks.json
!.vscode/extensions.json
*.code-workspace

8. Swiperをプロジェクトに組み込む（使用例）

import Swiper from "swiper";
import { Autoplay, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/navigation";

const swiper01 = new Swiper(".js-swiper-main", {
  modules: [Navigation, Autoplay],
  slidesPerView: 1,
  spaceBetween: 0,
  centeredSlides: true,
  loop: true,
  loopAdditionalSlides: 1,
  speed: 500,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  autoplay: {
    delay: 5000,
    disableOnInteraction: true,
    pauseOnMouseEnter: true,
  },
});

ヨシゾウ

🔁 無限ループ時の注意点：
slidesPerView: 3 の場合は、スライドを4枚以上用意しましょう。

⸻

9. バンドラーの導入（必要な場合）

import を使うには、バンドラー（Webpack / Preprosなど）が必要です。
GUIツールを使いたい場合は Prepros もおすすめです。

⸻

✅ まとめ

1 Node.jsとNPMのインストール確認
2 プロジェクトディレクトリへ移動
3 package.json の生成
4 main の設定（必要に応じて）
5 ライブラリのインストール
6 複数スクリプトの設定
7 .gitignore の設定
8 Swiperの組み込みと初期化
9 必要に応じてバンドラー導入

⸻

🔗 関連リンク

• Swiper公式ドキュメント
• Node.js公式サイト

⸻

NPMを使えば、さまざまな便利なライブラリを簡単に導入できます。
今回紹介したSwiperの導入を通じて、NPMの基本操作に慣れておきましょう！