npmについて知るべきか

何も経験ないけれど、これから個人開発をしようと思い立った。

最強のウェブサービスのアイデアを思いついたとする。その天才的な発想を実現するために、まず「何を使えば実現できるのか」を調査して使用する技術を選定することが求められる。そこで綿密な調査の結果、使用すべきフレームワークが決まったとする。その次は、そのフレームワークとやらをインストールし、開発するために必要な環境を構築することが必要になる。

その際、必ずといっていいほど本記事の主題である npm が登場する。何かよく分からないけれど、 npm install ○○ とかいうコマンドを叩けと指示され、その後、 create やら run やら、色々なコマンドを叩くことを求められ、言われるがままに黒いターミナルに打ち込んでいく。その度に白いバーが何個も並んでは消えを繰り返す光景が目の前で繰り返されることとなる。

さらに何か知らないファイルやフォルダが生成され、フォルダの中には大量のファイルが生成されている。それらの中身を確認して見るも意味が分からない。とはいえ、フレームワークを利用するための環境は構築されているっぽいし……と見て見ぬふりして開発を進めることとなる。

さて、この npm とは何者なのか？

当たり前のように現れ、そして、その後どこへ行っても付いてくる npm について、知っているのと知らないのとでは、その後の開発への向き合い方が大きく変わってくる。ただ npm って何か万能なコマンド、くらいの関係性から「 npm ？　あぁ、知ってるよ！」という自信満々に胸を張って言えるくらいの間柄になることを目標としたい。

npmは何の略？

npm とは、Node Package Manager（ノード・パッケージ・マネージャー） の略である……と言いたいところであるが、これは公式に否定されている。公式が出している見解では "npm is not an acronym." となっており、これはつまり、何かの単語のacronym（＝頭文字）を並べた文字列ではないということだ。

しかし、npmが何をしているものかという説明をしたい時に、Node Package Manager（ノード・パッケージ・マネージャー） というフレーズはしっくりくる。Nodeという「JavaScriptを動かすための環境」で利用されるPackage（＝すぐに利用できるように用意されたソフトウェア）をManege（＝管理する）してくれるのが、npmだ。

もっと端的に、npmを一言で言えば、「JavaScriptの便利道具（パッケージ）を管理してくれるマネージャー（買い出し係・整理係）」だ。

Webサービスを作ろうとした際、ログイン機能、画像の圧縮、日付の計算、おしゃれなグラフ描画など、すべての機能を自作（ゼロからプログラミング）するのは膨大な時間がかかる。しかし現代のWeb開発では、世界中の優秀なエンジニアたちが「便利な部品（パッケージ）」を作ってインターネット上に公開してくれている。

その膨大な便利道具が集まる倉庫（npmレジストリ）から、自分に必要な道具をダウンロードし、プロジェクト内で使えるように管理してくれる存在こそが npm なのだ。

よく目にするコマンドの正体

黒い画面（ターミナル）で打たされていたあのコマンドたちは、npm という優秀なマネージャーに与えていた「命令」だったのだ。ここで頭の片隅に置いておいて欲しいのは、npmは「プロジェクト内で使えるように管理してくれる」ということである。言われてみれば当たり前なのだが、意外と意識していない方が多い印象だ。

1. npm install（道具を買いに行く）

npm install axios

「axios（通信用の便利道具）を倉庫から取ってきて、このプロジェクトに配置して！」という命令。コマンドを叩いた時に出てくるあのプログレスバー（白いバー）は、マネージャーが裏で必死にインターネットから道具をダウンロードしてきている最中の作業メーターだったというわけだ。

ちなみに単に npm install とだけ叩くと、「このプロジェクトで必要な道具リスト（後述する package.json）」に載っている道具をまとめて一括ダウンロードしてくれる。

2. npm run ○○（登録されたスクリプトを実行する）

npm run dev

「あらかじめ登録しておいた開発用サーバー立ち上げコマンド（dev）を実行して！」という命令。

3. npm create ○○（新プロジェクトの雛形を作る）

npm create astro@latest

「Astroフレームワークの最新のセットアップ（雛形構築）を開始して！」という命令。

プロジェクトの中に現れる謎のファイルとフォルダ

npm でパッケージをインストールすると、プロジェクト内に見慣れないファイルやフォルダが自動的に生成される。これも正体が分かれば怖くない。

• package.json（道具の注文書・設定ファイル）：「このプロジェクトでは何の道具（パッケージ）を使うのか」「どんなコマンド（run）が使えるのか」が書かれた指示書。人間でいう買い物リストのようなもの。
• node_modules/（道具箱）：npm install でダウンロードしてきた実際のコード（便利道具）が詰まっている巨大なフォルダ。手動で中身をいじることは基本的になく、すべて npm が自動管理してくれる。

まとめ

黒い画面で言われるがままに打ち込んでいた npm。その正体は、開発者がゼロからすべてを作らなくても済むように、世界中の便利道具（パッケージ）を調達・管理してくれるWeb開発における最強の相棒だった。

• npm: Node Package Manager（JavaScriptの便利道具の買い出し係）
• npm install: 必要な道具をダウンロードして node_modules に保存する作業
• package.json: プロジェクトに必要な道具が書かれた注文リスト

次に黒い画面で npm install を叩いて白いバーが流れた時は、ぜひ心の中でこう呟いてみてほしい。

「よしよし、npmが今日も便利道具を買い出しに行ってくれているな」と。