先生と生徒の会話形式で理解しよう

生徒

「Flutter Webって聞いたんですけど、スマホアプリだけじゃなくてウェブサイトも作れるんですか？」

先生

「はい、Flutterはモバイルだけでなく、Webアプリも作れるクロスプラットフォームフレームワークです。ただし、Flutter Webにはいくつかの制約もあります。」

生徒

「へえ〜！じゃあFlutter Webで普通のHTMLサイトみたいなものも作れるんですか？」

先生

「Flutter Webの構造は通常のHTML/CSSとは少し違いますが、Webアプリやシングルページアプリケーション（SPA）ならしっかり作れますよ。それでは、Flutter Webでできること・できないことを詳しく見ていきましょう！」

1. Flutter Webとは？どんな仕組み？

Flutter Webとは、Googleが開発したUIフレームワークFlutterを使って、Webアプリケーションを構築できる機能です。モバイルアプリと同じDart言語で記述されたコードをWeb向けに変換し、HTML・CSS・JavaScriptにトランスパイルして動作します。

Flutter WebはCanvasKitとHTMLレンダラーの2種類の描画方式をサポートしており、用途に応じて切り替えることができます。

2. Flutter Webで「できること」一覧

Flutter Webは、以下のような用途に非常に適しています。

シングルページアプリケーション（SPA）の開発
内部業務向けの管理画面UI
PWA（Progressive Web Apps）の構築
レスポンシブなダッシュボード・チャート系アプリ
Flutterモバイルアプリのコードを再利用してWeb対応

実際のコードもDartで記述するので、既存のFlutterアプリをWebにも展開しやすいという利点があります。

3. Flutter Webの「できないこと」や注意点

Flutter Webは非常に便利ですが、以下のような制約や注意点があります。

SEO（検索エンジン最適化）には不向き
初回ロードが遅い（バンドルサイズが大きい）
JavaScriptライブラリとの統合が限定的
フォームやリンクがHTMLのように柔軟ではない
ブラウザによって表示や動作に違いが出る場合がある

特にSEO対策が必要なブログや企業サイトなどにはFlutter Webは適しません。

4. Flutter WebとHTML/CSSの違い

Flutter Webは、HTMLやCSSで記述する通常のWebサイトとは根本的にアプローチが異なります。HTMLタグを直接書くのではなく、Flutterのウィジェットをツリー構造で組み合わせてUIを描画します。

例えば、HTMLで以下のようなコードを書く代わりに、


<div class="container">
    <h1>Hello World</h1>
</div>

Flutterでは以下のようにDartで書きます。


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

5. Flutter Webでよくある疑問・制約の詳細

SEO対策はできるの？
残念ながら、Flutter WebはJavaScriptベースで描画されるため、HTMLの構造が動的に生成されます。そのため、Googleなどの検索エンジンがコンテンツを読み取るのが難しくなります。

ページごとのURLやルーティングはできる？
はい、Flutter Webではgo_routerやNavigator 2.0を使ってSPA形式のルーティングが可能です。ただしHTMLのような階層的なURL構造ではなく、JavaScriptで制御されます。

Web特有のAPIやブラウザイベントへのアクセスは？
Flutter Webでは一部のブラウザAPI（クリップボード・ストレージなど）にアクセス可能ですが、JavaScriptのように自由には扱えません。

6. Flutter Webを使うときのベストプラクティス

Flutter Webを快適に利用するには、以下の点を意識しましょう。

CanvasKitではなくHTMLレンダラーを選ぶことで軽量化
画像・フォントなどのアセットサイズを最小限にする
レスポンシブUIはLayoutBuilderやMediaQueryで実装
PWAとして動作させる場合はmanifestやservice workerを活用

Flutterのflutter build webコマンドを使用することで、最終的なWebアセットが生成され、サーバーに配置できます。

7. Flutter Webの今後の可能性とユースケース

現在は制約も多いFlutter Webですが、Googleが継続的に開発を進めており、徐々に改善されています。特に、企業向けの社内ツールや、複雑なUIを必要とする管理画面などでの採用が増えています。

例えば以下のようなケースでは有効です。

スマホ・Web両対応のアプリを一つのコードベースで開発したい
高速なプロトタイピングやモックアップツールとして
Flutterエンジニアが既存の技術をWebにも応用したい

Flutter Webの制約とできること・できないことを徹底解説【初心者向け】