Bootstrap 5をyarn・pnpmで導入する方法を完全解説！初心者でもわかるロックファイルとバージョン管理の基本
生徒
「npm以外にもyarnやpnpmでBootstrapを入れられるって聞いたんですけど、本当ですか？」
先生
「はい、本当です。npmと同じように、yarnやpnpmでもBootstrapを簡単に導入できますよ。」
生徒
「でも、どれを使えばいいのか分からないし、ロックファイルとかバージョン管理ってなんだか難しそうです…」
先生
「大丈夫です。今回は初心者の方でも安心して使えるように、yarnやpnpmでのBootstrap導入と、ロックファイル・バージョン管理についてやさしく解説しますね。」
1. yarnとpnpmとは？npmとの違いをやさしく解説
npm（エヌピーエム）は、パソコンに必要な部品（パッケージ）をダウンロードしてくれる便利なツールです。
それに対して、yarn（ヤーン）やpnpm（ピーネム）は、npmと同じことができるけど、より早く・効率よく動くように工夫されたツールです。
どれも基本的な使い方は同じなので、初心者でも心配いりません。
2. yarnを使ってBootstrap 5をインストールする手順
まず、yarnが使える環境で、以下のコマンドを実行してBootstrapをインストールします。
yarn init -y
yarn add bootstrap
これで「node_modules」というフォルダにBootstrapが入り、プロジェクト内で使えるようになります。
3. pnpmを使ってBootstrap 5をインストールする手順
pnpmは、ディスクの容量を節約してくれるのが特徴です。以下のように実行します。
pnpm init -y
pnpm add bootstrap
この方法でもBootstrapのCSSやJavaScriptをプロジェクトに追加できます。
4. インストール後のHTMLでの読み込み方法
インストール後は、HTMLファイルで以下のようにBootstrapのCSSを読み込みます。
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
5. Bootstrapのクラスを使って表示してみよう
インストールしたBootstrapを使って、実際にボタンを表示する例を見てみましょう。
<body>
<button class="btn btn-success">インストール成功！</button>
</body>
6. ロックファイルって何？初心者向けにわかりやすく解説
ロックファイルとは、「このバージョンのままで使ってくださいね！」と覚えておくためのファイルです。
yarnなら「yarn.lock」、pnpmなら「pnpm-lock.yaml」という名前になります。
このファイルがあると、他の人と同じ環境で動かすことができるので、プロジェクトが壊れにくくなります。
7. バージョン管理のコツとは？初心者が失敗しないために
Bootstrapのようなライブラリには、「バージョン」という番号があります。
たとえば「5.3.3」は、「メジャー：5」「マイナー：3」「パッチ：3」という意味です。
yarnやpnpmでインストールするときに、特定のバージョンを指定しておくと、あとで急にデザインが変わるのを防げます。
yarn add bootstrap@5.3.3
pnpm add bootstrap@5.3.3
8. 初心者が気をつけたいポイント
- ロックファイルは絶対に消さないこと（消すとバージョンがずれる）
- node_modulesフォルダも勝手に編集しない
- yarnかpnpmのどちらか1つだけ使うこと（混ぜない）
- バージョンを固定したいときは「@バージョン番号」を指定する
これらを守るだけでも、初心者でもトラブルなくBootstrapを使えるようになります。
9. yarnやpnpmはnpmより速くて軽い！
yarnはnpmよりも高速でエラーが出にくいと言われており、pnpmは容量をかなり節約できるのが特徴です。
どちらを選んでもBootstrapの導入方法はほぼ同じなので、気に入った方を使ってOKです。
初心者の方も、まずはどちらかを試して、使い方に慣れていきましょう！
この記事を読んだ人からの質問
