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

はじめに

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

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

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

Macのセットアップをする

環境構築

CommandLineTool

xcode-select --install

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

Home-brew

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

• うまくいかない場合、ここ からインストールのスクリプトをコピー

shell

fish

zsh & zplug

zshのインストール

brew install zsh

zplugのインストール

brew install zplug

.zshrcの編集

zplugの初期化

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

terminalのテーマ

• pure を利用

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の構文ハイライト

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

自動補完

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

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

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コマンドの結果に色付け

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

/etc/shellsの変更

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


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

ログインシェルの変更

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

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

anyenv

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 のバージョンは必要なものをインストールする

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

Gulp

• タスクランナー

npm install -g gulp

ブラウザ

Google Chrome

brew install --cask google-chrome

• 規定ブラウザにする

NoCoffee

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

Mozilla Firefox

brew install --cask firefox

• 検証用

Slack

brew install --cask slack

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

エディタ

MacDown

• マークダウンエディタ

brew install --cask macdown

IntelliJ IDEA

brew install --cask intellij-idea

IntelliJ IDEAのカラースキーム

お好みで

Programmer

• http://color-themes.com/?view=theme&id=563a1a6880b4acf11273ae5a

Visual Studio Code

brew install --cask visual-studio-code

• 割と好きで使っているエディタ

シミュレーター

Simulator (iOS)

• App StoreなどでXcodeをインストール

Android Studio (Android)

brew install --cask android-studio

デザインツール

Sketch

brew install --cask sketch

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

フォント

事前準備

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

brew tap homebrew/cask-fonts

Ricty Diminished

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

brew install --cask font-ricty-diminished

• もしくはここからダウンロード

Noto Sans CJK jp

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

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記事 がわかりやすかったです

仮想環境

必要に応じて。

Virtual Box

brew install --cask install virtualbox

Vagrant

brew install --cask install vagrant

動画プレイヤー

VLC

brew install --cask install vlc

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

FTPクライアント

Cyberduck

brew install --cask install cyberduck

業務効率

Alfred

brew install --cask install alfred

Notion

brew install --cask install notion

おわりに

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