More than 1 year has passed since last update.

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

Last updated at 2022-10-07Posted at 2022-10-05

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アプリのリポジトリのプルリクの内容を動作させることをとりあえずの目標とする

周辺機器

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

セットアップ編

初期設定

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

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

お気に入りのブラウザの導入
- 自分は検索用ブラウザとしてBrave, 信頼出来るKeychainにパスワード管理をさせたいサイト向けにSafari, 会社関係用にFirefoxと使い分けてます
★Shiftltの導入
- 設定したHotKeyで現在キーボード入力が有効になってるアプリケーションの画面サイズを最大化、右半分、左半分, サブモニター, フルスクリーンなどに瞬時に切り替えるアプリケーション。個人的にはこれなしでmacOSを使用する気になれません。
- 公式リポジトリから最新バージョンのzipファイルをダウンロードし, 導入します。
- ↓切り替えイメージ､これと後述するmacOSの基本コマンドを組み合わせることで生産性が最強になります。
- ↓設定ファイルの例
★iTerm2の導入(iTerm2を使用しない場合はTerminalを使用する)
- iTerm2についての概要
- HotKeyでの立ち上げ､豊富なカスタマイズなど標準ターミナルより多くの機能を持っています。
- 公式サイトからダウンロードします。
- ↓iTerm2をカスタマイズした場合の見え方の例
Xcode Command Line Toolsのインストール
- あらかじめapp storeからxcodeをインストールし、一度は起動すること。
- コマンドラインからGitなどの基本的なコマンドを利用できるようにするため
- 公式ガイド←大変時間がかかります！
Homebrewのインストール
- macOS版aptのようなものです。エンジニアはみんないれましょう。
- 公式ページ
- 以下のコマンドをiTerm2(もしくはターミナル)から入力します
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
- インストールが終わったあと､コマンドライン上に記載されてるとおりのコマンドを入力し､パスを通します
```
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/[PC-name]/.zprofile
eval $(/opt/homebrew/bin/brew shellenv)
```
The Unarchiverのインストール
- rarや7zipの解凍にしようします。
- App Store

行いたい設定

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をツールバーに足します
- これにより､ファインダーよりパスを遡ることができます。(ファインダーの左上のディレクトリ名を右クリックすることでもパスを遡ることできました)
ファインダーのタブを右クリック>Services>New iTerm2 Tab hereでiTerm2をファインダーのディレクトリで開くことが出来ます。

macOS生産性爆上げコマンド

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

コマンドラインの設定

★Powerlevel10k

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

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

★vimの拡張

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

汎用性の高いaliasの例

~/.zprofileもしくは~/.zshrcに記載しましょう

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

インストール方法

brew install tmux

デフォルトのキーバインドだと指が痛いコマンドもあるため、よく使う場合は~/.tmux.confに設定を記載していくことを推奨します。
- 参考: tmuxを必要最低限で入門して使う

VSCode

導入

公式ページからダウンロードし､ Applicationディレクトリに移動します。

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

公式ガイド

推奨プラグインの導入

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なんかのコードでコールバックの連続があったときに、対応する括弧に色がつくので、大変助かります。

indent-rainbow

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

GitHub周りの設定

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

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

参考: Mac GitHub SSH接続設定

GitHub用の秘密鍵､公開鍵を作成する

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への追記

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のインストール

softwareupdate --install-rosetta

Pyenvの設定

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

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に対応するために使用する。

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アプリの動作の確認

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

NodeJS / React

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

nvmの導入

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

公式ガイド

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)の導入

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

目的のWebアプリのpackage.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が動かなかった

~~こちらのサイトを参考にしました。Apple Siliconへの互換性がないみたい。~~(途中でリビルドすることで動いたような、途中でPythonのパスがPython2であることが必要な箇所が出てくるので、そこで一時的に

pyenv install 2.7.18
pyenv local 2.7.18

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

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

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

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

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にあがってるテンプレートを元に作った自分のサイトです)