UIフレームワークの「Material-UI」は、Material Designを踏襲したReactコンポーネントであるが、Webアプリ全般における「Bootstrap」の知名度や実績には遠く及ばない。github stars数からも認識できることだが、Reactアプリ開発ともなると状況は一変して、やはり「Material-UI」が使われるケースのほうが多いように思う。

とはいえReactアプリ開発にも「Bootstrap」を導入したいケースがあるかもしれない。たとえば既存アプリと整合性を保つためだったり使い慣れていたりで、依然として需要があることだろう。

このエントリーでは、Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介したい。

react-bootstrap について

react-bootstrapは、言わずと知れたフロントエンドフレームワーク界の雄「Bootstrap」をReactコンポーネントとして再構築したUIフレームワークだ。Reactコンポーネント構築に際して、jQueryを廃すことで純粋なUIフレームワークに昇華している。

特徴

• プレーンBootstrapのスタイルシートに完全依存
• jQueryなど不要な依存関係を廃している
• Reactコンポーネント化されている

react-bootstrap に触る

さっそくreact-bootstrapに触れていこう。

インストール

まずモジュールパッケージをインストールする。インストールするものは次の２つ。

• react-bootstrap
• bootstrap

$ npm install react-bootstrap bootstrap
# or
$ yarn add react-bootstrap bootstrap

CSSを設置

import

前述したとおりプレーンBootstrapのスタイルシートに完全依存したものであるためreact-bootstrapはCSSファイルを含まず、プレーンBootstrapのCSSファイルをimportすることでスタイルを適用する。

import 'bootstrap/dist/css/bootstrap.min.css';

このCSSファイルは、Bootstrap全般のスタイルシートを含むため、index.jsやApp.jsなどのルートコンポーネントに読み込ませるとよいだろう。

CDN

もし上述のCSS importをしたくないならば、CDNからCSSを読み込む手段がある。これの利点としては、ユーザーが別サイトで当該CDNサービス経由でCSSを読み込んでいた場合に限り、ロード時間が短縮されてユーザビリティに寄与します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">

コンポーネントを設置

パッケージモジュールから各種エクスポートコンポーネントをインポートする。対象コンポーネントのディレクトリまで明示する方法と分割代入でインポートする方法がある。およそのケースで分割代入が便利だろうと思う。以下はボタンコンポーネントをインポートしている。

import Button from 'react-bootstrap/Button';
// or
import { Button } from 'react-bootstrap';

デモンストレーション

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "react-bootstrap"; // ?
import "bootstrap/dist/css/bootstrap.min.css"; // ?

function App() {
  return (
    <div className="App">
      <Button variant="primary">Primary</Button>{/* ? */}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

まとめ

Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」の紹介だった。

プレーンBootstrapを使うときとの相違点として、JSX形式で記述することが挙げられる。本来ならば対象タグにclassを付与することでUIを形成していたが、react-bootstrapはコンポーネントとして読み込み、コンポーネント名のタグを設置する。非常に明快な仕様だと感じた。スタイルテーマにおいても属性(props)で操作が可能だ。Reactアプリ開発でUIフレームワークの導入を求められたならば、検討してみてはいかがだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。