🗂

【Flutter】シミュレータより手軽？ web-server モードの活用とビルド種別の違い

に公開
Flutter
Dart
tech

はじめに

FlutterでWebアプリを開発する際、Android StudioのエミュレータやiOSシミュレータを立ち上げて、「PCが重い…ファンがうるさい…」とストレスを感じたことはありませんか？

実は、Web向けの開発であれば重厚なシミュレータは必須ではありません。flutter run -d web-server コマンドを活用すれば、お使いのブラウザだけで軽量かつ効率的に動作確認が可能です。

本記事では、Web Serverモードの具体的なメリットと、用途に応じたビルドモード（Debug, Release, Profile）の使い分けについて解説します。

参考
https://docs.flutter.dev/platform-integration/web/building#run-your-app

web-server モードのメリット（vs シミュレータ）

通常、モバイルアプリ開発では重いシミュレータ（Emulator）を起動しますが、web-server モードには以下のメリットがあります。

PCのリソース消費が少ない: エミュレータを起動しないため、メモリやCPUに優しい。

実機確認が容易: 同一ネットワーク内のスマホからPCのIPアドレスにアクセスするだけで、手軽に実機での表示確認ができる。

インストール不要: 閲覧側に専用アプリのインストールが不要。

開発モード（Debug Build）

開発機能（Hot Reload等）を含んでいるため、デバッグには必須ですが、動作パフォーマンスは犠牲になります。

  • 特徴: 開発ツール込み。動作は「激重」。
  • 用途: 機能実装、UI構築中。
flutter run -d web-server

リリースモード（Release Build）

開発機能を排除し、最適化（Minify/Tree Shaking）を行った状態です。

  • 特徴: ビルドには数十秒かかるが、ブラウザでの表示・動作は「爆速」。
  • 用途: 本番相当のパフォーマンス確認、カクつきの検証。
flutter run -d web-server --release

プロファイルモード（Profile Build）

リリースモードに近いパフォーマンスを維持しつつ、DevToolsでのパフォーマンス計測が可能です。

  • 特徴: デバッグ機能の一部を有効化。
  • 用途: アプリのボトルネック調査。
flutter run -d web-server --profile

おわりに

今回は、シミュレータを使わずにブラウザでFlutterアプリを動作させる web-server モードについて解説しました。

PCのリソース消費も抑えられるため、カフェなど電源が確保しにくい環境での開発にも非常に有効です。最後に、覚えておくと便利なオプションをまとめました。

主要な Web Server オプション

オプション 役割 設定例
--web-port 起動するポート番号を固定する --web-port 8080
--web-hostname 接続を受け付けるIPアドレスを指定する --web-hostname 0.0.0.0
--web-renderer レンダリング方式を指定する（html か canvaskit） --web-renderer html

Discussion