Cohorz Dev

開発環境のセットアップ（前編）

公開日：January 31, 2025更新日：January 31, 2025
FlutterDartCoding📄

Flutterアプリの開発に必要な環境をセットアップする手順を説明します。前編では、Flutter SDKのインストール、エディタの準備、必要なプラグインのインストール、およびオプションとしてAndroid StudioとXcodeのインストールを行います。

1. Flutter SDKのインストール ​

まず、Flutter SDKをインストールしましょう。Flutter SDKには、Flutterフレームワーク、Dart SDK、開発ツールなどが含まれています。以下の手順に従って、各OSごとにインストールを行ってください。

1.1 Windows ​

  1. Flutterの公式サイト（https://flutter.dev/docs/get-started/install/windows）にアクセスし、最新の安定版Flutter SDKのzipファイルをダウンロードします。
  2. ダウンロードしたzipファイルを、任意のディレクトリ（例：C:\src\flutter）に展開します。
    • 注意：C:\Program Files\ のような、管理者権限が必要なディレクトリには展開しないでください。
  3. Flutterの実行ファイルをPATH環境変数に追加します。
    1. スタートメニューの検索バーで「環境変数」と入力し、「システム環境変数を編集」を選択します。
    2. 「環境変数」ボタンをクリックします。
    3. 「ユーザー環境変数」セクションで「Path」を選択し、「編集」をクリックします。
    4. 「新規」をクリックし、Flutterのbinディレクトリのフルパス（例：C:\src\flutter\bin）を入力します。
    5. 「OK」をクリックしてすべてのダイアログを閉じます。
  4. コマンドプロンプトを開き、flutter doctor と入力して実行します。以下のようにFlutterのインストール情報と、追加で必要なセットアップが表示されれば成功です。
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.10.5, on Microsoft Windows [Version 10.0.19045.3086], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Chrome - develop for the web
    ! Cannot find Chrome. To provide a better development experience,
      try installing Chrome: https://www.google.com/chrome/
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.4)
[√] Android Studio (version 2021.3)
[√] VS Code (version 1.79.2)
[√] Connected device (3 available)
[√] Network resources

! Doctor found issues in 2 categories.

1.2 macOS ​

  1. Flutterの公式サイト（https://flutter.dev/docs/get-started/install/macos）にアクセスし、最新の安定版Flutter SDKの.tar.xzファイルをダウンロードします。

  2. ダウンロードしたファイルを、任意のディレクトリ（例：~/development）に展開します。

    bash
    cd ~/development
tar xf ~/Downloads/flutter_macos_3.10.5-stable.tar.xz

  3. Flutterの実行ファイルをPATH環境変数に追加します。

    • 使用しているシェルに応じて、~/.bash_profile、~/.zshrc などの設定ファイルを編集します。例えば、zshを使用している場合は、以下のようにします。
    bash
    nano ~/.zshrc
    • ファイルの末尾に以下の行を追加します。
    bash
    export PATH="$PATH:[展開したFlutterディレクトリのパス]/flutter/bin"
    • 例：export PATH="$PATH:$HOME/development/flutter/bin"
    • ファイルを保存して閉じます。

  4. ターミナルを開き、flutter doctor と入力して実行します。以下のようにFlutterのインストール情報と、追加で必要なセットアップが表示されれば成功です。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4.1 22F82 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.79.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

1.3 Linux ​

  1. Flutterの公式サイト（https://flutter.dev/docs/get-started/install/linux）にアクセスし、最新の安定版Flutter SDKの.tar.xzファイルをダウンロードします。

  2. ダウンロードしたファイルを、任意のディレクトリ（例：~/development）に展開します。

    bash
    cd ~/development
tar xf ~/Downloads/flutter_linux_3.10.5-stable.tar.xz

  3. Flutterの実行ファイルをPATH環境変数に追加します。

    • 使用しているシェルに応じて、~/.bashrc、~/.zshrc などの設定ファイルを編集します。例えば、bashを使用している場合は、以下のようにします。
    bash
    nano ~/.bashrc
    • ファイルの末尾に以下の行を追加します。
    bash
    export PATH="$PATH:[展開したFlutterディレクトリのパス]/flutter/bin"
    • 例：export PATH="$PATH:$HOME/development/flutter/bin"
    • ファイルを保存して閉じます。

  4. ターミナルを開き、flutter doctor と入力して実行します。以下のようにFlutterのインストール情報と、追加で必要なセットアップが表示されれば成功です。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.5, on Ubuntu 22.04.2 LTS 5.19.0-46-generic, locale ja_JP.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.79.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

2. エディタの準備 (VS Code推奨) ​

Flutterアプリの開発には、コードエディタが必要です。VS Code（Visual Studio Code） は、Flutter開発に最適なエディタの一つであり、公式にも推奨されています。もちろん、Android StudioやIntelliJ IDEAなど、他のエディタを使用することもできますが、このチュートリアルではVS Codeを使用します。

  1. VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスし、お使いのOS用のインストーラをダウンロードします。
  2. ダウンロードしたインストーラを実行し、画面の指示に従ってVS Codeをインストールします。

3. 必要なプラグインのインストール (Flutter, Dart) ​

VS CodeをFlutter開発に使用するためには、FlutterとDartのプラグインをインストールする必要があります。

  1. VS Codeを起動します。
  2. 左側のサイドバーから「Extensions」（拡張機能）アイコンをクリックします（または、Ctrl+Shift+X / Cmd+Shift+X を押します）。
  3. 検索バーに「Flutter」と入力し、表示された「Flutter」プラグインを選択して「Install」ボタンをクリックします。
    • Flutterプラグインをインストールすると、Dartプラグインも自動的にインストールされます。
  4. インストールが完了したら、VS Codeを再起動します。

4. Android StudioとXcodeのインストール (オプション) ​

Flutterでは、AndroidとiOSの両方のプラットフォーム向けにアプリを開発できます。それぞれのプラットフォーム用のエミュレータ/シミュレータを使用したり、実機でデバッグしたりするには、Android Studio（Android用）とXcode（iOS用）のインストールが必要です。

このチュートリアルでは、主にAndroidエミュレータを使用します。iOSシミュレータを使用したい場合は、macOSにXcodeをインストールする必要があります。

4.1 Android Studioのインストール ​

  1. Android Studioの公式サイト（https://developer.android.com/studio）にアクセスし、最新版のAndroid Studioをダウンロードします。
  2. ダウンロードしたインストーラを実行し、画面の指示に従ってインストールします。
    • インストール中に、Android SDK、Android SDK Platform、Android Virtual Device などのコンポーネントが選択されていることを確認してください。
  3. インストールが完了したら、Android Studioを起動し、セットアップウィザードに従って必要なSDKコンポーネントをダウンロードします。

4.2 Xcodeのインストール ​

  1. Mac App Storeを開きます。
  2. 検索バーに「Xcode」と入力し、検索結果から「Xcode」を選択します。
  3. 「入手」ボタンをクリックして、Xcodeをインストールします。
    • Apple IDでのサインインを求められる場合があります。
  4. インストールが完了したら、Xcodeを起動し、利用規約に同意します。
  5. 必要に応じて、追加のコンポーネントをインストールします。
Copyright © 2025 Cohorz Dev
Powered by VitePress