🔰【macOS】フロントエンドWeb開発者向けのPCキッティング

macOSでWeb制作をするために使うPCのキッティング手順です。

※内容は自己責任でお願いします
※思い出したりしたときに徐々に追記していきます
※Windows10使いニキネキはこちら

前提

• MacBook Pro (16-inch, 2021)
• macOS Monterey 12.0.1
• JPキー
• 管理者アカウント

1. システム環境設定

画面遷移	変更内容	備考
一般	「スクロールバーの表示」を「常に表示」
デスクトップとスクリーンセーバ →　スクリーンセーバ	「スクリーンセーバーの表示」のチェックを外す
Dockとメニューバー → Bluetooth	「メニューバーに表示」 を有効化（チェックボックス）
Dockとメニューバー → 集中モード	「メニューバーに表示」を有効化（チェックボックス） 「常に」に変更（プルダウン）
Dockとメニューバー → バッテリー	「割合（％）を表示」を有効化（チェックボックス）
Dockとメニューバー → ファストユーザスイッチ	「メニューバーに表示」を有効化（チェックボックス）	複数ユーザを利用する場合。
Dockとメニューバー → 時計	「24時間表示にする」を有効化（チェックボックス）	してもしなくても24時間表示からかわらない？
キーボード → ユーザ辞書	「文頭を自動的に大文字にする」の無効化（チェックボックス） 「スペースバーを2回押してピリオドを入力」を無効化（チェックボックス）	コード書く上で大変なので必ず無効化
キーボード → 入力ソース	「ライブ変換」の無効化（チェックボックス） 「Windows風のキー操作」を有効化（チェックボックス）	※ Windowsも併用する方向け
ディスプレイ → ディスプレイ→ → サイズ調整	「解像度」を「スペースを拡大」（ラジオボタン）
アクセシビリティ → ディスプレイ → ポインタ	「カーソルのサイズ」を少し上げる（レンジ）
キーボード → ショートカット → キーボード	「次のウィンドウを操作対象にする」をoption+Tabに変更	※ Windowsも併用する方向け WindowsでいうアプリごとのAlt+Tab。 デフォルトだとoption+@。

2. CLI（黒い画面）で行う作業

Homebrewをインストールする

「ターミナル」というアプリを開いてHomebrewのトップにあるコマンドを貼り付けてインストールします。

ターミナルでパスワードを入力するときの諸注意
キーを入力しても文字が入力されないように見えていますが、実際には入力することができています。
これは、何文字入力しているのかが他人から覗き見られないようにするためのセキュリティ対策です。

参考：Homebrewのインストール - Qiita

ここまででHomebrew自体のインストールは完了です！

各種アプリをbrew installでインストール

※ これは全自動でAppを入れるステップです。後述の「brew.shに貼り付けて保存」の内容を１行ずつ貼り付けて実行してもOKです。

1. .shファイルを作成して開く
2. ファイル内に次のコードを貼り付けて保存
3. .shファイルを実行して削除

の手順で実行します。

まずは以下のコードをすべてコピーしてください。

brew.shに貼り付けて保存

brew install --cask spectacle           # ウィンドウの分割表示（Windowsの__Win+矢印キー__機能）

# ------------------------------------------------------------------------------
# Browsers
# ------------------------------------------------------------------------------
brew install --cask google-chrome       # Canaryなど必要に応じてインストール
brew install --cask firefox             # Nightlyなど必要に応じてインストール
brew install --cask microsoft-edge

# ------------------------------------------------------------------------------
# Git Client
# ------------------------------------------------------------------------------
brew install git                        # Git本体
brew install gitui                      # Shell内で「gitui」と打つと呼び出せるGit GUI
brew install --cask sourcetree          # Git GUI

# ------------------------------------------------------------------------------
# Node.js
# ------------------------------------------------------------------------------
brew install n                          # Nodeのバージョン管理。nコマンドが使えるようになる。
brew install yarn                       # Node.jsのパッケージマネージャー

# ------------------------------------------------------------------------------
# Shell
# ------------------------------------------------------------------------------
brew install --cask powershell          # Windows環境標準のShell。pwshコマンドが使えるようになる。

# ------------------------------------------------------------------------------
# Editors
# ------------------------------------------------------------------------------
brew install --cask visual-studio-code  # 開発向けエディタ
brew install --cask sublime-text        # ちょっとした作業用

その後、次のコマンドを実行します。

touch brew.sh  # brew.shファイルを作成
vi brew.sh     # vimエディタでbrew.shファイルを開く

1. Command＋vキーで貼り付け
2. ESCキーを1度押す¹
3. :wqと入力する（上書きして保存の意味）
4. Enterキーを押す

うまくできたら、次のコマンドを実行します。

brew.shを実行している最中、一部ログインパスワードの入力が求められます。

sh brew.sh     # brew.shを実行
rm brew.sh     # brew.shを削除

個人的にはこういうのもインストールしたりします👀

brew install --cask iterm2                # いろいろ設定できるterminal
brew install --cask stats                 # メニューバーにマシンのステータスを表示できる
brew install --cask adobe-creative-cloud  # Adobe Creative cloud
brew install --cask discord               # コミュニケーションツール
brew install --cask slack                 # コミュニケーションツール
brew install openssh                      # SSH keysを発行したりSSH接続したりするためツール
brew install gpg                          # 暗号化・署名のためのツール

インストール済みのアプリの設定

CLIで行うこと

次のコマンドをターミナルで実行します。

次の文字列は書き換えてください¹

• 「あなたのお名前」はGitHubのアカウント名
• 「あなたのメールアドレス」はGitHubに登録しているメールアドレス

# ------------------------------------------------------------------------------
# Config：Node.js
# ------------------------------------------------------------------------------
sudo n lts                                               # 最新のLTS版Node.jsをインストール

# ------------------------------------------------------------------------------
# Config：Git
# ------------------------------------------------------------------------------
# e.g. git config --global --replace-all user.name "Yamada Taro"
git config --global --replace-all user.name "あなたのお名前"
# e.g. git config --global --replace-all user.name "[e-mail]"
git config --global --replace-all user.email "あなたのメールアドレス"

git config --global core.autocrlf false                  # 改行コードを変換しない
git config --global core.safecrlf true                   # 改行コードが入り混じったファイルをコミットできなくする
git config --global core.ignorecase false                # 大文字小文字を区別する
git config --global core.quotepath false                 # 日本語の文字化けを防ぐ
git config --global core.pager "LESSCHARSET=utf-8 less"  # 日本語の文字化けを防ぐ

Finder

隠しファイルの表示：command + shift + .

上級者向け：opensshをインストールした方へ

上級者向け：gpgをインストールした方へ

その他各種アプリの設定はこの記事の「3. インストール済みのアプリの設定」を参照

参考文献

• 【Mac】隠しファイル・隠しフォルダを表示する方法

1. GitHub以外のサービスを利用する場合は、対象サービスに登録しているアカウント名とメールアドレスを設定してください ↩ ↩²