Professional React Development

2022年に最も普及するReactの技術スタック
Screaming Architecture - Reactのディレクトリ構成を進化させる
プロフェッショナルなReactプロジェクトの立ち上げ方
React開発者のためのGitワークフローとGitHubセットアップ

(こちらの記事の和訳です)

新しいReactアプリを始めるとき、プロフェッショナルな方法でセットアップする方法に悩むかもしれません。どんなツールを使えばいいのか？どんなライブラリが最初から必要なのか？

この記事では、最も人気のあるReactの技術スタックに基づいて、新しいアプリケーションを使用したセットアップを案内します。

Next.js
Typescript
ESLint
Prettier
styled-components
Cypress
Storybook

以下のビデオは、私が今度開催する独学React DevsのためのBootcampで、まさにこの技術スタックを使ってアプリをセットアップした方法を示しています。このスクリーンキャストは、洗練された結果だけでなく、プロセス全体がわかるようにほぼ無編集で作成されています。もしクイックガイドをお探しなら、このページでセットアップの全ステップを見ることができます。

動画のリンク

Next.js & TypeScript

Next.jsは、Reactフレームワークの代表格です。サーバーサイドレンダリングなど、多くのプロフェッショナルなアプリにとって重要な機能をたくさん持っています。多くの開発者は、新しいReactのプロジェクトにこのフレームワークを使用する傾向があります。

このコマンドはTypeScriptを利用したNext.jsアプリケーションを新規に作成します。(すでに学ぶべきことがたくさんある場合は、自由に--typescriptオプションを削除してください)。

npx create-next-app@latest --typescript

プロジェクト名とパッケージマネージャを入力するよう促されます。私は単純にnpmにしました。

GitHub でプロジェクトを公開する場合は、次のコマンドでmasterブランチをmainにリネームします。
git branch -m master main

ESLint

Next.jsのアプリには、コードを静的に解析してバグを検出するESLintがすでにセットアップされています。

しかし、私の好みからするとNext.jsに付属するデフォルトのルールは十分に厳密ではありません。たとえば、未使用の変数があってもエラーにならないとか。ESLintのドキュメントにある標準的なルールのセットはeslint:recommendedです。これはeslintrc.jsonの設定ファイルで拡張することができます。

eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended"
  ]
}

Prettier

Prettierは、あなたのコードを標準に従って自動的にフォーマットしてくれます。それによって、あなたのコードはより読みやすくなり、手作業の労力も大幅に軽減されます。

IDEにPrettierのプラグインを使用することができます。私はVS CodeとそのPrettierの拡張機能を使い、ファイル保存時に自動整形するようにしています。

PrettierとESLintを統合するには、eslint-config-prettierを使い、eslintrc.jsonの設定に追加することができます。こうすることで、PrettierとESLintの間でコンフリクトが発生することがありません。

npm install --save-dev eslint-config-prettier

eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ]
}

Next.jsアプリは、デフォルトではPrettier形式を使用しません。npx prettier --writeを実行すると、すべてのファイルがフォーマットされます。

styled-components

styled-componentsは、カスタムCSSを記述するためのライブラリとして非常に有名です。Next.jsはこのライブラリーに対応していませんが、この公式のサンプルレポジトリでは、その設定方法を紹介しています。まず、ライブラリをインストールします。

npm install styled-components

次に、next.config.jsファイルのコンパイラ・オプションに、styledComponents: trueを追加します。

next.config.js

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

さらに、サンプルレポによると、最初のページロード時に「スタイルが決まっていないコンテンツのフラッシュ」を避けるために、pages/_document.tsx ファイルを作成する必要があります。

pages/_document.tsx

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
import type { DocumentContext } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

これで完了です。

Cypress

Cypressは、end-to-endテスト（実際のユーザーと同じように、フロントエンドからデータベースまでのシステム全体をテストすること）を書くのによく使われるツールです。

セットアップについては、今回もNext.jsのドキュメントが非常に役に立ちます。まず、Cypressをインストールします。

npm install --save-dev cypress

そして、package.jsonファイルのscriptセクションに"cypress": "cypress open"を追記する。

package.json

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open"
  },

最後に、npm run cypressを実行して、プロジェクトを初期化します。これで、リポジトリにいくつかのフォルダとデモテストが作成されます。そして、Cypress UIが開き、デモテストを実行することができます。

テストファイルを開くと、「describeやitのようなグローバル関数が存在しない」とESLintからエラーが出ていることに気づくでしょう。これらのエラーを取り除くには、ESLint プラグインをインストールして eslintsrc.json 設定ファイルを調整します。

npm install eslint-plugin-cypress --save-dev

eslintsrc.json

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ],
  "plugins": ["cypress"],
  "env": {
    "cypress/globals": true
  }
}

Storybook

Storybookは、UIコンポーネントをドキュメント化し、視覚的にテストするために広く使用されているツールです。公式ドキュメントによると、まずプロジェクトを初期化する必要があります。

npx sb init

次に、Storybookを実行します。新しいブラウザのタブが開き、そこでいくつかのデモ・コンポーネントを試すことができます。

npm run storybook