80974
[【Tailwind CSS #3】4つのインストール方法の紹介。オススメはPostCSSのプラグインとして使う方法
(YouTube)](https://www.youtube.com/watch?v=mzRxqknA9Jg)

上記の動画を見ていると、はじめ `postcss` を入れていたのですが、実行してみるとエラーになり、`postcss-
cli`を入れ直していました。（入れ直しているのは13分50秒あたりから）

<https://www.gatsbyjs.com/docs/tutorial/part-1/>  
にも

```

    $ npm install -g gatsby-cli
    
```

とありますが、一方で、  
<https://www.gatsbyjs.com/get-started/>  
には

```

    $ npm init gatsby
    
```

(gatsbyの場合は `npm install`と`npm init`の違いもあるのでそもそも違うもの？
ちょとインストール方法にバリエーションがありすぎて混乱しています）

とあり、やはり`cli`と`cli`なしがあります。

`command line interface
(CLI)`とのことですが、ターミナルで使うもののほうが多い気がしますというかターミナルで使わないとはどういう場面なのでしょうか？  
なにか慣習があるのでしょうか？

下記は画像になってしまいますし、本質問には蛇足かもしれないですが、現状私が理解しようとまとめかけている資料を念の為にのせます。

[![画像の説明をここに入力](https://i.stack.imgur.com/SPrVM.png)](https://i.stack.imgur.com/SPrVM.png)
CC BY-SA 4.0
2021-08-22T11:07:58.063
80967
2021-08-23T02:21:17.070
2021-08-23T02:21:17.070
3060
9008
question
node.js npm
npm でインストールできるパッケージ名に接尾語で cli が付くものと付かないものの違いは？
まず、`package.json`の仕組みを理解することをおすすめします。

  * <https://docs.npmjs.com/cli/v7/configuring-npm/package-json>

## npm install

npmパッケージをインストールする場合は`npm install ...`で終わりです。  
package.jsonに記述されているものをインストールしますし、lockファイルに無いものがpackage.jsonにあれば、それもインストールされ、lockファイルは更新されます。

## npm init

`npm init`はパッケージ管理ライブラリ`npm`が提供している初期化の方法です。

`create-[package
name]`などのパッケージ名（package.jsonのname）がnpmレジストリ内にあれば、それをダウンロードし、package.jsonの`bin`フィールドにあるCLIを実行します。

例えば、質問中にある`gatsby`だと、

  1. `npm init gatsby`を実行
  2. `create-gatsby`がヒット（`https://www.npmjs.com/package/create-gatsby`）
  3. package.jsonの"bin"フィールドのスクリプトが実行（`https://github.com/gatsbyjs/gatsby/blob/master/packages/create-gatsby/package.json#L5`）

といった形です。`gatsby-cli`はこの`create-
gatsby`に[依存](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-
cli/package.json#L21)しています（alpha版っぽいですが）。したがって、どちらも同じふるまいをしていることになります。

`npm init`の手順のほうが、gatsby-cliと比較してそれ自体のインストール手順が1つ省けるといった具合でしょう。

これは`npm`の処理の話なので、`yarn`や`pnpm`など他のパッケージマネージャーは話が違うかもしれません。

  * <https://docs.npmjs.com/cli/v7/commands/npm-init>

## 接尾後のcliあり/なしとは

これはただのパッケージ名です。これ自体に決まったルールではないため、何かに則った仕組みかどうかは私の知る限りではありません。

## ターミナルで使うもののほうが多い気がしますというかターミナルで使わないとはどういう場面なのでしょうか？

結構あります。[postcss](https://github.com/postcss/postcss)自体はpostcssというライブラリの主要な処理を持っています。これを利用して、webpackのビルドパイプライン用に[postcss-
loader](https://www.npmjs.com/package/postcss-
loader)があったり、未使用のcssを削除するための[purgecss](https://www.npmjs.com/package/purgecss)（tailwindcssが依存している）などがあります。

他にも静的解析ツールや、validationやplayground、エディターのType
Hintとか色々な場面で利用できます。ターミナルはあくまでのその一例に過ぎません。

## 動画中の間違い

一つ動画で（動きはするけども）間違いがあります。postcssをアンインストールする場面です。  
postcssをアンインストールしてpostcss-cliをインストールしていますが、postcss-
cliの依存関係を見てみると、`postcss`自体はdevDependenciesに記載があるため、インストールされません。peerDependenciesに書いていますがこれは8.0.0以降のバージョンをインストールすることをpostcss-
cliがユーザーに対して期待しているだけであってpostcssの実体は一緒についてきません。

postcss自体は[tailwindcss](https://www.npmjs.com/package/tailwindcss)が直接依存している[purgecss](https://www.npmjs.com/package/purgecss)が[dependenciesのフィールドに持っている](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss/package.json#L44)ためついてきているためであり、postcssをアンインストールして、postcss-
cliをインストールすることは本質的な解決になっていません。

## 整理のためのおすすめ

問題を整理するためには、`package.json`の仕様とパッケージマネージャ（`npm`）の振る舞いを分けて考えることです。  
`package.json`の仕様は固定であるためまずはそこから攻略することをおすすめします。`npm`の引数を変えて実行される処理は[npm](https://github.com/npm/cli)の実装の挙動でしかありません。パッケージマネージャを別のものに変えたらとたんに使えなくなるものがありますので、本質的な部分を理解しておくことをおすすめします。
CC BY-SA 4.0
2021-08-23T02:21:05.560
80974
2021-08-23T02:21:05.560
7997
80967
answer