かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Mac M2 Git と Node.js 環境のセットアップ

2017 年から使ってた Intel Mac ちゃんにお別れして新しい M2 Mac Book Air に買い替えてクリーンインストールしたので開発環境を再構築下のメモ
※ これは Zenn にメモしてたものを再録したただけの記事です

環境

色々インストールする

Finder にフルパスを表示する

% defaults write com.apple.finder _FXShowPosixPathInTitle -boolean true
% killall Finder

Finder で 常に隠しファイルを表示するようにする

隠しファイルを毎回 ⌘ + . で表示するの面倒なので

% defaults write com.apple.finder AppleShowAllFiles TRUE
% killall Finder

Homebrew のインストール

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

パスを通す

.zhrc がなかったので作成

% touch ~/.zhrc

~/.zhrc

typeset -U path PATH
path=(
  /opt/homebrew/bin(N-/)
  /opt/homebrew/sbin(N-/)
  /usr/bin
  /usr/sbin
  /bin
  /sbin
  /usr/local/bin(N-/)
  /usr/local/sbin(N-/)
  /Library/Apple/usr/bin
)

Git のインストールと設定

Homebrew でインストール

% brew install git

Git の設定とエイリアスの設定

# ユーザー情報
% git config --global user.name "<NAME>"
% git config --global user.email "<YOUR E-MAIL>"
# デフォルトのエディタをvimにする
% git config --global core.editor 'vim -c "set fenc=utf-8"'
# ファイル名の大文字/小文字を識別する
% git config --global core.ignorecase false
# rebase 時に自動的に --autosquash する
% git config --global --add rebase.autosquash true
# git pull の設定
% git config --global pull.rebase false
# color
% git config --global color.ui true
% git config --global color.diff auto
% git config --global color.status auto
% git config --global color.branch auto

エイリアスの設定

% git config --global alias.st status
% git config --global alias.br branch
% git config --global alias.co checkout
% git config --global alias.cm commit
% git config --global alias.gr grep
% git config --global alias.cp cherry-pick
% git config --global alias.l log
% git config --global alias.l1 'log --oneline'
# ログの tree 表示
% git config --global alias.tree 'log --graph --oneline'
% git config --global alias.treeall 'log --graph --all --format="%x09%C(cyan bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s"'
% git config --global alias.rb rebase
% git config --global alias.rb2 'rebase -i HEAD~2'
% git config --global alias.rb3 'rebase -i HEAD~3'
% git config --global alias.rb4 'rebase -i HEAD~4'

cf. 環境構築 macOS Big Sur : Git の設定と GitHub への SSH 接続 - かもメモ


GitHubssh 接続できるようにする

% ssh-keygen -t ed25519 -C "your_email@example.com"
Generating public/private ed25519 key pair.
# 秘密鍵・公開鍵の保存場所とファイル名
Enter file in which to save the key (/Users/<user name>/.ssh/id_ed25519):
# パスフレーズの設定 設定しない場合はそのまま Enter
Enter passphrase (empty for no passphrase):
# パスフレーズの確認
Enter same passphrase again:
# 秘密鍵を読み取り専用にする
% chmod 600 ~/.ssh/id_ed25519
# バックグラウンドでssh-agentを開始
eval "$(ssh-agent -s)"
> Agent pid 59566
# 秘密鍵を ssh-agent に追加
% ssh-add -K ~/.ssh/id_ed25519
# ssh-agent に登録された秘密鍵の確認
% ssh-add -l 
# => 登録されている SSH キーのリストが表示される

ssh config

.ssh/config がなければ作成する

% touch ~/.ssh/config

~/.ssh/config に Host の設定を追加

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519

Github に公開鍵を登録

  1. GitHub Settings > SSH & GPC key
  2. SSH keys New SSH key
  3. 公開鍵 ~/.ssh/id_ed25519.pub の内容を貼り付けて保存する
# SSH 公開鍵をクリップボードにコピーするコマンド
% pbcopy < ~/.ssh/id_ed25519.pub

接続確認

% ssh -T git@github.com
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Enter passphrase for key '/Users/<User>/.ssh/id_ed25519': パスフレーズを入力
Hi KiKiKi-KiKi! You've successfully authenticated, but GitHub does not provide shell access.

📝 SSH key を変更せずにパスフレーズを変更する方法

% ssh-keygen -p -f ~/.ssh/id_ed25519
Enter old passphrase: 古いパスフレーズ
Enter new passphrase (empty for no passphrase): 新しいパスフレーズ

cf. - https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/about-ssh - 環境構築 macOS Big Sur : Git の設定と GitHub への SSH 接続 - かもメモ


asdf で Node.js をインストール

Node.js のバージョン管理に今まで mvp, nodebrew, nodenv (anyenv) と使ってきましたが、asdfナウいとの情報を得て asdf を使ってみることにしました!
結論としては nodenv と同じように使えて導入も大変シンプルで良い体験です

cf.

install asdf

% brew install asdf
% echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
% source ~/.zshrc

install Node.js

# 依存パッケージのインストール
% brew install gpg gawk
# プラグインのインストール
% asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
# インストールできるバージョンの一覧
% asdf list all nodejs
…
# 最新版をインストール
% asdf install nodejs latest
# global で使うバージョンを指定
% asdf global nodejs latest
% node --version
v18.9.0
# 現在のディレクトリのバージョンを一覧で確認
% asdf current
nodejs          18.9.0          /Users/kikiki/.tool-versions

yarn の有効化

デフォルトでは yarn が有効になっていなかった

% yarn -v
zsh: command not found: yarn

Node.js 本体に yarn を標準バンドルするかの議論が盛り上がったが、yarn を直接バンドルするのではなく corepack をバンドルする方向に決まったようだ。 デフォルトでは yarn も有効化されていないので、corepack enable yarnを自分で打つ必要があります。
cf corepack is 何?

# corepack を有効化
% corepack enable
# asdf をリフレッシュ
% asdf reshim nodejs
%  yarn -v
1.22.19

node のバージョンを固定する

cf. Getting Started | asdf

asdf の設定ファイルを作成

% touch ~/.asdfrc
% echo -e "legacy_version_file = yes" >> ${HOME}/.asdfrc

local のバージョンを指定

.node-version に使用する Node.js のバージョンを書けばOK

% echo -e "16.17.0" >> .node-version

バージョンの確認

% asdf current
nodejs          16.17.0         /Users/kikiki/Documents/local/.node-version
% node --versions
v16.17.0

asdf local コマンドでもバージョンを固定できる

asdf local <version> コマンドを実行すると .tool-versions というファイルが作成されバージョンが固定される
nodenv を使っているメンバーが居る場合は .node-version を使うほうが良いかもしれない

asdf local nodejs 16.17.0
% asdf current
nodejs          16.17.0         /Users/kikiki/Documents/local/.tool-versions
% node --versions
v16.17.0

Vim にカラースキームを導入する

Git 使った入りている時にエディタに色がないと使いづらいので…
今回も iceberg を導入します。

カラースキームファイルを格納するディレクトリを作成

% mkdir -p ~/.vim/colors

カラースキームファイルのダウンロード

  1. GitHub から iceberg のファイルをダウンロードまたは clone する
  2. ダウンロードされた /colors ディレクトリ内にある iceberg.vim~/.vim/colors 内にコピーする

カラースキームの適応

vim の設定ファイルを作成

% touch ~/.vimrc

.vimrccolorscheme <color scheme name> で使用するカラースキームを指定すれば OK

colorscheme iceberg
syntax on

syntax on の指定もないとカラースキームが適応されない

cf. 環境構築 macOS Big Sur : vim をカラフルにしたい - かもメモ

これでざっくり開発できる環境が整いました。 おわり


[参考]