npmを使って入れたパッケージが以下のディレクトリにいるのですが、このディレクトリに入れるのはおかしいのでしょうか？

Question

初心者です。気になったことがあったので質問させていただきます。
私の認識では、プロジェクトを作成したらそのプロジェクトファイルの中に必要なパッケージをnpmを使って入れていくイメージなのですが、$npm listとコマンドを打つと以下のように表示されます。
おそらくプロジェクトの中にパッケージが入っていないことを意味していると思うのですが、パッケージがこのコードが示しているディレクトリにいるのは不自然でしょうか？
また、不自然と言うことであれば、どうすればプロジェクトファイルの中にパッケージを入れることができるのでしょうか？

初心者なため、この質問が意味不明な質問でしたら申し訳ありません。

$npm listを実行したときに表示されるコード

田中　太郎@ C:\Users\田中　太郎
├── @emotion/css@11.10.0
├── babel-plugin-styled-components@2.0.7
├── emotion@11.0.0
├── gulp@4.0.2
├── next@12.3.1
├── node-sass@7.0.1
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── stylelint-declaration-block-no-ignored-properties@2.5.0
└── stylelint@14.16.1

Comments

[miyabi_pudding]

そこはグローバル領域なので、
パスが通ってさえいれば、全領域でパッケージが有効となりますが、
プロジェクト（ローカル領域）にだけ入れたい場合ってことでしょうか？

また、パッケージをインストールした時に打ったコマンドを提示できれば、提示お願いします。

[y_waiwai]

なぜ、不自然だ、と思うのか理由を述べましょう

[hoshi-takanori]

npm list -g じゃなくて npm list でそれが表示されるってことですよね。
ホームディレクトリに node_modules が作られちゃってるように見えますね。

[sino3325]

ご指摘ありがとうございます。

miyabi_takatsukさん
> プロジェクト(ローカル領域)にだけ入れたいという意味です。
パッケージをインストールしたときに打ったコマンドは1か月ほど前だと思うので、すいません覚えていません。おそらくグローバルインストールをしたのだと思います。
y_waiwaiさん
>不自然だと思う理由は、作成したプロジェクト名(フォルダ名)が「hoge」の場合で「$npm list」を実行すると以下のように表示され「hogeフォルダの中に$npm iで入れたパッケージ達がいますよ」という構造になるのが僕としては自然だと思うからです。(つまり、自分が作成したプロジェクトの中にパッケージを入れて、そのパッケージをそのプロジェクトで使うのが綺麗な構造だと思うので、今回のようにプロジェクトの外側にパッケージが存在してしまっているのが、プロジェクトを作って開発する上で綺麗じゃないので不自然ということです。)
田中　太郎@ C:Users\田中　太郎\Desktop\npmnpm
├── @emotion/css@11.10.0
├── babel-plugin-styled-components@2.0.7
├── emotion@11.0.0
├── gulp@4.0.2
├── next@12.3.1
├── node-sass@7.0.1
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── stylelint-declaration-block-no-ignored-properties@2.5.0
└── stylelint@14.16.1

hoshi-takanori
>私もそう思います。

[hoshi-takanori]

ホームディレクトリなど npm のプロジェクトじゃない場所 (package.json がない場所) で -g をつけずに npm install すると、その場所に node_modules や package.json が作られるような。これはグローバルインストールとはまた違いますよね。
プロジェクトじゃない場所に node_modules があるのは不自然だと私も思うので、それは消して、正しい場所 (プロジェクトがある場所またはグローバル) にインストールし直すのが良いのでは。

Answer 1

npm list実行時に実行したディレクトリがnodeJSのプロジェクトフォルダならそのプロジェクトに導入されているパッケージが表示されます(以下、自身のプロジェクトの例です)

campgame@0.0.2 D:\projects\CampGame
+-- expose-loader@1.0.3
+-- phaser@3.55.2
+-- ts-loader@8.4.0
+-- typescript@4.9.5
+-- url-loader@4.1.1
+-- webpack-cli@4.10.0
+-- webpack-dev-server@3.11.3
`-- webpack@5.75.0

書式は、[プロジェクト名]@[バージョン] [ディレクトリ]となります。
今回の場合、おそらくあなたのユーザーフォルダ(C:\Users\田中　太郎)がnodeプロジェクトになっています。おそらくパッケージのインストール時にカレントディレクトリの移動を忘れたか、-gオプションをつけ忘れたのでしょう。仮に、C:\Users\田中　太郎\hugeにパッケージをインストールしたいなら、まず、cd C:\Users\田中　太郎\hugeで移動してから、npm initやnpm install -s [パッケージ名]を入力すればうまくいくと思われます。また、C:\Users\田中　太郎\hugeに導入されているパッケージの確認の際も、cd C:\Users\田中　太郎\hugeで移動してから、npm listを実行すればうまくいくはずです。(説明下手ですみません)