BlazorでのWebアプリケーション開発手法２【C#】B06_インラインJavaScript非推奨

これまでのレクチャーでは、メッセージを表示するために「MessageBoxAlert」という自作の関数名を使い、JS.InvokeVoidAsyncからJavaScriptのalertを呼び出してきました。今回は、この関数名の正体を確認しながら、Blazorアプリで直接JavaScriptの関数名を指定して呼び出すことの是非について見ていきます。

MessageBoxAlertの正体

MessageBoxAlertという名前は自分で自由に付けたものですが、実際にはApp.razorのscriptタグの中で、次のようにJavaScript標準のalert関数を呼び出しているだけの薄いラッパー関数として定義されています。

図1　App.razorのscriptタグ。MessageBoxAlert関数の中身はalert(message)を呼んでいるだけ

つまりMessageBoxAlertという名前自体には特別な意味はなく、単にJavaScriptのalertを呼び出す入り口に過ぎません。そうであれば、JS.InvokeVoidAsyncの第一引数に「MessageBoxAlert」ではなく、直接JavaScriptの「alert」という文字列を指定しても動作するのではないか、という疑問が生まれます。実際に試してみます。

alertを直接指定してみる

Home.razorのSave処理の中で、JS.InvokeVoidAsyncに渡している関数名を「MessageBoxAlert」から小文字の「alert」に書き換えます。

図2　書き換え前のコード。MessageBoxAlertを選択している状態

図3　”MessageBoxAlert”を”alert”に書き換えた後のコード

この状態でアプリを実行し、エリア名称を入力して「保存」ボタンを押すと、次のようにきちんと「Saveしました！！」というアラートが表示されます。JavaScriptのalert関数を、Blazor側から関数名の文字列で直接指定しても、問題なく動作してしまうことが確認できます。

図4　小文字のalertを直接指定しても、アラートは正常に表示される

存在しない関数名を指定した場合

それでは、たとえば「alert」を「alert1」のように少し変えてしまったらどうなるでしょうか。JavaScript側にalert1という関数は存在しません。

図5　”alert”を”alert1″に書き換えたコード（存在しない関数名）

この状態で保存処理を実行すると、実行時にNullReferenceException（Object reference not set to an instance of an object.）が発生し、アプリが正常に動作しなくなります。存在しない関数名を指定した場合、コンパイル時にはエラーにならず、実行してはじめてエラーになる点に注意が必要です。

図6　存在しない関数名を呼び出した結果発生する例外

大文字・小文字の違いにも注意

JavaScriptの関数名は大文字・小文字が区別されます。試しに先頭を大文字にした「Alert」に書き換えてみます。

図7　”alert”の先頭を大文字にした”Alert”に書き換えたコード

これも同様にエラーとなり、正常に動作しません。App.razor側でalert（小文字）にカーソルを合わせると、これがJavaScriptの標準関数であることがツールチップで確認できます。大文字小文字を含め、正確な関数名を指定しない限り動作しないということです。

図8　App.razorのalert関数にカーソルを合わせると、JavaScript標準のwindow.alertであることがツールチップで表示される

公式ドキュメントでの位置づけ

ここまでの検証で、JavaScriptの関数名を文字列で直接指定する呼び出し方自体は動作することが分かりました。しかし、Microsoft公式のASP.NET Core Blazorのドキュメントでは、このようにインラインでJavaScriptの関数を直接呼び出す方法は推奨されていません。ドキュメントには、インラインのJavaScriptはBlazorアプリには不向きであり、JSモジュールと組み合わせたJSコロケーションを使う方法が推奨されている旨が明記されています。

図9　Microsoft Learnのドキュメント。インラインJavaScriptは推奨されない旨の記載

このドキュメントのURLは、コースの最後にあるボーナスレクチャーにまとめて記載しておきます。

図10　ドキュメントページとURLの案内

App.razorへの直接記述という課題

今回のサンプルでは、App.razorのscriptタグの中に、MessageBoxAlert・MessageBoxConfirm・MessageBoxPromptという3つの関数をまとめて直接記述しています。

図11　App.razorのscriptタグ内に直接記述された3つの関数

scriptタグは動的に更新できないため、この書き方は推奨されている方法ではありません。JavaScriptとBlazorの部分は、できるだけ分離できている方が望ましいとされています。そこで次回のレクチャーでは、これらの関数を純粋なJavaScriptファイルとして切り出し、そちらを読み込んで呼び出す方法に書き換えていきます。