Kodokon kodokon.com

ESモジュールとnpm:プロジェクトを整理する

package.json、ESモジュール、npmの依存関係、そしてスクリプトを使って、Nodeプロジェクトを構成しましょう。

9 分 · 3 問

このレッスンを Kodokon で開く

本物のプロジェクトは一つのファイルには収まりません。モジュール、つまり自分が提供するものをエクスポートし、必要なものをインポートするファイルへと分割します。import / export構文はJavaScript講座ですでに知っていますね。Nodeでそれをどう有効にするかを見ていきましょう。すべてはpackage.json、プロジェクトの身分証明書から始まります。JSON形式のファイルで、その名前、バージョン、設定を記述します。作成するには、空のフォルダに移動してnpm init -yを実行します(-yオプションはすべてのデフォルトの回答を受け入れます)。次に"type": "module"という行を追加します。これはあなたの.jsファイルがESモジュールを使うことをNodeに伝えます。

JSON
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node main.js",
    "dev": "node --watch main.js"
  }
}
npm init -yのあとのpackage.json。typeの行と、このあと使う二つのスクリプトを書き足したものです。

このフォルダに二つのファイルを作りましょう。math.jsが関数をエクスポートし、main.jsがそれをインポートします。Node特有の細かい点があります。ローカルファイルのインポートは./で始まり、.js拡張子で終わらなければなりません。一部のウェブツールが許してくれるのとは違い、どちらも必須です。

JAVASCRIPT
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";

console.log(add(2, 3));
二つの別々のファイル。node main.jsを実行すると、結果の5が表示されます。

npmの大きな強みは、世界規模のパッケージのライブラリです。他人が書いた、すぐ使えるコードのことです。npm installコマンドはパッケージをプロジェクトのnode_modulesフォルダにダウンロードし、package.jsonのdependenciesセクションに追加します。これはプロジェクトが動くために必要なパッケージのリストです。自動的に作られるpackage-lock.jsonファイルが、インストールされた正確なバージョンを記録するので、誰もが同じものを手に入れられます。chalkで試してみましょう。ターミナルに表示されるテキストに色を付けるパッケージです。

BASH
npm install chalk
このコマンドのあと、chalkはdependenciesとnode_modulesに現れます。そのあとは他のどのモジュールとも同じようにインポートできます。

最後の柱です。npmスクリプト、つまりpackage.jsonのscriptsセクションに宣言されたコマンドのショートカットです。npm run devは、本当のコマンドがどれだけ長くても、devという名前で保存されたコマンドを実行します。私たちのdevスクリプトはnode --watchを使っています。ファイルが変わるたびにプログラムを自動的に再起動するオプションで、開発中はとても快適です。

BASH
npm run start
npm run dev
それぞれのコマンドが同じ名前のスクリプトを実行します。監視モードはCtrl+Cで止めます。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

  1. package.jsonファイルの役割は何ですか?
    • プロジェクトを記述する。名前、バージョン、スクリプト、依存関係
    • プロジェクトの主要なJavaScriptコードを含む
    • ダウンロードされたパッケージのコードを保管する
    • node_modulesフォルダを置き換える
  2. npm install chalkを実行すると何が起こりますか?
    • chalkがmain.jsファイルに直接コピーされる
    • chalkはただダウンロードされるだけで、痕跡を残さない
    • chalkがnode_modulesに置かれ、dependenciesに追加される
  3. package.jsonにtype moduleの行を追加するのはなぜですか?
    • npmがパッケージをより速くインストールするため
    • Nodeが.jsファイルをESモジュール(import/export)として読むため
    • プロジェクトをnpmに自動的に公開するため