この手の話をもう何万回聞いたかわかりませんが、GitHubリポジトリのコミット数や頻度を見るにかなりの本気度を感じます。
そんなわけでJavaScriptをそのままネイティブアプリにするプロジェクトのひとつ、OpenWebFがベータ版に到達したようです。
以下は公式ブログ、Introducing WebF Beta: Bring JavaScript and the Web dev to Flutterの紹介です。
Introducing WebF Beta: Bring JavaScript and the Web dev to Flutter
開発者の皆さまハッピーニューイヤー。
WebFのベータ版へようこそ。
Web技術スタックは、人間の開発者にとってもAIコーディングツールにとっても大人気のターゲットであり、歴史上最大のエコシステムを築き上げました。
しかし、そのエコシステムをモバイルに移植しようとすると、途端に厳しいトレードオフを強いられます。
すなわち、クロスプラットフォームフレームワークを使って独自の構文で書き直すか、WebViewを使ってプラットフォームごとの違いを受け入れるかです。
第三の選択肢がそこにあったとしたら？
React・Vue・Vite・Tailwind CSSといったWebスタックが、モバイルでもデスクトップでもネイティブ並のパフォーマンスで動作したら？
書き換えは不要。
最小限の手順で移行することが可能です。
本日、WebFのベータ版リリースを発表します。
WebFはW3C/WHATWGに準拠したFlutter向けWebランタイムです。
モバイルとデスクトップマシン上で標準Webテクノロジー、すなわちHTML・CSS・DOM・JavaScriptをネイティブパフォーマンスで動かすことができます。
WebFベータ版では、React/Vue/Svelte + Vite + TailwindのWebスタックをそのままモバイルとデスクトップアプリにすることができます。
さらにWebF Goを使えば即座に実機でプレビューできるので、最速の開発ループを実現可能です。
アプリにWebFを埋め込む準備ができたら、flutter pub add webfを実行してください。
NPMエコシステムは巨大なので、万一動作しないことがあれば問題を報告して、互換性の向上にご協力ください。
これはAI駆動開発にとっても大きな前進です。
WebFは、AIモデルのトレーニングに使用されている標準Webテクノロジーを使用しているからです。
そのため、Claude・ChatGPT・GitHub Copilotなどを利用すれば、プラットフォーム固有のUIフレームワークよりも迅速に開発を進めることができるでしょう。
Your Existing Stack Just Works
よくあるクロスプラットフォームソリューションと異なり、WebFは新たに導入しなければならないフレームワークではありません。
WebFはランタイムです。
標準Webテクノロジーを使ってコードを記述しているかぎり、WebFはモバイルデスクトップともに、ネイティブのパフォーマンスを発揮します。
多くのWebスタックについては、ほとんど、あるいは一切変更することなく動作します。
Webフレームワーク
・React (v16–19)
・Vue (v2/v3)
・Svelte・Preact・Solid・Qwik
・バニラJavaScript
ビルドツール
・Vite (推奨)
・Webpack・esbuild・Rollup・Parcel
CSS・スタイリング
・Tailwind CSS v3
・Sass/SCSS・PostCSS・CSS Modules
・Styled Components・Emotion
Getting Started
Option 1: Try WebF in Minutes (WebF Go)
最も簡単にWebFを試す方法は、WebF Goです。
これはWebFエンジンを搭載したネイティブアプリです。
WebアプリはURLから読み込むので、カスタムアプリを構築することなく実機で動作確認することができます。
・npm create vite@latest my-appでプロジェクトを作成。
・npm run devすると開発サーバのURLが発行される。
・アプリにURLを入力する。
アプリはHMRとDevToolsに対応しており、瞬時に読み込まれます。
Build with Claude Code (default workflow)
WebFはClaude Codeと連携して動作します。
npx @openwebf/webf agents init
このコマンドで、WebFアプリ開発に必要となる、最も一般的なClaude Codeスキルがインストールされます。
Option 2: Embed WebF in a Flutter App
flutter pub add webfで、FlutterアプリにWebFが組み込まれます。
Extraordinary Performance
WebFは、単にWebコードを実行するだけではありません。
モバイル・デスクトップアプリに最適化されたカスタムビルドのランタイムです。
プロダクションアプリは、コールドスタートから100ミリ秒で起動します。
The Real Performance Problem with Web Apps
WebアプリはJavaScriptが重い、CSSが重いといった見解をよく耳にしますが、真の問題はそこではありません。
一番の問題は起動です。
ネイティブアプリはウォームアップ状態から始まることが多いのに対し、Webアプリはコールドスタートなのです。
スマートフォンを起動したばかりの場合、あらゆるアプリは起動に時間がかかります。
しばらくするとOSがコードをメモリにキャッシュするので、スムーズに起動するようになります。
ネイティブアプリとFlutterアプリは、このキャッシュを利用します。
アプリを開くと、既にキャッシュされているランタイム・Flutterエンジンを利用しようとします。
最初のエンジン起動には200ミリ秒かかりますが、その後は即座に起動するように感じられるようになります。
ブラウザ、特にWebViewベースのアプリはそうではありません。
読み込みが終わるとその後はスムーズに動作しますが、そのかわりに大きな初期コストがかかります。
すなわちJavaScriptエンジン・アセットとコードの再読み込みです。
これがパフォーマンスのちがいです。
言語などではなく、ライフサイクルが原因です。
ネイティブアプリとFlutterアプリはウォームスタートであるのに対し、多くのWebアプリ、特にWebViewではコールドスタートになりがちです。
WebF: Web Technologies, Native Lifecycle
HTML・CSS・JavaScriptで書かれたアプリが、ネイティブアプリやFlutterアプリと同じように起動できればどうなるでしょう。
これがWebFのパフォーマンスを支える考え方です。
WebFは、ネイティブアプリ同様にエンジンをメモリ内でウォームアップします。
アプリの起動時には一からフルブラウザを起動するのではなく、事前にウォームアップされたランタイムを利用します。
さらにWebFはUI処理をバックグラウンドから分離するため、UIスレッドはレンダリングに集中することができます。
アニメーション・スクロール・インタラクションのいずれも、Flutterアプリのようにスムーズでネイティブな操作感覚を実現します。
Why Flutter?
Flutterを選んだ理由。
一貫性のないUIとAPI、エッジケースのデバッグ、プラットフォーム固有の問題、OS間での同じ動作の維持、などの調整は時間の無駄です。
そのため、我々はアーキテクチャについてある決断を下しました。
一貫性という重大な理由のために、バックエンドとしてFlutterを使うことにしたのです。
Flutterはプラットフォームを問わず単一のレンダリングエンジンを使用してピクセルを表示します。
これによって、iOS・Android・デスクトップアプリ間でピクセルパーフェクトな一貫性を実現可能になります。
またpub.devには55000以上のパッケージが存在しており、ほとんどの機能においてプラットフォーム間の差異を既に解消している、成熟したエコシステムを手に入れることができます。
WebF開発者にとっては、これは以下のことを意味します。
・単一のレンダリングエンジンと、単一のAPIだけを相手にすればよい。
・プラットフォーム固有のコードとテストの手間を削減できる。
・単一のコードベース
これこそが真の『write once, run anywhere』です。
コードの再利用性だけではなく、ピクセル単位の一致までも再現します。
さらにWebFはWeb標準に準拠しているため、Web開発者にとって馴染みのある開発モデルを採用しています。
Seamless Flutter Integration
WebFは独立したWebView画面ではなく、Flutterアプリ内で動作するように設計されています。
FlutterヴィジェットをWebUIと組み合わせたり、既存のFlutterプラグインをWebFに移行しやすいように設計されています。
Native UI Libraries and Plugins
Webコードに組み込める、すぐに使えるネイティブライブラリやプラグインを公開しています。
Hybrid Routing (Flutter ↔ WebF)
マルチページアプリにおいて、WebFはハイブリッドルーティングをサポートしています。
たとえばgo_routerはWebFルーティングと同期します。
Flutter側では、WebFSubViewがWebFの特定のルートをレンダリングします。
WebF側では、ナビゲーションバーのスタイルをroutesが提供します。
Native UI: Flutter Widgets as HTML Elements
何らかの要素に対してネイティブUIが必要ですか？
WebFでは、FlutterヴィジェットをカスタムHTML要素として扱うことができます。
推奨されるワークフローは、webf codegenを使用して.d.tsからバインディングを作成し、その後Flutter側でヴィジェットを実装します。
Native Plugins
WebFのネイティブプライグインシステムでは、JavaScriptからDart・Flutterを直接呼び出してデバイス機能にアクセスしたり、Flutterプラグインを上書きしたりできます。
本番環境のために、型安全なDartバインディングと型付きnpmラッパーコードを生成する機能を提供しています。
Developer Experience
このセクションは、ベータ版ではまだ開発中です。
WebFにブラウザと同等の開発者エクスペリエンスを提供できるように取り組んでいます。
・ホットモジュール
・ビルドツール
・Chrome DevTools
Beta Limitations
WebFはベータ版であり、まだサポートされていない制限が幾つかあります。
・Shadow DOM
・Floatレイアウト、tableレイアウト
・IndexedDB (ネイティブプラグインを利用)
・WebGL (Canvas 2Dのみ)
・WebAssembly
・DevToolsでのブレークポイント機能
現在何が使用できないかの詳細はドキュメントを確認ください。
問題が発生した場合はRedditコミュニティに参加してください。
Roadmap: Beta to Stable
ベータ版から安定板への明確な道筋に沿っています。
現在注力している要素は以下のようになります。
マイルストーンを達成次第、安定板リリースに向けていきます。
・WebブラウザでWebFを実行できるように、Flutter for webをサポートします。
・shadcn/uiをフルサポートします。
・Tailwind CSS v3とv4をサポートします。
・有名どころのWebフレームワークは、WebFでそのまま動くようにします。
・Chrome DevToolsサポートの強化。
・WebFとシームレスに連携するエージェントのサポート。
皆様からのフィードバックが、ロードマップの選定に生かされます。
アーリーアダプターの反応が、機能や改善の優先順位になります。
ぜひコミュニティに参加して、クロスプラットフォーム開発の未来を築いていきましょう。
Is WebF ready for production?
もう本番でWebFを使って大丈夫？
WebFは、既にクローズドベータ版が一部の本番環境で動作しています。
現在の実装は堅牢で安定していますが、ドキュメントや互換性、ツールの改善に引き続き取り組んでいます。
Resources
・GitHub
・ドキュメント
・Reddit
・Discord
・X(Twitter)
Join the Beta
我々は、JavaScriptがブラウザ・モバイル・デスクトップ・そして最終的にはサーバサイドまで、あらゆる環境で書き換え無しでシームレスに実行されるべきだと考えています。
ひとつのコード、ひとつのAPIセット。
開発者やAIが既に知っているWeb標準に基づいて構築されています。
アーリーアダプターとして、WebFの未来を作る準備はできていますか？
どんなものをWebFを使って作ってくれるのか、楽しみにしています。
WebFにようこそ！
感想
OSSだと思うじゃないですか。
実は完全にオープンではなく、GPLライセンスのオープンソース版とフル機能の有償版という構成になっています。
つまり無料で使うためにはソースコード公開が必要です。
クローズドソースで商用に使うためには年間99ドルからで、一見安いように見えますが、ただper commercial end-user productとか書いてあるんですよね。
これはつまりアプリひとつごとに1ライセンスひとつ必要って意味なのか？よくわからん。
とはいえ、手元にある適当なアプリを公開せず試しに使ってみるだけなら特に問題があるわけでもないので、一度試しに動かしてみてはどうでしょうか。
実際に評価するのはそれからでも遅くないと思います。