[2019年版] macOS に自分好みのモバイルアプリ開発環境を整えてみた

自分がmacOS を触り始めてから、早いもので約３年が経ちました。

いろいろな方にアドバイスいただいてmacOS 上の開発環境を育ててきたのですが、 よくわからずにやっていたので、何が何だかわからなくなっちゃいました。

そこで今回、開発環境のブラッシュアップと設定内容の備忘を兼ねて、記録を残していこうと思います。

課題整理

使っていく中で、下記のことが課題に感じました。 これらを解消していくことを目標に整備していきました。

• App Store 経由でインストールすると、たまにうまく出来ないことがあって辛かった
• IDE の起動はどうしても時間がかかるので、サクッと実装コードを確認できるようにしたい
• macOS の入力補完が苦手だった
• アプリのアンインストールは関連ファイルが残りがちだった
• 画像加工は標準アプリだと機能が物足りなかった
  • リサイズ
  • 透過
• ツールのバージョン管理がバラバラだった
  • CocoaPods を直に入れていた
  • Node.js のバージョン管理とYarn の初期設定を忘れがちだった
• パス設定の管理がいまいちだった
  • JetBrains Toolbox 導入でアプリパスが変わったが、追従できてなかった
  • 同じライブラリなのにIDE 毎に違うパスを参照していた
• ログイン時に走る自動処理を極力減らし、立ち上がりスピードを改善したい

検証環境

下記のスペックのマシンで動作検証を行いました。 コマンド？はbash で検証しているので、今後zsh になった際は適宜読み替えてください。

導入するアプリ・ツール

下記ツール群を導入した結果、検証環境では約100GB ほどストレージを消費したので、ご注意ください。

• Acrobat Reader
• Android Studio
• anyenv
• App Cleaner
• Carthage
• CocoaPods
• Cordova
• cordova-res
• Docker Desktop for Mac
• Firefox
• Firefox Developer Edition
• GIMP
• Google Chrome
• Google Chrome Canary
• Homebrew
• Ionic
• ios-deploy
• ios-sim
• JetBrains Toolbox
• native-run
• Node.js
• nodenv
• nodenv-yarn-install
• Opera
• Postman
• Slack
• SourceTree
• Visual Studio
• Visual Studio Code
  • Angular Language Service
  • C#
  • C# Extensions
  • C# XML Documentation Comments
  • Cordova Tools
  • Debugger for Chrome
  • Docker
  • Flutter
  • gitignore
  • Japanese Language Pack for Visual Studio Code
  • Java Extension Pack
  • Kotlin Language
  • Marp for VS Code
  • PlantUML
  • Swift Development with Visual Studio Code
  • vscode-icons
• Web Server for Chrome

開発環境の構築手順

1. OS 設定の調整

自分が使いやすいように下記設定をしていきました。 隠しファイルを表示する以外はお好みで設定してください。

1. "システム環境設定" の調整
   1. "Dock" の調整
      • "最近使ったアプリケーションをDock に表示" のチェックを外す
   2. "キーボード" の調整
      • "ユーザー辞書" の入力補完関係のチェックをすべて外す
   3. "トラックパッド" の調整
      • "ページ間をスワイプ" を"３本指でスワイプ" に変更
      • "フルスクリーンアプリケーション間をスワイプ" を"４本指で左右にスワイプ" に変更
      • "Mission Control" を"４本指で上にスワイプ" に変更
   4. "サウンド" の調整
      • "サウンドエフェクト" の"メニューバーに音量を表示" にチェックを入れる
   5. "Bluetooth" の調整
      • "メニューバーにBluetooth を表示" にチェックを入れる
   6. "共有" の調整
      • コンピュータ名を編集し、わかりやすくする
2. メニューバーの調整
   • 電源表記から"割合（％）を表示" にチェックをいれる
3. "Finder" の調整
   1. Finder を開き"場所" に表示されている自身のPC をクリックして、"Macintosh HD" を"よく使う項目" にドラッグアンドドロップする
   2. "環境設定 > 一般" の調整
      • デスクトップに表示する項目のチェックをすべて外す
      • "新規Finder ウインドウで次を表示" を"Macintosh HD" に設定する
      • "フォルダを新規ウィンドウではなくタブで開く" のチェックを外す
4. "iTunes > 環境設定" の調整
   1. "デバイス" の調整
      • "iPod, iPhone, およびiPad を自動的に同期しない。" のチェックを入れる
5. 隠しファイルを表示するために下記コマンドを実行する
   • 隠しファイルを表示する

     defaults write com.apple.finder AppleShowAllFiles TRUE
     

   • Finder を再起動して設定を反映する

     killall Finder
     

2. アンチウイルスソフトのセットアップ

各自が持っているものが違うと思うので、手順を省略します。

3. 各種ブラウザのセットアップ

あとでIDE をインストールした時に、自動でパスが拾ってもらうことを期待して、先に設定します。

1. Opera をインストールし、その後起動してみる
2. Firefox 関連をインストールし、その後起動してみる
   • Firefox Developer Edition
   • Firefox
3. Chrome 関連をインストールし、その後起動してみる
   • Chrome Canary
   • Chrome
4. Chrome 拡張をインストールする
   • Web Server for Chrome

4. Xcode 関連のセットアップ

App Store からダウンロードすると、更新の通知はあるけどOS バージョンの兼ね合いでインストールできない事があるので、Apple Developer のサイトから直接ダウンロードしていきます。 Xcode をインストールすることでgit が使えるようになるはずなので、これ以降git 関連の操作ができるようになります。

1. More Software Downloads - Apple Developer から下記をダウンロードする
   • Xcode
   • Command Line Tools for Xcode
2. Xcode をセットアップする
   1. ダウンロードしたXcode を解凍する
   2. 複数バージョンの併用を見込んで、Xcode.app を適当にリネームする
   3. アプリケーションフォルダーにドラッグアンドドロップする
   4. Xcode を起動すると追加コンポーネントのダウンロード確認があるので、ダウンロードする
   5. Apple アカウントを設定し、証明書情報を紐づけられるようにする
   6. シミュレータを実行し、言語設定など適宜設定する
3. Command Line Tools for Xcode をセットアップする
   1. ダウンロードしたCommand Line Tools for Xcode をインストールする
   2. 下記コマンドを実行して、Xcode のパス設定をする(手順2-2 でXcode をリネームしているので注意する)

      xcode-select -s (配置したパス)
      

   3. 下記コマンドを実行して、パス設定がうまくいったかを確認する

      xcodebuild --help
      

4. Homebrew をセットアップする
   1. 下記コマンドを実行し、インストールする

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

   2. 下記コマンドを実行し、動作確認をする

      brew doctor
      

5. CocoaPods をセットアップする
   1. 下記コマンドを実行し、インストールする

      brew install cocoapods
      

   2. 下記コマンドを実行し、初期設定する

      pod setup
      

   3. 下記コマンドを実行し、動作確認をする

      pod
      

6. Carthage をセットアップする
   1. 下記コマンドを実行し、インストールする

      brew install carthage
      

   2. 下記コマンドを実行し、動作確認をする

      carthage
      

5. 開発＆便利アプリのセットアップ

自分好みのツールを入れていきます。

• Acrobat Reader → PDF 表示アプリ
• App Cleaner → アプリをドラッグアンドドロップすると、関連ファイルを検索してまとめてゴミ箱に入れてくれるアプリ
• Docker Desktop for Mac
  • "Preference" を下記設定すると良いかも
    • ”General" の"Start Docker Desktop when you log in" のチェックを外す
    • "Advanced" のメモリ割り当てを任意の値に設定する
• GIMP → 画像加工、お絵かきアプリ
• Postman → API エンドポイントに任意のリクエストを送信できるアプリ
• Slack → チャットアプリ
• Source Tree → Git 操作アプリ

6. Android Studio 関連のセットアップ

JetBrains Toolbox 経由でセットアップしていきます。 もし新しいバージョンを入れた場合は、アプリパスが変わるので、適宜修正してください。

1. JetBrains Toolbox をセットアップする
   1. サイトからダウンロードする
   2. アプリ起動後、右上の六角形アイコンをクリックし、"Run at login" のOFF にする
2. Android Studio をセットアップする
   1. JetBrains Toolbox を起動し、Android Studio をインストールする
   2. Android studio を起動し、初期設定する
   3. Android Contributors (AOSP) のJavaコードスタイルをAndroid Studioに設定する を参考に、コード整形ルールを設定する
   4. エミュレータをセットアップする
3. Android 関連のパス参照をセットアップする
   1. ユーザーのルートディレクトリで下記コマンドを実行しファイル作成する

      touch .bash_profile
      

   2. .bash_profile を編集してパスを整備する(各自の設定状況に適したパスを設定する)

      # 環境変数
      ## Android SDK
      export ANDROID_HOME="/Users/(ユーザー名)/Library/Android/sdk"
      
      ## Android Studio
      export ANDROID_STUDIO="/Users/(ユーザー名)/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/(バージョン番号)/Android Studio.app/Contents"
      
      ## Java
      export JAVA_HOME="$ANDROID_STUDIO/jre/jdk/Contents/Home"
      
      # コマンドツール
      ## Android 関連
      export PATH="$PATH:$ANDROID_HOME/emulator"
      export PATH="$PATH:$ANDROID_HOME/platform-tools"
      export PATH="$PATH:$ANDROID_HOME/tools"
      export PATH="$PATH:$ANDROID_HOME/tools/bin"
      
      ## Gradle
      export PATH="$PATH:$ANDROID_STUDIO/gradle/(gradle バージョン)/bin"
      
      ## Java
      export PATH="$PATH:$JAVA_HOME/bin"
      
      ## Kotlin
      export PATH="$PATH:$ANDROID_STUDIO/plugins/Kotlin/kotlinc/bin"
      

   3. 下記コマンドを実行して、パス設定を反映する

      exec $SHELL -l
      

   4. 下記コマンドを実行し、adb のパスが通っているか確認する

      adb
      

   5. 下記コマンドを実行する(多分エラーになる)

      sh gradle
      

   6. 下記コマンドを実行し、Java のパスが通っているか確認する

      java
      

   7. 下記コマンドを実行し、Kotlin のパスが通っているか確認する

      sh kotlinc
      

7. Flutter のセットアップ

X-Platform 開発関連に必要な設定をFlutter をセットアップすることでやっていきます。

1. Set up an editor のページを参考にAndroid Studio にFlutter プラグインを導入する
2. Flutter SDK をセットアップする
   1. Android Studio を起動し、"Start Flutter Project" を選択する
   2. "Install SDK" をクリックし、SDK をダウンロードする
   3. ダウンロードが完了したら、"Cancel" して今表示している画面を閉じる
3. Flutter 関連コマンドをセットアップする
   1. .bash_profile にFlutter のパスを追記する

      export PATH="$PATH:[path]/flutter/bin"
      

   2. 下記コマンドを実行して、パス設定を反映する

      exec $SHELL -l
      

   3. 下記コマンドを実行し、足りない依存関係を適宜追加する

      flutter doctor
      

4. Android Studio で"Start Flutter Project" で適当に作成したプロジェクトで下記の動作確認をする
   • Android のエミュレータで実行できるかどうか
   • Android の実機で実行できるかどうか
   • iOS のシミュレータで実行できるかどうか
   • iOS の実機で実行できるかどうか

8. Ionic 関連のセットアップ

1. Node, Yarn をセットアップする
   1. 下記コマンドを実行し、anyenv をセットアップする

      brew install anyenv
      

   2. 下記コマンドでanyenv を初期設定する

      anyenv install --init
      

   3. .bash_profile にanyenv のパスを追記する

      eval "$(anyenv init -)"
      

   4. 下記コマンドを実行して、パス設定を反映する

      exec $SHELL -l
      

   5. 下記コマンドを実行し、nodenv をセットアップする

      anyenv install nodenv
      

   6. 下記コマンドを実行し、nodenv-yarn-install をセットアップする

      git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"
      

   7. .bash_profile にYarn のパスを追記する

      export PATH="$PATH:`yarn global bin`"
      

   8. 下記コマンドを実行し、パス設定を反映する

      exec $SHELL -l
      

   9. 下記コマンドを実行し、任意のnode をセットアップする

      nodenv install (Node バージョン)
      

   10. 下記コマンドを実行し、global で使うNode.js を設定する

       nodenv global (Node バージョン)
       

2. Cordova 関連をセットアップする
   1. 下記コマンドを実行し、cordova-res をセットアップする

      yarn global add cordova-res
      

   2. 下記コマンドを実行し、ios-deploy をセットアップする

      yarn global add ios-deploy
      

   3. 下記コマンドを実行し、ios-sim をセットアップする

      yarn global add ios-sim
      

   4. 下記コマンドを実行し、native-run をセットアップする

      yarn global add native-run
      

   5. 下記コマンドを実行し、Cordova をセットアップする

      yarn global add cordova
      

3. Ionic をセットアップする
   1. Ionic をセットアップする

      yarn global add ionic
      

   2. 下記コマンドを実行し、Ionic プロジェクトでYarn を有効化する

      ionic config set -g yarn true
      ionic config set -g npmClient yarn
      

4. Cordova の動作確認をする
   1. 下記コマンドを実行し、ionic プロジェクトを作成する

      ionic start
      

   2. 手順１で作ったプロジェクトに移動後に下記コマンドを実行し、Android ビルドを生成する

      ionic cordova build android
      

   3. 手順4-2 で生成したAndroid プロジェクトをAndroid Studio で開く
   4. 適宜Gradle の調整を行い、実行してみる
   5. 下記コマンドを実行し、iOS ビルドを生成する

      ionic cordova build ios
      

   6. 手順4-5 で生成したiOS プロジェクトをXcode で開く
   7. 証明書設定を調整し、実行してみる
5. Capacitor の動作確認をする
   1. 下記コマンドを実行してionic プロジェクトを作成する

      ionic start --capacitor
      

   2. 手順１で作ったプロジェクトに移動後に下記コマンドを実行し、初期設定する

      npx cap init [appName] [appId]
      

   3. 下記コマンドを実行し、ビルドする

      ionic build
      

   4. 下記コマンドを実行し、Android プロジェクトを生成する

      npx cap add android
      

   5. 下記コマンドを実行し、Android Studio を起動する

      npx open android
      

   6. 実行してみる
   7. 下記コマンドを実行し、iOS プロジェクトを生成する

      npx cap add ios
      

   8. 下記コマンドを実行し、Xcode を起動する

      npx open ios
      

   9. 証明書設定を調整し、実行してみる

9. Visual Studio for Mac のセットアップ

1. Visual Studio for Mac をダウンロードする
2. インストーラーを実行し、Android SDK のパスを既存のものに設定する
3. インストール後にアプリを起動し、Xcode のパス設定を調整する

10. Visual Studio Code 関連のセットアップ

1. 基本的なセットアップ
   1. Visual Studio Code をダウンロードする
   2. アプリを起動し、Cmd + Shift + P を押して"Shell Command: Install 'code' command in PATH" を実行し、コマンド経由で起動できるようにする
   3. Japanese Language Pack for Visual Studio Code をセットアップする
   4. vscode-icons をセットアップする
   5. gitignore をセットアップする
2. Docker をセットアップする
3. Web 関連をセットアップする
   • Angular Language Service をセットアップする
   • Cordova Tools をセットアップする
   • Debugger for Chrome をセットアップする
4. Flutter をセットアップする
5. C# 関連をセットアップする
   • C# をセットアップする
   • C# Extensions をセットアップする
   • C# XML Documentation Comments をセットアップする
6. Java Extension Pack をセットアップする
7. Kotlin Language をセットアップする
8. Marp for VS Code をセットアップする
9. PlantUML をセットアップする
   • Java をセットアップする(Android のセットアップ手順を踏んでいれば設定できているはず)
   • プレビュー表示をするためにGraphviz をセットアップする

   brew install graphviz
   

10. Swift Development with Visual Studio Code を参考にセットアップする

残り課題

• Git, Ruby もバージョン管理すべきか
• SQLite の確認はどうすべきか
• Visual Studio Code のCSS フォーマッター