Blazorでカスタムイベント引数を使い、Bootstrapアコーディオンの開閉を制御する

この記事では Blazorの カスタムイベント引数 を利用し、Bootstrapのアコーディオン開閉時にヘッダーの内容を動的に変更する方法を紹介します。
単純なクリックイベントの利用だけでなく、Blazorから任意のJavaScriptイベントを受け取る方法としても応用可能です。

前提
アコーディオンの開閉イベント
Blazorのイベント引数とカスタムイベント
まとめ

前提

以下の環境で動作確認を行っています。

os	windows11
.NET	8.0.304
UI	Blazor（WebAssembly standalone）
IDE	Visual Studio 2022 Community
Bootstrap	5.3.3

また、以下を前提としています：

Blazorプロジェクト（Bootstrap導入済み）を作成済み。
ソースコードは説明に必要な部分のみを抜粋。

アコーディオンの開閉イベント

アコーディオンの開閉状態に応じてヘッダーの表示を切り替えるには、開閉イベントを補足する必要があります。
単純に@onclickでも実現できますが、Bootstrapには専用のイベントが用意されているため、こちらを利用します。

Bootstrapのドキュメントによると、アコーディオンには以下のイベントが定義されています（2025年10月時点）。

イベント	概要
hide.bs.collapse	hideメソッドが呼ばれた瞬間に発火する
hidden.bs.collapse	閉じられて見えなくなった時に発火する
show.bs.collapse	showメソッドが呼ばれた瞬間に発火する
shown.bs.collapse	実際に開いたときに発火する

今回は、「show.bs.collapse」と「hide.bs.collapse」のイベントを利用します。

Blazorのイベント引数とカスタムイベント

Blazorでは以下のようにイベントにハンドラを紐付けられます。

<button class="btn btn-primary" @onclick="OnClickEvent">Button</button>

@code {
	private void OnClickEvent()
	{
		Console.WriteLine("click");
	}
}

また以下のように引数をとることもできます。

@code {
	private void OnClickEvent(MouseEventArgs args)
	{
		Console.WriteLine(args.ScreenX);
	}
}

デフォルトで利用できる引数はMicrosoftのドキュメントに記載がありますが、より柔軟に扱いたい場合には カスタムイベント引数 を使うことで、任意のデータを受け取れるイベントを定義できます。

Javascript関数の作成

それではカスタムイベント引数を作成していきます。まずは、「wwwroot/プロジェクト名.lib.module.js」という名前でjavascriptファイルを作成します。

export function afterStarted(blazor) {
    blazor.registerCustomEventType('accordionopen', {
        browserEventName: 'show.bs.collapse',
        createEventArgs: event => {
            return {
                message: 'クリックしてクローズ'
            }
        }
    });

    blazor.registerCustomEventType('accordioncollapse', {
        browserEventName: 'hide.bs.collapse',
        createEventArgs: event => {
            return {
                message: 'クリックしてオープン'
            }
        }
    });
};

2つのカスタムイベント（accordionopen、accordioncollapse）を追加します。これらのカスタムイベントはそれぞれbrowserEventNameで指定したイベントが発火した際に合わせて発火されます。

returnで指定した値が、Blazorでのイベントハンドラの引数に渡されます。今回はアコーディオンのイベントを拾いたいだけなので簡単なメッセージだけ返却しています。

JavaScriptイニシャライザー

JavaScriptイニシャライザーを利用することで、Blazorアプリの起動前後にロジックを挟むことができます。afterStartedはBlazor開始後（JavaScriptからの呼び出しを受け取れる状態になった後）に呼び出されるメソッドです。プロジェクト名.lib.module.js という規約に沿ったファイル名で作成することで、index.htmlなどから読み込まずとも自動的に実行されます。

Blazor側の定義

Blazor側でカスタム引数のクラスとカスタムイベントの定義を行います。

まずはカスタムイベント用のクラスです。引数として受け取りたいものをプロパティとして定義します。

public class CustomEventArgs : EventArgs
{
	public string? Message { get; set; }
}

続いてカスタムイベントを定義するためのクラスを作成して属性を付与します。属性の第一引数はカスタムイベント名を指定します。なお、Javascriptで定義したイベント名に「on」を付ける必要があります。

[EventHandler("onaccordionopen", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onaccordioncollapse", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers { }

イベントハンドラの設定

カスタムイベントを定義できたので、最後にアコーディオン開閉時に呼び出します。引数にはカスタムイベント引数を設定します。

@code {
	private void AccordionClose(CustomEventArgs args)
		=> Message= args.Message!;

	private void AccordionClick(CustomEventArgs args)
		=> Message= args.Message!;
}

適切にカスタムイベントを定義できていれば、インテリセンスの候補として表示されるようになります。あとはアコーディオンに以下のように設定します。

<div class="accordion m-5" id="accordionExample" @onaccordionopen="AccordionOpen" @onaccordioncollapse="AccordionClose">
	<div class="accordion-item">
		<h3 class="accordion-header">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				@Message
			</button>
		</h3>
		<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				アコーディオン
			</div>
		</div>
	</div>
</div>

これで、アコーディオンの開閉イベントに応じてヘッダーのテキストが更新されます。

閉じている状態