[SetUp][Mac][Homebrew] 開発用Macの初期設定

# 目次
- [Finderでホームディレクトリを見られるようにする](#finderでホームディレクトリを見られるようにする)
- [Homebrewのインストール](#homebrewのインストール)
- []()
- [Tips](#tips)

# Finderでホームディレクトリを見られるようにする
1. Finder
1. 設定
1. サイドバー
1. `ホーム`にチェック


# Homebrewのインストール
1. `Terminal`を開く
1. [Homwbrewのホームページ](https://brew.sh)を開く
1.  インストールする
    ~~~sh
    Homebrewのホームページのインストールコマンド
    ~~~
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/cdd325da-b889-87d2-3b2b-698a038f310a.png)

1. インストールできているか確認
    ~~~sh
    brew -v
    ~~~
1. 現時点(コマンド実行時点)での`path`を確認する
    ~~~sh
    echo $PATH
    
    // 出力結果
    /usr/local/bin
    ~~~
1. **↑上記`path`をコピーしておく**


# HomebrewCaskのインストール
CaskがHomebrew本体にオプションとして含まれているため現在は**不要** [link](https://pictobaum.com/tips/homebrew-install/)
古いバージョンのHomebrewだとCask本体を別途インストールし`brew cask install {CASK_NAME}`のようなコマンドで利用する必要あり

# Homebrewでgitをインストール
1. gitが既にMacに存在するかの確認
    ~~~sh
    which git
    
    // 出力結果
    // gitコマンドを操作するためのプログラムが格納されたパスが表示される
    /usr/bin
    ~~~
1. gitのバージョンを確認する
    ~~~sh
    git version
    
    // 出力結果
    // インストールされているgitのバージョンが表示される
    git version 2.39.3 (Apple Git-146)
    ~~~
1. gitの安定版を確認する [link](https://qiita.com/inakuuun/items/57fd4162d17d72e0c4fa)
    ~~~sh
    brew info git | grep stable
    
    // 出力結果
    git: stable 2.45.2 (bottled), HEAD
    ~~~

1. gitをインストールする
    ~~~sh
    brew search git
    ~~~
    ~~~sh
    brew install git
    ~~~

1. 現時点(コマンド実行時点)でのpathを確認する
    ~~~sh
    echo $PATH
    
    // 出力結果
    /usr/local/bin
    ~~~

## pathを通す
**※: pathは環境変数**

1. .zshrc（シェル）を作成する
    ~~~sh
    touch .zshrc
    ~~~

1. .zshrc（シェル）の中にpathを指定するコマンドを記入する(pathを通す)
    ~~~sh
    export PATH=/usr/local/bin:$PATH
    ~~~

1. 設定（.zshrc（シェル）の中のpath）を反映させる
    ~~~sh
    source .zshrc
    ~~~

1. 参照しているgitの`path`を確認する
    ~~~sh
    which git
    
    // 出力結果
    // gitコマンドを操作するためのプログラムが格納されたパスが表示される
    /usr/local/bin
    ~~~
1. 2.で設定した`path`と一致するか確認する（過去は`/usr/bin`）
1. gitのconfigを登録する
    ~~~sh
    git config --global user.name "UseName"
    ~~~
    ~~~sh
    git config --global user.email "UseEmail@domain.co.jp" 
    ~~~
1. 設定したconfigを確認する
    ~~~sh
    git config -l
    
    // 出力結果
    user.name=UseName
    user.email=UseEmail@domain.co.jp
    ~~~

## GitBashをインストールする [link](https://stackoverflow.com/questions/62197021/use-gitbash-with-macos#:~:text=In%20the%20Terminal%20run%20which%20git%2C%20you%20should,%2Fusr%2Fbin%2Fgit%20as%20the%20output.%20No%20need%20for%20GitBash.)
> MacOSは厳密に言えばUnix互換OSではありませんが、特定のUnixの遺産があり、ネイティブbashがすぐにインストールされています。
したがって、Git(AFAIK、通常はHomebrew経由)をインストールすると、完全なネイティブGitエクスペリエンスが得られます。

つまり、GitBashは現在は**不要**

# HomebrewでGitHubCLIをインストール [link](https://zenn.dev/krabben16/articles/setup-github-cli-for-mac)
1. インストール
    ~~~sh
    brew install gh
    ~~~

1. GitHub CLIの認証を行う
    ~~~sh
    gh auth login
    ~~~
1. 質問に答える
    ~~~sh
    ? What account do you want to log into?  [Use arrows to move, type to filter]
    > GitHub.com
      GitHub Enterprise Server
    ? What is your preferred protocol for Git operations?  [Use arrows to move, type to filter]
    > HTTPS
      SSH
    ? Authenticate Git with your GitHub credentials? (Y/n) Y
    ? How would you like to authenticate GitHub CLI?  [Use arrows to move, type to filter]
    > Login with a web browser
      Paste an authentication token
    ? How would you like to authenticate GitHub CLI? Login with a web browser
    
    ! First copy your one-time code: XXXX-XXXX
    Press Enter to open github.com in your browser...
    ~~~
1. ブラウザでGitHubが開くので、`one-time code`を使用してログイン
1. ログインできれば完了

# Homebrewでdockerをインストール [link](https://qiita.com/juno_rmks/items/594681fa2a71945b6f3b)
1. DockerをHomebrewで探す
    ~~~sh
    brew search docker
    ~~~
1. Dockerをインストールする
    ~~~sh
    brew install docker --cask
    ~~~

# Homebrewでdocker-composeをインストール 
1. DockerComposeをHomebrewで探す
    ~~~sh
    brew search docker-compose
    ~~~
1. DockerComposeをインストールする
    ~~~sh
    brew install docker-compose
    ~~~

# HomebrewでVirtualBoxをインストール [link](https://qiita.com/kinako3/items/b4433918931fd790a8b8)
1. VirtualBoxをHomebrewで探す
    ~~~sh
    brew search virtualbocx
    ~~~
1. VirtualBoxをインストールする
    ~~~sh
    brew install virtualbox --cask
    ~~~

# HomebrewでVagrantをインストール [link](https://qiita.com/kinako3/items/b4433918931fd790a8b8)
1. VagrantをHomebrewで探す
    ~~~sh
    brew search vargant
    ~~~
1. Vagrantをインストールする
    ~~~sh
    brew install virtualbox --cask
    ~~~

# HomebrewでVScodeをインストール
1. VScodeをHomebrewで探す
    ~~~sh
    brew search visual-studio-code
    ~~~
1. VScodeをインストールする
    ~~~sh
    brew install visual-studio-code --cask
    ~~~
# HomebrewでChromeをインストール
1. VScodeをChromeで探す
    ~~~sh
    brew search chrome
    ~~~
1. VScodeをインストールする
    ~~~sh
    brew install google-chrome --cask
    ~~~

# Homebrewでnodebrewをインストール
1. nodebrewをHomebrewで探す
    ~~~sh
    brew search nodebrew
    ~~~
1. nodebrewをインストールする
    ~~~sh
    brew install nodebrew
    ~~~

# nodebrewでnode.jsをインストールする
1. `Terminal`でnodebrewを開く
    ~~~sh
    nodebrew setup
    ~~~
1. PATH情報が出力される
    ~~~sh
    Fetching nodebrew...
    Installed nodebrew in $HOME/.nodebrew
    
    ========================================
    Export a path to nodebrew:
    
    export PATH=$HOME/.nodebrew/current/bin:$PATH
    ========================================
    ~~~
1. path情報を`.zshrc` (bashを使用している場合は、`.bash_profile`）に追記する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/3e6472db-5114-ac8b-c6c6-87b39a0febad.png)

1. 下記のようにコマンドで実行しても良い(3.と同じことを実施している)
    ~~~sh
    echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
    ~~~
1. 設定を反映させる
    ~~~sh
    source ~/.zshrc
    ~~~


# Tips
## インストールされたパッケージの確認方法
~~~sh
brew list --cask
or
brew list

// 出力結果
===> Formulae
gh git

===> Casks
docker vagrant virtualbox
~~~

## 隠しファイルの表示方法
`Machintosh HD`で`command`+`shift`+`.`
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/92ebebd5-e58f-eb83-ceb4-c3ca6c13b8e1.png)



# vagrantを用いてvirtualboxにLinux OSをインストールする 

# virtualbox(VM)内の環境構築
1. React Project
1. MySQL
1. TypeScript
1.  React