Zenn
🛠️

WindowsでReactの開発を行ってみる

2020/10/13に公開
Node.js
React
VS Code
Windows
tech

これは何?

React初心者がWindowsでReact開発を試みるための環境構築手順です。
個人的備忘録＆社内展開向けです。

概要

本記事の構成は以下のようになっています。

  1. Node.jsのインストール
  2. テンプレートプロジェクトの作成
  3. コード編集
  4. ビルド

1. まずはNode.jsをインストールする

Reactを使うためにはまずはNode.jsをインストールする必要があります。
Windows環境でNode.jsをインストールするにはいくつか方法があります。

公式インストーラは間違いないでしょう。
scoop はコマンドラインで各種モジュールのインストールや管理ができるツールで、私の最近のお気に入りです。
nodist はNode.js専用(?)のパッケージ管理ツールで、Node.jsのバージョン管理が楽にできるとのことです。

今回はscoopを使うことを前提に進めます。
scoopについては過去の書いた記事を参照してください。
【Scoopを使った環境構築 - Qiita】

Node.jsにはいくつかバージョンが存在しますが、最近のバージョンならばReactは対応しているようです。
無難に安定版(LTS版)をインストールしておきます。
scoopでNode.jsの安定版をインストールするためには以下のコマンドを実行します。
なお、2020年10月10日時点でNode.jsの安定版は12.19.0でした。

Node.jsインストール(scoop使用)
scoop install nodejs-lts

Node.jsのインストールが完了したら、念の為バージョンを確認しておきましょう。

Node.jsのバージョン確認
node -v
#=> v12.19.0

npm -v
#=> 6.14.8

2. テンプレートプロジェクトの作成

Node.jsがインストールできたらnpxコマンドを使って、Reactのテンプレートプロジェクトを作成します。
具体的には以下のコマンドを実行します。

テンプレート作成
npx create-react-app <ワークスペース>

<ワークスペース> には保存先のフォルダを指定します。
処理が完了したら下記のコマンドを実行して動作を確認してみます。

起動
cd <ワークスペース>
npm start

うまく動作すると以下のように表示されます。

動作確認
You can now view test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xx.xxx.xxx:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

表示に従いWebブラウザで http://localhost:3000 に接続すると、以下のように表示されます。

3. 初めてのReact (Hello World!!)

上記で表示された画面には、Edit src/App.js and save to reload. と書かれています。
とりあえず src/App.js ファイルを編集してみます。
jsファイルなので適当なテキストエディタで編集してみます。

本手順ではVSCodeでワークスペースフォルダを開いてみます。

VSCodeでワークスペースを開く
code <ワークスペース>

下記のように表示されます。

ワークスペース内には以下のものが作られています。

  • node_modules: 依存パッケージを含むフォルダ
  • public: htmlファイルなどを含ぬフォルダ
  • src:コンポーネント用のjsファイルやcssファイルを含むフォルダ
  • package-lock.json: パッケージの依存関係
  • package.json: パッケージの依存関係

では、早速 src/App.js ファイルを編集していきます。
編集内容としては、ロゴマークの上に<h1>タグでHello World!!を書いてみました。

編集が終わり保存したら、ブラウザをリロードすると編集内容が反映されました。

4. Build

最後にビルドを行います。
ビルドを行うには下記コマンドを実行します。

build
npm run build

処理が完了するとワークスペース内にbuildというフォルダが作成されます。
これが成果物でこのフォルダを環境にDeployします。

とりあえず、出来上がったものを動作確認するためには、Node上にserveをインストールするのが手っ取り早いです。
具体的には以下のコマンドを実行します。

動作確認
npm install -g serve    # serveのインストール

cd <ワークスペース>
serve -s build          # buildフォルダをルートにしてserveを起動

起動に成功すると、以下のように表示されます。

出力結果
   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:5000     │
   │   - On Your Network:  http://xxxx.xx.xx.x:5000  │
   │                                                 │
   │   Copied local address to clipboard!            │
   │                                                 │
   └─────────────────────────────────────────────────┘

表示されたURLブラウザで開くと動作を確認できます。

最後に

とりあえずWindowsでReact開発が行えるようになりました。
次は、チュートリアルに従ってアプリ作成を行っていきます。

Discussion