【MacOS】初めてのプログラミング・React環境構築編

これからプログラミングを学んでみたいという方に向けて未経験でも理解できるように、プログラミングの基礎を記事にまとめたいと思います。

まずは、プログラミングを実践するための環境が必要となりますので、今回の記事では、MacOSでReactの環境を構築する方法を解説します。

WindowsOSで環境構築をされる方はコチラの記事を参考にしてください。
https://build-up.tech/react-preparation-1/

MacOSにおけるReactの環境構築に必要なもの

HomeBrew

Homebrewはパッケージ管理用のツールです。

次に説明するnodebrewというツールを管理するために必要となります。

以下の公式サイトにアクセスするとインストール用コマンドをコピーすることができるので、ターミナルを開いて入力してください。

https://brew.sh/index_ja

コマンドはコチラです。
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

正常にインストールが完了しているかを確認するために、ターミナルでbrew -vと入力してみてください。

Homebrew 3.4.7などのバージョンが表示されたら無事にインストールが完了しています。

nodebrew 

nodebrewは次に説明するNode.jsを管理するためのツールです。

ターミナルで次のコマンドを入力してください。
brew install nodebrew

Homebrew同様にバージョンを確認して表示されればインストール完了です。

nodebrew -vを入力することでバージョンを確認することができます。

Node.js

最後にNode.jsをインストールします。

Node.jsは、JavaScriptを動作させるためのツールです。
ReactはJavaScriptを簡単に開発するためのツールなので、JavaScriptを動かすためにNode.jsが必要です。

インストールするには以下のコマンドをターミナルで入力します。
nodebrew install stable

このコマンドでNode.jsのインストールは完了しますが、インストールしたNode.jsを使用できるように設定しなくていけません。

まず、インストールしたNode.jsのバージョンを確認するために以下のコマンドを入力します。
nodebrew ls

インストールされたNode.jsのバージョンと、現在使用中のNode.jsのバージョンが以下のように表示されます。v18.5.0
current: none

currentは現在使用中のNode.jsのバージョンが表示されます。
既に環境構築された方はcurrentに使用中のバージョンが表示されます。

始めて環境構築をする方はnoneと表示されています。

次にcurrentにインストールしたNode.jsを設定するために以下のコマンドを入力します。
nodebrew use v18.5.0　(v18.5.0についてはnodebrew lsで表示されているバージョンを入力してください。)

もう一度nodebrew lsを入力して、currentにバージョンがセットされていることを確認してください。
v18.5.0
current: 18.5.0

最後に環境パスを通す作業をします。

ターミナルで以下のコマンドを入力します。
echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.zshrc

以下の表示がされたら環境パスを通す設定も無事に完了です。
source ~/.zshrc

ここまで完了出来たら一度ターミナルを閉じて再度開きなおします。

そして以下のコマンド入力してNode.jsがインストールされていることを確認しましょう。
node -v

無事にインストールされていればv18.5.0などのバージョンが表示されます。

ここまでできればインストール作業はすべて完了です。

create-react-app

Node.jsのインストールが完了したら、次はReact開発のベースを作ります。

まずベースを作る場所を用意します。
ターミナルでmkdir new-appと入力すると、現在のディレクトリにnew-appというディレクトリを作ることができます。
ディレクトリ名は自由に変更していただけます。

次に、作成したディレクトリに移動します。
cd new-appと入力します。

開発をTypeScriptにて行いたい方はReact開発のベースを作成する前に、コマンドプロンプトで npm i -g typescript と入力してEnterキーを押下します。
このコマンドにて、TypeScriptがインストールされます。

tsc -vと入力してTypeScriptのバージョンが表示されればインストールは完了しています。

少し難易度は上がりますが、これから学習される方にはTypeScriptにて開発することをオススメします。

次にコマンドプロンプトで　npx create-react-app new_app　と入力します。
new_appの部分はこれから開発するプログラムのタイトルのようなものなので自由に変更できます。

TypeScriptにて開発をされる方は、タイトルの後ろに「–template typescript」を追加して、
npx create-react-app new_app –template typescript と入力します。

先ほど作成したディレクトリ内に、new_appというディレクトリが作成されて、その中にReact開発のファイルが一式作成されます。

コマンド入力後、コマンドプロンプト上にメッセージがたくさん表示されます。
最後にHappy hacking！と表示されたら開発ベースの作成完了です。

動作確認

開発のベースが無事に作成されているかを確認します。

ターミナルで先ほど作成した開発ベースのディレクトリに移動します。
先ほどの例で説明すると、ターミナルで cd new-app/new_appと入力します。

すると先ほど作成したプロジェクトディレクトリnew_appに移動します。

ここで npm start と入力します。
started server on 0.0.0.0:3000, url: http://localhost:3000 と表示されたら、
ChromeやEdgeなどのウェブブラウザを立ち上げます。

URL入力でhttp://localhost:3000と入力してEnterキーを押下します。

Reactのロゴマークが画面上に表示されれば開発環境の構築は完了となります。

まとめ

• MacOSでReactの環境開発にはHomebrew, nodebrew, Node.jsのインストールが必要
• TypeScriptで開発をする場合は、別途インストールが必要
• ターミナルでcreate-react-app new_appと入力すると開発環境が作られる。
• TypeScriptで開発をする場合は –template typescript を追加する。
• 作成した環境directoryにてnpm startを入力してブラウザを開きhttp://localhost:3000にアクセスして確認する。