Reactを使用するための準備！create-react-appでプロジェクトを作成する。
今回はJavaScriptの人気フレームワーク「React」を使用するための手順について説明する。
Reactは人気のJavaScriptフレームワークであり、Reactを使用すればシングルページアプリケーションと呼ばれるモダンで高機能なウェブアプリケーションを作成することができる。
なお、同じようなコンセプトのJavaScriptフレームワークにはAngularとVue.jsがある。3つのフレームワークの違いに興味のある人はこちらの記事を読んでほしい。
Reactを使用するための準備
では、Reactの使用環境を構築してプロジェクトを作成してみよう。
手順は以下の通りだ。
- Node.jsのインストール
⇒ 既にインストールされている場合は飛ばしてもOK - yarnのインストール
⇒ npmをパッケージマネージャーに使用する場合は飛ばしてもOK - プロジェクト作成のコマンドを実行する
⇒ create-react-app
React公式ドキュメンテーション
https://ja.reactjs.org（新しいタブで開きます。）
- CodePen ➡ https://codepen.io
- StackBlitz ➡ https://stackblitz.com
- ReactSandbox ➡ https://codesandbox.io
Node.jsのインストール
Reactを使用するにはNode.jsのインストールが必要となる。
node.jsが既にPCにインストールされている場合はこの章は飛ばしてもらって構わない。
node.jsがインストールされているか分からない場合は、コマンドプロンプトで「npm –version」を実行して確認しよう。
Node.jsのダウンロード
以下のダウンロードページにアクセスする。
Node.jsダウンロードページ:: https://nodejs.org/en/download
LTSのタブを選択した状態で、使用しているOSのボタンをクリックしてインストーラーをダウンロードする。（LTSはLong Term Supportの略で、安定したリリースバージョンのこと。）
Node.jsのインストール
ダウンロードしたインストーラーをダブルクリックしてインストールをスタートする。
ライセンス許諾を確認し次へ進める。
その後、いくつかインストール先やカスタムセットアップなどに関する質問が表示されるが、すべてそのまま「Next」ボタンを押して問題ない。
インストールが始まる際に「ソフトがコンピュータに変更を加えることを許可する」旨の確認ダイアログが表示されるので、許可するとインストールが始まる。
インストールが終了すると以下の確認画面が表示される。
Node.jsが正常にインストールされたか確認したい場合は、コマンドプロンプトで「npm –version」を実行する。
バージョン名が表示されればnode.jsはインストールされている。
Yarnのインストール
次にパッケージマネージャーである「Yarn」をインストールする。
NPMをパッケージマネージャーとして使用する場合はこのステップは飛ばしてもいい。
NPMはNode.jsをインストールした際に同時にインストールされているはずだ。
Yarn vs NPM
JavaScriptのパッケージマネージャーとしては広く普及しているYarnとNPM（Node package manager）、ここではYarnとNPMの両者を比較してみたい。
結論から言うと、どちらのパッケージマネージャーを使用しても現時点では処理速度などにたいした違いは無い。
以下の表はNPMとYarnのよく使うコマンドを比較したもの
| コマンド | NPM | Yarn |
|---|---|---|
| ディペンデンシーのインストール | npm install | yarn |
| パッケージのインストール | npm install [パッケージ名] | yarn add [パッケージ名] |
| パッケージのアンインストール | npm uninstall [パッケージ名] | yarn remove [パッケージ名] |
| アップデート | npm update | yarn upgrade |
| パッケージのアップデート | npm update [パッケージ名] | yarn upgrade [パッケージ名] |
YarnはNPMの短所であった実行速度や安定性の問題を補完するためにfacebookにより開発された新しいパッケージマネージャー。
現時点ではYarnのほうが実行速度など優れているといわれているが、一方のNPMも何度もアップグレードをおこない性能を向上させてきている。
Reactプロジェクトの作成コマンド
では新しいReactプロジェクトを作成しよう。
NPMを使用する場合は以下の2種類のコマンドのうちどちらかを実行する。
npm init react-app my-appnpx create-react-app my-appYarnを使用する場合は以下のコマンドを実行する。
yarn create react-app my-appReactのデフォルトのパッケージマネージャーはYarnであるので上記のコマンドを使ってプロジェクトを作成するとYarnがパッケージマネージャーとして指定される。
パッケージマネージャーにNPMを使用したい場合は「–use-npm」オプションをそれぞれのコマンドに付加する。
npm init react-app my-app --use-npm