【ぶーとすとらっぷ】
Bootstrap とは？
💡 Webデザインの「既製品カタログ」
📌 このページのポイント
- ボタン・フォーム・ナビバーなど完成されたUIパーツがすぐ使える
- レスポンシブデザイン（スマホ対応）が標準で組み込まれている
- クラス名を書くだけでグリッドレイアウトが簡単に作れる
- 世界で最も使われているCSSフレームワークの一つ
ひよこ Bootstrapって何がうれしいの？
ペンギン先生 CSSを一から書くのって大変なんだ。ボタンの角丸やホバー効果、スマホ対応のレイアウト…全部自分で書いてたら日が暮れちゃう。Bootstrapは「class="btn btn-primary"」って書くだけでキレイなボタンが出てくるんだよ。
ひよこ レスポンシブデザインって何？
ペンギン先生 PC・タブレット・スマホで画面の幅が違うよね。それぞれに合わせてレイアウトを自動調整するのがレスポンシブデザインだよ。Bootstrapのグリッドシステムを使えば「PCでは3列、スマホでは1列」みたいな配置が簡単にできるんだ。
ひよこ Bootstrapで作ったサイトって全部同じに見えない？
ペンギン先生 ひよこ 最新のBootstrapはどんな感じ？
ペンギン先生 Bootstrap 5ではjQueryへの依存がなくなって、バニラJavaScript（素のJavaScript）だけで動くようになったよ。軽量化されたし、ユーティリティクラスも充実してTailwindに近づいた部分もあるんだ。
ペンギン先生 使えるけど、ここが厄介なポイントでね。BootstrapのJavaScriptは直接DOMを操作するんだけど、ReactやVueは仮想DOMで管理しているから、両者がケンカすることがあるんだ。だからreact-bootstrapやBootstrapVueみたいなラッパーライブラリを使うんだけど、本家のバージョンアップに追従が遅れたり機能が足りなかったりして、どの組み合わせで使うかの判断はベテランでも悩むところなんだよ。
まとめ：ざっくりこれだけ覚えればOK！
「Bootstrap」って出てきたら「Webサイトのデザインを手軽にいい感じにしてくれるパーツ集だな」と思えればだいたいOK！
📖 おまけ：英語の意味
「bootstrap」 ＝ ブーツのつまみ紐（自力で引き上げる）
💬 「自分のブーツの紐を引っ張って自分を持ち上げる」＝ゼロから素早く立ち上がるという意味。Web開発を素早くスタートできることにかけているよ