スマートフォンアプリとWebコンテンツ。その境界線は、年々曖昧になりつつあります。
特にFlutterのようなクロスプラットフォーム開発では、アプリ内でWebViewを使ってWebのUIや機能を組み込むケースが増えています。
このとき重要になるのが「JavaScriptブリッジ(JS Bridge)」という仕組み。
それはまさに、アプリとWebの“言葉の壁”を取り除く通訳のような存在です。
JavaScriptブリッジとは、ネイティブアプリとWebページ間で相互にデータや命令をやりとりするための通信機構です。
Web(JavaScript)からアプリに命令を送る
ユーザーがWeb上の「購入」ボタンを押すと、アプリ側で購入確認ダイアログを表示する。
アプリからWebに命令を送る
アプリがログイン処理をした後、Webページにログイン済みユーザー情報を注入する。
Webページでこんなコードを書くと:
Flutter側では次のように受け取れます:
Webページ側にこのような関数があれば実行されます:
たしかに理想は、Webとアプリの責務が明確に分かれること。
ですが、**「Web側でしか持たないUIや機能にアプリからアクセスしたい」**という要件は現実的には多く存在します。
たとえば:
アプリ内ブラウザで会員登録 → 登録成功をアプリが検知したい
Webで表示された広告のクリック数 → アプリで計測したい
Webの支払い完了 → アプリ側で完了画面に遷移したい
こうした**「Webとアプリを橋渡しする要件」**に対して、JavaScriptブリッジは不可欠なのです。
セキュリティ:Webからアプリ側を直接呼び出せるということは、悪意のあるJSも呼び出せる可能性があるということ。信頼できるドメインのみで使うなど制限が必要。
保守性:Webとアプリ両方に依存する実装なので、片方が変更されるともう片方にも影響が出る。
非同期処理:JSとDart間の通信は非同期なので、適切なエラーハンドリングが必要。