Skip to Content
ドキュメントFlutterコースなぜFlutterを使うのか

なぜFlutterを使うのか

このページで学ぶこと

  • Flutter とは何かがわかる
  • Flutter と他のモバイル開発手法の違いがわかる
  • 開発環境をセットアップできる

Flutter とは

Flutter は Google が開発したクロスプラットフォームのUIフレームワークです。
1つのコードで iOS・Android・Web・デスクトップのアプリを作れます。

Flutter のコード (1つ)
├── iOS アプリ
├── Android アプリ
├── Web アプリ
└── デスクトップアプリ
plaintext

プログラミング言語は Dart を使います。

なぜ Flutter を選ぶのか

比較項目ネイティブ（Swift/Kotlin）React NativeFlutter
言語Swift/Kotlin（2言語必要）JavaScriptDart
UIの描画手法OS標準のコンポーネントを使用OS標準のUIをラップ独自エンジンで描画
見た目OS依存一部ネイティブOSに依存せず一貫したデザインが可能
パフォーマンス最高良い良い
学習コスト（初心者）高い中程度中程度

Flutter のメリット

  • 1つのコードベースで iOS と Android の両方を作れる
  • UIの見た目がすべて Flutter で描画されるため、OSに関係なく同じデザインになる

開発環境をセットアップしよう

Windows の場合

ステップ0: Scoopをインストールする

ScoopはWindows用パッケージマネージャーです。 ScoopはFVM (Flutter Version Manager)のインストールに使用します。

  1. 以下のコマンドをPowerShellまたはコマンドプロンプトで実行
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression
powershell
  1. scoop helpを実行し、Scoopがインストールされたことを確認

ステップ1: FVMをインストールする

  1. 以下のコマンドを実行してFVMをインストールする
scoop bucket add extras
scoop install extras/fvm
bash

FVMはFlutterのバージョン管理に使用します。 Flutterのバージョンによって、プロジェクトで予期せぬエラーや動かないパッケージが発生することがあるためです。

ステップ2: Flutter SDK をインストールする

  1. 適当なアプリ開発用フォルダを作成する（例: C:\src\flutter_apps）
  2. 1のフォルダを右クリックし、「ターミナルで開く」をクリック
  3. ターミナルでfvm use stableを実行する

C:\Program Files\のような高い権限が必要な場所や，OneDriveと同期されているフォルダ（ドキュメントなど）には置かないでください． NortonやMcAfee等、サードパーティ製アンチウイルスソフトをインストールしている場合、エミュレータに接続できない等エラーが発生する場合があります。これらアンチウイルスソフトをアンインストールすることを強く推奨します。

ステップ2.5: エイリアスの設定

  1. PowerShellを開き、以下のコマンドを実行して設定ファイル（プロファイル）を作成・開く
if (!(Test-Path -Path $PROFILE)) { New-Item -ItemType File -Path $PROFILE -Force }
notepad $PROFILE
powershell
  1. 開いたメモ帳に以下の2行を貼り付け、保存して閉じる
function flutter { fvm flutter $args }
function dart { fvm dart $args }
plaintext
  1. PowerShellを再起動するか、以下のコマンドを実行して設定を反映させる
. $PROFILE
powershell
  1. 動作確認
flutter doctor
bash

ステップ3: Android Studio をインストールする

  1. Android Studio の公式サイトからダウンロード・インストール
  2. 初回起動時の設定ウィザードを完了させる（Android SDK のインストールが行われる）
  3. Android Studioを起動する
  4. More Actionsを選択し、SDK Managerを開く
  5. Android SDK Command-line Toolsにチェックを入れ、Applyしてインストールする

ステップ4: ライセンスの同意

PowerShell またはコマンドプロンプトで以下を実行する。

# Androidライセンスに同意（すべてyを入力してEnter）
flutter doctor --android-licenses
bash

Mac の場合

ステップ0: Homebrewをインストールする

HomebrewはmacOSで一般的に使用されるパッケージマネージャーです .

  1. ターミナルで以下を実行してHomebrewをインストールする
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
bash
  1. 以下のコマンドを実行しHombrewをPATHに追加する
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
eval $(/opt/homebrew/bin/brew shellenv)
bash

ステップ1: FVMをインストールする

  1. 以下を実行する
brew install fvm
bash

ステップ2: Flutter SDKをインストールする

  1. 適当なアプリ開発用フォルダを作成する（例: ~/src/flutter_apps）
  2. Finder でそのフォルダを右クリックし、「サービス -> フォルダに新規ターミナル」をクリック
  3. ターミナルで fvm use stable を実行する

ステップ2.5: エイリアスの設定

  1. ターミナルで以下を実行し、~/.zshrc にエイリアスを追記する
echo 'alias flutter="fvm flutter"' >> ~/.zshrc
echo 'alias dart="fvm dart"' >> ~/.zshrc
bash
  1. 設定を反映する
source ~/.zshrc
bash
  1. 動作確認
flutter doctor
bash

ステップ3: XCode をインストールする（iOS 開発に必要）

App Store から XCode をインストールする。

# コマンドラインツールを設定
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
bash

CocoaPodsをインストールする

brew install cocoapods
bash

ステップ4: Android Studio をインストールする

  1. Android Studio の公式サイトからダウンロード・インストール
  2. 初回起動時の設定ウィザードを完了させる（Android SDK のインストールが行われる）
  3. Android Studioを起動する
  4. More Actionsを選択し、SDK Managerを開く
  5. Android SDK Command-line Toolsにチェックを入れ、Applyしてインストールする

ステップ5: ライセンスの同意

ターミナルで以下を実行する。

# Androidライセンスに同意（すべてyを入力してEnter）
flutter doctor --android-licenses
bash

エミュレータの準備

実機がなくても、パソコン上でアプリを動かすための仮想端末（エミュレータ）を利用する。

Androidエミュレータの追加

  1. Android Studioを開く
  2. More Actions -> Virtual Device Managerを選択
  3. Create Deviceから適当な端末を選び、インストールする

iOSシミュレータの追加

  1. XCodeを開く
  2. Settings -> Componentsを選択
  3. シミュレータのランタイムをインストール

VS Code の設定

Flutter 開発には VS Code が便利です。

  1. VS Code を開く
  2. 拡張機能（Ctrl + Shift + X / Cmd + Shift + X）で「Flutter」を検索
  3. Flutter の拡張機能をインストール（自動的に Dart 拡張機能もインストールされる）

Flutter SDK の自動検出

FVM でプロジェクトをセットアップした状態（.fvm/flutter_sdk が存在する状態）でプロジェクトフォルダを VS Code で開くと、Flutter 拡張機能が自動でそのSDKを検出してくれます。

初回は以下のようなダイアログが表示されます：

This project contains a Flutter SDK version managed by FVM. Do you want to use it?

「Yes」を選ぶと、.vscode/settings.json に以下が書き込まれます。

{
  "dart.flutterSdkPath": ".fvm/flutter_sdk"
}
json

うまく検出されないとき:

  • VS Code で開いているフォルダが プロジェクトのルート（pubspec.yaml があるフォルダ）になっているか確認する
  • fvm use stable を実行してから VS Code を開き直す
  • それでもだめなら上記の .vscode/settings.json を手動で作成する

確認しよう

  • flutter doctor でエラーなく完了した
  • エミュレータ（Android）または シミュレータ（iOS）が起動できた
  • VS Code に Flutter 拡張機能をインストールした

AIに聞いてみよう

「FlutterとDartを使ったことがありません。どこから始めると良いですか？」

次のステップ

→ はじめてのFlutterアプリ

Last updated on
Vercelで公開しようはじめてのFlutterアプリ