MacBook Pro を買ったらやる環境構築（拡張機能・アプリ・ツール・etc...）

:::note warn
最新情報はこちらに記載しています
https://zenn.dev/hasehiro0828/books/setup-awesome-environment
:::

# はじめに

環境構築で行ったことをメモしていきます。

自分用メモではありますが、ご参考にしていただければ幸いです。
また、「こういう便利なアプリあるよ」
といったことも是非教えてください！

# 始め方シリーズ

開発に取り掛かる際に「安全で楽に便利に開発していける環境をいかに良く作れるか」はとても大事だと思っています。
開発時にはこれをやれば楽できる、というのをまとめました。

https://qiita.com/hasehiro0828/items/e021ad5867de285b88b7

https://qiita.com/hasehiro0828/items/ef1736e871b85b039212

https://qiita.com/hasehiro0828/items/9e0606e147d7a5dc3451

https://qiita.com/hasehiro0828/items/70e827c427d965d68e17

https://qiita.com/hasehiro0828/items/6596c8f5eae8030a5d84

# 設定編

MacBook 自体の設定です。

## キーボード

### ショートカット

- 入力ソース > `前の入力ソースを選択` をオフに
- Spotlight > `Spotlight検索を表示` をオフに
  - raycast を使うので
- Spotlight > `Finderの検索ウインドウを表示` をオフに
  - BetterTouchTool の設定との干渉を防ぐために
- Mission Control
  - デスクトップ\*へ切り替えを全て ON に
    - デスクトップを 10 個作ってからする

### 入力ソース

- ¥ で＼入力
- 数字を全角入力のチェックを外す

## トラックパッド

- タップでクリックをオン
- 軌跡の速さを MAX に
- フルスクリーンアプリケーション間をスワイプ
  - 4 本指に
  - BTT(BetterTouchTool)のジェスチャーと干渉するのを防ぐため
- Mission Control
  - 4 本指に
  - BTT(BetterTouchTool)のジェスチャーと干渉するのを防ぐため

## ディスプレイ

- スペースを拡大

## Mission Control

- `最新の使用状況に基づいて操作スペースを自動的に並べ替える` を Off に

## 日付と時刻

- 日付のオプション
  - 日付を表示を ON に

# アプリ編

## Chrome

https://www.google.com/intl/ja_jp/chrome/

## raycast

https://www.raycast.com/

- ホットキーを `option + Space` に変更
- エクステンション
  - https://www.raycast.com/raycast/github
  - https://www.raycast.com/raycast/google-workspace

## BetterTouchTool

https://folivora.ai/

- ジェスチャー登録アプリ
  - トラックパッドやキーボード、更には Touch Bar まで様々な入力にショートカットを登録できます。
  - iPhone を脱獄していた人ならわかるかと思いますが、Activator のようなものです．
- これは Macbook を使うなら必須！！というくらいにはオススメです。

## MarkText

https://github.com/marktext/marktext

- MarkDown 編集アプリ
- 以前は Typora を（その前は MacDown を)使っていましたが、Typora 有料化に伴い、こちらを使うようになりました
- ターミナルからファイルを指定して開けるようにする
  - `echo '\n\n# marktextをCLIから開けるように\nalias marktext="/Applications/MarkText.app/Contents/MacOS/MarkText"' >> ~/.zshrc`
  - 参考: https://github.com/marktext/marktext/blob/develop/docs/CLI.md

## Typora

https://typora.io/

```bash
echo '
# Typora を CLI から起動できるように
alias typora="open -a typora"' >> ~/.zshrc
```

## Fork

https://git-fork.com/

- 🚨 **husky などで、commit などをフックする場合、コマンドラインから立ち上げる必要あり**

## KeyClu for macOS

https://github.com/Anze/KeyCluCask/tree/main

- ショートカットを表示してくれる
- `brew install --cask keyclu`

## Karabiner-Elements

https://karabiner-elements.pqrs.org/

- US キーボードで、⌘ を押すことで日本語/英語を切り替える

## VSCode

https://code.visualstudio.com/download

- 起動後、⌘ + Shift + P のコマンドパレットで、`Shell Command: install 'code' command in PATH`を実行 - ターミナルから VSCode を起動できる

## Notion

https://affiliate.notion.so/i48zo6w0jf0f

- 高機能ノートアプリ

## VLC

https://www.videolan.org/vlc/download-macosx.ja.html

- 動画再生ソフト

## Sequel Ace

https://github.com/Sequel-Ace/Sequel-Ace

- DB の GUI ソフト
- Sequel Pro の後継
  - `Sequel Ace is the "sequel" to longtime macOS tool Sequel Pro.`
  - って一文が洒落が効いてて好き

## fig

https://fig.io/

- ターミナルを強くしてくれる

## Fuwari

https://apps.apple.com/jp/app/fuwari/id1187652334

- フロートするスクショを撮れる

## MeetingBar

https://apps.apple.com/jp/app/meetingbar-for-meet-zoom-co/id1532419400

- Web 会議を通知してくれる

## iTerm

https://iterm2.com/

### フルスクリーンの表示方法の変更

iTerm > preferences > General > Window
「Native full screen windows」のチェックをはずす

### ウィンドウの透過

iTerm > preferences > Profile > window

Window Appearance > transparencty を右にずらす

### 最前面表示

iTerm -> preferences -> Profile -> window
Setting for New Windows -> Style -> Fullscreen
~~Setting for New Windows -> Space -> All Spaces~~
Setting for New Windows -> Space -> Current Space (2021/05/16 デスクトップ毎に表示するターミナルを変えることにした)

### タブを常に表示

iTerm -> View -> Show Tabs in Fullscreen をチェック

### ホットキー設定

iTerm -> preferences -> Keys
「Show/hide iTerm2 with a system-wide hotkey」のチェックを入れる。

ホットキーは「command ＋スペース」にしました
理由は、コピーして貼り付け等がしやすいからです。

### Dracula テーマ

https://draculatheme.com/iterm/

iTerm -> preferences -> Profile -> colors から import

### 新規ウィンドウでのディレクトリ

iTerm -> preferences -> Profiles -> General -> Working Directory
`Home directory` -> `Reuse previous session's directory`

### タブに現在のディレクトリ名を表示させる

```bash
# cd した時のhook
# iTerm のタブ名をpathに変更
echo -ne "\033]0;$(pwd | rev | awk -F \/ '{print "/"$1"/"$2}'| rev)\007"
function chpwd() { echo -ne "\033]0;$(pwd | rev | awk -F \/ '{print "/"$1"/"$2}'| rev)\007"}
```

を `~/.zshrc`に追記

参考：

https://qiita.com/daicche/items/135d063444d152e63e1c

### sudo での Toudh ID の使用

参考:

https://qiita.com/y-vectorfield/items/3fc96150e63448a80c1b

`iterm touch id` などと検索すると、
`Allow session to survice logging out and back in.` を `No`にする
と書かれている記事が複数出てきますが、設定しなくても出来ました。（2021/07/07 時点)

### error 等の色付け

参考:

https://stackoverflow.com/questions/41468371/highlight-specific-keywords-in-the-terminal-as-they-appear/41468739

Preferences > Profiles > Advanced > Triggers で以下のような設定をしています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209015/9d0b0585-7098-ea60-1bb9-ed1f0346d283.png)

# コマンド編

## prezto

- 分量が多かったので分離しました。

https://qiita.com/hasehiro0828/items/e873333e2449728559a9

## homebrew

https://github.com/Homebrew/install

- `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"`
- Next Steps が出てくるので、従う

## SSH キー生成

- `ssh-keygen`

## GitHub 登録

参考: https://qiita.com/ucan-lab/items/e02f2d3a35f266631f24

```
pbcopy < ~/.ssh/id_rsa.pub
```

<https://github.com/settings/keys> でキーの追加

`~/.ssh/config` へ追記

```
Host github.com
  IdentityFile ~/.ssh/id_rsa
  User git
```

確認

```
ssh -T github.com
```

## ~~anyenv~~ （asdf に移行しました）

- 各言語の`*env`を入れる用のもの
- `brew install anyenv`
- `anyenv init # 表示される指示に従う`
- [anyenv-update](https://github.com/znz/anyenv-update)も入れる
  - anyenv で入れた \*env をアップデートするプラグイン

## asdf

- anyenv 的なやつ
- こっちの方が便利そう
  https://asdf-vm.com/guide/getting-started.html#_3-install-asdf

## fzf

- ターミナルのコマンド履歴をいい感じにできる
- `brew install fzf`
- `$(brew --prefix)/opt/fzf/install`

## bat

https://github.com/sharkdp/bat/blob/master/doc/README-ja.md

- cat の強化版的な
- インストール
  - `brew install bat`
- テーマを`Dracula`に
  - `mkdir ~/.config/bat`
  - `echo '# Set the theme to "Dracula"\n--theme="Dracula"' > ~/.config/bat/config`

## doctoc

https://github.com/thlorenz/doctoc

- markdown に目次を追加してくれる

## ghq

https://github.com/x-motemen/ghq

- git のプロジェクトを管理がいい感じにできる
- インストール
  - `brew install ghq`
- コマンド設定

```bash
# ghq, fzfのコマンド
function ghq-fzf() {
  local src=$(ghq list -p | fzf --preview "ls -laTp {} | tail -n+4 | awk '{print \$9\"/\"\$6\"/\"\$7 \" \" \$10}'")
  if [ -n "$src" ]; then
    BUFFER="cd $src"
    zle accept-line
  fi
  zle -R -c
}
zle -N ghq-fzf
bindkey '^]' ghq-fzf
```

- - 上記を `~/.zshrc`に追記
  - `Ctrl+]` を押すと、プロジェクト選択画面が開く
  - 参考
    - https://qiita.com/tomoyamachi/items/e51d2906a5bb24cf1684
    - https://iriya-ufo.net/blog/2019/11/28/ghq-setup/

## tree

たまに使いたくなる

```bash
brew install tree
```

# 個別開発環境編

## python

```bash
anyenv install pyenv
```

シェルを再起動すると

```
WARNING: `pyenv init -` no longer sets PATH.
Run `pyenv init` to see the necessary changes to make to your configuration.
```

と出る
`pyenv init`の実行結果、https://zenn.dev/antyuntyun/articles/pyenv_warning_resolve を参考に、

```bash
# pyenvの設定
# https://zenn.dev/antyuntyun/articles/pyenv_warning_resolve
export PYENV_ROOT="$HOME/.anyenv/envs/pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"
if command -v pyenv 1>/dev/null 2>&1; then
  eval "$(pyenv init -)"
fi
```

を`~/.zprofile`に追加する

### [poetry](https://github.com/python-poetry/poetry)

プロジェクトでのパッケージ等の管理をするもの

```bash
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python

# シェル再読み込み
exec $SHELL -l
# 仮想環境をプロジェクトフォルダに作成するように変更
poetry config virtualenvs.in-project true
```

# VSCode 拡張機能(随時更新)

言語で拡張機能を調べたら一番上に出てくるようなものは省きます。

## Auto CLose Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

- html 等のタグを自動で閉じてくれる
- 結構暴発するので、微妙に感じるとこもある

## Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

- タグを rename 際、自動で対応するタグも rename してくれる
- 上と同じで結構暴発する

## change-case

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

- snake-case、camelCase などを書き換えてくれる
- たまーに使う

## Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

- スペルチェックしてくれる
- 短縮語は基本使わないようにしているが、使うときはスペルチェックがクリアであれば使う

## Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

- 色をわかりやすく

## Condition Inverter

https://marketplace.visualstudio.com/items?itemName=OvidijusParsiunas.condition-inverter

- 条件を反転してくれる

## DotENV

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

- `.env` 系を見やすく

## Draula Official

https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

- Dracula のテーマ

## Edit csv

https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv

- csv を編集するときに便利

## Error Lens

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

- VSCode で表示されているエラー等をホバーしなくても常時表示してくれる

## ES7 React/Redux/GraphQL/React-Native snippets

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

- React 等のスニペット

## ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

## Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

## GitHub Copilot

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

## GitHub Pull Requests and Issues

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

- VSCode 　上でプルリク見たり色々できる

## GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

- 昔のコードと比較したりできる

## indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

- インデントを色付けて見やすくしてくれる

## IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

## ~~Local History~~

https://marketplace.visualstudio.com/items?itemName=xyz.local-history

- 純正機能で対応されたので不要に

## Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

- ファイルやフォルダにアイコンをつけてくれる

## Peacock

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

- ワークスペース毎に色を設定できるので、複数のプロジェクトに携わる場合は便利そうです

## Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

- コードをいい感じに共有できる

## Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

## Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

## Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

- csv を色付けて見やすくしてくれる

## Sort JSON objects

https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json

## Stylelint

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

## Todo Tree

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

- TODO コメントなどを一覧で見れるようにしてくれる

## Version Lens

https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

- package.json 等で、最新のバージョンは何かとか表示してくれたりする

## Japanese Word Handler

https://marketplace.visualstudio.com/items?itemName=sgryjp.japanese-word-handler&ssr=false#overview

- 日本語で単語移動できるようにする

## テキスト校正くん

https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading

- テキスト校正してくれる

# Chrome 拡張機能

## 開発系

### File Icons for GitHub and GitLab

https://chrome.google.com/webstore/detail/file-icons-for-github-and/ficfmibkjjnpogdcfhfokmihanoldbfe

GitHub でファイルにアイコンをつけてくれる

### Hide Files on GitHub

https://chrome.google.com/webstore/detail/hide-files-on-github/lpnakhpaodhdkleejaehlapdhbgjbddp

GitHub で設定ファイル等を折り畳んで表示してくれる

### ImgConverter

https://chrome.google.com/webstore/detail/imgconverter/pkgimcoeodgcdfnidhgijpopkfhbcomm?hl=ja

GitHub に画像を貼り付けるとただのリンクになりますが、それを img タグに書き換えてくれる

### JSON Viewer

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja

json をいい感じに表示してくれる

### LTTM

https://chrome.google.com/webstore/detail/lttm/jdidcgkdggndpodjbipodfefnpgjooeh?hl=ja

GitHub に遊び心を導入してくれる

### Notifier for GitHub

https://chrome.google.com/webstore/detail/notifier-for-github/lmjdlojahmbbcodnpecnjnmlddbkjhnn

GitHub の notification を通知してくれる

### React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

React の開発を補助してくれる

### Vue.js devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=ja

Vue の dev tool
2021/07/03 　時点では beta でないと Vue3 が対応していない

### Text Blaze

https://chrome.google.com/webstore/detail/text-blaze/idgadaccgipmpannjkmfddolnnhmeklj

テンプレートを作成して簡単に挿入できるようにしてくれる
クリップボードの値を使用したりも出来、便利

### Chrome Bookmarklet Manager

https://github.com/ahmed-musallam/chrome-bookmarklet-manager

Bookmarklet を管理する際に使える

## 汎用系

### Toggl Track: Productivity & Time Tracker

https://chrome.google.com/webstore/detail/toggl-track-productivity/oejgccbfbmkkpaidnkphaiaecficdnfn?hl=ja

Toggl での記録を楽にしてくれる

### Video Speed Controller

https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=ja

等速の動画は見れない体になりました。

### Audio/Video Playback Speed Controller

https://chrome.google.com/webstore/detail/audiovideo-playback-speed/adibdjpkkmpgfidnjngnfdpcghohhbmm

Video Speed Controller で動作しない場合はこれで速度変更しています。

### Bitwarden - 無料パスワードマネージャー

https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb?hl=ja&gl=JP&authuser=3

LastPass が無料では複数デバイスで使えなくなったので、Bitwarden を使用するようになりました。

### Workona Tab Manager

https://workona.com/signup/?referral=4c5676c9-d037-4c99-90b0-17d96eee074b&utm_campaign=wkna-referral

Chrome のタブをグループ化して、表示を簡単に切り替えることができます。

- A のリポジトリのグループ、B のリポジトリのグループ、のようにグループ分け
- Chrome は常に外部モニタに表示
- Macbook 本体の画面では、仮想デスクトップ毎に各リポジトリの VSCode、ターミナルを表示

という風にして、作業リポジトリを変える場合は、Chrome は workona で表示内容を切り替え、VSCode 等の開発環境は Mac の仮想デスクトップで切り替える、という運用にしています。

### 拡張機能マネージャー

https://chrome.google.com/webstore/detail/extension-manager/gjldcdngmdknpinoemndlidpcabkggco/related

拡張機能の管理をしてくれます。一括で切り替えられるので便利です。

### Copy Title and Url as Markdown Style

https://chrome.google.com/webstore/detail/copy-title-and-url-as-mar/fpmbiocnfbjpajgeaicmnjnnokmkehil

タイトルと URL を markdown 形式でコピーしてくれます

### Adblock Plus - free ad blocker

https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb

広告ブロック

### URL を日本語のままコピー

https://chrome.google.com/webstore/detail/url%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%B3%E3%83%94%E3%83%BC/phldfdmkaopoaabbgmilpboplanfmhne?hl=ja

日本語のままコピーできます

### Copy All Urls

https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk

開いているタブの URLs をコピーできる
形式も変更できるのでテキストで人に共有したい時に便利

## たまに使うもの

### axe DevTools - Web Accessibility Testing

https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

## 以前使っていたもの

### Better Pull Request for GitHub

https://chrome.google.com/webstore/detail/better-pull-request-for-g/nfhdjopbhlggibjlimhdbogflgmbiahc

プルリクでファイルツリーを出してくれる

### Octotree - GitHub code tree

https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc?hl=ja

GitHub でファイルをいい感じに表示してくれる

### Web Server for Chrome

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

ローカルのフォルダをサーバー経由っぽくできます

### Bookmarks Bar Switcher

https://chrome.google.com/webstore/detail/bookmarks-bar-switcher/lcaelgondnfehcambmdhhfokjknhfahc?hl=ja