M1 Pro搭載MacBook Proの初期設定cheatsheet(Vim, Git, VSCode, React, Python, Node.JS)

# Apple Silicon搭載のMacBook Proを使いこなせ

* 手順通りの設定を行うことで1日でM1 Pro MacBook Proの生産性をフルパワーの8割まで引き出すcheatsheetです。
* ★マークをつけた箇所は個人的主観が入ってる箇所です。適宜飛ばしたりコマンドを変更したりしてください。簡単な質問は受け付けてます。

## 前提条件

* OS: Monterey
* MacBook Pro(16-inch, 2021)
* CPU: Apple M1 Pro
* ★US配置
* コマンドラインの基本を習得してる

## コンセプト

* iMac(Intel late2017)とMacBook Air(2020 M1)の役割を一元化したかった
* ファイル構造をシンプルに保ち、ターミナルからの操作の簡潔さを保つ
    * 後述する理由よりOSを英語に設定する
    * 書類⇒Document, デスクトップ⇒Desktop等ファインダーでの命名と実際のディレクトリ名を一致させる等の目的
* GUI操作においてマウスを使う場面を減らす
* Intel CPUのMacとの互換性を極力切らない⇒所持してるWindows PCとの連系でどうしようもないところは今のところ解決してる
* [このFlask-ReactのWebアプリのリポジトリのプルリク](https://github.com/dternyak/React-Redux-Flask/pull/44)の内容を動作させることをとりあえずの目標とする

## 周辺機器

* SSDストレージ
* ★Thunderbolt Hub: 
    * こちらを私は導入しました [Caldigit Thunderbolt4 Element Hub](https://www.caldigit.com/thunderbolt-4-element-hub/)
    * 電源, SSDストレージ, 有線LAN, オーディオインターフェース(Apollo Twin),iPadとのUSB接続などを一つのポートで一元化して管理することでiMacの拡張性とノートパソコンの携帯性の切り替えを迅速化するため
* ★サブモニター⇒16インチの美しい高解像度ディスプレイのおかげでサブモニターなしでも多くの場合は問題ない
* ★オーディオインターフェース: Apollo Twin Quad⇒自分が音楽制作するため, こいつがThunderbolt接続を要求してくる
* ★USBｰ有線LAN変換アダプターと有線LAN⇒回線の安定のため

---

# セットアップ編

## 初期設定

1. 言語を`English US`, リージョンを`日本`に設定する
2. ユーザーを作成する, 本名アカウント名ともに英字にする(本名に日本語を使用するとHDD名が不自然なローマ字になるため)
    * ユーザーのパスワードはApple IDとは別の物にしないといけない, ターミナルではTouch IDが使用できないことも多いのでタイピングしやすくかつ強固なものを推奨します
3. 残りの設定は適当で(Touch IDは大変便利なので是非とも設定しておきたい)

## 必須ソフトウェアのダウンロード

1. お気に入りのブラウザの導入
    * 自分は検索用ブラウザとしてBrave, 信頼出来るKeychainにパスワード管理をさせたいサイト向けにSafari, 会社関係用にFirefoxと使い分けてます
2. ★Shiftltの導入
    * 設定したHotKeyで現在キーボード入力が有効になってるアプリケーションの画面サイズを最大化、右半分、左半分, サブモニター, フルスクリーンなどに瞬時に切り替えるアプリケーション。個人的にはこれなしでmacOSを使用する気になれません。
    * [公式リポジトリ](https://github.com/fikovnik/ShiftIt/releases)から最新バージョンのzipファイルをダウンロードし, 導入します。
    * ↓切り替えイメージ､ これと後述するmacOSの基本コマンドを組み合わせることで生産性が最強になります。
    ![シーケンス 01_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/9cfe7841-2427-9ab4-a4ea-91ce3ac16850.gif)
    * ↓設定ファイルの例
    ![shiftlt_config_example.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/2243328a-fbe2-20ca-48ce-0d9f3db0fff9.jpeg)
3. ★iTerm2の導入(iTerm2を使用しない場合はTerminalを使用する)
    * [iTerm2についての概要](https://qiita.com/ruwatana/items/8d9c174250061721ad11)
    * HotKeyでの立ち上げ､ 豊富なカスタマイズなど標準ターミナルより多くの機能を持っています。
    * [公式サイト](https://iterm2.com)からダウンロードします。
    * ↓iTerm2をカスタマイズした場合の見え方の例
    ![iterm2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/5ee4e855-4e54-1a74-ac52-e3e6b5b92e95.png)
4. Xcode Command Line Toolsのインストール
    * あらかじめapp storeからxcodeをインストールし、一度は起動すること。
    * コマンドラインからGitなどの基本的なコマンドを利用できるようにするため
    * [公式ガイド](https://mac.install.guide/commandlinetools/4.html)←大変時間がかかります！
5. Homebrewのインストール
    * macOS版aptのようなものです。エンジニアはみんないれましょう。
    * [公式ページ](https://brew.sh)
    * 以下のコマンドをiTerm2(もしくはターミナル)から入力します
        ```bash
        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        ```
    * インストールが終わったあと､ コマンドライン上に記載されてるとおりのコマンドを入力し､ パスを通します
        ```bash
       echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/[PC-name]/.zprofile
        eval $(/opt/homebrew/bin/brew shellenv)
        ```
6. The Unarchiverのインストール
    * rarや7zipの解凍にしようします。
    * [App Store](https://apps.apple.com/jp/app/the-unarchiver/id425424353?l=en&mt=12)

## 行いたい設定

### System Preferences

* Keyboard
    * Use F1, F2, etc.keys as standard function keys
        * 有効にします。エンジニアの場合こちらの方が何かと便利かと思います。
    * Shortcuts
* ★Trackpad
    * Keyboard
        * ★Modifier Keys(US配置の場合)
            * Caps LockをCtrlに割り当てます(ctrlの位置はここがいいですよね)
        * Tap to click
            * 便利なので有効にします
    * Tracking speed
        * デフォルトだと､ 高解像度のディスプレイに対して遅すぎると思うので､ 自分は右から4番目の速さにしてます。
    * Shortcut
        * ★Input Sources(US配置のキーボードを使用してる場合)
            * Select the previous input source
                * 有効にします。タッチタイピングでの言語の切り替えはスペース+ctrlが楽だと思ってます。
        * App Shortcuts
            * +ボタンを押下して､ `Finder.app`を選択します。
            * `Merge All Windows`を`ctrl+option+Shift+M`に割り当てる(割り当ては自由です)
            * これにより､ ファインダーでウィンドウが増えてしまったときも､ このコマンドで一つのウィンドウに統合することができて非常に便利です。

### Finder

右上のFinder>Preferenceタブより

* General
    * New FInder windows show
        * ★個人的にRecentが毎回出てくるのが鬱陶しいの`~`を割り当ててます
    * Sidebar
        * Locations>[ユーザーのPC名]にチェックを入れる
            * これによりファインダーでいつでもルートへアクセスできる
    * Advanced
        * Show all filename extensions
            * 有効にします､ 拡張子は知りたいので

タブの上の部分を右クリックしてCustomize Toolbar

* Pathをツールバーに足します
    ![toolbar_path.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/c59121bf-ac55-5790-da86-38bd46f29226.gif)
    * これにより､ ファインダーよりパスを遡ることができます。(ファインダーの左上のディレクトリ名を右クリックすることでもパスを遡ることできました)
* ファインダーのタブを右クリック>Services>New iTerm2 Tab hereでiTerm2をファインダーのディレクトリで開くことが出来ます。

## macOS生産性爆上げコマンド

* command+tab
    * windowsとほぼ同じ､ アプリケーションの切り替えが出来ます。
* スクリーンショット
    * 全体を録る場合は`shift+command+3`です。
    * 詳細は[公式ガイド](https://support.apple.com/ja-jp/HT201361)より
* OSレベルでのEmacsキーバインド
    * 実はmacOSはOSレベルでEmacsキーバインドの多くが使用できます。
    * 例
        * `Ctrl + F`: 一文字右(Forward)
        * `Ctrl + B`: 一文字左(Back)
        * `Ctrl + A`: 行の先頭(Append)
        * `Ctrl + E`: 行の末尾(End)
        * `Ctrl + H`: 前の文字を削除
        * より詳しく: [Macを使う新人エンジニアに絶対に覚えてもらいたいキーバインド入門](https://qiita.com/yousan/items/9880abdc24431316fa84)


## コマンドラインの設定

### ★Powerlevel10k

ターミナルをオシャレに出来ます。またディレクトリ名などを常時表示させることなどもできて利便性も向上します

* [公式GitHub](https://github.com/romkatv/powerlevel10k)
* プラグインマネージャーを使用しないインストール方法
    * 以下のコマンドをターミナルから入力します
        ```zsh
        git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/powerlevel10k
        echo 'source ~/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc
        ```
    * 参考: [Zshに「Powerlevel10k」を導入する](https://slacknotebook.com/zsh-powerlevel10k-installation-linux/)

### ★vimの拡張
* コマンドラインではvim, emacs, nano等のエディタ操作が必須となります。初心者にとって最も扱いやすいのnanoだとされてます。
* macにあらかじめ入ってるvimは最新ではありません。
    * `brew install vim`で最新のものを入れましょう
    * その後`brew unlink vim && brew link vim`でbrewでいれたvimにパスを通しましょう。
    * `exec -l $SHELL`でシェルを立ち上げ直せば、
        ```zsh
         ❯ which vim
        /opt/homebrew/bin/vim
        ```
        となることが確認出来ます。
* vimは非常に奥が深いですが、[https://github.com/amix/vimrc](https://github.com/amix/vimrc)なんかをとりあえず導入すればコマンドラインライフが充実するのは確かです。この全部入りを試してから、自分でvimプラグインを取捨選択していくのなんかも面白いかと思います。慣れればVSCodeなどを利用せずとも簡単なPythonやマークダウンくらいならば書けてしまいます。


### 汎用性の高いaliasの例

* `~/.zprofile`もしくは`~/.zshrc`に記載しましょう
```zsh
alias vimrc='vim ~/.vimrc'
alias zshrc='vim ~/.zshrc'
alias ll="ls -la"
alias ..='cd ..'
alias apply='source ~/.zprofile'
alias ali='vim ~/.zprofile'
alias des='cd /Users/<your pc name>/Desktop'
```

### tmux

* インストール方法
```zsh
brew install tmux
```
* デフォルトのキーバインドだと指が痛いコマンドもあるため、よく使う場合は`~/.tmux.conf`に設定を記載していくことを推奨します。
    * 参考: [tmuxを必要最低限で入門して使う](https://qiita.com/shin-ch13/items/9d207a70ccc8467f7bab)

---

## VSCode

### 導入

[公式ページ](https://code.visualstudio.com)からダウンロードし､ Applicationディレクトリに移動します。

### codeコマンドを使用可能にする

[公式ガイド](https://code.visualstudio.com/docs/setup/mac)

### 推奨プラグインの導入

M1 Pro MacBook Proは非常にスペックが高いため､ ガンガンプラグイン入れてもそんなに重くならないだろう(保証はしません)

#### Japanese Language Pack for Visual Studio Code

日本語でVSCodeを使用したい場合必須、インストール後VSCodeの再起動が必要

#### vim

VSCode上でvimライクの入力が出来るようになります。後述する`settings.json`での設定を行うことで`~/.vimrc`を読み込ませることも出来ます(一部vimと完全互換性のない箇所もあるらしい)

#### Bracket Pair Colorization Toggler

JavaScriptなんかのコードでコールバックの連続があったときに、対応する括弧に色がつくので、大変助かります。![call-back-hell.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/65caaa88-15d1-ed86-45ce-b04d196772b7.png)

#### indent-rainbow

インデントに色づけをしてくれます。Pythonやyamlの味方。

## GitHub周りの設定

* 前提
    * GitHubアカウントを持っていること

### MacBook ProからSSH接続出来るようにする

参考: [Mac GitHub SSH接続設定](https://qiita.com/ucan-lab/items/e02f2d3a35f266631f24)

* GitHub用の秘密鍵､ 公開鍵を作成する
    ```zsh
    ssh-keygen -t ed25519 -N "" -f ~/.ssh/github
    pbcopy < ~/.ssh/github.pub
    ```
* 鍵の登録
    * GitHubの公開鍵の設定画面を開く
        * https://github.com/settings/keys
    * New SSH key
    * Title を適当に入力する(PC名を入れておくと鍵管理しやすい)
    * Key にクリップボードにコピーした公開鍵を貼り付ける
    * Add SSH Key で鍵を登録する
* `~/.ssh/config`への追記
    ```conf
    vim ~/.ssh/config
    Host github.com
      IdentityFile ~/.ssh/github
      User git
    ```

## Python

今回はPython3.8.11を導入します。

以下のような環境です。flaskのバックエンドサーバーを今回は作成しました。

```
alembic==0.8.7
bcrypt==3.1.0
cffi==1.7.0
click==6.6
coverage==4.2
Flask==0.11.1
Flask-Bcrypt==0.7.1
Flask-Migrate==2.0.0
Flask-Script==2.0.5
Flask-SQLAlchemy==2.1
Flask-Testing==0.5.0
GitHub-Flask==3.1.3
gunicorn==19.6.0
itsdangerous==0.24
Jinja2==2.8
Mako==1.0.4
MarkupSafe==0.23
mysql-connector==2.1.4
psycopg2==2.7.1
py==1.4.31
py-bcrypt==0.4
pycparser==2.14
pytest==3.0.1
pytest-cov==2.3.1
pytest-flask==0.10.0
python-editor==1.0.1
requests==2.11.1
six==1.10.0
SQLAlchemy==1.0.14
Werkzeug==0.11.10
```

まずgitサーバーからリポジトリをcloneしました。

### Rosettaのインストール

```zsh
softwareupdate --install-rosetta
```

### Pyenvの設定

以下のサイトを参考にしました
[https://zenn.dev/jcc/articles/0bba7b086404f2](https://zenn.dev/jcc/articles/0bba7b086404f2)

```zsh
brew install pyenv
# パスを通す
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"
eval "$(pyenv init -)"
source ~/.zshrc

# Pythonのインストール
pyenv install --list | grep "3.8.11"
pyenv install 3.8.11

# 使用するPythonのバージョンの設定
pyenv local 3.8.11
```

### Pipenvの導入

`requirements.txt`に対応するために使用する。

```zsh
pip install pipenv

export PIPENV_VENV_IN_PROJECT=1
pipenv --python 3.8.11

# 仮想環境の作成, 以後毎回以下のコマンドで仮想環境を立ち上げます。
pipenv shell

pip install -r requirements.txt

# 途中でclangがないと動かない箇所があった
brew install llvm

# cffiの導入(なぜかこうしないと上手くいかなかった)
LDFLAGS="-L$(brew --prefix openssl@1.1)/lib" CFLAGS="-I$(brew --prefix openssl@1.1)/include" pip install cryptography
```

### Flaskアプリの動作の確認

![flask_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/89a77a1a-7353-d631-002a-89eb56324765.png)

バックエンドが無事動いたことを確認したので、次はフロントエンドの環境を作っていきます。

## NodeJS / React

`cd static`コマンドでstaticディレクトリに移ります。

### nvmの導入

nodeJSのパッケージ管理システムです。

[公式ガイド](https://github.com/nvm-sh/nvm#install--update-script)

```zsh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
. ~/.nvm/nvm.sh
```

### nodeJS(lts)の導入

```zsh
nvm install --lts
# package.jsonがあるディレクトへcdする
npm install
```

目的のWebアプリのpackage.jsonはこのようになっています。

```json
{
  "name": "redux-easy-boilerplate",
  "version": "1.3.3",
  "description": "",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "start": "node bin/server.js",
    "test": "karma start"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "https://github.com/anorudes, https://github.com/keske",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "10.3.0",
    "axios": "^0.21.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.3.13",
    "bootstrap": "^5.0.2",
    "bootstrap-loader": "^3.0.4",
    "bootstrap-sass": "^3.4.1",
    "bootstrap-webpack": "0.0.6",
    "classnames": "^2.3.1",
    "css-loader": "^5.2.6",
    "csswring": "^5.1.0",
    "deep-equal": "^2.0.5",
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "expect": "^27.0.6",
    "exports-loader": "^3.0.0",
    "expose-loader": "^3.0.0",
    "express": "^4.17.1",
    "express-open-in-editor": "^3.1.1",
    "file-loader": "^6.2.0",
    "gapi": "0.0.3",
    "history": "^4.10.1",
    "http-proxy": "^1.18.1",
    "imports-loader": "^3.0.0",
    "jasmine-core": "^3.8.0",
    "jquery": "^3.6.0",
    "jwt-decode": "^3.1.2",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "karma-webpack": "^5.0.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "lodash": "^4.17.21",
    "material-ui": "^0.20.0",
    "mocha": "^9.0.2",
    "morgan": "^1.10.0",
    "node-sass": "^6.0.1",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.1",
    "q": "^1.5.1",
    "qs": "^6.10.1",
    "rc-datepicker": "^5.0.16",
    "react": "^17.0.2",
    "react-addons-css-transition-group": "^15.6.2",
    "react-calendar-component": "^3.0.0",
    "react-date-picker": "^8.2.0",
    "react-datepicker": "^4.1.1",
    "react-document-meta": "^3.0.0-beta.2",
    "react-dom": "^17.0.2",
    "react-forms": "^2.0.0-beta33",
    "react-hot-loader": "^4.13.0",
    "react-loading-order-with-animation": "^1.0.0",
    "react-onclickoutside": "^6.11.2",
    "react-redux": "^7.2.4",
    "react-router": "5.2.0",
    "react-router-redux": "^4.0.8",
    "react-tap-event-plugin": "^3.0.3",
    "react-transform-hmr": "^1.0.4",
    "redux": "^4.1.0",
    "redux-form": "^8.3.7",
    "redux-logger": "3.0.6",
    "redux-thunk": "^2.3.0",
    "resolve-url-loader": "^4.0.0",
    "rimraf": "^3.0.2",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.44.0",
    "webpack-dev-middleware": "^5.0.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^5.8.0",
    "yargs": "^17.0.1"
  },
  "dependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/register": "^7.14.5",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "mini-css-extract-plugin": "^2.1.0",
    "uglifyjs-webpack-plugin": "^2.2.0"
  }
}
```

### node-sassが動かなかった

~~こちらの[サイト](https://zenn.dev/rao_mth/articles/nodesass_m1macbook)を参考にしました。Apple Siliconへの互換性がないみたい。~~(途中でリビルドすることで動いたような、途中でPythonのパスがPython2であることが必要な箇所が出てくるので、そこで一時的に
```zsh
pyenv install 2.7.18
pyenv local 2.7.18
```

基本的にはあとは`npm i`で必要なモジュールはインストールされます。

以降は`npm run start`でアプリケーションが実行されます。

### バックエンドとフロントエンドを一気に立ち上げる

自分は以下のようなエイリアスを登録して、一気に二つのサーバーを立ち上げてます。

```zsh
site='cd /Users/<your pc name>/Documents/github/<repository name> && code . && pipenv shell "python manage.py runserver -d & cd static && npm run start" ; echo "in the pipenv shell"'
```

サーバーを閉じるときは`ctrl-C`でPythonとnode-JSを閉じて、`ctrl-D`でシェルを閉じます。

一連の流れはこのような感じになります。(表示されているサイトはgitにあがってるテンプレートを元に作った自分のサイトです)

![site__1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/da00831a-7c8e-0c69-32eb-b2bf63c8f307.gif)


---

## Mac間の移行

### iTerm2を使って楽楽SSH

[公式サイト](https://iterm2.com/documentation-shell-integration.html)

新しいMacと移行するMac両方でiTerm2を入れ、この設定を行うと、GUI操作でSCPコマンドが使えるようになります。移行作業が非常に楽になります。

![シーケンス 01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/0454fe89-b30c-dc51-adcb-4c76cb2def68.gif)

---

## その他あると便利なアプリなど

### Maccy

[公式サイト](https://maccy.app/)

一言で言いますと、macOS用のクリップボードマネージャーってところです(Windowsでいう`Windows+V`相当)。生産性が向上します。

### ブラウザ拡張機能系

#### OneTab

[公式サイト](https://www.one-tab.com/)

ブラウザの増えすぎたタブを整理できる拡張機能、メモリも節約出来る

#### Vimium

[ブラウザを Vim ライクに操作する Vimium の布教と知見まとめ](https://zenn.dev/mkobayashime/articles/vimium-vim-browser)

インターネットVimライクのキーバインドでほぼマウスを使わずに使えるようにする拡張機能。Tweetbot、Gmail等のサイトとはコマンドがバッティングするが、その辺りはブラックリスト化することで対処可能。

## M1 Pro MacBook Proに対する個人的感想

* 自分のメインの利用目的は開発というより`Ableton Live`や`Studio One`を使用した

※2022年10月5日現在、より最新の情報を入手し次第、アップデートしていきます。