JavaScriptでnpmを利用するメリットと使い始めるために必要な知識

2021年3月18日2021年3月27日JavaScript

JavaScriptでnpmを利用するメリットと使い始めるために必要な基本的な知識をまとめました。

npmはなぜ必要なのでしょうか？

npmを使うと、とても簡単にscriptタグなどを利用することができるようになります。
ただ、npmを利用する以外にもscriptタグをhtmlにいれることで読み込むことができます。それが従来より使われていた方法になります。
では、npmを使うメリットはなんでしょうか？
まずhtmlに直接scriptタグを埋め込む方法は、大規模な開発になればなるほど管理が難しくなります。
そして、scriptタグで呼び出している、たとえばjQueryのバージョンが更新されたとき、手動でscriptタグを変更しないといけません。
それがいくつもあれば、とても管理できません。
そして、npmの登場前までは一つのデポジトリに必要な可能性のあるものがすべて含まれていました。

要するに、npmを利用しなければ、とても煩雑になり、徹底した管理ができない状態となります。

npmの利用方法

Node.jsをダウンロード

Node.jsをダウンロードするとnpmを利用することができます。
ターミナルでnpm -v とするとnpmのバージョンを確認することができます。

npm init

npmを利用するとき、プロジェクトごとに最初に初期化する必要があります。
初期化はnpm init とします。
そうすると、JSONファイルを作成するためにいくつか質問されます。
設定したいところは入力して、不要なところはエンターキーで進んで行くことができます。最後にis this OK?でエンターキーを押してyesとすると、package.jsonというファイルが作成されます。

package.jsonのdependencies

package.jsonは、プロジェクトの全体のコンフィギュレーション情報が入っています。
web APIのWebサイトでは、よく「Using a JavaScript package manager」とか「Using npm」という項目で、npmでのインストールのときのコマンドが記載されています。
だいたいはnpm install API名となっています。installの部分はiだけでもインストールすることができます。

インストール後、package.jsonを確認すると、dependenciesという項目があります。この項目はあとで重要になりますので、そのときに説明します。

そこにWeb APIの名前とバージョンが記載されています。

node.modules

フォルダを確認してみると、node.modulesというフォルダが作成されています。
そのフォルダには、インストールしたWeb APIのフォルダが入っています。

そして、これらを利用するためには、直接コードにインポートすることができません。なぜなら、ほとんどの場合CommonJSで記載されているためです。インストールしたWeb APIを使うためには、モジュールバンドラーを利用する必要があります。

直接使えるものとしては、「Module Formats」などの項目に「***-es」とかかれています。たとえばlodashなら、npm i lodash-esとすることでインストールすることができ直接importを使って利用することができます。lodashを使うとディープクローンなどを簡単につくることができます。

誰かにファイルをシェアするときは、node.modulesというフォルダはシェアする必要はありません。ファイルが大量のため、むしろシェアすべきではありません。
必要ならいつでもnpm経由で入手することができます。

たとえ、node.modulesというフォルダがなかったとしても、npm iとするだけで、package.jsonのdependenciesに書かれているものがインストールされます。

最低限のコマンドラインについては、以下の記事を参考にしてみてください。