はじめに
Flutterは、Googleが提供するクロスプラットフォーム対応のUIツールキットで、iOS、Android、Web、デスクトップアプリを一つのコードベースから開発できます。本記事では、Visual Studio Code（VSCode）を使用してFlutter環境を構築する方法を初心者向けに詳しく解説します。
必要な準備
環境構築を始める前に、以下のツールとシステム要件を確認してください：
OS：Windows、macOS、またはLinux
VSCode：Visual Studio Code公式サイト
Flutter SDK：Flutter公式ダウンロードページ
Dart SDK（Flutterに含まれています）
Android Studio（Androidアプリ開発用）
Xcode（iOSアプリ開発用：macOSのみ）
下記からは実際の具体的な手順となります。
手順1: Flutter SDKのインストール
1. Flutter SDKをダウンロード
Flutter公式ページから最新のstableチャンネルのSDKをダウンロードします。
ダウンロードしたZIPファイルを解凍し、適当なフォルダに保存します（例：
C:\flutterまたは/Users/yourname/flutter）。
2. 環境変数の設定
Flutterコマンドを使用するために、binフォルダを環境変数PATHに追加します。
Windowsの場合
スタートメニューで「環境変数」と検索し、「環境変数の編集」を選択。
ユーザー変数またはシステム変数に以下を追加：
C:\flutter\bin
macOSの場合
ターミナルを開き、
/.zshrcまたは/.bashrcを編集します：$ export PATH="$PATH:/Users/yourname/flutter/bin"
設定を反映：
$ source ~/.zshrc
3. Flutter Doctorの実行
ターミナルまたはコマンドプロンプトで以下を実行し、環境設定状況を確認します：
$ flutter doctor
表示される出力メッセージに従い、必要なツールや設定を完了してください。
手順2: VSCodeのセットアップ
1. VSCodeのインストール
VSCode公式ページからVSCodeをダウンロードしてインストールします。
2. Flutter関連の拡張機能を追加
3. VSCodeの設定
VSCodeを再起動し、ターミナルを開きます。
flutter doctorを実行して、VSCodeとFlutterが正常に連携しているか確認します。
手順3: Android Studioのセットアップ
FlutterはAndroidアプリを開発するためにAndroid Studioを必要とします。
Android Studioのインストール
1. Android Studio公式ページからインストール。
2. 初回起動時に「SDK Manager」を開き、以下をインストール：
・最新版のAndroid SDK
・Android Emulator
・Google Play Services
Flutter DoctorでSDKライセンスを承認
以下をターミナルで実行して、SDKライセンスを承認します：
$ flutter doctor --android-licenses
手順4: Flutterプロジェクトの作成
1. 新しいプロジェクトを作成
VSCodeのコマンドパレットを開きます（
Ctrl+Shift+PまたはCmd+Shift+P）。Flutter: New Projectを選択。プロジェクト名を入力（例：
myflutterapp）。プロジェクトフォルダが作成されます。
2. デバイスでアプリを実行
デバッグ対象のデバイスを接続またはエミュレータを起動します。
ターミナルで以下を実行：
$ flutter run
初期画面に「Hello, World!」のウィジェットが表示されます。
手順5: iOS環境の構築（macOSのみ）
1. Xcodeのインストール
Mac App StoreからXcodeをインストール。
Xcodeを起動し、以下を確認または設定：
Xcode Command Line Tools
2. CocoaPodsのインストール
FlutterアプリでiOSビルドを行うには、CocoaPodsが必要です。
$ sudo gem install cocoapods
便利なツール
Macユーザー向け：mise
Macユーザーには「mise」がおすすめです。Miseは複数のランタイムやプログラミング言語を効率的に管理できるツールで、特にFlutterやDartのバージョン管理を簡単に行うことができます。
詳細はmise公式ページをご覧ください。
（Windowsでも現在のところ非常に限定的で使用できます）
Cursorのおすすめ
ヨクト株式会社では、効率的なコーディング体験を提供するツールとしてCursorを推奨しています。CursorはAIアシスタントを搭載しており、コード補完やエラー修正をサポートします。Flutter開発でも、効率的にプロジェクトを進めるための強力なサポートを提供します。
詳細はCursor公式ページをご覧ください。
トラブルシューティング
エラー：Flutterコマンドが見つからない
・環境変数
PATHを正しく設定しているか確認。デバイスが認識されない
・デバイスのUSBデバッグが有効になっているか確認。
iOSビルドエラー
・CocoaPodsを再インストール：
$ pod install
まとめ
Visual Studio Codeを使用したFlutter環境の構築は、初心者でも簡単に始められます。miseなどのツールを活用することで、効率的な開発環境を構築できます。また、Cursorを活用することで、さらに効率的なコーディング体験を実現できます。
この記事を参考に、Flutterでのアプリ開発をぜひお楽しみください！
