Bootstrap - 環境設定
こんにちは、Web開発者の卵さんたち！ Boostrapの世界に誘うガイドとして、私があなたたちの旅に浮かれています。コンピュータサイエンスの教師として多年間の経験を持つ者として、多くの生徒がBoostrapがどのようにして彼らのWeb開発スキルを変えるかを気づいたときに輝くのを見てきました。では、さっそくBootstrap環境を設定しましょう！
Bootstrapとは？
始める前に、Bootstrapとは何か簡単に復習しましょう。想像してみてください、家を建てているとします。Bootstrapは、丈夫で見栄えのする家を素早く建てるための予製キットのようなものです。Web開発の言葉で言うと、強力なフロントエンドフレームワークで、事前に構築されたコンポーネントとスタイルを提供し、レスポンシブでモバイルファーストのウェブサイトを簡単に作成するためのものです。
コンパイル済みCSSとJS
Bootstrapを使い始める一番簡単な方法は、プロジェクトにそのコンパイル済みのCSSとJavaScriptファイルを含めることです。すぐに使えるツールキットを手に入れるようなものです。自分でツールを組み立てる必要はありません！
以下に、HTMLファイルにBootstrapを含める方法を示します：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のBootstrapページ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- あなたのコンテンツはここに -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>この例では、BootstrapのCSSファイルを<head>セクションにリンクし、JavaScriptファイルを閉じる</body>タグの直前に含めます。これにより、スタイルが最初にロードされ、ページコンテンツがロードされた後にJavaScriptが実行されます。
ソースファイル
もしあなたが凝り性でカスタマイズを好む人(将来の開発者たち、あなたがそうだね！)の場合、Bootstrapもソースファイルを提供しています。これらはSassとJavaScriptで書かれたBootstrapの原材料です。
ソースファイルを使うためには、GulpやWebpackなどのタスクランナーを使ってビルドプロセスを設定する必要があります。これは少し高度な内容なので、次のレッスンにまわします。ただし、これは预制パンを作るのではなく、からだのレシピと材料でケーキを焼くようなものだと思ってください！
jsDelivrを通じたCDN
CDNはコンテンツデリバリネットワークの略で、世界中の図書館に複数のコピーを持つ本のようなものです。ユーザーは最寄りのコピーを素早くアクセスできます。jsDelivrは無料でオープンソースのCDNで、Bootstrapファイルをホストしています。
以下に、jsDelivrを通じてBootstrapを使う方法を示します：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>integrityとcrossorigin属性はセキュリティのためのものです。これは、あなたが期待する正確なファイルを受信していることを確認するための秘密の握手のようなものです。
パッケージマネージャー
より高度なプロジェクトでは、npmやyarnなどのパッケージマネージャーを使うかもしれません。これらはプロジェクトの依存関係を管理するためのツールで、Web開発のレシピに必要な材料を全部管理する個人的なアシスタントのようなものです。
npmを使ってBootstrapをインストールするには、ターミナルを開いて以下のコマンドを入力します：
npm install bootstrapその後、JavaScriptファイルでBootstrapをインポートするには以下のようにします：
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';HTMLテンプレート
では、これら全部を基本的なHTMLテンプレートにまとめましょう：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrapデモ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hello, Bootstrap World!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>このテンプレートには、必要なメタタグ、BootstrapのCSSとJSファイルをCDN経由でリンクするためのもの、そして「Hello, Bootstrap World!」というシンプルな見出しを含めています。
結論
おめでとうございます！あなたは刚刚Bootstrap環境を設定しました。これは、あなたがツールボックスを開いてすべての道具を並べたようなものです。今あなたは素晴らしい、レスポンシブなウェブサイトを建てる準備ができています。
忘れないでください、Bootstrap（または他の技術）をマスターする鍵は練習です。実験を恐れず、間違えを犯してください。それが私たち全員が学ぶ方法です。私の教師としての年月の中で、生徒たちがBootstrapを使って素晴らしいウェブサイトを短期間で作成するのを見てきました。
次のレッスンでは、Bootstrapのグリッドシステムを使ってレイアウトを作成する方法を学びます。これは楽しみですから、乞うご期待！
ハッピーコーディング、そしてあなたのウェブサイトが常にレスポンシブであることを祈っています！ ??
| 方法 | 説明 | 使用の容易さ | カスタマイズ性 |
|---|---|---|---|
| コンパイル済みCSSとJS | 事前にコンパイルされたBootstrapファイルを使用 | 易しい | 限定的 |
| ソースファイル | Bootstrapの原材料ファイルを使用 | 高度 | 高い |
| CDNを通じてjsDelivr | CDN上にホストされているBootstrapファイルにリンク | 非常に易しい | 限定的 |
| パッケージマネージャー | npmまたはyarnを使ってBootstrapをインストール | 中程度 | 中程度 |
Credits: Image by storyset