クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > 【React】Create React Appのプロジェクトの作成と実行（エラー対処も）

【React】Create React Appのプロジェクトの作成と実行（エラー対処も）

JS React

Reactの続きです。前回はクラスコンポーネントの属性を設定して固有の値を設定しました。これまではCodePenで単一ページ内のコンテンツ作っていましたが、今回からはSPA（シングルページアプリケーション）を作るべく「Create React App」を使ってみます。それでは行きましょう！

【目次】

※参考：【React】クラスコンポーネントで属性を設定する - クモのようにコツコツと

※Reactでやってみたことまとめ
qiita.com

Create React Appとは

今回も掌田さんの「React.js & Next.js入門」を参考に進める。

React.js & Next.js超入門

React.js & Next.js超入門

まず、Create React Appってなんなのか。

React公式サイトの「ツールチェーン」紹介ページ

Create React App
Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。

※参考：新しい React アプリを作る – React

ツールチェーンってなんぞ？

ソフトウェア分野におけるツールチェーン（英: toolchain）は、製品（典型的には他のコンピュータ用のプログラム、またはシステムプログラム）を製作するのに使われるプログラム（ツール）の集合体である。一つのツールの出力が他のツールの入力となり、連鎖的に使われることからツールチェーンと呼ばれる。

※参考：ツールチェーン - Wikipedia

Create React Appの公式サイト

※参考：Create React App · Set up a modern web app by running one command.

Reactプロジェクトのインストール

「react_test」というフォルダを作り、ターミナルのcdコマンドでフォルダに移動する。

cd /（フォルダ）/react_test

npxコマンドでプロジェクトを作成する。

npx create-react-app プロジェクト名

プロジェクト名が「react_app」の場合、下記になる。

npx create-react-app react_app

しばらくインストール中の表示…

成功すると「react_app」フォルダが作られ、中にファイルやフォルダがインストールされている。

package.jsonを見ると下記がインストールされている。

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },

インストール成功後のターミナルの表記

インストール成功後のターミナルには下記の表記が出る。

Success! Created react_app at /（フォルダ）/react_test/react_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 react_app
  npm start

Happy hacking!

最後に「ハッピーハッキング！」てw

ここにはプロジェクトで使用するコマンドが書かれている。

  • npm startはプロジェクトの実行
  • npm run buildはプロジェクトのビルド
  • npm testはプロジェクトのテスト
  • npm run ejectはプロジェクトのイジェクト

npmでよく見る一般的なコマンド名だが

※参考：フロントエンド開発の３ステップ（npmことはじめ） - Qiita

最後のnom run ejectはあまり聞かない。アプリの長寿を保証する？

npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid

プロジェクトを実行してみる

まずはプロジェクトを実行してみる。

cdコマンドで「react_app」フォルダに移動する。

cd react_app

プロジェクト実行は下記のコマンド

npm start

エラー発生！（babel-jestのバージョン違い）

お、なんかエラーになった。

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-jest": "^24.9.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /Users/（ユーザ名）/node_modules/babel-jest (version: 25.1.0)

babel-jestのバージョンに問題があると。ユーザ直下のフォルダとプロジェクトフォルダのバージョンが違う、みたいな感じかな。ユーザ直下の方が新しいバージョンになっている。

エラーコードにある手順を試す

エラーコードの中でこの手順を試してくれとあった。

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

（翻訳）

1.プロジェクトフォルダー内のpackage-lock.json（package.json！ではありません）および/またはyarn.lockを削除します。
2.プロジェクトフォルダのnode_modulesを削除します。
3.プロジェクトフォルダーのpackage.jsonファイルの依存関係やdevDependenciesから「babel-jest」を削除します。
4.使用するパッケージマネージャーに応じて、npm installまたはyarnを実行します。

3のpackage.jsonの中にdevDependenciesもbabel-jestも見当たらないなぁ。。

試しにdependenciesのjest-domの行を削除してみた。それ以外もそれぞれ実行してみる。

どうだ！？

npm start

結果は変わらず。。

ユーザ直下のbabel-jestフォルダを削除！

さらに調べるとこちらの記事が同じような症状だった。

※参考：React Hooksを学ぼうとしたらReactアプリをyarn startで起動できなかった - kdnakt blog

rmコマンドは「remove（削除）」の略だな。

-rオプションは下記の意味のオプションだった。

-r 指定したディレクトリ以下すべてのファイル･サブディレクトリを再帰的に削除します。

※参考：rm - UNIX/Linuxコマンド - IT専科

rmコマンドでユーザ直下の方のbabel-jestを削除してみる。

rm -r   /Users/（ユーザ名）/node_modules/babel-jest

エラーなどの問題はなく削除完了した。

jestもバージョン違いだってよ！

よし、プロジェクト再実行！

npm start

すると先程のbabel-jestと同じような内容で今度はjestのバージョン違いを指摘している。またユーザ直下の方がバージョンが新しいようだ。

jestもユーザ直下の方のフォルダを削除しちゃおう！

rm -r   /Users/（ユーザ名）/node_modules/jest

プロジェクト起動成功！

プロジェクト再々実行！

npm start

おおお！ブラウザが立ち上がったあ〜〜〜！ f:id:idr_zz:20200503193725j:plain なんか、Reactのアイコンがクルクルと回っているう〜〜

URLはローカルホストでポート番号は3000番だ。

http://localhost:3000/

最後に

ということでCreate React Appのプロジェクトを作成し、実行してみました。

現時点では最初から用意されたReactアイコンがクルクル回っているだけですが、次回から内容を編集してコンポーネント開発をしてみたく思います。それではまた！

※Reactでやってみたことまとめ
qiita.com