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