Bootstrapを使ったフロントエンド開発入門【導入編】

Webフロントエンド開発においてフレームワークを使わない機会というのは年々少なくなってきていると思います。むしろ昨今のWeb制作ではフレームワークを使って少ない費用と短い期間で必要最低限の機能を実装してリリースするというパターンがベターとされてきています。

本記事ではWebサイト、Webアプリケーション開発において最も有名なフレームワークといっても過言ではない Bootstrap(Bootstrap4) の概要と導入方法についてまとめていきたいと思います。

フレームワークとは

そもそもフレームワークを使ったことがない方やこれからweb制作に携わりたい方にとって「フレームワークってなんぞや」といった状態かもしれないので一応その定義について紹介しておきたいと思います。

フレームワークの定義は「開発・運用・意思決定を行う際に、その基礎となる規則・構造・アイデア・思想などの集合のこと。」です。（Wikipediaより引用）

よく似た使われ方でライブラリという言葉を聞く機会が多いかと思いますが、ライブラリとフレームワークは定義がそれぞれ異なります。ライブラリはよく使う機能を部品化して再利用可能な形で一まとまり（パッケージ）にしたものです。例えばWeb制作で有名なjQueryはライブラリの一つです。一方でフレームワークは全体の土台（骨組み）が予めできており、開発者はその土台（骨組み）に沿って自由に肉付けすることができるものです。

フレームワークのメリットは主に以下の二つが上げられると思います。

• 開発速度を高めることができる
• 一定のメンテナンス性を担保できる

Bootstrapとは

Bootstrapは元々Twitter社によって作られたフロントエンドフレームワークの一つです。現在オープンソースのプロジェクトとしてリリースされており、多くのWeb制作者に利用されています。記事執筆時点（2019/5/12）ではバージョン４が最新版となっていますので以降の説明ではBootstrap4の仕様に沿って説明していきます。

Bootstrapの導入方法

Bootstrapの導入自体はそれほど難しくありません。まずはBootstrapを提供する公式サイトを見てみましょう。
getbootstrap.com

Bootstrapを導入するにはダウンロードする方法とCDNを利用する方法の二つがあります。まずはダウンロードして利用する方法をみていきたいと思います。

ダウンロードして利用する方法

Compiled CSS and JSという見出しにあるDownloadボタンを押します。

ダウンロードしたファイルをエディタで展開すると以下のように複数のCSSファイルとJSファイルが確認できると思います。まずはCSSファイルの中身を見ていきましょう。

Bootstrapにはレイアウトや体裁を整える機能、配置や表示に関わる機能など多岐に渡ります。そこでBootstrapでは必要な機能をある程度分けて部分的に利用できるようにしてくれています。

getbootstrap.com

• bootstrap.css (bootstrap.min.css) 全部盛り
• bootstrap-grid.css (bootstrap-grid.min.css) グリッドシステムとFlexユーティリティのみ
• bootstrap-reboot.css (bootstrap-reboot.min.css) Rebootのみ

(＊RebootはBootstrap特有のリセットCSSです。ブラウザ毎のスタイル解釈を一定にすることができます。）

次にJSファイルの中身を見ていきましょう。
JSファイルは主にbootstrap.jsとbootstrap.bundle.jsに分けることができます。違いはプラグインで必要なpopper.jsを含むか含まないかです。

BootstrapのJavascriptはjQueryというライブラリを基本的に利用します。必要な場合は以下のリンク先からダウンロードしましょう。

jquery.com

では各ファイルの説明はほどほどにして早速サンプルのHTMLファイルを作成して読み込んでみましょう。
ここではダウンロードしたBootstrapファイルをもとにindex.htmlを作成しています。今回はCSS、JSファイルとも圧縮済のファイルを用意しました。

①ではbootstrap.min.cssをheadタグ内で読み込みます。
②ではjQueryファイル（jquery-3.4.1.slim.min.js）とbootstrap.bundle.min.jsを読み込みます。

ここで気をつけるべきポイントはJSファイルの読み込み順です。まず始めにjQueryファイルを読み込み、次にJavascriptファイルを読み込みます。

サンプルで作ったhtmlファイル（index.html）をローカルで展開してみます。サンプルでBootstrap特有のClassを入れてみましたが、BootstrapのCSSがちゃんと適用されています。

CDNを利用する方法

CDNとはContent Delivery Networkの略でインターネット上にキャッシュサーバーを分散配置して、ユーザーに最も近い経路でコンテンツを安定して高速配信する仕組みです。CDNを使うメリットは既に用意されている外部ファイルを絶対パスで読み込むことでダウンロードの必要なくBootstrapを利用できることにあります。以下の記述をダウンロードで利用したようにHTMLファイルへ配置すれば同様に利用することができます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

今回はBootstrap4の導入方法を紹介しましたが次回はBootstrapのレイアウト、グリッドシステムについて焦点を当てていきたいと思います。