みやざダニエルズのIT備忘録
← Blogs 一覧に戻る

MacBook Air 初期セットアップ記録(開発環境構築まで)

MacBook Air 初期セットアップ

MacBook Airが届いたので、初期セットアップを実施しました。 単なる初期設定ではなく、開発ができる状態に整えたので、その手順をまとめます。

同じことをやりたい人が、そのまま再現できるように、実行コマンドも含めて記録しています。


■ やったこと全体像

今回やったのは大きくこの5つです。

  1. 基本設定(Apple ID / トラックパッドなど)
  2. 開発ツールの準備(Command Line Tools)
  3. Homebrew導入
  4. VSCode・Nodeなどの環境構築
  5. GitHub SSH接続設定

■ ① 基本設定

  • Apple IDログイン
  • Touch ID設定

■ ② Command Line Tools のインストール

開発系ツールを入れるときに必須になるので最初に対応。

xcode-select --install

途中でライセンス同意が出るので対応。

sudo xcodebuild -license

■ ③ Homebrew導入

Macのパッケージ管理ツール。

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

インストール後確認。

brew -v

■ ④ 開発環境のセットアップ

Git / Node / Python

brew install git
brew install node
brew install python

バージョン確認。

node -v
npm -v

VSCode

公式サイトからインストール済みだったので、追加でこれだけ設定。

  • ⌘ + Shift + P
  • Shell Command: Install 'code' command in PATH

これで以下が使えるようになる。

code .

■ ⑤ Git設定

git config --global user.name "GitHubのユーザー名"
git config --global user.email "GitHubのnoreplyメール"

適宜、ご自身のユーザー名、メールアドレスで設定してください。


■ ⑥ SSHキー作成

ssh-keygen -t ed25519 -C "GitHubのメール"

■ ⑦ SSHキーをGitHubに登録

catコマンドで出力された公開鍵をコピーし、GitHubのSettings → SSH keysに登録。

cat ~/.ssh/id_ed25519.pub

■ ⑧ SSH接続確認

ssh -T git@github.com

GitHub公式が公開しているED25519ホスト鍵のフィンガープリントが出てきたのでyesと答える。 成功すると以下が出る。usernameのところは、自分のユーザーネームが出た。

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

■ ⑨ SSHのパスフレーズ問題の解決

パスフレーズを設定したため毎回聞かれる問題があったので、キーチェーンに保存。

ssh-add --apple-use-keychain ~/.ssh/id_ed25519

設定ファイルも追加。

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

■ ここまででできること

  • GitHubにpushできる
  • Node開発ができる
  • VSCodeで即開発開始できる

■ 感想

Macの初期セットアップは面倒だったけど、SSH設定をしたので、GitHubのCloneとかの操作が楽になった。

  • SSH接続
  • Homebrew
  • VSCode連携

ができたから、今日はやめてよしとする。


■ まとめ

MacBook Airが届いたときの初期セットアップ頑張ろう..! あとはちょっとずつ揃えてこう。

関連記事

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入(再)

動かなくなったので再度AstroにGoogleアナリティクス4を入れてみました。

日向美術館とVuetify

【Vuetify】v-cardの中にv-cardを入れたときに意図したmarginにならなかったのでdivでレイアウト調整した話

v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..

日向美術館とmicroCMS

【microCMS】日向美術館で使用しているAPIスキーマ設定方法

日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。

microCMSとVue.jsで子供の作品を展示する

microCMSとVue.jsで子供の作品を展示する

子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

縦書き文字をflexboxを使って並べたときのレイアウト崩れが直りました。

OpenBD coverage

OpenBDに登録されているISBNの数の調査をしてみた

本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました

Lighthouseのユーザー補助を100点にする

Lighthouseのユーザー補助を100点にしたい

Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました

世界の片隅で愛を叫ぶLINE Bot

世界の片隅で愛を叫ぶLINE Bot

AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作ってみました。

canvaでアイキャッチ画像を作る

canvaでアイキャッチ画像を作る

canvaを使ってアイキャッチ画像を作ることができます。

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入

AstroにGoogleアナリティクス4を入れてみました。

Astroでブログを作る

VuePressからAstroにブログを変えてみた

VuePressからAstroにブログを移管してみました。

miyazadanielsの似顔絵

似顔絵メーカーさんで似顔絵を作ってみた

似顔絵メーカーさんで似顔絵を作ってみました。簡単な操作でできるのでおすすめ。