Javascript

create-react-appをインストールしてreactの環境構築をしてみよう！初心者向けMac版

 

3大フレームワーク・ライブラリの１つでもあるReactに興味のある方も多いと思います。今回は簡単にReactの環境を構築するためにReact公式が推奨しているcreate-react-appをインストールしてReactの環境構築を行いたいと思います。Mac環境の方法を説明します。

Contents
  1. create-react-appとは？
  2. 環境構築しよう
  3. create-react-appをインストールする
  4. Reactを少し触ってみよう！
  5. おわり

create-react-appとは？

create-react-appは単一ページのReactアプリケーションを作成するために公式にサポートされている方法で練習用に最適です。

ReactはHTML上に書いて使うこともできるのですが、それだけだと機能も制限されてしまいますがcreate-react-appではシングルページアプリケーション(SPA)を作成するのに最適です。

※ SPAはページを遷移(再読み込み)しなくても単一のページで情報が更新される仕組みです、

複雑なWebアプリを作成する場合はwebpackとBabelやNext.js、Gatsbyなどを使ったりもしますが、いきなりそれらを使うとReactの勉強に集中できなくなってしまうのでまずreactの使い方を学びたい場合はcreate-react-appが推奨されています。

環境構築しよう

Reactを使うにはNode.jsが必要になります。node.jsはWebサーバーとしてサーバーサイドでJavascriptを実行できる環境です。またNode.jsをインストールするためにHomebrew（Macのパッケージマネージャ）をインストールします。

そしてNode.jsを管理するためにnpn（ノードパッケージマネージャー）も使用します。さらにNode.jsのバージョン管理するnodebrewもインストールします。

ややこしいですが、一つずつインストールしていきましょう。

※ Node.jsはバージョン10.16以上、npsは5.6以上

環境構築にはターミナルを使いコマンドを実行します。ターミナルの場所がわからない場合はMacのリンゴマークのあるメニューバーの右側にある虫眼鏡のアイコンからターミナルを検索してみてください。

Homebrewをインストール

HomebrewはMacでプログラミングを勉強したことがある人であれば一度は使ったことがあるかもしれません。使った覚えのある方は自環境にインストールされていないか確認しましょう。

触ったことがない方も例えばPythonを勉強する時など自身のPCに環境を準備する際にHomebrewだとコマンドで簡単に早くインストールすることができます。
そのためプログラムを学ぶ方は、これから使う機会が増えていくでしょう。

Homebrewを使わなくてもインストールが可能なものもありますが楽に環境を準備できるのでこの機会に使ってみてください。

Homebrewがインストールされているか確認する

試しにHomebrewのコマンドをターミナルで実行してみてください。

コマンド

$ brew -v

※あえて書いていますが$マークはコピーせず実行してください。
（$マークはコマンドですよという意味で使われます。よく使われているのでコピーする際は気をつけてください。）

バージョンが表示されれば(例：Homebrew 4.4.15) Homebrewがインストールされています。「command not found」と表示されればHomebrewはインストールされていないのでインストールしましょう。

バージョンを確認することで自環境に必要なものがインストールされているか確認することはよくあるので疑問に思ったらバージョンを確認すればいいと覚えておくと今後も便利です。

Homebrewをインストールする

以下コマンドを実行します。

コマンド

$ /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

2025年2月現在Homebrewのサイトに書かれているコマンドです。

インストールが終わったら、インストールできているか確認するために再びバージョンを確認してみます。

コマンド

$ brew -v

バージョンが表示されれば(例：Homebrew 4.4.15) インストールの完了です。

nodebrewがインストールされているか確認する

次にNode.jsのバージョンを管理するnodebrewがインストールできているか確認します。

コマンド

nodebrew -v

他にも色々表示されるかもしれませんが、最初の方にバージョンが表示 (例 :nodebrew 1.1.0 ) されていればインストールされているのでOKです。

nodebrewのインストール

インストールされていなければnodebrewをインストールしましょう。

コマンド

$ brew install nodebrew

インストールが完了したら、インストールできているか確認するためにバージョンを確認します。

コマンド

nodebrew -v

バージョンが表示(例 :nodebrew 1.1.0 )されれば無事インストールの完了です。

Node.jsのインストール

Webサーバーの役割をはたすNode.jsをインストールします。

・最新の安定版のインストールをする場合

バージョンにこだわりがなく最新の安定版のインストールをする場合は以下のコマンドを打ちます。

コマンド

$ nodebrew install-binary stable

※安定版(LTS)の他には開発版があります。開発版は動作など不安定な可能性があるため安定板を選ぶようにしましょう。

・バージョンを指定する場合

まずインストール可能なバージョンをHomebrewのコマンドを使って確認してみましょう。

コマンド

$ nodebrew ls-remote

結果は以下のようにバージョンの一覧が出てきたら成功です。

例：v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    
v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
以下略

上記の中から特定のバージョンをインストールする場合は以下のコマンドを実行します。

コマンド

$ nodebrew install-binary {version}

例えばv16.11.0を指定した場合

コマンド

$ nodebrew install-binary v16.11.0

インストールが完了したらバージョンを確認してみます。

コマンド

$ nodebrew ls

結果は以下のようにバージョンが表示されます。意図したバージョンになっていれば成功です。

例：v16.11.0
current: v16.11.0

current: noneとなっている場合や使いたいと思っているバージョンがcurrentに設定されていない時は以下のコマンドを実行し使用するバージョンを有効にします。

コマンド(v16.11.0を有効にする場合)

$ nodebrew use v16.11.0

設定したらもう一度「nodebrew ls」コマンドを実行しバージョンを確認してみてください。

node.jsの環境パスを通す

nodeのコマンドを使えるようにするためにパスを通します。

Macの場合zshとbashの2つのシェル(PCとコミュニケーションをとる窓口おようなもの)が用意されており、Macのバージョンにより異なります。

そのためまずどちらのシェルを使用しているのかを確認します。

コマンド

$ echo $0

-bash や -zsh と結果が表示されるかと思います。bashかzshか確認してください。(macOS X 10.15 からはzshがデフォルトとなっていますが環境設定で変更も可能)

パスを通すコマンドを実行しましょう。

コマンドbashの時

$ echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash_profile

コマンドzshの時

$ echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.zprofile

次に環境パスの読み込みをします。

コマンドbashの時

$ source ~/.bash_profile

コマンドzshの時

$ source ~/.zprofile

node.jsのコマンドが使えるかバージョンを確認します。

コマンド

$ node -v

結果として v22.1.0 等と変えてきたらOKです。

コマンドを実行後は念のためターミナルを再起動してもコマンドが実行できるか確認ください。ターミナルを再起動後に「node -v」のコマンドが実行できれば問題なくパスが通っています。

nmpを確認する

node.jsのインストールが完了したら、同時にnpmも使えるようになります。問題なく使えるか動作確認をしましょう。

コマンド

$ npm -v

10.8.3 のようにバージョンが確認できればnpmが使えているので、これでReactの動作環境構築が完了しました。

お疲れ様です。

create-react-appをインストールする

npmに同梱されているnpxコマンドを使ってcreate-react-appをインストールします。

フォルダを移動する

コマンドを使ってcreate-react-appのデータを保存するディレクトリへ移動します。

以下は書類フォルダ内(Documents)にreact-testフォルダを既に用意した場合のパスです。

コマンド

$ cd /Users/ユーザ名/Documents/react-test

ユーザー名は自身のユーザー名に置き換えてください。

react-testフォルダ内に移動したんで、ここにcreate-react-appをインストールします。

コマンド

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

プロジェクト名は任意ですが便宜的に仮でcreate-react-app-projectsとした場合以下のコマンドになります。※これからはcreate-react-app-projectsとした場合の例で書いていきます。

$ npx create-react-app create-react-app-projects

実行するとcreate-react-appがインストールされます。

初回はもしかしたら、以下のようなメッセージが出るかもしれません。

Ok to proceed? (y)

その場合は「y」を入力しエンターすると続行できます。yはyesの意味。

少し時間がかかるので待ちます。

結果（例）
(略)
We suggest that you begin by typing:
  cd create-react-app-projects
  npm start
Happy hacking!
(略)

上記のメッセージが表示されたらインストール完了です。

メッセージ(cd create-react-app-projects)にもあるようにcreate-react-app-projectsフォルダへディレクトリを移動してフォルダが作成されているか確認します。

コマンド

$ cd create-react-app-projects

プロジェクト名がcreate-react-app-projectsでない場合は置き換えて実施してください。

移動したら以下のコマンドを実行します。

コマンド

$ npm start

ブラウザ上でReactの画面が表示されたらCreate-React-Appのインストールが完了です。

Create-React-Appインストール後トップページ

これで環境構築は終了です。お疲れ様でした。


※ サーバーを終了する時はターミナルで「control + c」のショートカットキーを押してください。

Reactを少し触ってみよう！

せっかくCreate-React-Appインストールしたので、少しReactを触ってみましょう。

Visual Studio Codeなどのエディタで作成したCreate-React-Appのプロジェクトをワークスペースに開いて中身を確認します。

エディタを持っていない方はこの機会にVisual Studio Codeのダウンロードを検討してみてもいいと思います。

フォルダ構成

簡単にフォルダ構成について説明します。

以下のようなフォルダ構成になっているかと思いますが重要なところだけ紹介します。

プロジェクト
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

srcフォルダ

開発用のファイルが配置されています。JSXなどはここに配置します。

publicフォルダ

静的ファイルが配置されています。

App.jsを書き換えてみる

少し書き換えて反映されるかみてみます。

app.js（書き換え済み）

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"
        >
          はじめてのReact
        </a>
      </header>
    </div>
  );
}
export default App;

「Learn React」の部分を「はじめてのReact」へ書き換えました。

Create-React-Appの編集後の画面

編集して保存すると直ちにブラウザへ反映されます。ホットリロード(保存すると反映される)に対応しているため、確認しやすいので便利です。

ビルド (build) してみる

srcやpublicフォルダはReactで編集しやすい状態（開発環境）のため、実際にこのままの状態でサーバへあげても動作しません。

そのため作成したものsrcやpublicフォルダの中身をまとめて本番環境用のデータを作成することをビルドといいます。

それでは試しにビルドしてみましょう。

サーバーを起動していたら、「control + c」のショートカットキーを押してサーバーを停止し以下コマンドを実行します。

コマンド

$ npm run build

しばらくするとbuildフォルダが作成されます。

buildデータを含めたデータが本番環境のデータになります。

おわり

Reactを練習するためのCreate-React-Appをインストールする手順を紹介しました。

難しく感じた方もいるかと思いますが、ここまで準備できたらReactを触って練習していきましょう。

RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です