bootstrap入門
Bootstrapとは
まず、フロントエンドとは？
Bootstrapはフロントエンドの開発で使うためのフレームワークですが、まずはフロントエンドが何かを説明します。
（厳密な定義からは逸脱しますが）今回のご説明の範囲では、フロントエンドとはHTML、CSS、JavaScriptを使って開発するブラウザ上のUI（ユーザ・インタフェース）部分と解釈いただければと思います。
ユーザが見ることができ、操作を行うことでシステムに命令を与えるための領域、とも言うことができます。
フロントエンドの開発で必要な技術要素は多岐に渡りますが、より詳細な情報については当社のエンジニアが書いた以下の記事を読むとご理解いただけるかと思います。
では、Bootstrapとは？
それではBootstrapのご説明ですが、Bootstrapはフロントエンドの開発で利用するCSSフレームワークに位置付けられます。
CSSはフレームワークを利用せずとも自前のコーディングで装飾を施すことができますが、Bootstrapをはじめとしたフレームワークを導入することで効率的にCSSを仕上げることが可能です。
特にBootstrapは後述の通り、HTMLの各要素へ規定のクラス名を指定するだけでデザインを実現できるなど、フレームワークを利用しない場合と比べて圧倒的に早くデザインを仕上げることができてしまいます。
またフレームワークであるため、一定のルールをもってコーディングできる点はチーム開発において有効であると考えることができます。
BootstrapはもともとTwitter社が開発し、2021年2月時点ではバージョン5.0.0が最新版となっています。
いまや世にCSSフレームワークは数多く存在しますが、Bootstrapはその先駆けとなるフレームワークでした。
Bootstrapを使うことによるメリット
上記でBootstrapを使うメリットに触れましたが、より詳細に特徴3点を説明していきます。
レスポンシブWebデザインに対応している
多くの方がBootstrapを使う最大のメリットとして挙げるのが、レスポンシブWebデザインに対応している点です。
レスポンシブWebデザインとはPC、タブレット、スマホ等のデバイスで異なる画面サイズにおいて、最適なレイアウトデザインへ切り替える手法です。
Bootstrapでは関単にレスポンシブWebデザインに対応したスタイル指定を行うことができ、デバイスごとに異なるHTMLを用意する手間を省くことができます。
導入のしやすさ、汎用性
Bootstrapの導入手順は後述しますが、とても簡単です。
また構築するプロダクトの規模や種類を問わずに利用できる汎用性があります。
このように手軽にデザインを反映できる点は大きなメリットと言えるでしょう。
コンポーネントが多数用意されている
Bootstrapではデザイン性に優れた各コンポーネント（ボタンやフォームなど）が提供されています。
さらにこれらのコンポーネントを利用するための手順は、各HTML要素に指定されたclassを追記するだけで実現できます。 非デザイナーのエンジニアでも、簡単な手順で一定レベルのデザインを実現できます。
以降では、定番となるコンポーネントを紹介したいと思います。
Bootstrapのセットアップ
それではここから簡単な使い方を紹介していきます。
まずはBootstrapを使える状態とするため、セットアップを行いましょう。
※今回はCDN（コンテンツ・デリバリー・ネットワーク）を使わず、Bootstrapをダウンロードして利用できる状態にしていきます。
まずは公式ページにアクセスし、Bootstrapをダウンロードしてください。
上記ページの「Compiled CSS and JS」配下のダウンロードボタンをクリックすると、Bootstrapのコード一式のダウンロードが開始されます。
ダウンロード完了後、Zipファイルを解凍するとcssフォルダとjsフォルダが表示されるはずです。
今回はこの2フォルダを任意のフォルダ配下にコピーし、同列にindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rakus</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Rakus!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>上記index.htmlではダウンロードしてきた「bootstrap.min.css」および「bootstrap.min.js」を読み込んでいる点をご確認ください。
またBootstrapではjQueryを読み込む必要があり、「bootstrap.min.js」よりも前に「jquery.min.js」を指定しています。
ファイルの作成が完了しましたら、ブラウザで確認してみましょう。
開発者コンソールも開き（WindowsであればF12、MacであればCommand ＋Option + I ）、特にエラーが表示されていなければセットアップ完了です。
