---
# System prepended metadata

title: 環境構築 for Mac

---

# MacのReact環境構築

## nodenvのインストール

https://github.com/nodenv/nodenv

node18.16.0をインストールする

## homebrewをインストール
ターミナルを開いて以下のコードを入力します。（DockでLaunchpadのアイコンをクリックして、検索フィールドに「ターミナル」と入力するとターミナルがあります。https://support.apple.com/ja-jp/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac）
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
パスワードを聞かれたら入力し、「return」キーを押すように指示されたら「return（いわゆるエンターキー）」を押してください。
インストールが完了したら、パスを通します（以下を入力）。「ユーザー名」はご自身の環境に合わせて書き換えてください。
```
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/user/.zprofile
```
続いて以下を入力
```
eval $(/opt/homebrew/bin/brew shellenv)
```
以下を実行してバージョン情報が出れば成功です。
```
brew -v
```
## Nodenvのインストール
homebrewでnodenvをインストールします。以下を入力する。
```
brew install nodenv
```
コマンドを実行できるようにパスを通します。以下を続けて入力
```
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
```
```
echo 'eval "$(nodenv init -)"' >> ~/.zshrc
```
以下を入力してバージョン情報が出たらインストール完了
```
nodenv -v
```



## ViteでReact環境を作る

今後ReactやTypeScriptの環境を作るときはViteを使います。

※Viteとは

モダンな開発環境に対応したビルドツール。

従来のツールに比べ以下のメリットがあります。

- 開発サーバの起動・更新がとにかく早い
- TypeScriptやSass使用時の設定がほぼ不要
np

```jsx
$ npm create vite@latest
// 今回はproject名をsample-viteにしてみる
// React + JavaScriptを作れればOK
$ ls // sample-viteというディレクトリができているかを確認
$ cd sample-vite
$ npm i // package.jsonの内容をインストール
// node_modulesというディレクトリができている
//今いる場所をVSCodeでひらく

// ターミナルをひらく(デフォルトはPowerShellなのでWSLのターミナルをひらく)
$ npm run dev
```

https://localhost:5173を開ければ成功です！お疲れさまでした。

## Githubで管理する

課題1を先ほど作成したViteの上で動くようにします(コピペ)

Githubにリポジトリを作成して管理します
先ほど作成したディレクトリをGitubにPushしてください

Gitに関しては手を動かしながら仕組みを学んでほしいです(教材などを買ったりすることはせずにpushまでを調べて実施してみてください)

[ここに手順をまとめてください]
①Github上でリポジトリを作成
②ローカルターミナルでクローンを作成
③クローン作成後にプロジェクト作成
④作業に入る前にブランチをきる git branch branch名
⑤ブランチをきって作業に入る　 
⑥作業が終わったらgithubへソースをあげる
git add *
git push origin branch名
⑦github画面に行ってプルリクエストをmergeする（個人開発の場合)
branchを削除する(後続作業がない場合)
⑧github上でマージ確認したらローカルでもブランチを削除する(後続作業がない場合)


参考

https://www.sejuku.net/blog/70775

