1. イントロダクション：Flutterとは？
- Flutterの概要: Googleによって開発されたUIツールキットであり、一つのコードベースでiOS、Android、Web、デスクトップ向けのネイティブコンパイルされた美しいアプリケーションを構築できます。
- 開発言語: Dart言語を使用します。
- 記事の目的: この記事では、MacまたはWindows環境にFlutter SDK、Android Studio、VS Codeを導入し、エミュレータでサンプルアプリを起動するまでの手順を、初心者にも分かりやすく解説します。
2. 環境構築の全体像と前提条件
2.1. 必要なツール（必須）
Flutterの開発を始めるには、主に以下の3つの要素が必要です。
- Flutter SDK: Flutterのフレームワークとツールが含まれる本体。
- IDE（開発環境）: VS Code または Android Studio（どちらか一方でOK）。
- 開発ツールチェーン: iOS開発にはXcode (Macのみ)、Android開発にはAndroid StudioのAndroid SDKとCommand Line Tools。
2.2. 前提条件
- MacまたはWindows OS（最新バージョンを推奨）
- 安定したインターネット接続
3. Step 1: Flutter SDKのダウンロードとパス設定
3.1. Flutter SDKのダウンロード
- Flutter公式サイトから、ご自身のOS（MacまたはWindows）に合った最新のSDKファイルをダウンロードします。
- ダウンロードしたファイルを解凍し、任意の場所（例：
C:\src\flutterまたは~/development/flutter）に配置します。
3.2. 環境変数（Path）の設定（重要）
コマンドラインでFlutterコマンドを使えるように、SDKの bin フォルダへのパスを通します。
- Windows:
- 「システム環境変数」を開きます。
Path変数を選択し、flutter/binへのフルパス（例:C:\src\flutter\bin）を追加します。
- Mac/Linux:
- ターミナルで
bashrcやzshrcファイルを開きます。 - 以下のコマンドを追加します（パスは適宜変更してください）。Bash
export PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/bin" source ~/.zshrcなどで設定を反映します。
- ターミナルで
3.3. 動作確認
ターミナルまたはコマンドプロンプトで以下のコマンドを実行し、エラーがないかを確認します。
Bash
flutter doctor
4. Step 2: 開発ツールチェーンのセットアップ
4.1. Android StudioとAndroid SDKの導入
Androidエミュレータの実行と、Androidアプリのビルドに必要なSDKをインストールします。
- Android Studioをダウンロードし、インストールします。
- Android Studioを起動し、初回設定ウィザードでAndroid SDKとAndroid SDK Command-line Toolsをインストールします。
- SDK Manager（設定メニュー内）で、最新のAndroid SDK PlatformとSDK Toolsがインストールされていることを確認します。
4.2. (Macのみ) Xcodeの導入と設定
iOSシミュレータとiOSアプリのビルドに必要です。
- Mac App StoreからXcodeをインストールします。（非常に時間がかかります）
- Xcodeのインストール後、以下のコマンドを実行してコマンドラインツールを設定します。Bash
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
5. Step 3: IDE（VS Code）の設定
多くのFlutter開発者に選ばれているVS Codeで開発するための設定です。
- Visual Studio Codeをダウンロードし、インストールします。
- VS Codeを起動し、拡張機能（Extensions）マーケットプレイスを開きます。
- 以下の2つの必須拡張機能を検索し、インストールします。
- Flutter: Flutter開発に必要な全ての機能を提供します。
- Dart: Dart言語のシンタックスハイライト、コード補完などを提供します。
6. Step 4: エミュレータの起動と動作確認
6.1. Android エミュレータの起動
- Android Studioを開きます。
- Device Manager (AVD Manager) を開き、新しい仮想デバイス（Pixel 4などが推奨）を作成します。
- 作成したデバイスを起動します。
6.2. サンプルプロジェクトの作成
VS Codeに戻り、ターミナルで以下のコマンドを実行します。
Bash
flutter create my_first_app
cd my_first_app
6.3. 実行
エミュレータが起動している状態で、以下のコマンドを実行します。
Bash
flutter run
これで、エミュレータに「Hello World」アプリがビルドされ、表示されます。
7. まとめと次のステップ
flutter doctorですべての項目にチェックマークが付いていることを確認します。- 次のステップとして、Dart言語の基本を学ぶことを推奨します。
コメント