はじめに

React-Bootstrap には、UI を簡単に構築できる便利なコンポーネントが多数用意されています。
特に ListGroup、Modal、Accordion などを活用することで、使いやすく魅力的なインターフェースを作成できます。

この記事では、これらのコンポーネントの基本的な使い方を解説します。

ListGroup（リストグループ）

ListGroup はリストアイテムを整理するのに便利なコンポーネントです。
通常のリストの代わりに使用すると、視認性が向上します。

基本的な ListGroup

JSX
import ListGroup from "react-bootstrap/ListGroup";

function Example() {
  return (
    <ListGroup>
      <ListGroup.Item>アイテム 1</ListGroup.Item>
      <ListGroup.Item>アイテム 2</ListGroup.Item>
      <ListGroup.Item>アイテム 3</ListGroup.Item>
    </ListGroup>
  );
}

export default Example;

アクティブ・選択可能なリスト

クリック可能なリストアイテムを作成することもできます。

JSX
function Example() {
  return (
    <ListGroup>
      <ListGroup.Item action active>
        選択中のアイテム
      </ListGroup.Item>
      <ListGroup.Item action>アイテム 2</ListGroup.Item>
      <ListGroup.Item action>アイテム 3</ListGroup.Item>
    </ListGroup>
  );
}

export default Example;

Modal（モーダルウィンドウ）

Modal を使用すると、ポップアップウィンドウを簡単に作成できます。
フォームや通知の表示に適しています。

基本的な Modal

JSX
import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function Example() {
  const [show, setShow] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setShow(true)}>
        モーダルを開く
      </Button>
      <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>モーダルタイトル</Modal.Title>
        </Modal.Header>
        <Modal.Body>ここにモーダルの内容を表示</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(false)}>
            閉じる
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default Example;

Accordion（アコーディオン）

Accordion を使うと、折りたたみ可能なコンテンツを作成できます。
FAQ や詳細情報の表示に便利です。

基本的な Accordion

JSX
import Accordion from "react-bootstrap/Accordion";

function Example() {
  return (
    <Accordion>
      <Accordion.Item eventKey="0">
        <Accordion.Header>セクション 1</Accordion.Header>
        <Accordion.Body>ここに詳細な内容を表示します。</Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="1">
        <Accordion.Header>セクション 2</Accordion.Header>
        <Accordion.Body>追加の情報を表示できます。</Accordion.Body>
      </Accordion.Item>
    </Accordion>
  );
}

export default Example;

まとめ

ListGroup、Modal、Accordion は、ユーザーインターフェースを向上させるのに非常に便利なコンポーネントです。適切に活用して、より使いやすい UI を構築しましょう。