概要
前回に引き続き、環境構築を行う。
今回はProject基盤の作成を行う。(Project基盤の作成 = Create React Appコマンド(後述)の生成物をGitにコミットするまで)
適宜、以下の本を参考にさせて頂きながら進める。(以下、『りあクト！』)
勉強の題材
勉強の題材として、まずは日本大学文理学部情報科学科の教授の方がクリエイティブ・コモンズで公開してくださっている以下のチュートリアルをやってみたいと思っている。
zenn.dev
※ この記事の中では、まだチュートリアルには着手しないが、Gitのリポジトリ名が何でこれなの？って思うかもしれないので一応。
バージョン
「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。
- node: 15.5.0
- react-create-app: 4.0.1
- react: 17.0.1
- react-dom: 17.0.1
- typescript: 4.1.3
- eslint: 7.17.0
- prettier: 2.2.1
環境構築
Create React Appを使う。
ReactでProjectを作成する際に、『りあクト！』でも推奨されていて、公式ドキュメントでも推奨されている方法として、create-react-appというコマンドを実行する方法があるので、この方法でやってみる。
ja.reactjs.org
create-react-app.dev
npxコマンドが使えることの確認
公式のインストール方法ではnpxという「 npm 5.2 から利用できるパッケージランナーツール」を使ってインストールしているので、まずはこのコマンドが使えることを確認する。
$ npx -v 7.3.0
→ 使えた。
以下の記事がとても参考になったが、npxコマンドはパッケージをインストールせずに直接実行するとのことである。
dev.classmethod.jp
以下に引用したように、公式はcreate-react-app本体をnpmでインストールすることを推奨していないので、npxを使っているのはそういう意図があるのだろう。
If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.
※ 引用元
create-react-app.dev
実際に、npxでcreate-react-appを実行した後に、インストール済みのパッケージの一覧を表示してみると、create-react-app本体はインストールされていないことが分かる。
$ npm ls xxx@ /path/to/dir ├── @testing-library/jest-dom@5.11.7 ├── @testing-library/react@11.2.2 ├── @testing-library/user-event@12.6.0 ├── react-dom@17.0.1 ├── react-scripts@4.0.1 ├── react@17.0.1 └── web-vitals@0.2.4
※ ちなみに、create-react-app本体をインストールした場合は以下のように表示される。
$ npm ls xxx@ /path/to/dir └── create-react-app@4.0.1
実行する
公式の手順に従いcreate-react-appコマンドを実行するのだが、『りあクト！』や公式ドキュメントによると、React x TypeScriptで開発する際は、オプションに--template typescriptを付ける必要があるとのことである。
従って、以下のコマンドを実行する。
$ npx create-react-app react_tutorial_nihon_u_1 --template typescript
※ react_tutorial_nihon_u_1の部分で指定した名前が、package.jsonのnameの値になるので、ここは適宜読み替える。(基本的にはGitのリポジトリ名と同じ名前にするのが良いのかな？と思った。)
初回実行時は以下のように聞かれるので、「y」を入力する。
$ npx create-react-app react_tutorial_nihon_u_1 --template typescript Need to install the following packages: create-react-app Ok to proceed? (y) y
インストールが成功すると以下のようなディレクトリ・ファイル群が生成される。(node_modulesは除外している。)
$ tree react_tutorial_nihon_u_1 -I node_modules react_tutorial_nihon_u_1 ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json 2 directories, 19 files
この際に、.gitignoreも生成してくれて、/node_modulesなどは生成された.gitignoreファイルの中に既に含まれているので、追加する必要はない。
※ ただし/.vscodeなどは含まれていなので、必要に応じて追加する。
インストールされたパッケージの一覧は以下だった。
$ npm ls xxx@0.1.0 /path/to/react_tutorial_nihon_u_1 ├── @testing-library/jest-dom@5.11.8 ├── @testing-library/react@11.2.2 ├── @testing-library/user-event@12.6.0 ├── @types/jest@26.0.19 ├── @types/node@12.19.11 ├── @types/react-dom@16.9.10 ├── @types/react@16.14.2 ├── react-dom@17.0.1 ├── react-scripts@4.0.1 ├── react@17.0.1 ├── typescript@4.1.3 └── web-vitals@0.2.4
yarnについて
node.jsのパッケージマネージャーにはnpm以外に、yarnというFacebookが独自で開発したものがあり、シェアもかなりあるらしい。
https://classic.yarnpkg.com/ja/docs/getting-startedclassic.yarnpkg.com
『りあクト！』もyarnを推奨していたが、今回は、以下の理由からyarnは使わずにnpmを使用することにする。
- npmとyarn二つあると、packageをどっちでインストールするか混乱する。
- 今回はReact入門が目的なので、本質ではないところではまりたくない。
※ また、以下のスライドも流し読みしただけだが、npmとyarnの違いとか勉強になった。
speakerdeck.com
その他のモジュールをインストールする。
その他、『りあクト！』で紹介されていたモジュールをインストールする。
- yarnは今回は使わないことにした。
- TypeScriptは
create-react-app実行時に既にインストールされている。
ので、以下を追加でインストールする。
- ts-node
- typesync
ts-node
nodeでTypeScriptを実行するモジュールらしい。
www.npmjs.com
以下のコマンドでインストールする。
(開発環境でしか使用しないモジュールだと思うので、「-D = --save-dev」)をつけてインストールする。
$ cd react_tutorial_nihon_u_1 $ npm install -D ts-node
※ npm installを実行する場所は、create-react-appを実行したディレクトリの1階層下なので注意。
typesync
TypeScriptのサードパーティライブラリの型定義ファイルを自動でインストールしてくれるモジュールらしい。
www.npmjs.com
qiita.com
※ JSで書かれたサードパーティライブラリに型情報がどのように付与されているかを知らないと、このモジュールのメリットが分からないと思うが、ここでは割愛する。『りあクト！』の4章を読むと分かる。
以下のコマンドでインストールする。
(同じく開発環境でしか使用しないモジュールだと思うので、「-D = --save-dev」)をつけてインストールする。
$ npm install -D typesync
上記の2パッケージをインストールする前後でpackage.jsonの差分は以下のようになる。
$ diff package.json package.json.bk
42,45d41
< },
< "devDependencies": {
< "ts-node": "^9.1.1",
< "typesync": "^0.8.0"
Create React Appの生成物をGitにコミットする。
今回のチュートリアル用に以下のGitHubのリポジトリを作成した。
ここに今回のcreate-react-appコマンドの生成物をコミットする。
以下のコマンドを順番に実行する。
$ cd react_tutorial_nihon_u_1 $ git remote add origin https://github.com/delhi09/react_tutorial_nihon_u_1.git $ git branch -M main $ git push -u origin main
※ create-react-appコマンドがgitの初回コミットログの生成まで内部で実行してくれているようなので、上記のコマンドだけでOK。
動作確認
pushしたソースコードが動く状態になっていることを確認する。
任意のディレクトリで以下のコマンドを順番に実行する。
$ git clone https://github.com/delhi09/react_tutorial_nihon_u_1 $ cd react_tutorial_nihon_u_1 $ npm install $ npm start
成功したら、コンソール上に以下のメッセージが表示される。
Compiled successfully! You can now view react_tutorial_nihon_u_1 in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
http://localhost:3000/ にアクセスして、以下の画面が表示されればOK。
(実際には勝手にブラウザが立ち上がる。)
以上
