この記事は以下のソフトウェアがMacにインストールされていることが前提となっています。
もしインストールされていない方は、一つ前の記事の2019年版Node-jsのおすすめインストール方法をご覧ください。
index.jsというJavaScriptファイルを実行する場合、以下のコマンドだけで実行できます。
node index.js
npm install <モジュール名>
でモジュールをインストールします。
が、ここで注意点です。
モジュールのインストール先は2つあります。
npm install <モジュール名>
の場合は、Terminalで現在いる場所、ローカルディレクトリにインストールされます。
npm install <モジュール名> -g
のように-g
をつけるとグローバルインストールとなり、Node.jsのプログラムのある場所にインストールされます。インストールされたモーウールの場所はTerminalでnpm root -g
を実行するとわかります。-g
をつけた場合、Terminalでどの場所にいても再インストールせずにモジュールを使うことができます。
Terminalから直接実行するようなモジュールやいつでも使いたいモジュールの場合に使います。
インストールするとnode_modules
というディレクトリが作成され、その中にモジュールの実態がダウンロードされます。
JavaScriptファイルで以下を実行すると、モジュールを使うことができます。
const someModule = require('モジュール名');
サンプルとして、puppeteer
というモジュールをインストールし、サイト https://example.com のキャプチャを撮ってみましょう。
デスクトップにsampleというディレクトリを作り移動します。
cd ~/Desktop
mkdir sample
cd sample
puppeteer
をインストールします。
npm install puppeteer
同じ場所で、index.jsというファイルを作り以下を記述します。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
最後に実行しましょう。
node index.js
すると、同じディレクトリにexample.png
という名前のキャプチャー画像が生成されているはずです。
好きな名前のディレクトリを作成し、npmの初期化コマンドを使います。
mkdir test
cd test
npm init # これがnpmの初期化コマンド
すると、プロジェクトの設定をどうするか、英語で対話的に質問されます。
質問内の()
の中は初期値です。よくわからなければ、何も入力せずにEnterを押すと初期値で設定されていきます。
答えた内容は、このあと生成されるpackage.json
というファイルに記載されます。
チップスとして、npm init -y
と実行すると対話なしで、初期値で設定されたpackage.json
がいきなり生成されます。
package.json
の各プロパティは公式ドキュメント(英語)か翻訳されたドキュメントをご確認ください。
モジュールをインストールする際のnpm install <モジュール名>
のコマンドに--save
オプションをつけると、依存モジュールのバージョン情報がpackage.json
に追記されます。
puppeteer
モジュールを設定したい場合は、以下のコマンドを実行します。
npm install puppeteer --save
注意点として、--save
の他にも--save-dev
というオプションがあります。
インストールするモジュールがプロジェクトの開発時にのみ使用される場合は--save-dev
を、プロジェクトが実行されているときに使用する場合は--save
を使います。
--save
の場合はdependencies
、--save-dev
の場合はdevDependencies
のプロパティ名で、package.json
内に記述されます。
プロジェクトを配布する場合にとても重要なオプションです。
次は誰かが作成したプロジェクトを実行してみます。
Gitなどでプロジェクトをダウンロードした場合、node_modules
はファイル数とサイズが重く、Gitの管理から除外されており生成されません。
なので、まずプロジェクトのディレクトリにpackage.json
があることを確認し、以下のコマンドを実行しましょう。
node_modules
ディレクトリが生成され依存モジュールがダウンロードされます。
npm install
npmのモジュールを使いたいではnpm install <モジュール名>
とモジュール名を記入していましたが、モジュール名を省略するとpackage.json
の記載されている依存モジュールがすべてダウンロードされます。
注意点として、ロックファイルがある場合は、必ずそのファイルに対応したコマンドを使います。
package-lock.json
がある場合は、必ずnpm install
を実行yarn.lock
ファイルがある場合は、必ずyarn
を実行もしyarnをまだインストールしていない場合は、以下のコマンドでyarnをインストールしましょう。
brew install yarn
package.json
のscripts
というプロパティを使用します。
例えばindex.js
を実行する以下のコマンドを頻繁に使っているとします。
node index.js
このショートカットを作成したい場合、package.json
のscripts
の中に、"ショートカット名": "ショートカットしたいコマンド"
を定義します。
{
"scripts": {
"start": "node index.js"
}
}
このように記述すると、npm run <ショートカット名>
でショートカットしたいコマンドが実行されます。
以下を実行すると、node index.js
が実行されます。
npm run start
もしyarnで実行したい場合は、yarn
のあとにショートカット名を入力するだけです。
yarn start
この記事の内容を覚えると、誰かが作成したプロジェクトでも、ドキュメントを見ずに簡単に実行できてしまうケースが多いです。
例えば、mikeyさんのreact-scaffoldというプロジェクトを試してみたいとします。
package.json
のscripts
にstart
という記述があるので、以下のコマンドを実行します。
git clone https://github.com/mikeyamadeo/react-scaffold
cd react-scaffold
yarn
yarn start
すると、特にドキュメントなども見なくても、Webサーバーが立ち上がり、いつでも開発できる状態になります。
コードがオープンに公開されるこの時代、リポジトリの多いNode.jsを習得することはとても有意義なことです。
おすすめするのは、0からnpmのプロジェクト(パッケージ)を作ってみることです。
一つ一つ何が起こっているのか理解することで、誰かのパッケージを使う際や、エラーなどが発生した際に、その知識が役立ちます。