はじめに

自身のメモとして、本記事では、Create React Appを利用したReact＋TypeScriptのビルド環境を構築手順を記載します．

Create React Appとは

Create React AppはFacebookにより提供されているReactの公式ツールで、コマンド一発でReactの開発環境を構築することが出来るというもので、現在では、Reactアプリ開発におけるデファクトスタンダードとなっています．

Create React Appを利用した開発環境構築

事前確認

各種コマンドのバージョンを確認します．

nodeのバージョン

$ node -v
v16.0.0

yarnのバージョン

$ yarn -v
1.22.10

npxのバージョン

$ npx -v
7.10.0

create-react-appのバージョン確認

$ npx create-react-app --version
4.0.3

新規プロジェクト作成

下記のCreate React Appのコマンドを実行し、TypeScriptを利用したReactのビルド環境を構築します．

$ npx create-react-app sample --template typescript

Creating a new React app in sample.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ cra-template-typescript@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ cra-template-typescript@1.1.2
├─ immer@8.0.1
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
├─ react@17.0.2
└─ scheduler@0.20.2
✨  Done in 21.77s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ react-dom@17.0.2
├─ react@17.0.2
├─ typescript@4.3.2
└─ web-vitals@1.1.2
info All dependencies
├─ @testing-library/dom@7.31.2
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.1
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/prop-types@15.7.3
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ @types/scheduler@0.16.1
├─ @types/testing-library__jest-dom@5.14.0
├─ css.escape@1.5.1
├─ css@3.0.0
├─ csstype@3.0.8
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
├─ typescript@4.3.2
└─ web-vitals@1.1.2
✨  Done in 12.29s.

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using yarnpkg...

yarn remove v1.22.10
[1/2] 🗑  Removing module cra-template-typescript...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
success Uninstalled packages.
✨  Done in 9.58s.

Created git commit.

Success! Created sample at sample
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample
  yarn start

Happy hacking!

依存関係の解消

あらためてエラー/警告が出てないか確認します．参考までにyarn install —check-filesは「node_modules に既にインストールされたファイルが削除されていないことを確認」するコマンドです（参考）．

$ yarn install --check-files

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] 🔨  Building fresh packages...

✨  Done in 8.38s.

unmet peer dependencyの警告が出ている．警告の内容としては@testing-library/user-event@12.8.3が正しく動作するのにバージョン7.21.4以上の@testing-library/domが必要という意味になる．

warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".

install可能なバージョンを確認

$ yarn info @testing-library/dom versions | tail -n 10

  '7.31.1',
  '7.31.2',
  '8.0.0-alpha.1',
  '8.0.0-alpha.2',
  '8.0.0-alpha.3',
  '8.0.0-alpha.4',
  '8.0.0-alpha.5',
  '8.0.0-alpha.6'
]
Done in 0.24s.

依存関係を解消するため、パッケージを追加．latestを指定して最新のstable版をインストール．

$ yarn add -D @testing-library/dom@latest

package.jsonに下記が追加された

  "devDependencies": {
    "@testing-library/dom": "^7.31.2"
  }

エラー/警告が出てないか再度確認し、エラー/警告が出なくなっていることを確認

$ yarn install --check-files

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 8.90s.

プロジェクトの起動

プロジェクトを実行

$ cd sample
$ yarn start

正しく動作していることをブラウザで確認

Create React AppでReactの開発環境を構築