Negalog
Mac

新しいMacの環境構築まとめ【フロントエンドエンジニア編】

2020/10/24

職場を変わった時や、新しいMacを手に入れた時に必須な作業。それが「環境構築」ですよね。

ただ頻繁にやる作業ではないので、忘れがちな人も多いかと思います。そこで今回は、Macの初期設定や環境構築の方法をステップ立てて紹介していきます。

フロントエンドエンジニア向けの内容なので、フロントエンド開発を行う方は参考にしてもらえると嬉しいです。

この記事でやること

この記事では、以下のことをやっていきます。

  1. Xcode インストール
  2. Homebrew インストール
  3. Node.js（anyenv、nodenv） インストール
  4. Yarn インストール
  5. GithubへのSSH接続
  6. エディタなどのツール インストール

それでは早速やっていきましょう。

1. Xcode をインストール

まずは Xcode をインストールしましょう。こちらは簡単で AppleStore から「Xcode」と検索してインストールすればOKです。

インストールできたら次に進みましょう。

2. Homebrew をインストール

次に Homebrew をインストールします。公式ページからコマンドをコピペしてきて、ターミナルで実行すればOKです。

途中パスワードを聞かれるので、mac（ユーザー）のパスワードを入力しましょう。

インストール完了したら、念のため確認します。

$ brew doctor
Your system is ready to brew.

3. Node.js（anyenv、nodenv）をインストール

node.js をインストールする方法はいくつかありますが、 今回は anyenv 経由で nodenv を入れる形で行きます。

anyenv のインストール

まずは、 anyenv をインストールしていきます。インストール方法はGithubに記載されています。 homebrew経由でインストールしたいと思います。

$ brew install anyenv

anyenvをインストール後、 anyenv init コマンドを実行します。

$ anyenv init

# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"

すると eval "$(anyenv init -)" を ~/.zshrc に追記しろ言われるので、その通りにしましょう。 vim で編集してもOKですし、以下のようにコマンドで操作してもOKです。

$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc

この設定を反映させるために、一回ターミナルを閉じて再起動します。再起動すると、以下のような warning が発生します。

ANYENV_DEFINITION_ROOT(/Users/xxxi/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

指示されている通り、以下のコマンドを実行しましょう。

anyenv install --init

この後「Do you want to checkout ? [y/N]:」と質問されますが、 y でOKです。

以上の流れで、無事に anyenv のインストール完了です。

nodenv のインストール

次に「nodenv」を入れます。nodenv なら、使用する node.js のバージョンをディレクトリ毎に指定できるので、大変便利です。

以下のコマンドを実行します。

$ anyenv install nodenv

その後に指示される通りに、一回ターミナルを再起動します。再起動したら、 nodenv を使って node.js をインストールしていきます。

以下のように、好きなバージョン番号を指定してインストールします。 （ $ nodenv install -l でインストール可能なバージョンを確認できます。）

$ nodenv install 12.16.3

以下のコマンドで、デフォルトで使用するバージョンも指定しておくと良いでしょう。（好きなバージョン番号を指定してください。）

$ nodenv global 12.16.3

再度ターミナルを再起動して、バージョン確認ができれば完了です。

$ node -v
v12.16.3

$ npm -v
6.14.4

4. Yarn をインストール

お好みですが、「Yarn」もインストールしておきます。以下のコマンドでOKです。

$ npm install -g yarn

5. Github を設定する(SSHで接続できるようにする）

次に、Macから SSH で 「Github」 に接続できるよう設定していきます。

git インストール

まずは git のインストールです。

$ brew install git

鍵を作成

そしてSSH接続のために、「秘密鍵」と「公開鍵」を作成します。以下のコマンドを実行します。

$ ssh-keygen -t rsa

いくつか質問されますが、基本 Enter だけで大丈夫です。

次に作成した鍵のパーミッションを変更をします。

$ cd ~/.ssh
$ chmod 600 id_rsa

ssh-agent に鍵登録

以下を実行して ssh-agent に鍵を登録します。「-K」オプションがないと、毎回ターミナルを起動する度に登録がリセットされてしまうので注意です。

$ ssh-add -K ~/.ssh/id_rsa

configに接続設定を追記

以下のコマンドで、接続設定を追記します。

$ vim ~/.ssh/config

vimエディタが立ち上がったら、以下の内容を追記してください。

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

公開鍵を GitHub に登録

先ほど生成した「公開鍵」をGithubに登録します。

$ pbcopy < ~/.ssh/id_rsa.pub

上記のコマンドで鍵をコピーして、以下の設定ページを開きましょう。

https://github.com/settings/keys

上記URLの「New SSH key」というボタンを押しましょう。

New SSH Key

次の画面で「key」のところに、先ほどコピーした公開鍵を登録すればOKです。

接続確認

ここまで出来たら、以下のコマンドで接続確認します。

$ ssh -T git@github.com

「Hi, アカウント名〜」みたいなメッセージが返ってこれば成功です。

git config に username と email を設定しておく。

以下のコマンドで名前やメールアドレスを設定しておきましょう。

git config --global user.name "ユーザー名"
git config --global user.email メールアドレス

git ignore 設定

グローバルの「gitignore」も設定しておきましょう。「.DS_Store」なんかは絶対に要らないですよね。

$ vim ~/.gitignore_global

上記コマンドで設定ファイルを編集します。自分は普段、以下あたりを追記しています。

.DS_Store
node_modules/

設定ファイルの編集後、以下のコマンドを実行しないと、反映されないので注意です。

$ git config --global core.excludesfile ~/.gitignore_global

6. Visual Studio Code をダウンロード

公式サイトからDLしましょう。あとは好きなプラグインを入れておけばOKです。

ちなみに、自分は以下のプラグインを入れています。

- Bracket Pair Colorizer
- indent-rainbow
- Visual Studio IntelliCode
- Path Intellisense
- EditorConfig for VS Code
- ESLint
- Prettier
- stylelint
- GitLens
- Live Server
- Vetur

8. 各種ツール インストール

一旦、最低限の環境構築は上記で完了です。あとは好みのツールを入れておきましょう。

以下では、自分が入れているものを一部紹介しておきたいと思います。

iterm2

ターミナルはiTerm2で操作するのが便利です。

Clippy

Clipyは、クリップボードを拡張してくれるアプリです。大体の人が知ってると思いますが、知らない人はこの機会にぜひ入れておきましょう。

便利なChrome拡張

- OneTab：複数のタブを１つにまとめられる
- EditThisCookie： cookieを簡単操作
- JSONView： JSONビューア
- Create Link： 好みの形式でURLコピー
- GoFullPage - Full Page Screen Capture： スクショ
- React Developer Tools
- Vue.js devtools