Google Chrome の開発者ツールで C# コードをデバッグできるって知ってました?

フロントエンド・PHPカンファレンス北海道2026 (https://frontend-php-con.hokkaido.jp/) での発表資料です。

Transcript

1. Google Chrome の開発者ツールで C# コードをデバッグできるって 知ってました? フロントエンド・PHP カンファレンス北海道 2026 LT
2. Blazor WebAssembly ― C# で SPA を実装 ―
3. トランスパイラではありません C# をコンパイルしたバイナリがブラウザ上で動く compile C# Source Code (*.cs) MSIL (*.dll) ".NET CLR" Interpreter for MSIL (dotnet.wasm) 01 10 11 00 11 10 01 00 01 load & run load & interpret Web Browser
4. Web アプリケーションフレームワークである "C# が動く" だけではありません ▪ コンポーネント指向 ▪ データバインディング ▪ ルーティング ▪ DOM イベントハンドリング ▪ モジュール化された CSS
5. "JSX の C# 版" でコンポーネントを記述 To Do リストの例 <ul > @foreach ( var item in _toDoList ) { <li >@ item </ li > } </ ul > <form @onsubmit ="OnSubmit" > <input type ="text" @bind =" _newToDo " > <button >Add</ button > </ form > @code { private readonly List <string > _toDoList = new(); private string _newToDo = "" ; private void OnSubmit () { _toDoList . Add( _newToDo ); _newToDo = "" ; } } HTML 中に C# を混ぜて書ける JSX の C# 版みたいな感じ “@onイベント名” でイベントを ハンドルする 指定した C# のメソッドが呼び出される “@bind” で変数をバインドする Input 要素の入力内容が、指定した C# の フィールド変数・プロパティに反映される コンポーネントの状態はフィールド 変数・プロパティに持てばよい React の Context のような仕組みもある ToDoList.razor .razor ファイルがコンポーネント 他のコンポーネントで <ToDoList/> とマーク アップして使える パラメーターやイベントコールバックを渡せる
6. ブラウザで C#ソースコード デバッグできる ブラウザの開発ツールウィンドウ ▪ 皆さんご存知の Ctrl + Shift + I で出てくるアレ ▪ あそこに C# のソースコードが出てくる ▪ ブレークポイントで停止 ▪ 変数ウォッチ
7. DEMO
8. Blazor WebAssembly で作成した To Do List アプリを開いたところ。 右側には開発者ツールウィンドウのデバッガを開いています。
9. デバッガの file:// ツリーを開くと、Blazor WebAssembly のソースコードが現れます。 拡張子 .cs は普通のC#ソースコード、.razor は Blazor WebAssembly のコンポーネントです。
10. デバッガの file:// ツリーから .razor ファイルを開くと、"JSX の C# 版" とでも言うべき、HTML 内に C# を混ぜて記述する、Blazor のコンポーネントのソースコードが見えます。
11. .razor ファイルの行頭をクリックすれば、普通に、C# のメソッド内にブレークポイントが設定できます。 この状態で、To Do List アプリの [+] ボタンをクリックすると...
12. ちゃんとブレークポイントを設定した C# 行で停止しました!
13. コールスタックもちゃんと取れているので、呼び出し元のソースコード行へ遡ってジャンプできます。
14. 変数ウォッチも機能しています。To Do List アイテムのリストオブジェクトに追加された要素を展開し、 オブジェクトの各プロパティの現在の値を見ることができます。
15. DEMO
16. ▪ 非常にニッチではあるのですが、C# で SPA を作るという需要・市場があります ▪ JavaScript だけじゃないフロントエンド Web 開発の存在にどうぞ温かいご理解を 技術のヘンタイですよね まとめ
17. Thank you! ありがとうございました Learn, Practice, Share.