M1 Macbook で Reactプロジェクトをつくる

Reactプロジェクトは簡単に作れるのですが、環境によっては、つまずきポイントも多いです。わたしは M1 Macbook を使っているのですが、node の設定でつまづきましたので、その情報を含めて手順をまとめておきます。

PC環境

以下のPC環境です。
M1 MacbookAir の標準構成です。

nodeのインストールと環境パスの設定

Reactプロジェクトを作成するためには v14以降のnodeが必要です。
nodeは以下のサイトからインストールします。

Node.js

Node.js

https://nodejs.org/ja/

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodeをインストールしたら、macOS Monterey 付属のターミナルで node のバージョンを確認します。

% node -v

インストールした node のバージョンが表示されれば問題ありません。

もしインストールしたバージョンより古いバージョンが表示された場合は、環境パスが正しく通っていない状態です。その場合は、以下のコマンドで環境パスを設定します。
（どうも最近のMacOSでは bash_profile ではなく、zshrc に設定する必要があるみたいです。）

以下のコマンドで環境パスを設定します。

% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc

Reactプロジェクトの作成

以下の公式サイトの情報に沿って進めていきます。

ja.reactjs.org

新しい React アプリを作る – React

https://ja.reactjs.org/docs/create-a-new-react-app.html

ユーザインターフェース構築のための JavaScript ライブラリ

プロジェクトの作成は、コンソールで create-react-app コマンドを入力するだけです。

% npx create-react-app toeic-app

「Happy hacking!」と表示されたら、正常にプロジェクトが作成されています。

Reactを実行する

プロジェクトが作成されたら、さっそくアプリを起動しましょう。
作成したプロジェクトフォルダに移動して、npm startコマンドで実行します。

% cd toeic-app
% npm start

実行すると、自動でブラウザが立ち上がって、Reactアプリが表示されます。

Reactプロジェクトの不要ファイルを削除する

デフォルト状態では、多くのファイルが含まれています。

開発はまっさらな状態から始めたいので、余計なファイルや実装を削除します。

まず、srcフォルダ以下を以下の３つのファイルだけにしておきます。

App.jsを以下のように修正します。

function App() {
  return <div className="App">プロジェクトを空っぽに</div>;
}

export default App;

index.js を以下のように修正します。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.css はそのままでOKです。

これで以下の表に空っぽの表示になります。

まとめ

Reactプロジェクトを作成する方法をまとめました。

せっかく開発をしようと思っても、初手のプロジェクト作成でつまづいてはやる気がなくなってしまいます。

毎回プロジェクトを作成して、不要なファイルを削除したりするのが面倒なので、create-react-app-blank みたいなコマンドを用意してもらえると便利なのですが。。