レガシーからの脱却：VB.NETでWebView2を使いこなし、モダンWebをアプリに宿す
こんにちは。長年VB.NETと心中してきたアーキテクトです。
皆さんが今直面している「IEベースのWebBrowserコントロールが動かない」「表示崩れがひどい」という悩み。それは、技術が時代に追いついた証拠です。
かつてのWebBrowserコントロールは、Windowsに内蔵されたInternet Explorerの遺産でした。しかし、今はChromiumエンジンを搭載した「WebView2」の時代。これを使えば、VB.NETのデスクトップアプリの中に、Chromeと同等のモダンなWeb体験を埋め込めます。
今回は、この移行における「双方向通信の極意」を、現場で使えるレベルで伝授します。
—
1. なぜ「WebView2」が必要なのか？
一言で言えば、「現代のWebは、古いエンジンでは描画できないから」です。
ReactやVue.jsといったモダンなフレームワークで作られたサイトは、古いWebBrowserコントロールではエラーの連続です。WebView2は、Microsoft Edgeの心臓部をそのままアプリに借りるようなもの。これにより、堅牢なWindowsアプリと柔軟なWebのいいとこ取りができます。
—
2. 導入：まずはここから
Visual Studioの「NuGetパッケージマネージャー」を開き、`Microsoft.Web.WebView2`をインストールしてください。これだけで準備完了です。
—
3. 実践：VB.NETとJavaScriptの双方向通信
ここが一番の難所です。VB.NETからJavaScriptを叩き、JavaScriptからVB.NETの関数を呼び出す。この「橋渡し」をマスターすれば、UI設計の幅は無限に広がります。
VB.NETからJavaScriptを呼び出す
Web画面のボタンを押さずとも、VB.NET側のボタンクリックでWebの内容を書き換える手法です。
‘ Web画面上のJavaScript関数を実行する
‘ 例: Web側の “changeColor(‘red’)” という関数を叩く
Await WebView21.ExecuteScriptAsync(“changeColor(‘red’);”)
JavaScriptからVB.NETを呼び出す（ここが肝！）
Web画面上の操作をVB.NET側に伝え、データベースに書き込んだり、ファイル操作をしたりする手法です。
‘ フォームのロード時にWebView2を初期化し、通信路を開く
Private Async Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Await WebView21.EnsureCoreWebView2Async()
‘ Web画面から “window.chrome.webview.postMessage()” が呼ばれた時の処理
AddHandler WebView21.CoreWebView2.WebMessageReceived, AddressOf OnWebMessageReceived
End Sub
‘ JavaScriptからのメッセージを受け取るハンドラ
Private Sub OnWebMessageReceived(sender As Object, e As CoreWebView2WebMessageReceivedEventArgs)
Dim message As String = e.TryGetWebMessageAsString()
MessageBox.Show(“Web側からの叫び: ” & message)
End Sub
—
4. 陥りやすい罠：非同期処理という壁
VB.NET初学者が最も苦しむのが「非同期（Async/Await）」です。
WebView2の処理は基本的に「非同期」です。Webページの読み込みが終わる前に操作しようとすると、例外（エラー）が発生します。
- 鉄則: `EnsureCoreWebView2Async` が完了するまで、Web操作は行わないこと。
- コツ: `NavigationCompleted` イベントを購読し、読み込み完了を確認してから通信を開始する癖をつけましょう。
—
5. まとめ：モダンアプリへの第一歩
WebBrowserからWebView2への移行は、単なるコントロールの置き換えではありません。「デスクトップの力」と「Webの知性」を融合させる新しい開発スタイルの獲得です。
1. NuGetでWebView2をインストール
2. `ExecuteScriptAsync` でWebを操り
3. `WebMessageReceived` でWebの声を聞く
この3ステップをクリアすれば、あなたのアプリは一気に現代的な洗練さを手に入れます。
エラーが出ても焦る必要はありません。それは「一歩進んだ」という証拠です。分からないことがあれば、またいつでも聞きに来てください。あなたのエンジニアリングライフが、より豊かになることを応援しています！
