はじめに

Reactの開発環境の構築手順について解説します。

Node.jsのインストール
パッケージマネージャーyarnのインストール
creat-react-appのインストール
構築した環境でHello Worldを表示させてみる

1. Node.jsのインストール

まず、Node.jsをインストールするために、Node.jsの公式サイトを開きします（下記のURLをクリックしてください）。
https://nodejs.org/ja/

URLを開くとLTS版とCURRENT版（最新版）の２つがあります。

LTS版
LTSとは、Long-term Supportの略で、長期の保守運用が約束されたバージョンのことです。

CURRENT版
CURRENTとは、最新版だけど安定性を約束しないことで機能追加を盛り込んだバージョンのことです。

LTS版が推奨となっているので、今回はLTS版をダウンロードします。
node.jsをダウンロードして、インストールが完了したら、ターミナルで下記のコマンドを実行します。そして、Nodeがインストールしているかを確認します。下記のようにNodeのバージョンが表示されていればよいです。

$ node -v
v18.14.2

2. yarnをインストール

nodeのパッケージマネージャであるyarnをインストールしていきます。
npmというパッケージマネージャが、Nodeをインストールしたときにありますが、npmよりもyarnの方がより高速で信頼度の高いものになっているので、yarnをインストールしていきます。
yarnをインストールする場合は、ターミナルで下記のコマンドを実行してください。

$ npm install --global yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
updated 1 package in 1.698s

yarnがインストールされているかは、下記のコマンドを実行して、バージョンが表示されていればOKです。

$ yarn --version
1.22.19

3. creat-react-appのインストール

従来のreactを用いた開発では、Babelやwebpackなど様々なパッケージをマニュアルでインストールする必要があったため、ものすごく手間がかかっていました。
しかし、creat-react-appをインストールすることで、これらの問題が解消でき、簡単に必要なパッケージをインストールすることができます。
下記のコマンドを実行することでインストールできます。

$ yarn global add create-react-app

4. 構築した環境でHello Worldを表示させてみる

ターミナルから下記のコマンドを実行して、アプリケーションを作成します。
作成する場所は任意で構いません。

React.jsの場合はこちら↓

$ yarn create react-app helloworld

React + TypeScriptの場合はこちら↓

$ yarn create react-app helloworld --template typescript

もし、既にディレクトリを作成していて、そのディレクトリに展開したかったら下記のように実行する。
$ cd helloworld
$ yarn create react-app --template typescript .

下記のようなメッセージが表示されていればOKです。


success Uninstalled packages.
✨  Done in 46.14s.

Created git commit.

Success! Created amplifyapp at /Users/*******/helloworld
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn 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 helloworld
  yarn start

Happy hacking!

作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。

$ cd helloworld
$ yarn start

実行後、ブラウザが起動し、以下の画面が表示されていればOKです。

ここまでできたら、helloworld/src配下にあるApp.jsを開きましょう。
App.jsを開くと以下のようなコードが書かれていると思います。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.jsの内容を全て消して、以下のようにソースを書いてみましょう。

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

修正してブラウザに以下のように表示されていればOKです。

次回Reactを用いてカウントアプリを作ってみたいと思います。
Reactでカウントアプリを作る

React 開発環境構築

はじめに

1. Node.jsのインストール

2. yarnをインストール

3. creat-react-appのインストール

4. 構築した環境でHello Worldを表示させてみる