[npmとpackgejson]npm とpackage.jsonについての備忘録 #Node.js

前書き

どうも！目先の利益を追って長期的な利益を失いがち、視野狭窄なグッピーです！
今回はまたまたnpmに関する理解がなくて仕事でミスをしたので、そのinputも兼ねて記事を書いていきたいと思います！

そもそもnpmとは？？

npmの正式名称はNode Packge Manegerです。npmの正式名称からも分かるように、Node.jsのパッケージを管理するツールです。Node.jsのパッケージとはあらかじめ用意された便利な機能群のことですね。

Node.jsとは

ならNode.jsとはなんぞやって話なんですけど、Unix系のプラットフォーム上のサーバーサイドスクリプト環境のことですね。簡単に言うとサーバーサイドでもJavaScriptを動かせるようにする環境のことですね。

※Unixとは・・・OSのこと。macやwindowsもUnixが使われているよ。
※osとは・・・・基本ソフトウェアのこと。ハードウェアやアプリなどの応用ソフトウェアを繋ぐ役割を果たしている。

Node.jsのメリットデメリット

メリット

軽量であるために、リアルタイムで複数人が使用する場合でも動作がもたつくことが少ないことがメリットに挙げられます。
また、サーバーへの接続台数が1万台以上担うと速度が遅くなるというC10K問題を解決できることも挙げられます
他にも、ウェブサイトのアセットを組み合わせて提供、つまりバンドル(webpack)するために使ったり、Cssを拡張するSassをCssに変換(node-sass)するために使ったり、テストツール(Jest)やコード検証ツール(ESLint)を使ったり、開発用の簡易webサーバー(webpack-dev-server)をローカルで立てるために使うために使用できたりするなど、多くのメリットが挙げられます。

デメリット

node.jsに対応しているサーバーなどが少なく、VPSなどを用いてインストールする必要があることです。
ちなみにVPSとは1台の物理的なサーバーの中に、仮想的に複数のサーバーを構築する仮想サーバ-のことです。

話は戻ってnpm

このようにnpmはNode.jsを管理するものですね。npm以外にもyarnというものもあるらしいですが、基本的にパッケージマネージャーであることには変わりがないです。

package.jsonについて

次にpackage.jsonについて解説していきます。そもそもpackage.jsonって何？？って話だと思うんですけど、package.jsonとは自身のパッケージ（=プロジェクトそのもの）を管理すつために使われるファイルのことです

package-lock.json

簡単に説明するとpackage.jsonを用いてパッケージをインストールした結果が記載されるファイルのことです。npm install実行時に新規作成され、インストールされたパッケージ情報が乗るものってことですね。そして、以下の点に注意しなければなりません。

・直接編集してはいけない
・基本的に無視していいファイル。
・削除してはいけない。プルリクするときにpackage-lock.jsonに変更があった場合は、その変更も含めて提出する

package.jsonとpackage-lock.jsonの違い

・package.json
→インストールすべきパッケージのバージョンの範囲
→その他諸々
・package-lock.json
→npm installによって実際にインストールしたパッケージのバージョンのみ

package.jsonの中身の解説

例えば僕が使っている以下のファイルのpackage.jsonがあります。

{
  "name": "ninjafood",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^1.4.3",
    "@heroicons/react": "^1.0.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@iconify-icons/heroicons-outline": "^1.1.4",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.13"
  }
}

namge,versionなどは単なるパッケージのメタデータなので無視していいです。機能的に重要なのは,dependencies,devDependencies,scriptsです。

dependencies&devDependencies

dependencyとはそのパッケージが依存する別のパッケージであり、package.jsonにはdependencyのパッケージメイトバージョンが描かれる。また、dependencyを編集するときはpackage.jsonを編集せず、npmを通じて行う。もし編集してしまった場合は、npm installを実行してnode_modules内のファイルを更新する必要があります。

また、dependenciesとdevDependenciesの違いなのですが、意味としては前者は実行に必要なパッケージ。後者は開発やテストのみ必要なパッケージです。

scripts

scriptsは簡単にいうとコマンドのエイリアスないし別名である。例えば以下のstartはnpm startで実行できる。
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
ただ、いくつかの名前は特別扱いされ、startは普通プログラムを実行するコマンドを指定し、testはテストをジックするコマンドを普通指定する。

また、 npm run は簡単なタスクランナーとして使えるため、何度も実行するコマンドはscriptとして登録すると開発を効率化できる。

最後に

以上がnpmとpackage.json周りの備忘録件解説でした！！
package.jsonについて理解が深まったのでよかったですね。
では、また違う記事で！グッピーでした！

参考にした記事

https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea
https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb
https://qiita.com/sugurutakahashi12345/items/3cc49926faeaf25d3051
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477