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の設定ファイルで拡張することができます。
{
"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
{
"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を追加します。
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
};
さらに、サンプルレポによると、最初のページロード時に「スタイルが決まっていないコンテンツのフラッシュ」を避けるために、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"を追記する。
{
...
"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
{
"extends": [
"next/core-web-vitals",
"eslint:recommended",
"prettier"
],
"plugins": ["cypress"],
"env": {
"cypress/globals": true
}
}
Storybook
Storybookは、UIコンポーネントをドキュメント化し、視覚的にテストするために広く使用されているツールです。公式ドキュメントによると、まずプロジェクトを初期化する必要があります。
npx sb init
次に、Storybookを実行します。新しいブラウザのタブが開き、そこでいくつかのデモ・コンポーネントを試すことができます。
npm run storybook