Macでフロントエンド開発するためのセットアップ手順のメモ

# はじめに

新年度。新しく加わった仲間がMacのセットアップを済ませた頃、自分のMacが、とあるアプリケーションをアップデートして再起動した後にログインできなくなり、もろもろ試しましたが、復旧できず、新しくMacを調達していただき、自分もセットアップすることになりました...。
（もろもろ試した記録は[こちら](https://qiita.com/aktuehr/items/0f958d344553e2fbb55b)）

たまたま、救出したデータの中にセットアップのメモがあったので、少しアップデートしつつ、次にMacが壊れた時のためにQiitaに残しておこうと思います。

なお、私は現在、フロントエンドの開発をメインに担当しております。

# Macのセットアップをする

## 環境構築


### ~~CommandLineTool~~
```bash

xcode-select --install
```

- HomeBrewの下記コマンドで同時にインストールされるのでスキップ

### Home-brew

```bash

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

- うまくいかない場合、[ここ](https://brew.sh/index_ja.html) からインストールのスクリプトをコピー

### shell
#### fish

#### zsh & zplug

##### zshのインストール

```bash

brew install zsh
```

##### zplugのインストール

```bash

brew install zplug
```

##### .zshrcの編集
###### zplugの初期化

```bash

echo 'export ZPLUG_HOME=/usr/local/opt/zplug' >> ~/.zshrc
Echo 'source $ZPLUG_HOME/init.zsh' >> ~/.zshrc
echo '' >> ~/.zshrc
```

###### terminalのテーマ
* pure を利用

```bash

echo '# theme' >> ~/.zshrc
echo 'zplug mafredri/zsh-async, from:github' >> ~/.zshrc
echo 'zplug sindresorhus/pure, use:pure.zsh, from:github, as:theme' >> ~/.zshrc
echo '' >> ~/.zshrc
```

###### terminalの構文ハイライト
```bash

echo '# syntax' >> ~/.zshrc
echo 'zplug "chrissicool/zsh-256color"' >> ~/.zshrc
echo 'zplug "Tarrasch/zsh-colors"' >> ~/.zshrc
echo 'zplug "zsh-users/zsh-syntax-highlighting", defer:2' >> ~/.zshrc
echo 'zplug "ascii-soup/zsh-url-highlighter"' >> ~/.zshrc
echo '' >> ~/.zshrc
```

###### 自動補完
```bash

echo '# auto-comp' >> ~/.zshrc
echo 'zplug "zsh-users/zsh-autosuggestions"' >> ~/.zshrc
echo 'zplug "zsh-users/zsh-completions"' >> ~/.zshrc
echo '' >> ~/.zshrc
```

###### ここまでに記載したプラグインを読み込むための記述を追加
```bash

echo '# Install plugins if there are plugins that have not been installed' >> ~/.zshrc
echo 'if ! zplug check --verbose; then' >> ~/.zshrc
echo '    printf "Install? [y/N]: "' >> ~/.zshrc
echo '    if read -q; then' >> ~/.zshrc
echo '      echo; zplug install' >> ~/.zshrc
echo '    fi' >> ~/.zshrc
echo 'fi' >> ~/.zshrc
echo '' >> ~/.zshrc
echo '# Then, source plugins and add commands to $PATH' >> ~/.zshrc
echo 'zplug load' >> ~/.zshrc
echo '' >> ~/.zshrc
```

###### lsコマンドの結果に色付け
```bash

echo '# Add color to ls command' >> ~/.zshrc
echo 'export CLICOLOR=1' >> ~/.zshrc
echo 'export LSCOLORS=GxfxcxdxFxegedabagacad' >> ~/.zshrc
echo '' >> ~/.zshrc
```


#### /etc/shellsの変更
```bash
# fish
echo '/usr/local/bin/fish' | sudo tee -a /etc/shells


# zsh
echo '/usr/local/bin/zsh' | sudo tee -a /etc/shells
```

#### ログインシェルの変更

```zsh
# fish
chsh -s /usr/local/bin/fish

# zsh
chsh -s /usr/local/bin/zsh
```


### anyenv

```zsh

git clone https://github.com/riywo/anyenv ~/.anyenv

# fish
echo '# anyenv' >> ~/.config/fish/config.fish
echo 'set -x PATH $HOME/.anyenv/bin $PATH' >> ~/.config/fish/config.fish
exec $SHELL -l
anyenv install --init

# zsh
echo '# anyenv' >> ~/.zprofile
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zprofile
echo 'eval "$(anyenv init -)"' >> ~/.zprofile
exec $SHELL -l
anyenv install --init
```



### Node.js
* `nodenv` のバージョンは必要なものをインストールする

```zsh

anyenv install nodenv
exec $SHELL -l
nodenv install x.x.x
```

### Gulp
* タスクランナー

```zsh

npm install -g gulp
```

## ブラウザ

### Google Chrome

```zsh

brew install --cask google-chrome
```

* 規定ブラウザにする

#### NoCoffee
* 色弱シミュレータ（参考程度に）
* https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?hl=ja


### Mozilla Firefox

```zsh

brew install --cask firefox
```


* 検証用

### Slack

```zsh

brew install --cask slack
```

* コミュニケーションツール

## エディタ
### MacDown
* マークダウンエディタ
 
```zsh

brew install --cask macdown
```

### IntelliJ IDEA

```zsh

brew install --cask intellij-idea
```

#### IntelliJ IDEAのカラースキーム
お好みで
##### Programmer
* http://color-themes.com/?view=theme&id=563a1a6880b4acf11273ae5a

### Visual Studio Code
```zsh

brew install --cask visual-studio-code
```
* 割と好きで使っているエディタ

## シミュレーター
### Simulator (iOS)
* App StoreなどでXcodeをインストール

### Android Studio (Android)
```
brew install --cask android-studio
```

## デザインツール
### Sketch
```zsh

brew install --cask sketch
```
* デザイン/プロトタイプツールキット
    * 要ライセンス
    * 特定のバージョンが欲しいときは https://www.sketch.com/updates/ からダウンロード

## フォント

### 事前準備

* Homebrewでフォントをインストールできるようにする

```zsh

brew tap homebrew/cask-fonts
```

### Ricty Diminished

* ターミナルやエディタで表示するためにインストールする

```zsh

brew install --cask font-ricty-diminished
```

* もしくは[ここ](http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html)からダウンロード

### Noto Sans CJK jp

* Googleフォント。最近よく使っている気がする。

```zsh

brew install --cask font-noto-sans-cjk-jp
```

### Mplus1p

* 丸文字だけども、かっちりしていて読みやすい。Webフォントとしても使える。

* https://fonts.google.com/specimen/M+PLUS+1p

### font-sanfrancisco

* https://developer.apple.com/fonts/


## sshの鍵

* 新規で作成する場合は [こちらのQiita記事](https://qiita.com/suthio/items/2760e4cff0e185fe2db9) がわかりやすかったです

## 仮想環境
必要に応じて。

### Virtual Box

```zsh

brew install --cask install virtualbox
```

### Vagrant

```zsh

brew install --cask install vagrant
```

## 動画プレイヤー
### VLC
```zsh

brew install --cask install vlc
``` 

* 動作手順とか、ユーザビリティテストの動画を見る時のためにインストールする

## FTPクライアント
### Cyberduck
```zsh

brew install --cask install cyberduck
```

## 業務効率
### Alfred
```
brew install --cask install alfred
```

### Notion
```
brew install --cask install notion
```

# おわりに
自身のPCの環境構築のメモを残しておくといざというときに役に立ちます。
全部ワンライナーにしてインストールできるようにするのもありだと思いますし、残し方もお好みで良いと思います。
あとはプロジェクトに応じて必要なものを都度インストールして、固有の設定などを済ませれば開発に入れます。