1. この記事で行うこと

アプリ開発を始めるには、まず開発環境を準備する必要があります。
この記事では Mac で Flutter を使用して開発を行うための開発環境の準備を行います。

もし Flutter を知らない方は、Flutter ってなに？を先に読むことをお勧めします。

2. 必要なツールのインストール

まずは開発に必要な以下のツールを、上から順にインストールしましょう。

まずは「Launchpad → その他 → ターミナル」から、ターミナルアプリを起動しましょう。
表示された画面に、以下のコマンドを入力したら Enter を押してください。

bash
1xcode-select --install

すると以下のようなウィンドウが表示されるため、「インストール」を押してください。

Xcode Command Line Toolsをインストール

あとはインストールが完了するまで待てば OK です。

次に、Xcode をインストールしましょう。
Xcode は、 iOS や macOS のアプリ開発を行うための開発環境です。
App Store から「Xcode」と検索して、インストールしてください。

Xcode インストール

インストールが完了したら起動してください。
「Select the components you want to get started with:」という画面が表示されますが、ここは特に変更せずに「Download & Install」を押してください。

次に、プログラムを実際に書くためのエディタをインストールしましょう。
本サイトでは Visual Studio Code (VS Code) を使用します。

VS Code のダウンロードページにアクセスして「Download for macOS」からダウンロードしてください

VS Codeダウンロードページ

ダウンロードが完了したら、ZIP ファイルを解凍すると「Visal Studio Code」アプリが表示されます。　
アプリケーションフォルダに移動して、ダブルクリックをして開いてください。

以下のような警告ダイアログが表示されるため、「開く」を押してください。

VS Code起動時の警告ダイアログ

以下のような画面が表示された、VS Code のインストールは完了です

VS Code起動時の画面

VS Code を起動したら、サイドメニューの拡張機能アイコンを押して、検索バーに「flutter」と入力してください。
その後、「Install」を押してください。

VS Code拡張機能画面

最後に Flutter をインストールしましょう。
VS Code のコマンドパレットを「Command + Shift + P」を押して開き、flutter と入力して「Flutter: New Project」を選択してください。

VS Codeコマンドパレット

すると、右下に以下の通知が表示されるため、「Download SDK」を押してください。

Flutter SDK ダウンロード通知

ダウンロード先は「書類」など、任意の場所で構いません。
もう一度「Launchpad → その他 → ターミナル」からターミナルアプリを起動して、以下のコマンドを入力してください。

bash
1echo 'export PATH="{ダウンロード先のパス}/flutter/bin:$PATH"' >> ~/.zshrc
2source ~/.zshrc

最後に、以下のコマンドで Flutter SDK を正しくインストールできたか確認してください。

bash
1flutter doctor

「Downloading Darwin arm64 Dart SDK from Flutter engine...」のようなメッセージが表示されれば OK です。
お疲れ様でした！