前回は、「Flutter（フラッター）」についてお話ししました。
今回は、自分のパソコンでアプリを作れるようにするための「環境構築（道具の準備）」を行います。
1. なぜ「Flutter」なのか？（おさらい）
道具を揃える前に、これから使う「Flutter」について少しだけ整理しておきましょう。
- メリット： 1つのコードを書けば、iOSとAndroidの両方のアプリが作れる（開発時間が半分！）。
- デメリット： 日本語の情報が、Web開発（HTML/CSSなど）に比べると少ない。
個人開発において「開発時間が半分になる」というメリットは圧倒的です。
2. 必要な「3つの道具」とその役割
アプリ開発には、主に3つのソフトを使います。
それぞれ役割を理解すると使いやすくなります。
① VS Code（ブイエスコード）
役割：コードを書く時に使うツール
- 得意： 動作が軽くてサクサク動く。コードを書くのに最適。
- 苦手： アプリを画面に映して動かす機能はない（他のソフトの力を借りる）。
② Android Studio（アンドロイドスタジオ）
役割：Androidの動作確認および設定（全部入り工具箱）
- 得意： PCの中に「仮想のAndroidスマホ」を作り出し、アプリを動かしてテストできる。
- 苦手： 機能が多すぎて、動作が少し重い。
③ Xcode（エックスコード）※Mac限定
役割：iosアプリの動作確認および設定（Appleの門番）
- 得意： PCの中に「仮想のiPhone」を作り出す。App Storeへの公開作業はこれがないとできない。
- 注意： Macでしか動きません。
💡 結論：どれを使えばいい？
ちなみに私は「VSCode」ではなく「Android Studio」で書く派ですが、世界的には「VS Code」で書く人が多いようです。
たしかにWEB開発などでは VS Code を使っている方も多く、動作も軽快なので VS Code のほうが採用しやすいかもしれません。
私は単純に使い慣れていて、エラー周りが見やすいのが気に入ってます。
コードを何で書くかは好みによるところも大きいので迷ったら VS Code こだわりがあればそれを使うという判断でいいと思います。
念の為、初心者の方へのおすすめの使い方を書いておきます。
【初心者へのおすすめ構成】
- コードを書く： VS Code（軽いから）
- Androidアプリの動作確認： Android Studio
- iPhoneアプリの確認： Xcode（ほぼ必須）
3. インストール手順（Windows / Mac共通）
では、順番に入れていきましょう。
※コマンド操作が出てきますが、コピペでOKです。
Step 1: Flutter本体のインストール
これがアプリ開発のエンジン部分です。
1. 公式サイトからダウンロード
Flutter公式サイトにアクセスし、自分のOS（Windows or macOS）を選んでボタンを押します。
2. 解凍して配置
ダウンロードしたzipファイルを解凍し、flutter というフォルダを、使いやすい場所（例: C:\src\flutter や ~/development/flutter）に置きます。
3. パス（Path）を通す
PCに「flutterコマンドを使うよ」と教える作業です。ここが少し難しいですが、公式ドキュメントの「Update your path」という部分を見ながら設定してください。
Step 2: 必要なソフトを入れる
自分の作りたいアプリに合わせて、以下のソフトをインストールしてください。
- コードエディター： VS Code
インストール後、左メニューの拡張機能（四角いアイコン）から「Flutter」と検索してインストールしておきましょう。 - Androidを作りたい人（ほぼ全員）： Android Studio
インストール途中の設定は全て「Next（次へ）」でOKです。 - iPhoneを作りたい人（Macのみ）： Xcode
Macの「App Store」アプリを開き、「Xcode」と検索して入手します（容量が大きいので時間がかかります）。
⚠️ Windowsユーザーの方へ
残念ながら、WindowsのパソコンではiPhoneアプリを作ることのが難しいです。
まずはAndroidアプリの開発を進め、将来iPhone版も出したくなったらMacの購入を検討しましょう。
4. 健康診断「flutter doctor」
最後に、準備が正しくできているかチェックするコマンドがあります。
VS Codeを開き、画面上のメニューから「ターミナル」→「新しいターミナル」を開いて、以下を入力してください。
flutter doctor実行すると、診断結果が表示されます。
- [✓] (緑色のチェック)： 合格！準備OKです。
- [!] (ビックリマーク) / [x] (バツ)： 何か足りていません。
よくあるのが「Android toolchain」や「Xcode」の不足です。
エラーメッセージに「Run `path/to/command` to resolve」のように「これを実行してね」と答えが書いてあることが多いので、それをコピーして実行すれば解決します。
まとめ：準備完了！次はコードを書こう
お疲れ様でした！flutter doctor でオールグリーン（全てチェック）になれば、あなたのパソコンは立派な「アプリ開発マシン」です。
環境構築は、プロでもつまづく面倒な作業です。今日これができただけで、あなたは大きな一歩を踏み出しています。