create-react-app/TypeScriptの環境構築
create-react-appの環境構築を効率化するため、備忘としてメモ。 大岡由佳 著 りあクト！【I.言語・環境編】【II.React基礎編】第3.1版を参考に行った。 こちらの書籍ではパッケージマネージャーにyarnを使用しているが、普段npmを使用しているためnpmで作業を行う。
環境・バージョン
- MacBook Air M1 Monterey 12.1
- Node.js v16.13.0
- npm 8.1.0
1. create-react-appのインストール
create-react-appのインストールを行う。アプリケーション名はcra-ts-templateとした。
TypeScriptを使用するため、オプションとして--template typescriptを指定する。
npx create-react-app cra-ts-template --template typescript
インストール完了後、ターミナルの最後には下記メッセージが表示される。
We suggest that you begin by typing: cd cra-ts-template npm start Happy hacking!
上記コマンドをターミナルに入力し、アプリケーションが立ち上がれば無事インストールできている。
これ以降、カレントディレクトリはcra-ts-templateとして話を進める。
2. TypeScriptのバージョン確認
create-react-appによってインストールされたTyepScriptのバージョンを確認する。
tsc -vで確認できる。tsやtypescriptではない点に注意。
今回は4.4.4だった。
tsc -v
補足：インストール済みのcreate-react-appを使用する場合
TypeScript及び関連パッケージを最新版に更新しておく必要がある。
TypeScriptのバージョンアップ
下記コマンドで行う。
npm update typescript@latest
関連パッケージのバージョンアップ
まず、npm outdatedで新しいバージョンがリリースされていないか確認する。create-react-appインストール後に行ってみた結果は以下の通り。
npm outdated Package Current Wanted Latest Location Depended by @types/node 16.11.19 16.11.19 17.0.8 node_modules/@types/node cra-ts-template
node.jsのバージョンが16.13.0に対しバージョンが古いように見える。そのため、いったんアンインストールし@types/node@16.13.0のインストールを試みた。（更新が必要なパッケージが多数ある場合、npm-check-updatesを使うと良いよう。1）
npm un @types/node npm i -D @types/node@16.13.0
すると下記のエラー。
npm ERR! notarget No matching version found for @types/node@16.13.0. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.
@types/node@16.13.0は存在しないらしい。npmで確認しても16.11.19までしかないようなので再インストール。
npm i -D @types/node@16.11.19
これでとりあえずcreate-react-app及びTypeScriptの環境構築は完了。 次回以降、開発を行う上で便利なツール群の導入（ESLintなど）を行っていく。
