はじめに
本記事は、アイレット株式会社 新卒 Advent Calendar 2023 の10日目です！
今回はWebアプリを作成する際に、UIフレームワーク「Bootstrap」を使用した件について、お話しします。
使用の背景
1ヶ月で多くの人々が良いと思って貰えるようなアプリを制作してプレゼンする、という研修がありました。
私は、その研修の中でWebアプリを制作するため、始めの1週間は仕様の策定、次の2週間でコーディング、最後の1週間で不具合修正と予備日を設ける計画を立てたので、約1週間でフロントエンドを制作する必要がありました。
そこで、フロントエンドの中でも特に時間がかかる、デザインの負担を減らすため、Bootstrapを使ってみました！
1. Bootstrapとは？
Bootstrapは、CSSとJSで構成されたUIフレームワークです。
npm等のパッケージマネージャからインストールするか、CDNでHTMLに直接インポートすることで、使用できます。
以下のコードは、公式ドキュメントから拝借したBootstrap版のHello World!です。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
2. Bootstrapの使い方
要素のクラス属性に使用したいコンポーネント名を指定します。
例えば、青色のボタンを使用したい場合は、
<button type="button" class="btn btn-primary">Primary</button>
button要素のclass属性にbtnとbtn-primaryを入れる事で、
青色のボタンを挿入できます。
コンポーネント？結局何があるの？という方は、
Bootstrapのチートシートが公式で公開されてますので、そちらをお読みください！
3. Bootstrapを導入するメリット
3.1. ビルドを必要としない
Bootstrapを使用するにあたっての大きなメリットです。
CSSやJSで構成されているので、HTMLファイルに直接インポートするだけで利用できます。
また、CDN経由で取り込むと、手元にBootstrapで必要なファイルが存在しなくても使用することができます。
3.2. 公式ドキュメントが豊富
ドキュメントには、各種コンポーネントの利用方法やカスタマイズ方法が記載されています。
例えば、ボタンのドキュメントを参照してみると…
- ボタンの追加方法
- ボタンの色
- ボタンのサイズ
- ボタンの無効化
- ボタンのトグル
などの一通りの利用方法が記載されており、
タグの依存関係やカスタマイズ方法までも説明されているので、他の文献等を調べる必要がありません。
分からない事があった際に、出来る限り公式文献以外を読みたくない人間なので、
私はとても助かりました！
3.3. クオリティを担保できる
UIフレームワーク全般に言えることになりますが、全体を通したデザインの統一や、あまり手を加えなくても「良い感じ」にしてくれます。
例えば、Bootstrapは、.text-primaryや.button-primaryなどのクラスを使用することで、
青色の文字やボタンになります。
このクラス単体でダークモードに対応しているため、
ブラウザ側でダークモードに変更しても、ダークモード対応の文字やボタンに変わります。
このように、文字色や背景色、さらにはダークモード対応用のCSSを新たに追加する必要がないため、フロントエンドの製作期間を少し短縮することができます。
4. Bootstrapを導入するデメリット
4.1. CSSの知識がある程度必要
タイトル詐欺ですが、CSSファイルからはサヨナラできますが、
CSSの知識からはサヨナラできません！！
例えば、余白の調整を行いたい場合、公式ドキュメントを確認してみると、marginとpaddingの概念が出てきます。
もちろん、CSSの知識がほとんど無くてもBootstrapは利用できるよう工夫はされていますが、
基礎的な部分を習得していると、より使い易さが体感できるかと思います。
4.2. カスタマイズ性
3番目のメリットの裏返しにはなりますが、UIフレームワーク側で「良い感じ」にしてくれるため、細かな部分の調整を行うことができません。
また、例えば「表」のコンポーネントを使用しなかった場合でも、Bootstrapを導入することで内包されるため、
業務利用の際、求めれている構成や要件に当てはまらない可能性があります。
フレームワーク導入にあたる注意点を解説してくださった記事がありましたので、
詳しくはそちらをお読みください
CSS フレームワーク導入時に気をつけること
さいごに
もし個人プロジェクトで制作期間を圧縮したい場合や、CSSに強烈な嫌悪感を感じている方は、
是非Bootstrapを導入してみてください！