なぜFlutterを使うのか
このページで学ぶこと
- Flutter とは何かがわかる
- Flutter と他のモバイル開発手法の違いがわかる
- 開発環境をセットアップできる
Flutter とは
Flutter は Google が開発したクロスプラットフォームのUIフレームワークです。
1つのコードで iOS・Android・Web・デスクトップのアプリを作れます。
Flutter のコード (1つ)
├── iOS アプリ
├── Android アプリ
├── Web アプリ
└── デスクトップアプリプログラミング言語は Dart を使います。
なぜ Flutter を選ぶのか
| 比較項目 | ネイティブ（Swift/Kotlin） | React Native | Flutter |
|---|---|---|---|
| 言語 | Swift/Kotlin（2言語必要） | JavaScript | Dart |
| 見た目の一貫性 | OS依存 | 一部ネイティブ | 完全に自分でコントロール |
| パフォーマンス | 最高 | 良い | 良い |
| 学習コスト（初心者） | 高い | 中程度 | 中程度 |
Flutter のメリット
- 1つのコードベースで iOS と Android の両方を作れる
- UIの見た目がすべて Flutter で描画されるため、OSに関係なく同じデザインになる
- Hot Reload（保存するとすぐに画面に反映）で開発が快適
開発環境をセットアップしよう
Windows の場合
ステップ1: Flutter SDK をインストールする
- Flutter 公式サイト（
flutter.dev）にアクセス - 「Get Started」→「Windows」を選ぶ
- Flutter SDK の zip ファイルをダウンロード
C:\src\flutterに展開する（スペースを含まないパスに置く）
ステップ2: 環境変数を設定する
- 「システムのプロパティ」→「環境変数」を開く
Pathの変数を選んで「編集」C:\src\flutter\binを追加する
ステップ3: 依存関係を確認する
PowerShell またはコマンドプロンプトで以下を実行する。
flutter doctor[✓] が並んでいれば問題なし。[✗] が出た項目は指示に従ってインストールする。
ステップ4: Android Studio をインストールする
- Android Studio の公式サイトからダウンロード・インストール
- 初回起動時の設定ウィザードを完了させる（Android SDK のインストールが行われる）
- VS Code でも開発できるが、エミュレータの管理は Android Studio が便利
Mac の場合
ステップ1: Flutter SDK をインストールする
# Homebrewが入っている場合（推奨）
brew install --cask flutter
# または公式サイトからzipをダウンロードして ~/development/flutter に展開ステップ2: 確認する
flutter doctorステップ3: Xcode をインストールする（iOS 開発に必要）
App Store から Xcode をインストールする。
# コマンドラインツールを設定
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunchVS Code の設定
Flutter 開発には VS Code が便利です。
- VS Code を開く
- 拡張機能（
Ctrl + Shift + X/Cmd + Shift + X）で「Flutter」を検索 - Flutter の拡張機能をインストール（自動的に Dart 拡張機能もインストールされる）
確認しよう
-
flutter doctorでエラーなく完了した - エミュレータ（Android）または シミュレータ（iOS）が起動できた
- VS Code に Flutter 拡張機能をインストールした
AIに聞いてみよう
「FlutterとDartを使ったことがありません。どこから始めると良いですか？」
次のステップ
Last updated on