VSCodeのターミナルでBootstrapをインストールしたい

Question

udemyやドットインストールで学習をしている初心者です。
現在VSCodeの使い方について学習しています。
「統合ターミナルでコマンドラインを作業してみる」という項目を進めています。

VSCodeのターミナルの規定をコマンドプロンプトにしています。
npm(Node Package Manager)を使ってBootstrapをインストールするという作業をやっています。Node.js はインストールしていますので、

npm -v
8.1.0

とNode.jsのバージョンは確認できます。
しかし、実際にGUI上でNode.jsを開くと以下の画像のようにバージョンが異なっています。

教材によるとここでBootstapの公式ページ
https://getbootstrap.jp/

のInstalltion に記述してある以下のコマンドをコピーしてコマンドプロンプトに
打ち込んでやると

npm install bootstrap@next
gem install bootstrap -v 5.0.0.beta1

ダウンロードとインストールが始まると解説してあります。
ところが、１行目の

npm install bootstrap@next

を打ち込むと以下のようなエラーが出ます。

Microsoft Windows [Version 10.0.22000.318]
(c) Microsoft Corporation. All rights reserved.

C:\Users\●●●\VSCode>npm -v
8.1.0

C:\Users\●●●\VSCode>npm install bootstrap@next
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\●●●\AppData\Local\npm-cache\_logs\2021-11-24T04_48_22_889Z-debug.log

C:\Users\●●●\VSCode>

さらに続けて

gem install bootstrap -v 5.0.0.beta1

と打つと

C:\Users\●●●\VSCode>gem install bootstrap -v 5.0.0.beta1
'gem' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

とエラーが出ます。

どこで間違っているのか見当がつきません。

ウェブ上でダウンロードするのではなく、VSCodeを使ってシームレスに作業を進めるというのが
今回の項目の趣旨のようです。

何が間違っているのか見当のつく方いらっしゃいましたら教えて下さい。
よろしくお願いいたします。

Answer 1

バージョン違いについては既に指摘がありますが、Node.jsのバージョンとnpmのバージョンは異なるので問題ありません。
https://nodejs.org/ja/download/releases/

過去には@nextの定義があったように見受けられます。

what is npm i bootstrap@next?
https://stackoverflow.com/questions/43327319/what-is-npm-i-bootstrapnext

{ name: 'bootstrap',
  description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
  'dist-tags': { latest: '3.3.7', next: '4.0.0-alpha.6' },
  versions: 
   [ '0.0.1',
     '0.0.2',
     '3.1.1',
     '3.2.0',
     '3.3.0',
     '3.3.1',
     '3.3.2',
     '3.3.4',
   ...

ただ現在ではdist-tags:の項目にnextは見当たりません。

C:\Users\username>npm view bootstrap

bootstrap@5.1.3 | MIT | deps: none | versions: 50
The most popular front-end framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com/

keywords: css, sass, mobile-first, responsive, front-end, framework, web

dist
.tarball: https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz
.shasum: ba081b0c130f810fa70900acbc1c6d3c28fa8f34
.integrity: sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
.unpackedSize: 8.7 MB

maintainers:
- bootstrap-admin <[e-mail]>
- mdo <[e-mail]>
- xhmikosr <[e-mail]>

dist-tags:
latest-3: 3.4.1  latest-4: 4.6.1  latest-5: 5.1.3  latest: 5.1.3

published a month ago by xhmikosr <[e-mail]>

また npm view bootstrap@next の結果は何も返ってきません。

C:\Users\username>npm view bootstrap@next

C:\Users\username>

また上記stackoverflowの回答のコメントに以下の記述がありました。

this completely unrelated to angular-cli. it's an NPM thing. The tag next is something the bootstrap team chose. I believe it just means the latest non-release ie, the latest beta version or release candidate version –

Ahmed Musallam
Apr 10 '17 at 15:45

also, I'd stay away from @next and alpha or beta versions because they are not stable. That, off course if you want to go to production with your app. If you understand the risks or you need a very specific feature that is in the alpha version, go ahead, But know that alpha versions constantly change and might creak your app's css

ざっくりいえば@nextはbootstrapチームが定義したαバージョンなどが定義されてるものだと思う、といったような内容だと思います。

過去の「npm view bootstrap」の結果で

next: '4.0.0-alpha.6'

とαバージョンを示していることからも間違いないかと思います。

・現在のnpm view bootstrapの結果にnextの定義が見受けられないこと。
・npm view bootstrap@next を実行しても何も返ってこないこと
・現在取得可能な最新バージョンは下記の通り5.1.3でありそれより最新のalphaバージョンがないこと
これらの理由から、nextの定義が消され現在は@nextは使用できないものと思われます。

C:\Users\username>npm view bootstrap versions

[
  '0.0.1',         '0.0.2',         '3.1.1',
  '3.2.0',         '3.3.0',         '3.3.1',
  '3.3.2',         '3.3.4',         '3.3.5',
  '3.3.6',         '3.3.7',         '3.4.0',
  '3.4.1',         '4.0.0-alpha.2', '4.0.0-alpha.3',
  '4.0.0-alpha.4', '4.0.0-alpha.5', '4.0.0-alpha.6',
  '4.0.0-beta',    '4.0.0-beta.2',  '4.0.0-beta.3',
  '4.0.0',         '4.1.0',         '4.1.1',
  '4.1.2',         '4.1.3',         '4.2.1',
  '4.3.0',         '4.3.1',         '4.4.0',
  '4.4.1',         '4.5.0',         '4.5.1',
  '4.5.2',         '4.5.3',         '4.6.0',
  '4.6.1',         '5.0.0-alpha1',  '5.0.0-alpha2',
  '5.0.0-alpha3',  '5.0.0-beta1',   '5.0.0-beta2',
  '5.0.0-beta3',   '5.0.0',         '5.0.1',
  '5.0.2',         '5.1.0',         '5.1.1',
  '5.1.2',         '5.1.3'
]

教材によるとここでBootstapの公式ページ
https://getbootstrap.jp/
のInstalltion に記述してある以下のコマンドをコピーしてコマンドプロンプトに

Installtion のリンク先をちゃんと確認しましょう。
https://getbootstrap.jp/docs/5.0/getting-started/download/

各パッケージマネージャ毎のインストール方法が記述されており、

npm install bootstrap@next

と

gem install bootstrap -v 5.0.0.beta1

は同じことをしており、両方実施する必要があるわけではありません.

また本家を確認すると
https://getbootstrap.com/docs/5.1/getting-started/download/#npm

npm install bootstrap

となっています。（日本語のサイトで@nextが付いているのは、翻訳が古いのでしょう）
これはnpm view bootstrapの実行で確認できますが、5.1.3がインストールされますので、これを実行すればよいと思います。

Comments

[blueletter5]

@next　を外すとうまく行きました。
後、ファイルやフォルダでnode_moduleなどが非表示と設定されていましたので表示に変えるとエクスプローラーにも反映されました。
ご丁寧な解説ありがとうございました。

[Crimson_Tide]

うまくいったようで良かったです。
正しいインストール方法は正確にはわからないですが、手元の環境だと
npm install bootstrapの実行で
下記メッセージが出ましたが問題なかったでしょうか？
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\omaila2525\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\omaila2525\package.json'
npm WARN bootstrap@5.1.3 requires a peer of @popperjs/core@^2.10.2 but none is installed. You must install peer dependencies yourself.

問題なければ以下は気にしないでください。

もし出ていたら原因と対策を別途調べて頂きたいですが、
ざっくりですけど
1)インストールしたいフォルダに移動した上で
2) npm init -force を実行
これによりpackage.jsonが作成される
※本来は-forceをつけずに、必要な情報を応答メッセージに対して入力
3) @popperjs/core@^2.10.2 が必要といってるので、
「npm view @popperjs/core 」を実行し、2.10.2が実行されるのを確認したうえで
4)npm install @popperjs/core を実行してインストール
5)再度 npm install bootstrap 実行で

npm WARN nodejs_bootstrap@1.0.0 No description
npm WARN nodejs_bootstrap@1.0.0 No repository field.

+ bootstrap@5.1.3
updated 1 package and audited 3 packages in 1s

3 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

以上のような表示になりました。
まだ警告が出ていて何かしら設定が必要なのかもしれませんが、本質問では対象外だと判断して特に調べていません。
以上御参考まで

Answer 2

npm -v

8.1.0
とNode.jsのバージョンは確認できます。

これは、Node.jsのバージョンではなく、npmコマンドのバージョンですね。

なので、

実際にGUI上でNode.jsを開くと以下の画像のようにバージョンが異なって

かどうかは不明です。

npm install bootstrap@next

gem install bootstrap -v 5.0.0.beta1

上はnpmでのインストールですが、下のgemコマンドはruby用のコマンドですね。
これを実行するのが目的ですか？
インストールマニュアルとあるボタンの先のドキュメントを読むことをお勧めします。

を打ち込むと以下のようなエラーが出ます。

Microsoft Windows [Version 10.0.22000.318]
(c) Microsoft Corporation. All rights reserved.
C:\Users\●●●\VSCode>npm -v
8.1.0

これはエラーメッセージではありません。
エラーが表示されるのであればそれを提示してください。
※ ここについてはよく見てませんでした。 他の方が正しい回答をしていますのでそちらをご覧ください。

'gem' は、内部コマンドまたは外部コマンド、

rubyはインストールされていないんじゃないでしょうかね。

いずれにしても、bootstrapをインストールするための手順を確認してみてください。

Comments

[Crimson_Tide]

>を打ち込むと以下のようなエラーが出ます。
の箇所は表示が省略されていますね。展開すると「npm install bootstrap@next」実行時のエラー表示がでています。

[TakaiY]

おっと、呆けてましたね。 指摘ありがとうございます。

[blueletter5]

npm install bootstrap　と@nextを外すとうまく行きました。
ご回答ありがとうございました。