[Mac]npm install エラーへの対応(初心者向け)

[Mac]npm install エラーへの対応(初心者向き)

こんにちは、こばやしよしのり @yoshiii514 です。

対象読者
最近、npm を使い初めて、npm install でエラーになり、原因をよくわからない、調べるだけで時間がかかっている・・・。
どの順番でエラーの調査したら良いのか知りたい。


こういった困っていることに答えます。
初心者向けの記事です。

本記事を読むメリット

  • npm install で、ありがちなエラーに対処できる。
  • 手順にまとめることで、短時間でエラーを解決できる。

npm を簡単に解説

まだ、npm がよくわかっていない方向けに簡単に解説します。
npm とはパッケージ管理システムのことで、Node Package Managerの略。パッケージはJavaScriptなどでできたプログラムのあつまりです。
パッケージは、別のパッケージの機能を利用していることも多いために、パッケージ間での依存関係の管理が必要になります。そのために、使うパッケージが増えてくると、条件が厳しくなりエラーがおこりやすくなります。

npm は、package.json を使って、各パッケージをインストール

最初は、利用するプロジェクトを GitHub 等からダウンロードして使うと思います。そのときに、 npm install を実行すると、プロジェクト内の package.json の内容に従って、各パッケージがインストールされます。
この package.json があるおかげで、だれが使っても同じ環境を即座に作り上げることができます。

// 例:package.json
{
  "name": "understrap",
  "version": "0.9.4",
  "description": "WordPress Theme framework",
  "main": "index.js",
  "scripts": {
    "postinstall": "gulp copy-assets"
  },
  "engines": {
    "npm": ">=2.1.8"
  },
// ....
}

npm install されたパッケージは、 node_modules ディレクトリに格納される

npm install されたパッケージは、 node_modules ディレクトリに格納される

npm install が実行されると、ダウンロードされたパッケージは、node_modules ディレクトリに保存されます。node_modules は、 package.json と同じ場所(階層)に作成されます。

npm install のグローバルとローカル

npm install には、グローバル(各プロジェクト全体で使える)とローカル(そのプロジェクトでしか使えない)があります。

npm install sass-graph@2.2.4 -g // グローバルインストール
npm install sass-graph@2.2.4 // ローカルインストール

グローバルの node_modules は、 npm コマンドの実態がある場所に作成されます。

// npm コマンドのある場所
$ which npm
/Users/yoshiiikoba/.ndenv/shims/npm

グローバルインストールとローカルインストールについては、次の記事はわかりやすいので、参考にしてください。
 CLI 環境構築 グローバルインストールとローカルインストールの違いについて

npm install の前に、Node.js のバージョンの確認

Node.js バージョンの確認

npm は、Node.js で作られています。
そのために、Node.js のバージョンの確認します。バージョンは、「node -v」 で確認できます。

$ node -v
v10.16.3

Node.js は推奨版を利用する。

npm install でのエラーへの対応
「node.js 最新版のインストールする」と指示があるときは、「LTS(Long Term Support) 推奨版」を利用します。「最新版」を利用しても、パッケージが対応していないために、 npm install を実行するとエラーになります。

複数のNode.jsを使うときは、バージョン管理ツールを使う。

Node.jsは複数のバージョンを使うことが多いので、バージョン管理ツールを使います。初心者の方は、ndenv が使いやすいです。

// ndenv 実行例。node.js のバージョンの一覧
$ ndenv versions
* 10.16.3 (set by /Users/yoshiiikoba/.node-version)
  v11.3.0
  v12.9.1

ndenv のインストールや使い方は、macにNode.jsをインストール(ndenv編) がわかりやすいです。

npm install を指定の場所で実行しているのか

npm install は、対象のプロジェクト(フォルダ or ディレクトリ)で実行して、パッケージを導入します。

Terminal などで、cd(ディレクトリチャンジ)をして、対象のプロジェクトに移動してから実行しているのか、確認してください。案外、慌てていると間違っていることが多いです。

// pwd で場所を確認
$ pwd
/Users/yoshiiikoba/Local Sites/test/app/public/wp-content/themes/understrap
understrap
$ npm install

再度、npm install の前に node_modules と package-lock.json を削除

npm install がエラーになったときは、 インストールが途中で終了しています。そのために、再実行するときは、node_modules ディレクトリと package-lock.json を必ず削除してから実行します。

package-lock.json は、正常に npm install が実行されたときに、インストールしたパッケージのバージョンを記録して、固定するのが目的です。詳しくは、次の記事が参考になります。
 package-lock.jsonの役割とは?【Node.js】 | Web白熱教室

まとめ:npm install でエラーになったときの対応

npm install でエラーになるときは、ケアレスミスも多いので、落ち着いて対処したい。今回の主要なテーマのまとめ。

  • Node.js のバージョンが適正であるか確認
  • npm install を指定の場所で実行する
  • 再度、npm install を実行するときは、node_modules ディレクトリと package-lock.json を削除してから

また、Sass(CSS) + node.js + npm での制作環境がよくわからない、慣れていない、という方は次のUdemyの講座がおすすめ。Udemyでは、たびたびセールスがあり、2000円前後で講座が購入できることもあるので、価格をチェックしておこう。
 「CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~」の価格をチェックする