一般社団法人 全国個人事業主支援協会

COLUMN コラム

スマートフォンアプリとWebコンテンツ。その境界線は、年々曖昧になりつつあります。
特にFlutterのようなクロスプラットフォーム開発では、アプリ内でWebViewを使ってWebのUIや機能を組み込むケースが増えています。

このとき重要になるのが「JavaScriptブリッジ(JS Bridge)」という仕組み。
それはまさに、アプリとWebの“言葉の壁”を取り除く通訳のような存在です。


JavaScriptブリッジとは?

JavaScriptブリッジとは、ネイティブアプリとWebページ間で相互にデータや命令をやりとりするための通信機構です。

✔ 例:

  • Web(JavaScript)からアプリに命令を送る

    • ユーザーがWeb上の「購入」ボタンを押すと、アプリ側で購入確認ダイアログを表示する。

  • アプリからWebに命令を送る

    • アプリがログイン処理をした後、Webページにログイン済みユーザー情報を注入する。


技術的にはどうやって動くのか?

● Web → アプリ(JS → Dart)

Webページでこんなコードを書くと:

window.flutter_inappwebview.callHandler('onPurchaseClick', itemId);

Flutter側では次のように受け取れます:

controller.addJavaScriptHandler(
handlerName: 'onPurchaseClick',
callback: (args) {
final itemId = args.first;
// Flutterで処理する
},
);

● アプリ → Web(Dart → JS)

controller.evaluateJavascript(source: "showToast('こんにちは!')");

Webページ側にこのような関数があれば実行されます:

function showToast(msg) {
alert(msg);
}

なぜ必要?普通にWebだけで完結すればいいのでは?

たしかに理想は、Webとアプリの責務が明確に分かれること。
ですが、**「Web側でしか持たないUIや機能にアプリからアクセスしたい」**という要件は現実的には多く存在します。

たとえば:

  • アプリ内ブラウザで会員登録 → 登録成功をアプリが検知したい

  • Webで表示された広告のクリック数 → アプリで計測したい

  • Webの支払い完了 → アプリ側で完了画面に遷移したい

こうした**「Webとアプリを橋渡しする要件」**に対して、JavaScriptブリッジは不可欠なのです。


🛑 注意点と落とし穴

  • セキュリティ:Webからアプリ側を直接呼び出せるということは、悪意のあるJSも呼び出せる可能性があるということ。信頼できるドメインのみで使うなど制限が必要。

  • 保守性:Webとアプリ両方に依存する実装なので、片方が変更されるともう片方にも影響が出る。

  • 非同期処理:JSとDart間の通信は非同期なので、適切なエラーハンドリングが必要。

The following two tabs change content below.

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア