こんにちは。ソフトウェアエンジニアのY.Nです。
最近、運動がてらロードバイクでの通勤を初めてみました。時期のせいもあり、会社に着くころにはもう汗ダクダク。ですが、気分はいいですね。続けられるかぎりやってみようと思います。
それでは本題に入ります。今開発を進めているシステムで、社内向けの管理画面を用意することになりました。ページ構成や各画面のレイアウト・デザインなど何もないところから開発を進めるのですが、私デザインできません・・・。コーディングやCSSを組むのもあまり得意ではありません。ただそんな私でも実際に作る管理画面はカッコいいのにしたいと思うのです。さてどうしましょうか。
いろいろ対応方法を検討している中で、ふと過去に利用したことのあった Bootstrap を思い出しました。導入すれば簡単なコードで整ったデザインのページが出来上がります。CSSも特別意識する必要はなかったはずなので、これはもう導入してみるしかない！ということで今回はBootstrapの導入についてお話したいと思います。
この記事の内容
Bootstrapとは
まずはBootstrapについてです。公式サイトを見ると下記のように記載されています。
世界で一番人気のあるフロントエンドライブラリ Bootstrap を使って、モバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズできます。Sass変数と mixin、レスポンシブグリッドシステム、豊富なコンポーネント、強力な JavaScript プラグインを備えています。
複雑なHTMLやCSSを記述しなくても、簡単にWebページがデザインできるフレームワークで、フォームやメニュー、ボタンなどのパーツがテンプレート化されているので、それらを利用することで最低限のコードでデザインの整ったページを構築できます。レスポンシブにも対応しているので、利用する端末に応じてHTMLやCSSを調整する必要はありません。今回の要件には打って付けですね。
システムへの導入
現在開発中のシステムは Typescript + React の環境で開発しています。
Bootstrap を導入するには React と Bootstrap とを連携させる必要があります。React は最近覚え始めたところなので、先行き不安なところ・・・。
ですが、いざ導入するにあたっていろいろ調べてみると React Bootstrap なるライブラリがあるとのこと。React用に最適化されたBootstrapというこれもまた打って付けのライブラリです。さっそく導入してみましょう。
導入方法
まず必要なライブラリをインストールします。インストールするものは次の２つです。現状、react-bootstrapがBootstrap 4を対象に構築されているのでbootstrapは4系の最新のバージョンを指定します。
- react-bootstrap
-
bootstrap@4.6.0
% npm install react-bootstrap bootstrap@4.6.0
CSSのインポート
次にBootstrapのスタイルを適用するためにCSSをインポートします。インポートする方法は以下の２通りです。
上位のコンポーネントでimport
index.js,App.jsなどの上位のコンポートで下記を指定してインポートします。
import 'bootstrap/dist/css/bootstrap.min.css';HTMLに埋め込み
HTMLへ下記タグを記述します。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>コンポーネントを設置
ここまででBootstrapのスタイルを利用する準備はできたので、あとはBootstrapにあったHTMLを出力するだけです。直接Bootstrap用にHTMLを記述するのでもよいのですが、今回はインストールしたreact-bootstrapのコンポーネントを利用して記述していきます。
必要なコンポーネントをインポート
インポートの記述方法は以下の２通りありますが、２つ目の記述だと利用していないコンポーネントも取り込まれてしまうため、１つ目の記述のように必要なコンポーネントのみ分けて記述してインポートするのが推奨されているようです。
import Button from 'react-bootstrap/Button';
import Table from 'react-bootstrap/Table';
// OR
import { Button, Table } from 'react-bootstrap';インポートしたコンポーネントに該当するタグを置き換え
各コンポーネントの各属性の指定方法については下記にて確認してください。
return (
<Table hover striped bordered>
<thead>
<tr>
<th>ユーザー名</th>
<th>メールアドレス</th>
<th>状態</th>
<th>設定</th>
</tr>
</thead>
<tbody>
{users.map((user) =>
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.mail}</td>
<td>{user.state}</td>
<td>
<Button variant="outline-secondary">編集</Button>
<Button variant="outline-danger">削除</Button>
</td>
</tr>
)}
</tbody>
</table>
);ブラウザで確認すると下記のようなページが表示されます。
出力されたHTMLは以下の通りです。コンポーネントを利用することで、直接HTMLを記述するよりも簡単にコードが書けるので良いですね。
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ユーザー名</th>
<th>メールアドレス</th>
<th>状態</th>
<th>設定</th>
</tr>
</thead>
<tbody>
<tr>
<td>ユーザーA</td>
<td>test@komari.co.jp</td>
<td>アクティブ中</td>
<td>
<button type="button" class="btn btn-outline-secondary">編集</button>
<button type="button" class="btn btn-outline-danger">削除</button>
</td>
</tr>
</tbody>
</table>その他コンポーネントの紹介
この他にもreact-bootstrapには様々なコンポーネントが用意されてます。今回全部は紹介しきれないですが、現在利用しているコンポーネントの利用用途としては以下の通りです。
ヘッダーメニュー
入力フォーム周り
画面レイアウト調整
- Layout > Grid system
- Container
- Row
- Col
- 各ページで表示する内容をCardsで囲ってスタイルを統一
- タブ切り替え
最後に
今回、react-bootstrap の導入について書きましたが、紹介しきれなかったコンポーネントが上記以外にも多々あります。Bootstrapの見た目もbootstrapで用意されてるCSSをカスタマイズして利用する方法もあるようです。まだまだ奥が深いですね。是非みなさん一度使ってみてはいかがでしょうか？
