これまでのレクチャーでは、App.razorのscriptタグの中に直接JavaScriptの関数（MessageBoxAlert、MessageBoxConfirm、MessageBoxPrompt）を記述してきました。今回はこのJavaScriptの部分を別ファイルへ分離し、そのファイルを外部から読み込んでアクセスする方法を解説します。
図1 今回のタイトル画面
現状の確認
現在、App.razorのscriptタグの中にMessageBoxAlert・MessageBoxConfirm・MessageBoxPromptの3つの関数がベタ書きされている状態です。
図2 App.razorのscriptタグ内に直接書かれている3つの関数
JavaScriptをscriptタグの中に直接書くよりも、別のJavaScriptファイルに分けたほうがよいとされています。理由は、別のBlazorアプリを作る際にそのまま同じファイルを再利用できるといった再利用性の高さと、ブラウザーのキャッシュの面でのメリットがあるためです。
JavaScriptファイルの新規作成
JavaScriptファイルはwwwrootフォルダーの配下に作成します。新しくフォルダーを切って配置してもよいですし、直接置いてもかまいません。今回はwwwroot直下に直接配置します。
ソリューションエクスプローラーでwwwrootを右クリックし、「追加」→「新しい項目」を選択します。
図3 wwwrootを右クリックし「追加」→「新しい項目」を選択
「新しい項目の追加」ダイアログの検索欄に「java」と入力すると、JavaScript関連のテンプレートが一覧に表示されます。
図4 検索欄に「java」と入力しJavaScript関連のテンプレートを表示
一覧から「JavaScript ファイル」を選択し、名前を「scripts.js」に変更します。JavaScriptの拡張子は.jsですが、テンプレートで「JavaScript ファイル」を選んでおけば自動的に付与されるため、拡張子を省略して入力してもかまいません。入力できたら「追加」をクリックします。
図5 「JavaScript ファイル」テンプレートを選択し、名前をscripts.jsに変更
これでwwwroot直下にscripts.jsというファイルが作成されました。
図6 wwwroot直下にscripts.jsが作成された状態（ソリューションエクスプローラー）
App.razorからscripts.jsへ処理を移動する
App.razorのscriptタグの中身（MessageBoxAlert・MessageBoxConfirm・MessageBoxPromptの3関数）をCtrl+Xで切り取り、scripts.jsに貼り付けます。
図7 App.razorのscriptタグ内の3関数（切り取り対象）
図8 scripts.jsに貼り付けられた3つの関数
function MessageBoxAlert(message) {
alert(message);
}
function MessageBoxConfirm(message) {
return confirm(message);
}
function MessageBoxPrompt(message) {
return prompt(message);
}
コード1 scripts.js（分離後の完成形）
App.razor側は中身がなくなり空になったscriptタグが残っているだけの状態になるため、この不要なscriptタグ自体を削除します。
図9 不要になった空のscriptタグを削除した後のApp.razor
外部JavaScriptファイルを読み込む
scripts.jsを作成しただけではBlazor側からは読み込まれません。ここにJavaScriptファイルがあるということをApp.razor側で明示する必要があります。
App.razorのbody部分には、Blazorが標準で用意しているscript src=”_framework/blazor.web.js”というscriptタグがすでにあります。これと同じ書き方を次の行に追加し、srcのパス部分にファイル名を指定します。wwwroot直下にファイルがある場合はファイル名を書くだけでよく、フォルダーを切っている場合はフォルダー名/ファイル名のように指定します。入力中はインテリセンスが候補を表示してくれるので、そこから選択できます。
図10 scriptタグのsrc属性にパスを入力中。インテリセンスでファイル名の候補が表示される
最終的に、App.razorのbody部分は以下のようになります。
図11 App.razorの完成形とソリューションエクスプローラー（wwwroot直下にscripts.js）
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="scripts.js"></script>
</body>
コード2 App.razorのbody部分（scripts.jsを読み込むscriptタグを追加した完成形）
動作確認
実行してHomeページを表示します。
図12 アプリを実行してHomeページを表示
保存ボタンを押すと、分離前と同じように問い合わせメッセージ（confirm）「保存しますか？」が表示されます。
図13 保存ボタン押下で表示される確認ダイアログ「保存しますか？」
ログインボタンを押すと、入力付きのメッセージ（prompt）「メールを送信しました。認証コードを入力してください。」も正しく表示されます。問い合わせ・アラート・プロンプトのいずれも、scripts.jsに分離した後も問題なく動作していることが確認できます。
図14 ログインボタン押下で表示される入力付きのプロンプトダイアログ
うまくいかないパターン①：scripts.js自体を消してしまう場合
試しにscripts.jsファイルの中身を消して（あるいはファイル自体を削除して）実行すると、エラーが発生します。
図15 scripts.jsを消して実行するとエラーが発生する
確認できたら元に戻しておきます。
うまくいかないパターン②：scriptタグの指定を忘れる場合
今度はscripts.jsファイル自体は残したまま、App.razor側に追加したscriptタグ（読み込みの指定）を削除して実行してみます。
図16 App.razor側のscriptタグの指定を削除した状態
この状態で保存ボタンを押すと、MessageBoxConfirm関数が見つからず、NullReferenceException（’Object reference not set to an instance of an object.’）の例外がスローされます。
図17 scriptタグの指定がない状態で実行すると発生する例外
確認できたら、こちらも元に戻しておきます。
まとめ
もう一度実行し直し、保存ボタン・ログインボタンのいずれも問題なく動作することを確認します。
図18 元に戻して再実行し、正常に動作することを確認
このように、JavaScriptの部分だけを外部ファイルに分離しておくと、再利用性の高いコードになります。分離する際は、①JavaScriptファイル自体を用意すること、②App.razor側でそのファイルを読み込むscriptタグを追加すること、の2点をセットで行う必要がある点に注意してください。ぜひ実際の開発でも試してみてください。
■非公開コース「C#14新機能」プレゼント：
非公開コース「C#14新機能」（80分）をご覧になりたい方は
こちらからURLとパスワードを発行していますので、ご覧になってみてください。
非公開コース「C#14新機能」を観る
A01_はじめに
B01_メッセージを出すレイアウトの作成
B02_pタグを使ったメッセージ表示
B03_ポップアップメッセージを表示する方法
B04_問い合わせメッセージを表示する方法
B05_ユーザーの入力を受けるメッセージ
B06_インラインJavaScript非推奨
B07_Javascriptを分離してアクセスする方法
B08_MessageServiceを作成する
B09_自作Serviceの依存性注入をする方法
C01_EditFormを使った入力検証
C02_ValidationSummary
C03_ValidationMessage
C04_入力コンポーネント_InputText
C05_InputNumber
C06_未入力を許容する方法
C07_InputNumberで対応している型
C08_InputDate
C09_InputSelect
C10_入力コンポーネント_InputCheckbox
C11_InputRadioとInputRadioGroup
C12_InputTextArea
C13_InputFile
C14_ファイルの上限を設定する
C15_フォーカスをあてる方法_標準編_ElementReference
C16_フォーカスをあてる方法_Razorコンポーネント編
D01_StringLength
D02_RegularExpression_正規表現
D03_EmailAddress
D04_Compare
D05_ViewModelに分ける方法
D06_依存性注入を利用したViewModelの生成
D07_CustomValidation1
D08_CustomValidation2
D09_プロパティレベルのCustomValidation
D10_ValidationContext
D11_処理をViewModelに移す書き方
D12_ViewModelに移せないロジック
D14_ShouldRender
D15_ViewModelに書かないほうがいいもの
D16_エラー箇所にフォーカスを当てる方法
E01_Azureにデプロイするための事前作業
E02_Azureにアップするアプリの作成
E03_Azureへの公開準備
E04_Azureへの公開
E05_データベースの作成
E06_データベースのデータを取得する
E07_データベースの値を画面に表示する
E08_Azureのデータベースを作成する
E09_Azureのデータベースにポータルサイトからログインする
E10_AzureのDBにテーブルを作成する
E11_BlazorアプリからAzureDBに接続する
E12_SQLデータベース料金の注意
E13_AzureSQLデータベースの無料オファーを受ける
F01_依存性注入のライフサイクル
F02_クラウドでのAddSingletonの動き
■非公開コース「C#14新機能」プレゼント：
非公開コース「C#14新機能」（80分）をご覧になりたい方は
こちらからURLとパスワードを発行していますので、ご覧になってみてください。
非公開コース「C#14新機能」を観る