Reactのプロジェクトを構築する際に「create-react-app」から脱却して、より軽量で高速なビルドツールを使う方法

こんにちは、皆さん！今日は、Reactのプロジェクトを構築する際に「create-react-app」から脱却して、より軽量で高速なビルドツールを使う方法についてお話しします。具体的には、pnpm、Vite、React、そしてテストフレームワークのVitestを組み合わせて、シンプルかつ効果的な開発環境を構築していきます。

最近では、create-react-appが非常に人気ですが、プロジェクトが大きくなるにつれて、ビルド時間や初期設定の重さが気になることがあります。そこで、Viteの登場です。Viteは、開発者体験を向上させるために設計された新しいビルドツールで、非常に高速です。そして、pnpmは依存関係管理を効率化するためのパッケージマネージャーです。

このブログでは、これらのツールを使って、Reactプロジェクトを作成し、テストを設定する方法を具体的なコード例を交えながら説明します。それでは、始めましょう！

環境のセットアップ

まず、プロジェクトを開始するために、必要なツールをインストールしましょう。以下の手順で、pnpm、Vite、Reactをインストールします。

pnpmのインストール: もしまだpnpmをインストールしていない場合は、以下のコマンドを実行してインストールします。

   npm install -g pnpm

新しいプロジェクトの作成: 次に、Viteを使って新しいReactプロジェクトを作成します。

   pnpm create vite@latest my-react-app --template react

これにより、my-react-appという新しいフォルダが作成され、その中にViteの初期設定が行われます。

依存関係のインストール: 作成したフォルダに移動し、必要な依存関係をインストールします。

   cd my-react-app
   pnpm install

プロジェクトの構造

プロジェクトが作成されると、以下のような基本的な構造が生成されます。

my-react-app
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── App.jsx
│   ├── main.jsx
│   └── ...
└── vite.config.js

src: Reactのコンポーネントやロジックを含むディレクトリです。
vite.config.js: Viteの設定ファイルで、必要に応じてカスタマイズできます。

Reactアプリの実装

それでは、簡単なReactコンポーネントを作成してみましょう。src/App.jsxを以下のように修正します。

import React from 'react';

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Hello Vite + React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Count is: {count}
      </button>
    </div>
  );
};

export default App;

アプリの起動

次に、アプリを起動してみましょう。以下のコマンドを実行します。

pnpm run dev

これにより、ローカルサーバーが立ち上がり、ブラウザでhttp://localhost:5173にアクセスすることで、作成したReactアプリを確認できます。ボタンをクリックすることで、カウントが増加するのを確認できるでしょう。

Vitestによるテストの設定

次に、テストフレームワークのVitestを追加してみましょう。テストを書くことで、コードの品質を確保できます。

Vitestのインストール: 以下のコマンドでVitestをインストールします。

   pnpm add -D vitest @testing-library/react @testing-library/jest-dom

テストスクリプトの設定: package.jsonにテストスクリプトを追加します。

   "scripts": {
     "test": "vitest"
   }

テストファイルの作成: src/App.test.jsxというファイルを作成し、以下の内容を記述します。

import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

test('renders hello message', () => {
  render(<App />);
  const linkElement = screen.getByText(/Hello Vite \+ React!/i);
  expect(linkElement).toBeInTheDocument();
});

test('button click increments count', () => {
  render(<App />);
  const buttonElement = screen.getByText(/Count is:/i);
  fireEvent.click(buttonElement);
  expect(buttonElement).toHaveTextContent('Count is: 1');
});

テストの実行

テストを実行するために、以下のコマンドを実行します。

pnpm run test

実行結果は以下のようになります。

 PASS  src/App.test.jsx
  ✓ renders hello message (XX ms)
  ✓ button click increments count (XX ms)

Test Files  1 passed (1)
      Start at 16:00:00
      Duration: XX ms

これにより、作成したコンポーネントが正しく動作するかどうかを確認できました。

まとめ

今日は、pnpm、Vite、React、そしてVitestを使って、create-react-appから脱却し、軽量で高速な開発環境を構築する方法についてお話ししました。Viteの迅速なビルドプロセスや、pnpmによる効率的な依存関係管理は、開発者にとって非常に魅力的です。また、Vitestを使うことで、テストも簡単に設定でき、コードの品質を保つことができます。

ぜひ、この記事を参考にして、あなた自身のプロジェクトにこれらのツールを活用してみてください。新しい開発体験が待っています！