FlutterはWebアプリ開発でどこまで使えるか？

はじめまして、X（クロス）イノベーション本部プロダクトイノベーションセンターの瀧川亮弘です。
本記事は、電通総研 Advent Calendar 2024 10日目の投稿です。

もともとネイティブアプリを主戦場とするFlutterですが、Web開発にどれほど活用できるのか調査したため共有します。

Flutter とは
Flutter for Web とは
Flutter for Web の注意点
Flutter for Web の使いどころ
終わりに

Flutter とは

Flutterは、2017年にGoogleが発表したオープンソースのUI開発フレームワークです。
プログラミング言語にはコンパイル型のDartを採用しており、高いパフォーマンスと開発効率を実現しています。
単一のコードベースからiOS、Android、デスクトップ、Webといった複数のプラットフォーム向けにアプリを開発できる点が特徴です。
また、マテリアルデザインに準拠した多彩なウィジェット（部品）が標準で提供されており、美しく直感的なUIを比較的簡単に作成できます。

Flutter for Web とは

Flutterは当初、iOSおよびAndroid向けのネイティブアプリ開発をターゲットとしてスタートしましたが、現在ではデスクトップやWebにも対応しています。
ここではFlutterによるWebアプリ開発のことをFlutter for Webと呼びます。

Flutter for Web は、モバイルアプリやデスクトップアプリと同じコードでWebアプリも一緒に開発したいという場合に便利です。
コストや開発期間を削減できるだけでなく、プラットフォーム間でのUIの差異を最小限に抑えることもできます。

また、Webアプリのパフォーマンス向上のためにWebAssembly（Wasm）へのビルドもサポートされています。

Flutter for Web の注意点

FlutterでWebアプリを開発する場合、以下のような注意点があります。

注意点1. ネイティブアプリがメインターゲット

Web向けのサポートも進んでいるものの、モバイル向けと比較するとやはり劣る部分があります。
たとえば、モバイル向けパッケージにはWeb非対応なものが多く、Web対応であっても、Web専用の機能改善やバグ修正は劣後となる傾向にあります。

また、ネイティブアプリ開発ではHot Reloadが利用可能ですが、Web開発ではHot Restartしか利用できず、開発体験が落ちます。

Hot Reload：アプリを停止せずにコード変更を即座に反映する。状態が保持される。
Hot Restart：アプリを再起動してコード変更を反映する。状態はリセットされる。

注意点2. 実装言語がDartに限定される

通常のWeb技術（HTML,CSS,JavaScript）と異なり、全てのロジックやUIをDartのみで実装する必要があるため、実装難易度が高いです。
また、サードパーティのJavaScriptライブラリを型安全に利用したい場合、Dart側で独自に型定義を行う必要があります。
TypeScriptのように標準で豊富な型定義が存在しない点も、開発のハードルを上げる要因のひとつです。

注意点3. SEOに弱い

Flutterはシングルページアプリケーション（SPA）の構成を採用しており、初期ロード後にクライアント側で動的にDOMを生成します。
標準ではサーバーサイドレンダリング（SSR）やマルチページアプリケーション（MPA）に対応していないため、検索エンジンのクロールやインデックスが難しくなり、SEOに弱くなります。

さらに、Canvasによる画面描画では、検索エンジンによる解析が困難となります。これもSEOに弱くなる要因のひとつです。
また、スクリーンリーダーによる読み上げも困難となるため、アクセシビリティの低下にもつながります。

注意点4. 初期ロードが重い

Flutterではビルド時に比較的大きなファイルが生成されるため、初期ロードが重くなります。
空のプロジェクトでも数MBになり、ページ数や機能が増えるとさらに肥大化します。
標準ではNext.jsのような自動コード分割機能も備わっていないため、ユーザー操作とは関係のない画面ソースもブラウザにダウンロードする必要があり、非効率です。