てんハロ運営者

どもども
今回は「npm / yarn / pnpm の違い」について解説します。

バグヲ

種類が多くて混乱しそう…

てんハロ運営者

こんなあなたにピッタリな記事👇

• npm / yarn / pnpm の違いがよく分からない
• 結局どれを使えばいいの？
• ライブラリのインストール方法でつまずいている

がまぁまぁわかります！

Amazonギフトカードが毎月必ずもらえる！

Next.jsの「use client」とは？サーバーコンポーネントとクライアントコンポーネントの違い

Next.jsの "use client" の意味と、サーバー・クライアントコンポーネントの違いを初心者向けに解説します。

it-bokenki.com

パッケージマネージャーとは？

前提として、パッケージマネージャーとは「開発に必要なライブラリを管理するツール」です。

たとえば、Reactを使いたいときに以下のように書きます。

npm install react

これで React という便利なライブラリをプロジェクトに追加できます。
この「インストール」や「管理」を行うのが npm / yarn / pnpm です。

npm / yarn / pnpm の違いざっくり比較！

以下が npm / yarn / pnpm のざっくり比較表です。

コマンドの書き方の違い

実務での使用割合は？

2024年現在の傾向をふまえると、以下のようなシェアになっています。
（海外アンケートや実務現場の感覚をもとにした目安です）

各パッケージマネージャーの特徴

✅️ npm（エヌピーエム）

• Node.jsに最初から入っている「標準の道具」
• ほとんどの解説サイトやプロジェクトで使われている
• まず迷ったらこれでOK！
  
   →「npm install」で始めよう！

✅️ yarn（ヤーン）

• Meta社（旧Facebook）がnpmの欠点を補って登場
• インストールが少し速く、コマンドもシンプル
• 一部の大規模プロジェクトや古めの環境でまだ使われている
  
   → yarn.lock があるプロジェクトではそのまま使おう

✅️ pnpm（ピーエヌピーエム）

• とにかく速くて、軽い。しかもスマート！
• 同じパッケージを再利用する「リンク方式」で容量節約
• ViteやTurborepoなど最近の人気フレームワークと相性抜群
  
   → 大規模開発やチーム開発で注目されている

結局どれを使えばいいの？

• 初心者で迷っている → npm （まずは王道）
• yarn.lock があるプロジェクト → yarn（無理に変えない）
• pnpm-lock.yaml がある or Vite系プロジェクト → pnpm（高速＆効率）

てんハロ運営者

おつかれさまでした！

async/awaitとPromiseの違いとは？

非同期処理が難しいと感じている方へ。async/await・Promise・try/catch の基本をやさしく解説します。

it-bokenki.com