Blazorでは、JavaScriptファイルはrazorファイルに記述できません。razorページは動的に読み込まれるため、scriptタグを記述できません。
そのかわり、scriptタグは「_Host.cshtml」ファイルに記述します。
しかしそうすると、razorページごとに読み込まれるJavaScriptは共通のものだけになってしまいます。
この記事では、razorページごとに読み込むJavaScriptファイルを変更する方法について紹介します。
この記事に書かれていること
- razorページごとに異なるJavaScriptファイルを読み込む方法を紹介します。
具体的には以下の方法で実現します。
- 全ページ共通的に呼び出すJavaScriptファイルを用意する
- ページ個別に呼び出すJavaScriptファイルを用意する
- 「_Host.cshtml」ファイルに共通的に使用するJavaScriptファイルをscriptタグで定義する
- razorページから
OnAfterRenderAsync
を使用してJavaScript関数を実行する - ページ個別のjavascriptファイルが呼び出される
全ページ共通的に呼び出すJavaScriptファイルを用意する
すべてのrazorページから共通的に使用するJavaScriptファイルを用意します。
今回は、AppCommon.js
とします。
AppCommon.js
には、各ページから呼び出される関数を定義しておきます。
以下の例では、Page.js
をheadタグ内に埋め込み、JavaScriptを呼び出すコードです。
function launchPage()
{
let script = document.createElement(script);
script.src = "/js/Page.js";
document.getElementsByTagName(head)[0].append(script);
}
各ページ個別に呼び出すJavaScriptファイルを用意する
この例では、各ページ個別に呼び出すJavaScriptファイルをPage.js
とします。
このファイルに、個別ロジックを記述していきます。
今回はサンプルですので、以下のようにします。
console.log("Page.js Loaded")
「_Host.cshtml」ファイルに共通的に使用するJavaScriptファイルをscriptタグで定義する
_Host.cshtml
を以下のように編集して、AppCommon.js
を呼び出すようにします。
<html lang="ja">
<head>
...(省略)
<script src="/js/AppCommon.js"></script>
</head>
razorページからOnAfterRenderAsyncを使用してJavaScript関数を実行する
OnAfterRenderAsync
とは、コンポーネントがすべてレンダリングされた後に呼び出される関数です。
OnAfterRenderAsync
から、さきほどAppCommon.js
に定義したlaunchPageA
関数を呼び出します。
launchPageA
関数から、独自のJavaScriptファイルを呼び出す、という作戦です。
OnAfterRenderAsync
は、以下のようになります。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await JS.InvokeVoidAsync(launchPage);
}
}
ページ個別のjavascriptファイルが呼び出される
OnAfterRenderAsync
からlaunchPage
JS関数が実行され、そこからPage.js
が読み込まれます。
Page.js
にはロード時にconsole.log("Page.js Loaded")
が実行されるように記述していますので、
Chrome Developer toolsなどからコンソールに出力されていることを確認できれば成功です。
Blazor のおすすめ本
私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。
Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。
Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。
電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。
章 | 内容 |
---|---|
第1章 | Blazorの仕組み |
第2章 | 開発環境 |
第3章 | 最初のBlazorアプリ |
第4章 | コンポーネント |
第5章 | データバインディング |
第6章 | イベント処理 |
第7章 | Razor記法 |
第8章 | フォームと検証 |
第9章 | データベースアクセス |
第10章 | Web APIの活用 |
第11章 | SVGの活用 |
第12章 | JavaScriptとの連携 |
コメント