プロフェッショナルなReactプロジェクトの立ち上げ方(和訳)

### Professional React Development
1. [2022年に最も普及するReactの技術スタック](https://qiita.com/mwkiyo/items/70601c04142b12bc93f9)
1. [Screaming Architecture - Reactのディレクトリ構成を進化させる](https://qiita.com/mwkiyo/items/9549207680e71833a654)
1. **プロフェッショナルなReactプロジェクトの立ち上げ方**
1. [React開発者のためのGitワークフローとGitHubセットアップ](https://qiita.com/mwkiyo/items/9c6d1bd6df89e94f2a98)
* * *

([こちらの記事](https://dev.to/profydev/how-to-set-up-a-professional-react-project-including-screencast-180f)の和訳です)

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

この記事では、[最も人気のあるReactの技術スタック](https://qiita.com/mwkiyo/items/70601c04142b12bc93f9)に基づいて、新しいアプリケーションを使用したセットアップを案内します。

- Next.js
- Typescript
- ESLint
- Prettier
- styled-components
- Cypress
- Storybook

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

[動画のリンク](https://www.youtube.com/watch?v=cwJS8FARmXk)

## Next.js & TypeScript

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

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

```
npx create-next-app@latest --typescript
```

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

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

## ESLint

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

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

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

## Prettier

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

IDEにPrettierのプラグインを使用することができます。私はVS Codeとその[Prettierの拡張機能](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)を使い、ファイル保存時に自動整形するようにしています。

[PrettierとESLintを統合](https://nextjs.org/docs/basic-features/eslint#prettier)するには、`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はこのライブラリーに対応していませんが、[この公式のサンプルレポジトリ](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)では、その設定方法を紹介しています。まず、ライブラリをインストールします。

```
npm install styled-components
```

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

```next.config.js
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};
```

さらに、[サンプルレポ](https://github.com/vercel/next.js/commit/7ce5d3f2408b08c6121b7edd825615161c616309)によると、最初のページロード時に「スタイルが決まっていないコンテンツのフラッシュ」を避けるために、`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のドキュメント](https://nextjs.org/docs/testing#manual-setup)が非常に役に立ちます。まず、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コンポーネントをドキュメント化し、視覚的にテストするために広く使用されているツールです。[公式ドキュメント](https://storybook.js.org/docs/react/get-started/install)によると、まずプロジェクトを初期化する必要があります。

```
npx sb init
```

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

```
npm run storybook
```