我が家のReact - React開発始めるときにとりあえず用意するもの7つ -

Reactを使用した開発には、さまざまな便利なツールやライブラリが存在します。ここではReactを使ったSPA（Single Page Application）開発で、一通り必要となるものの中で私がよく開始時に導入するものを紹介します。基本的には一般的にもスタンダードかと思われるものを、コード関連からビルドやテストに関するものまで一通り紹介しています。

我が家のReact開発でよく使っているもの

1. ビルドツール: Vite

ReactのビルドツールとしてViteを使っています。Reactのアプリケーションを作り始めるときは一般的にはビルドツールやNext.jsのようなフレームワークを導入してアプリのひな型を生成することから初めて行きます。私は小規模SPAかつサーバーサイドが必要ならpython等の別言語を使うことが多いのでViteを選択していますが、大規模またはSSRが必要等の理由があれば最近はNext.jsを使うことも多いのかもしれません。ReactのビルドツールといえばwebpackやCreate React Appもありますが、それらよりも高速にビルドができるということでViteを採用しています。Viteの使いやすさ・設定しやすさ等はCreate React Appと特に差はなく、体感としてもCreate React Appより高速になった気がしています。

2. プログラミング言語: TypeScript

TypeScriptはJavaScriptを拡張して静的型付け+αができるようになったプログラミング言語です。ReactはJavaScriptだけでも書くことができますがTypeScriptで書くと静的型付けの恩恵を受けられるため基本的にはTypeScriptで書くようにしています。TypeScriptの導入は上記のViteでアプリのひな型を生成するときにTypeScriptを指定すると一緒に生成してくれるので特にややこしいことはありません。TypeScript自体はVSCode等高機能なエディタを使用していれば何かとサポート(変数にマウスホバーすると型定義が表示されるなど)があるのでそういったものを活用すればそれほど難しくありません。

3. UIコンポーネントライブラリ: Ant Design

UIコンポーネントライブラリの導入は必須ではありません。導入すると、ボタンやテーブル、モーダルやポップアップなどフロントエンドでよくつかわれるコンポーネントがいい感じに実装済みのものを使えるのでデザインに時間をかけなくてもいい感じの画面を作ることができます。Ant Designは人気のあるUIコンポーネントライブラリでAlibaba社が開発しています。私が採用しているのは使い慣れているからという理由が一番大きいです。他にもMaterial-UIなどいろいろとあるので気に入ったUIコンポーネントライブラリを入れて問題ありません。

4. ルーティングライブラリ: React Router

Reactでアプリを作るとすべての画面が同じURLの下に生成されます。しかしユーザーページを/user、商品ページを/itemのように別々のURLで表示されるようにしたい場合、React Routerを使うと実現できます。

5. CSS関連: SCSSとCSS Modules

Webアプリのフロントエンド部分というのはHTML・JavaScript・CSSで構成されますがSCSSとCSS ModulesはこのCSS部分を便利にするものです。

まずSCSSですがCSSの記法を拡張したもので、変数やネスト構造が使えます。このため色定義だけまとめて別ファイルに定義するなど管理しやすい形で記述できます。

/* CSSの例 */
.header {
  background-color: #0000ff;
}
.header a {
  color: #ff0000;
}

/* SCSSの例 */
$primary-color: #0000ff;
$link-color: #ff0000;

.header {
  background-color: $primary-color;
  a {
    color: $link-color;
  }
}

次にCSS Modulesですが、以下のように.modules.scssファイルをReactコードでimportしてコンポーネント単位でCSSを当てることができるようになります。通常、CSSはグローバルに適用されるため、コンポーネントごとに.cssファイルを作成するとclass名等が被らないように気を付けて命名する必要があります。しかしCSS Modulesを使用した場合、以下のようにclass名をclassName={styles.title}と記述でき、描画される際にはclass名に一意な文字列が付与されるため、コード上は名前の衝突を気にする必要がなくなります。これによりReactのようなコンポーネントベースのフレームワークと相性が良くコンポーネントをスタイル込みで独立して管理できるようになります。

/* ./Component.module.scss */

.title {
  background-color: #fff;
}

// Component.tsx

import React from 'react';
import styles from './Component.module.css';

const Component = () => {
  return <div className={styles.title}>User Component</div>;
};

export default Component;

6. 静的解析ツール：ESLint, Prettier

ESLintはJavaScriptの静的解析ツールでプロジェクト内のコーディング規約とそのチェックを行うためのもので、Prettierはコードをのインデントや改行等の自動整形に使います。静的解析ツールは後から入れるとコードの改修が大変なことになるので開発を始める前に入れておきます。

7. テスト: Playwright

Playwrightはフロントエンドのテストやスクレイピング等に使うことができるツールで、類似したツールとしてはSeleniumやTestCafeなどがあります。フロントエンドの単体テストはJestやReact Testing Library等がよくつかわれるかと思われますが、Playwrightはブラウザに実際にアプリが描画された状態でブラウザを自動操作するテストを記述することができます。特にPlaywrightの便利なところとして以下のようなUIモードがついてます。

ブラウザを自動操作する関係上、テスト実行環境にはブラウザが必要で、特にヘッドレスで実行したい場合は多少環境を用意するのが面倒かもしれません。しかしPlaywright公式が提供しているDocker imageを使うと一通り必要なものが入っているので便利です。

まとめ

私がReactでSPAを作るときによく使うものを紹介してみました。Reactでの開発を頻繁に行っていると使っている or 類似のツールを導入しているところも多いかと思います。その他によく使うものがあればコメント欄へ。