【初心者】Next.jsでBulletproof Reactの5原則 & 実装方法

この記事では
Bulletproof Reactを知らない人に
Next.jsでBulletproof Reactを実装する方法
を解説します。

Reactは、フロントエンド開発において
最も人気のあるライブラリの1つです

しかし、Reactコードを作成する時
コンポーネントの状態管理、エラーハンドリング、アクセシビリティなど
懸念事項を解決する必要があります

これらの課題に対処するために
Bulletproof Reactという新しい開発手法があります

対象読者

Next.jsの初心者
コンポーネント構成に悩む人
Bulletproof Reactを知りたい人

本記事の内容

Bulletproof Reactとは何か？
Bulletproof Reactの原則
Bulletproof Reactのメリットとデメリット
Next.jsでBulletproof Reactコンポーネントを実装する方法
まとめ

1. Bulletproof Reactとは何か？

Bulletproof Reactは、以下の5つの原則に基づいています

Bulletproof Reactの5原則

コンポーネントは状態を持たないようにする
エラーハンドリングを一貫して行う
アクセシビリティを優先する
保守性を高める
コード品質を向上させる

これらの原則に基づいて、
コンポーネントの設計やアプリケーションの実装を行うことで、Bulletproof Reactを実装することができます。

具体的には、
コンポーネントの状態は親コンポーネントによって管理し、
エラーハンドリングは一貫して行うようにします。

また、WAI-ARIA規格に準拠したアクセシビリティを実装することで、
アプリケーションが障害者にとっても利用しやすくなります。

WAI-ARIAは、アクセシビリティを向上させるためのウェブ規格
視覚障がい者などのユーザーに優しいウェブアプリケーション開発に使用される
https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics

さらに、コンポーネントの再利用性を高めるために、
コンポーネントは状態を持たないように設計する必要があります。

また、コンポーネントの状態管理を親コンポーネントに移すことで、
アプリケーションの保守性を高めることができます。

そして、コードの品質を向上させるためには、コンポーネントの重複を避けるように設計し、コードの品質を向上させる必要があります。

2. Bulletproof Reactの5原則（詳解）

Bulletproof Reactで
守るべき5原則について解説します

Bulletproof Reactの5原則

コンポーネントは状態を持たないようにする
エラーハンドリングを一貫して行う
アクセシビリティを優先する
保守性を高める
コード品質を向上させる

1. コンポーネントは状態を持たないようにする

コンポーネントは状態を持たないように設計し、
代わりに状態は親コンポーネントによって管理されます。

コンポーネントが状態を持たず、
親コンポーネントが状態を管理する例です
↓

import { useState } from 'react';

interface Props {
  items: string[];
  onItemClick: (item: string) => void;
}

const MyComponent = ({ items, onItemClick }: Props) => (
  <ul>
    {items.map((item, index) => (
      <li key={index} onClick={() => onItemClick(item)}>
        {item}
      </li>
    ))}
  </ul>
);

この例では、MyComponentは
親コンポーネントからitemsとonItemClickを受け取り、
ul要素内にitemsの各要素をリストアイテム
として表示しています。

map関数を使用して、
itemsの各要素に対してリストアイテムを生成しています。
コンポーネントをクリックされた時に
onItemClick関数が呼び出されます

このように、
MyComponentは単純で再利用可能なコンポーネントになり、
状態に依存することなくデータのレンダリングを処理することができます

また、アロー関数を使ってコールバックを書き直すことで、
コンポーネントの品質を向上させることができます。
アロー関数は、新しい関数を毎回生成することがなく、
パフォーマンスを向上させるためにも有用です。

2. エラーハンドリングを一貫して行う

エラーハンドリングを一貫して行い、
アプリケーションの品質を向上させます。

コンポーネント内でエラーが発生した場合に、
エラーをキャッチしてエラーメッセージを表示する例です
↓

interface Props {
  items: string[];
}

class MyComponent extends React.Component<Props> {
  // コンストラクターでstateオブジェクトを初期化する
  state = { hasError: false, error: null };

  // エラーが発生したときに呼び出される静的メソッド
  // stateオブジェクトのhasErrorとerrorプロパティを更新する
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  // エラー情報をログに出力する
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error:', error, 'Error Info:', errorInfo);
  }

  render() {
    const { items } = this.props;
    if (this.state.hasError) {
      // エラーが発生した場合には、適切なエラーメッセージを表示する
      return <div>Something went wrong: {this.state.error.message}</div>;
    }
    // itemsの各要素をリストアイテムとして表示する
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

このコードでは
以下の点でエラーハンドリングを一貫して行っています。

getDerivedStateFromErrorメソッドによって、エラーが発生した場合にstateオブジェクトのhasErrorとerrorプロパティを更新している
componentDidCatchメソッドによって、エラー情報をログに出力している
renderメソッド内で、hasErrorプロパティがtrueの場合は、適切なエラーメッセージを表示するようになっている

これらの点により、
MyComponentはエラーハンドリングを一貫して行い、
コンポーネント内で発生したエラーに対して
適切に対処することができます

3. アクセシビリティを優先する

アクセシビリティを優先するために、
WAI-ARIA規格に準拠した実装を行います

ボタンにaria-label属性を追加することで、
アクセシビリティを向上させる例です
↓

interface Props {
  label: string;
}

const Button: React.FC<Props> = ({ label }) => (
  <button type="button" aria-label={label}>
    {label}
  </button>
);

この例では
aria-label属性にはlabelが設定されており、
labelの値がボタンのアクセシビリティに貢献しています。

このように、Buttonコンポーネントは、アクセシビリティを優先するために、適切なaria属性を設定し、ユーザーが簡単に操作できるように設計されています。

4. 保守性を高める

以下の例は、コンポーネントの重複を避け、
コードをシンプルに保つ例です
↓

コードが重複している例（NGケース）

function ComponentA({ value }) {
  return <div>{value}</div>;
}

function ComponentB({ value }) {
  return <div>{value}</div>;
}

function MyComponent({ data }) {
  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <ComponentA value={item.a} />
          <ComponentB value={item.b} />
        </div>
      ))}
    </div>
  );
}

この例では、
ComponentAとComponentBが重複しているため、
コードが冗長になっています。

そこで、重複している部分を共通化して、
コードをシンプルにするように設計します

以下は、共通化した例です
↓

コードの重複を削除した例（OKケース）

function SharedComponent({ value }) {
  return <div>{value}</div>;
}

function MyComponent({ data }) {
  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <SharedComponent value={item.a} />
          <SharedComponent value={item.b} />
        </div>
      ))}
    </div>
  );
}

この例では、
ComponentAとComponentBをSharedComponentに置き換えることで
コードがシンプルになっています。

5. コード品質を向上させる

コード品質を向上させるために、下記のことを意識しましょう

コンポーネントの再利用性を高める
コードの可動性を高める
エラーハンドリングを一貫して行う
Typescriptを使用する

3. Bulletproof Reactのメリットとデメリット

Bulletproof Reactは、
Reactアプリケーションの開発において
多くのメリットがあります

しかし、デメリットも存在します。

この章では、
Bulletproof Reactのメリットとデメリット
を解説します。

メリット	デメリット
安全性が高い	学習コストが高い
アクセシビリティに優れる	パフォーマンス低下の可能性あり
再利用性が高い
保守性が高い

メリット1…安全性が高い

Bulletproof Reactでは、
コンポーネントは状態を持たないように設計されています。
代わりに、状態は親コンポーネントによって管理されます。
このため、アプリケーションの状態が予測可能になり、
バグの発生率が低くなります。

また、エラーハンドリングが一貫しているため、
開発者はアプリケーション内で発生したエラーを
容易に追跡することができ、
バグの解決が迅速に行えます。

メリット…アクセシビリティが優れている

すべてのコンポーネントは、
WAI-ARIA規格に準拠しているため、
障害者にとっても理解しやすく、
利用しやすいアプリケーションを作成することができます。

メリット…再利用性が高い

Bulletproof Reactでは、
コンポーネントの再利用性が高くなります

コンポーネントは状態を持たないため、
他のコンポーネントと簡単に組み合わせることができます。
また、コンポーネントは単純であるため、再利用しやすくなります。

メリット…保守性が高い

Bulletproof Reactの原則に従ったコードを作成することで、
コンポーネントの再利用性や可読性、
エラーハンドリング、アクセシビリティなどが向上し、
コンポーネントのメンテナンス性を高めることができます。

そのため、
開発者がコードの保守性を意識して開発を行うことができる
というメリットがあります。

デメリット…学習コストが高い

Bulletproof Reactは、
Reactアプリケーションの開発手法としては
比較的新しいものです。
そのため、学習コストが高くなる可能性があります。

また、Bulletproof Reactは、
Reactのような柔軟なライブラリであるため、
柔軟性を求める開発者にとっては
不適切な手法である場合があります

デメリット…パフォーマンスが低下する可能性がある

Bulletproof Reactは、
コンポーネントの状態を親コンポーネントによって管理するため、
コンポーネントの数が増えると
パフォーマンスが低下する可能性があります

また、アクセシビリティを優先するために、
WAI-ARIA属性を多用することで、
DOMのサイズが大きくなり、
パフォーマンスの低下を引き起こす可能性があります

4. Next.jsでBulletproof Reactを実装する方法

Bulletproof Reactコンポーネントを
Next.jsアプリケーションに統合するために、
以下の手順に従って実装します

具体的には
以下のようなディレクトリ構成を採用することが推奨されています
↓

- components/
  - Button/
    - index.js
    - styles.module.css
- pages/
  - index.js

Buttonディレクトリには、Buttonコンポーネントが含まれます。

styles.module.cssファイルには、Buttonコンポーネントのスタイルが定義されています。

pagesディレクトリには、アプリケーションのページが含まれます。

この例では、index.jsページにButtonコンポーネントが含まれます。

（具体例）Bulletproof Reactを使った作成手順

まずはNext.jsアプリケーションを作成します。
以下のコマンドを実行して、
新しいNext.jsアプリケーションを作成します
↓

npx create-next-app my-app

次に、Bulletproof Reactコンポーネントを作成します。

通常のReactコンポーネントと同様に、
Bulletproof Reactコンポーネントを作成することができます

import React from "react";
import PropTypes from "prop-types";

const Button = ({ onClick, children, ...rest }) => {
  return (
    <button onClick={onClick} {...rest}>
      {children}
    </button>
  );
};

Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
};

export default Button;

以下は、
サーバーサイドレンダリングで
コンポーネントを表示する方法です

import React from "react";
import Button from "../components/Button";

const IndexPage = () => {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div>
      <Button onClick={handleClick}>Click me!</Button>
    </div>
  );
};

export async function getServerSideProps(context) {
  return {
    props: {},
  };
}

export default IndexPage;