【2022年版】個人的Macのプログラミング環境構築

# はじめに

最近プログラミング環境構築を行うことが多いので備忘録として残します。
windowsの方は [【2022年版】個人的Windowsのプログラミング環境構築](https://qiita.com/Bana7/items/0441324bb490ff657c38)にどうぞ
少しでも参考になったらすごく嬉しいです。

| 導入するもの | 概要 |
|:-:|:-:|
|  iTerm2 |Terminal|
| Homebrew|パッケージ管理システム|
| fish|Shell|
|VSCode|コードエディタ|
|DockerDesktop|仮想化システム|

# 環境構築
$がついているとこではコマンド入力を表します。
```terminal
$ apt install git
```
terminalを開き、実際には以下のように入力してください。

```terminal
apt install git
```

## iTerm2
![c (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/b1e1f175-4d50-b52b-9a43-3124b29716d7.jpeg)
iTerm2はデフォルトのterminalより高機能なterminalを提供してくれます。
詳しい機能は[features](https://iterm2.com/features.html)から確認してください。

| ショートカット | 動作 |
|:-:|:-:|
| Command + D  | ウインドウを左右に分割する  |
| Command + Shift + D| ウインドウを上下に分割する|
| Command + n|新しいウインドウを作成|
| Command + t| 新しいタブを作成|
| Command + T| タブを複製する|
| Command + W| タブを削除する|
| Command + 矢印キー| タブを移動する|
| Command + Enter|  全画面を表示させる |
|Command + [| 次のウインドウへ移動|
| Command + ]|前のウインドウへ移動|

### 1. [iTerm2](https://iterm2.com/)にアクセスし`Download`ボタンよりダウンロード

### 2. `iTerm.app`を起動する

### 3. `Move to Applications Folder`でインストール完了

![c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/4edeb01b-bc05-6a64-5723-5a31549c77f7.jpeg)

設定はfish Shell導入時に行います
以下、コマンドはiTerm2上で実行してください

## Homebrew
![スクリーンショット 2022-12-14 1.22.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/9e9029e7-fcb7-ac69-3e55-ef808b3c7d7f.jpeg)
[Homebrew](https://brew.sh/index_ja)はパッケージ管理システムです

これでPC君はbrewで様々な魔法を簡単に習得してくれます。やったね！



### 1. 以下のコマンドを実行しインストール
```terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

| コマンド | 概要 |
|:-|:-|
| `brew install <パッケージ名> `|  パッケージをインストール|
|`brew install`|インストールしているパッケージを確認|
|`brew remove <パッケージ名>`| パッケージをアンインストール  |
| `brew upgrade` or `brew upgrade <パッケージ名>` | パッケージのバージョンをアップグレード|


## fish 

Shellの1つ
特に以下の機能が初期状態から使えるのはありがたい
- シンタックスハイライト(色分け機能)
- コマンド補完

![スクリーンショット 2022-12-14 22.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/f2435e50-ad32-1469-847a-a2fcd21c1531.png)

### 1. Homebrewでfishをインストールする

```terminal
$ brew install fish
```
### 2. fishのパスを追加する

```terminal
$ sudo vi /etc/shells
```
末尾に `/usr/local/bin/fish` と記述する

```txt:/etc/shells
/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
/usr/local/bin/fish ←追加する
```

### 3. デフォルトのShellをfishにする

```terminal
$ chsh -s /usr/local/bin/fish
```

### 4. iterm2を再起動しfishが起動していることを確認

```terminal
$ echo $SHELL
/usr/local/bin/fish
```

### 5. fishのパッケージマネージャーのfisherをインストール

fisherを使ってfish君ができることを増やしましょう

```terminal
$ curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher
```
### 6. fishの設定を変えてみる

以下のコマンドを入力すると、ブラウザが立ち上がってfishの設定ページに遷移します。

```
$ fish_config
```

![スクリーンショット 2022-12-14 22.47.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0fdf53bb-8360-a8d9-44a8-345a5140af6e.jpeg)

colorsやpromptを色々クリックして自分好みにしてみても良いですね

設定が終わったらterminalに戻って`Enter`で設定変更のプロセスが止まります


### 7. fishのテーマの1つ「bobthefish」をインストール

テーマと言いますか、promptです。
もちろん`fish_config`で設定したpromptでも良いですが公開されているのも使えます

```terminal
$ fisher install oh-my-fish/theme-bobthefish
```

### 8. その他fishの設定

fishの設定ファイルは`~/.config/fish/config.fish`にあります。

ひとまず以下を設定します。
- promptをnew lineで実行するように変更
- gitのmasterブランチを表示
- 時刻を表示しないように設定
- コマンド実行時間の非表示

```terminal
$ string trim '
set -g theme_newline_cursor yes
set -g theme_display_git_master_branch yes
set -g theme_display_date no
set -g theme_display_cmd_duration no
' >> ~/.config/fish/config.fish
```
promptが多少変わったと思います
※フォントの関係上見た目に個人差あり
![スクリーンショット 2022-12-14 23.06.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/1a75c57a-9e78-7a9f-5877-93d26b8771d8.png)

### 9. フォント「Cascadia Mono PL」を導入
fishを最大限活かすには`Powerline`系のフォントを入れる必要があります

今回は「Cascadia Mono PL」を導入しますが、しっくりこなかったら別のPowerlineフォントを導入してください
#### [microsoft/cascadia-code](https://github.com/microsoft/cascadia-code/releases) にアクセスして`CascadiaCode-xxxx.xx.zip`をダウンロード

#### `CascadiaMonoPL.ttf`をダブルクリックで実行しインストールする
![スクリーンショット 2022-12-14 23.20.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/583ee303-7cb9-eed0-1e01-8ba0d552f63b.png)

### 10. Item2のフォントを「CascadiaMonoPL」にする
フォントをインストールしたら各アプリで設定してあげないといけません

#### iTerm2を起動し「iTerm2 -> Settings...」より設定画面を開く

![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/82f6d399-ff6c-5f26-c35b-7636828e13ac.png)

#### 「Profile -> Text -> Font」 をクリックして「Cascadia Mono PL」にフォントを設定する

![スクリーンショット 2022-12-14 23.37.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/b77aa17d-8828-6c27-f75f-a22e75deed49.jpeg)

### 11. (補足)iTerm2の設定について

#### ホットキー

ホットキーを設定すると、コマンドを入力したいときに素早くterminalを開くことができます

:::note warn
ホットキーはiTerm2が起動していないと効かないです
:::

![スクリーンショット 2022-12-15 0.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/2366aead-73a0-1974-0b8e-f52db05c0953.png)

<details><summary>Color設定</summary>

特にこだわりがなければ右下の`Color Presets...`から選ぶのが良いと思います。

![スクリーンショット 2022-12-14 23.50.01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/dbe2ee92-46c7-6b1a-6bef-b6d14c113c76.jpeg)

お好みのプリセットがなければ有志がプリセットを公開しています
[Iterm2-color-schemes](https://iterm2colorschemes.com/)を例にプリセットを拡張してみましょう


![スクリーンショット 2022-12-15 0.02.58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/cd713ca8-796b-80dc-59ba-de61b480791c.jpeg)

#### [Iterm2-color-schemes](https://iterm2colorschemes.com/)にアクセスし`.zip`をクリックしてダウンロード

#### iTerm2で「Color Presets... -> import」をクリックする

#### `schemes`を参照して好きなプラグインを選択する
![スクリーンショット 2022-12-15 0.06.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/7d0f02b6-83f0-ccf3-3461-a643ea87afcb.png)

</details>

<details><summary>window設定</summary>

![スクリーンショット 2022-12-15 0.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/53c3f222-3ad2-b926-5e96-92fe7ba0a1b5.png)

#### ・ Transparencyでterminalの透け具合を調整

#### ・ Background ImageをEnabledにするとterminalに好きな画像を表示できる

#### ・ Styleでterminalの表示方法を変える

基本の3つをピックアップします

| Style | 概要 |
|:-:|:-:|
|  Normal | 通常 |
|  Full Screen | フルスクリーン化|
|  Maximized | 最大化|

</details>

## VSCode

個人的最強コードエディタ
しかし、拡張機能導入や設定を弄らないといけずハードルが高い？

![スクリーンショット 2022-12-15 0.27.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/c64b0986-6a49-e542-041f-fee7588709cc.jpeg)

### 1. [VSCode](https://code.visualstudio.com/) からVSCodeを`Download Mac Universal`をクリックしダウンロードする
### 2. `Visual Studio Code.app`を「アプリケーション」フォルダに移動させる
### 3. VSCodeを起動して拡張機能をインストール
VSCodeは拡張機能を入れて真価を発揮する

ひとまず以下の拡張機能を入れましょう

| 拡張機能 | 概要 |
|:-|:-|
| Material Icon Theme | フォルダやファイル名の前にアイコン表示|
| indent-rainbow | インデントが見やすくなる |
| prettier |コードをフォーマットしてくれる|
| Dev Containers| VSCodeからDockerコンテナにアクセスできる|

VSCodeの左のタブに四つの四角形のアイコンから拡張機能を追加できます
検索窓があるので欲しい拡張機能を検索しインストールします

:::note warn
prettierは別途設定が必要なので留意
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/ea3c308e-73d6-586a-2e9b-c3c547029c57.png)

<details><summary>Material Icon Theme</summary>

![スクリーンショット 2022-12-15 1.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/598530c0-313f-1d51-d340-114560bf7de2.png)

フォルダやファイル名の前にマテリアルアイコンを表示してくれます
インストールし上側に表示される設定を`Material Icon Theme`にして完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/13d3df0e-a8cd-88a4-3da5-6cd317be8c8b.png)
![スクリーンショット 2022-12-15 1.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0363b32d-11d7-940c-a422-8ad38984fb79.png)
</details>

<details><summary>indent-rainbow</summary>

![スクリーンショット 2022-12-15 1.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/103c9af9-1de3-3c97-bd6e-001b809d0610.png)

インデントが見やすくなります
インストールするだけで設定完了

</details>

<details><summary>prettier</summary>

![スクリーンショット 2022-12-15 1.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/8dff73dd-2ac5-7318-24d9-0cea4a1be32c.png)

個人のプログラミングの癖を統一化し綺麗にフォーマットさせ、余計な差分を減らすために導入します

| 対応言語等 |
|:-|
|JavaScript|
| JSX  |
|Flow|
|TypeScript|
|JSON|
|HTML|
|Vue|
|Angular|
|Ember / Handlebars|
|CSS|
|Less|
|SCSS|
|styled-components|
|styled-jsx|
|GraphQL|
|Markdown|
|YAML|

### 導入後の設定
#### 1. VSCodeの左下に歯車アイコンがあるのでクリックし`Settings`をクリックし設定画面へ

![スクリーンショット 2022-12-15 1.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/ae2b4192-6e4a-0ebc-1e5a-4e2dbdef8bf6.png)

#### 2. 検索窓があるので「onsave」と入力し「Format on save」にチェックをつける

![スクリーンショット 2022-12-15 1.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/25f8faf2-7bc7-5566-3140-ba951e6f9781.png)

### 使い方
「Cmd + S」や保存するボタン での保存時に勝手にフォーマットしてくれる

:::note warn
after saveによる保存ではフォーマットされない
:::

</details>

<details><summary>Dev Containers</summary>

![スクリーンショット 2022-12-15 1.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/7aa2379f-df1a-87c8-5e13-c27da439abf6.png)
VSCodeからDockerコンテナにアクセスできる

例えばPythonを用いる場合、VSCodeは通常ホストのPython環境で補完し、Dockerコンテナで実行させるpythonコードの補完はできない

それをDev Containerを使うと、コンテナのpython環境で補完してくれる

:::note warn
これで起動しているVSCodeには拡張機能はないので逐次インストールするか「devcontainer.json」を記述する必要がある
:::

### 使い方
#### Dockerコンテナを立ち上げる

![スクリーンショット 2022-12-15 1.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/ebe977a8-4e9b-8875-c450-bb8ea7e77870.png)

#### VSCode左のタブに`Remote Explorer`があるのでクリックし、アクセスしたいコンテナのタブのホバーすると+マークのフォルダアイコンがあるのでクリックする

![スクリーンショット 2022-12-15 1.40.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/abf0d4f9-dc4b-84fe-cdc4-916f9ecdd46d.png)

#### 新しくVSCodeが立ち上がるのでそれで作業

</details>

### 4. VSCodeのdefault shellをfishにする
これを設定しないと、毎回fishを選択して起動しないといけないので、設定してあげましょう

#### `Ctrl + Shift + @`でターミナルを起動
#### そのterminalタブ上に「+」と「v」があるので「v」を押す

![スクリーンショット 2022-12-15 1.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/984859b7-c6c8-2065-dcd8-e408e3cc6a1b.png)

#### 「Select Default Shell」をクリックして「fish」を選択

![スクリーンショット 2022-12-15 1.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/11a9362b-716d-6169-8a14-d051ce360e24.png)


### 5. VSCodeのterminal fontを変更する
VSCode上のターミナルにもfontの設定をしないと文字化けしたまま使うことになる

#### 設定画面の検索窓で「terminal font」と検索

#### 「Terminal › Integrated: Font Family」に「Cascadia Mono PL」と入力

![スクリーンショット 2022-12-15 1.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/53df8f4c-0c12-b493-66c9-0d8248b7b937.png)

### 6. VSCodeの設定の仕組み

これまで色々設定してきましたがVSCodeは`setting.json`というファイルで設定を管理しています

設定画面の右上にファイルのようなアイコンがあるのでそれをクリックするとjsonファイルにとびます

![スクリーンショット 2022-12-15 1.55.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/bd97b2af-ae14-7c27-2175-1f7b59a65442.png)

jsonを弄って設定を変えることもできますが、最初は設定画面の検索窓で検索して設定するのが無難だと思います

## Docker Desktop

Docker DesktopはDockerコマンドを使うために入れます
※個人的には`docker compose`コマンドを使うため

Dockerの詳細は省略しますが、主に開発環境を作るために用います
ローカルに環境作るよりDockerは簡単で、再現性もあります

![スクリーンショット 2022-12-15 2.00.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/eb2b19ba-3990-7a7e-c753-ff6304fb1bef.jpeg)

### 1. [Docker Desktop](https://www.docker.com/products/docker-desktop/) にアクセスしダウンロードしインストーラーを実行インストール

### 2. 右上の歯車アイコンから設定する
例えばDockerにどのくらいリソースを使わせるか設定することができます

![スクリーンショット 2022-12-15 2.08.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/77a7bd09-a429-dfa4-950f-4d305c9c44ea.jpeg)


# まとめ
実際に開発するときはDockerで環境構築して、`Dev Containers`を駆使しつつ...になると思います

初学者の方が見ていましたらDockerについて調べてみると良いかもしれません
大体の環境構築はDockerで事足ります。いずれ使うことになるかもなので早いうちに使ってみても良いですね