MacBookAirにReactとJupyter-notebookをインストールする

# この記事について
まっさらなMacBookAirにReactとJupyter-notebookをインストールした時の記録です。


# 記事のサマリ
今回は下記の手順でReactとJupyter-notebookをインストールしました。

1. Homebrewをインストール
2. Homebrewからanyenvをインストール
3. anyenvからnodenvとpyenvをインストール
4. Reactをインストール
5. Jupyter-notebookをインストール

nodenvとpyenvは、node.jsとpythonのバージョン管理マンです。
下記で一つずつ見ていきましょう。

# MacBookAirのスペック

---

# 1. まずは、 Homebrewをインストール
- Homebrewは、macOS上の**パッケージマネジャー（パッケージ管理システム）**。
 - フレームワーク（Reactなど）やツール（Jupyter-notebookなど）などのソフトウェアは、複数のプログラムから構成されていますが、一つ一つそれらのプログラムをインストールし、適切な場所に配置して構成し、バージョン管理を自分で行うのはかなり大変。
- パッケージマネジャーを経由してソフトウェアをインストールすることで、パッケージマネジャーがプログラム構成や依存関係、バージョン管理などの作業をパッケージ化してくれるので、簡単なコマンドでインストールやバージョンアップを行えるようになる。

Macを買ったらHomebrewをインストールしておくのは良いアイディアだと思います。
Homebrewで色々なソフトウェアを簡単にインストールすることができます。

#### パッケージマネジャーは他にも色々あり、
- npm, yarn
 - Node.js上で動く、JavaScriptのソフトウェアをインストール、管理
- pip
 - pythonのソフトウェアをインストール、管理

#### 今回、Homebrewはanyenvをインストールする為に使います。
anyenvもツール。
anyenvについての詳細はまた違う機会に:)

#### Homebrewのインストールは簡単
- 何かをインストールする時は、インストール元の公式のページを参照して行うのが最も安全で確実です。
- [【公式ページ】Homebrew](https://brew.sh/index_ja)に、「このスクリプトをターミナルに貼り付け実行して下さい。」とあるので、そのスクリプト（コマンド）をコピーしてTerminalで実行。
 - 実行は、Terminalを開いてそのままのディレクトリ（home）で行いました。
- インストール後、Homebrewは```/usr/local```に配置されています。

これだけ！

#### メモ：Homebrewコマンド

- ```$ brew list```

- ```$ brew install <package>```
 - 各パッケージをインストールできる

- ```$ brew list```
 - Homebrewでインストールしたパッケージの一覧を表示

- ```$ brew uninstall <package>```
 - Homebrewでインストールしたパッケージをアンインストール
 - アンインストール後は、```$ brew cleanup -s```を実行してchacheを消しておくとPCが重くならずに済みます。

# 2. anyenvをインストール
#### 2つの方法
1. homebrewからインストールする方法（今回採用した方法）
2. git cloneする方法

[【github】anyenv](https://github.com/anyenv/anyenv)に、それぞれの方法を使ったインストールの仕方について記載があります。

今回はHomebrew経由でインストールするので、[【github】anyenv](https://github.com/anyenv/anyenv)の「1. Install and configure anyenv」の「Homebrew (for macOS user)」に従う。

# 3. anyenvからnodenv、pyenvをインストール
#### nodenv
```$ anyenv install nodenv```
#### pyenv
```$ anyenv install pyenv```

``` ~/.anyenv/envs ```にnodenvとpyenvが配置されています。

*インストールしたら、```$ exec $SHELL -l```を実行してshellをリフレッシュすることで、nodenvやpyenvが使えるようになる。
このコマンドはTerminalを一度閉じて再度開くという動作をするのと同じ効果。

# 4. Reactをインストール
#### まずは、nodenvから任意のnode.jsのバージョンを調達
- ```$ nodenv install 12.14.0```
 - [【公式ページ】Node.js](https://nodejs.org/ja/)でNode.jsのLTS（Long Term 
Support）バージョンを確認し、同じバージョンをnodenvを使ってインストール。

- ```$ nodenv global 12.14.0```
 - とりあえず、このMac全体のnode versionを12.14.0に設定する。

- ```$ exec $SHELL -l```
 - shellをリフレッシュして、node.jsのインストール、バージョンの設定を反映させる。

- ```$ node -v```
 - ```v12.14.0```と出て、きちんとnode.js version 12.14.0がインストール＆設定されていることを確認できる。

#### Reactをインストール！
node.jsの準備が整ったので、[【GitHub】React](https://github.com/facebook/create-react-app)に沿ってインストールを行いました。

# 5. Jupyter-notebookをインストール
#### まずは、pyenvから任意のバージョンのpythonを調達
- ```$ pyenv install 3.8.1```
 - 今回は、 [【公式ページ】python](https://www.python.org/)で推薦されているバージョンをインストール。

#### jupyter notebookをインストール
- ```$ python3 -m pip install --upgrade pip```
 - 今回python3をインストールしたのでこんなコマンドになった。
 - まずはpipを最新の状態に。

- ```$ python3 -m pip install jupyter```
 - Jupyter-notebookをインストール 

#### pipとは・・・
**pipはpythonのパッケージマネージャー。**pythonのバージョンによってはpythonをインストールした時に自動でインストールされる。

# 参考
[【WikiPedia】Homebrew（パッケージ管理システム）](https://ja.wikipedia.org/wiki/Homebrew_%28%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%29)
[【公式ページ】Homebrew](https://brew.sh/index_ja)
[【github】anyenv](https://github.com/anyenv/anyenv)
[【公式ページ】python](https://www.python.org/)