Reactのアプリの作成（２度目の作成で起きたトラブルなど）

Reactのアプリを作成していたのですが、新しく別のアプリを作成する際に少し詰まったので、初期構築手順について改めてまとめようと思います。２度目の作成ということで発生したエラー解消などの作業も含みます。

公式サイト・マニュアル
アプリの作成・エラーの対処
TypeScriptのアプリ作成
作成済みのアプリのTypeScript化
ライブラリのインストール
1. styled-components
2. react-router-dom
最後に

公式サイト・マニュアル

今回の作業を実施するにあたり参照した公式のマニュアルは以下です。

https://ja.reactjs.org/docs/create-a-new-react-app.html

https://create-react-app.dev/docs/getting-started/

アプリの作成・エラーの対処

公式のマニュアルに記載されているコマンドは以下です。

npx create-react-app my-app

「my-app」は作成したいアプリ名にあわせて変更する部分ですが、今回はお試しなのでそのままにしておきます。

アプリ作成のコマンドを実行した際に以下のようなエラーが発生しました。

$ npx create-react-app my-app

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

npm ERR! code 1
npm ERR! path /Users/xxxx
npm ERR! command failed
npm ERR! command sh -c create-react-app my-app

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxx/.npm/_logs/2022-09-24T14_29_25_837Z-debug.log
$

古いバージョンの「create-react-app」がインストールされているというエラーです。また、グローバルにインストールしているとダメとのことです。

まずは、記載されているコマンドでアンインストールを試みました。

npm uninstall -g create-react-app

上記を実行します。

$ npm uninstall -g create-react-app

up to date in 527ms

found 0 vulnerabilities
$

アンインストールのコマンドは成功しました。

これで解決する人もいると思いますが、私の場合はダメでした。状況は変わらず、アプリ作成に失敗します。

グローバルにファイルがインストールされているということなので、ホームディレクトリ配下のファイルを確認してみました。どうやら以下のフォルダにインストールされているみたいです。

~/.npm/_npx/

上記の配下に「c67e74de0542c87c」のような名前のフォルダがあります。このフォルダ名は人によると思いますし、複数のフォルダがある場合もあると思います。

フォルダの中を探してみると以下のようなファイルがありました。

$ cat package.json
{
  "dependencies": {
    "create-react-app": "^4.0.3"
  }
}

どうやら上記とその関連ファイルが邪魔をしているようなので「c67e74de0542c87c」のフォルダごと削除してみました。その結果、アプリの作成が成功するようになりました。

$ npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /Users/xxxx/my-app.

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


added 1395 packages in 2m

210 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

...(略)...

210 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created my-app at /Users/xxxx/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 my-app
  npm start

Happy hacking!
$

なお実行の際に以下の状態で止まる場合は「y」を入力します。これは初回だけ発生しました。

Ok to proceed? (y)

実行後にアプリが起動できるかも確認しておきます。マニュアルに記載の通り以下のコマンドを実行します。

cd my-app
npm start

無事に起動できました。

TypeScriptのアプリ作成

エラーは解消したので、続いてTypeScript形式でのアプリ作成をします。

とは言っても、公式のマニュアルに記載のコマンドを実行するだけです。

npx create-react-app my-app --template typescript

細かい違いはありますが、実行結果は通常のアプリと同様になります。

なお、「my-app」の部分を変えない場合は、先ほど作成したアプリは削除しておきます。削除しておかないとエラーになる可能性があるので注意してください。

作成済みのアプリのTypeScript化

既存のアプリをTypeScript化する手順についてもマニュアルに記載がありました。

今回は必要がないので実施しませんが、機会があれば試してみたいと思います。

ライブラリのインストール

ライブラリもインストールしておきます。これは個人的に使っているものなので、必須ではないです。あまりライブラリは使わずにやれるところまでやってみる派なので、多分少なめだと思います。

styled-components

「styled-components」をインストールします。「styled-components」自体は有名なので詳細は省略します。詳しく知りたい人は別途調べてもらえればと思います。

公式のサイト・マニュアルは以下です。

https://styled-components.com/

https://github.com/styled-components/styled-components

インストールのコマンドを実行します。

$ npm install --save styled-components

また、TypeScript化もしているので定義ファイルもインストールします。

こちらは以下のサイトを参考にします。

https://styled-components.com/docs/api#typescript

以下のコマンドを実行します。

$ npm install --save-dev @types/styled-components

これで「styled-components」のインストールが完了しました。

react-router-dom

「react-router-dom」も必要に応じてインストールします。

以下のコマンドでインストールできると思います。

$ npm install react-router-dom

上記のコマンドについてですが、公式と思われるページのリンク先が404になっていたり、少々怪しい部分があります。ただ、以下のInstallの欄にあるので大丈夫だとは思います。

https://www.npmjs.com/package/react-router-dom

最後に

Reactのアプリの作成については以上です。