JavaScript 以外の言語によるフロントエンド Web 開発が既に実用段階である話

フロントエンドWeb開発には JavaScript を使うのが一般的ではあります。しかし、それ以外のプログラミング言語によるフロントエンドWeb開発も、実は既に実用レベルで使用が普及しています。今回は、スピーカーが特に詳しい C# によるフロントエンドWeb開発の現状を中心に、JavaScript 以外のプログラミング言語によるフロントエンドWeb開発について、現状やメリット・デメリットを解説。参加者に新しい視点を提供します。

(フロントエンドカンファレンス北海道 2024 (https://www.frontend-conf.jp/) LT 発表資料)

Transcript

1. JavaScript 以外の言語による フロントエンド Web 開発が 既に実用段階である話 フロントエンドカンファレンス北海道 2024 LT
2. 実はけっこういろいろある Python WebAssembly 上の Python インタープリタ Pyodide がある 今なら Streamlit? JavaScript 以外の言語でのフロントエンドWeb開発 Ruby Hotwire でリッチな対話機能を実装 コンポーネントモデルではない WebSocket 使用、サーバー必須 Rust WebAssembly にビルド 最近だと Dioxus で React 風に書ける? Elixir Phoenix LiveView により実現 コンポーネントモデル WebSocket 使用、サーバー必須 Dart Dart 単体でも JavaScript にコンパイル可能 Flutter との組み合わせが一般的? C#
3. Blazor (ブレイザー) を使います 今日は C# について C# Blazor
4. Blazor とは “Build client web apps with C#” C#、.NET でクライアント Web アプリを実装する、 コンポーネント指向のフレームワークとツールチェイン ▪ Web 標準 ▪ 画面は HTML と CSS で構築する ▪ コンポーネント指向 ▪ 階層的にコンポーネントを組み合わせてアプリを構築 ▪ パラメーター/バインド/イベントコールバック ▪ オープンソース ▪ MIT License ▪ GitHub でホスト、Issue 管理
5. Blazor WebAssembly の仕組み トランスパイラじゃないよ 一般的な JavaScript による SPA Blazor WebAssembly
6. Blazor アプリケーションの実際のソースコード例 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 のような仕組みもある Counter.razor .razor ファイルがコンポーネント 他のコンポーネントで <Counter/> とマーク アップして使える パラメーターやイベントコールバックを渡せる
7. Blazor が歩んできた道 約 7 年の歴史 2021 2017 2018 2019 2020 2023 2022 2024 NDC Oslo で Steve Sanderson 氏が Blazor のプロトタイプをデモ 2017.6.12-16 .NET 開発チーム公式 プロジェクトに昇格 2018.2.6 Blazor Server 正式リリース 2019.9.23 .NET Core 3.0 リリース Blazor WebAssembly 正式リリース 2020.11.10 .NET 5 リリース CSSモジュール導入 .NET 6 リリース 2021.11.18 ホットリロード WebAssembly AOT .NET 7 リリース 2022.11.8 WebComponents カスタム要素の作成 グリッドコンポーネントの出荷 .NET 8 リリース 2023.11.14 WebAssembly JIT SSR および Auto Render
8. “Blazor customer showcase” Blazor のユーザー事例 There was no debate about which language to use. .NET Core is a really great choice. - Richard Pineo, Software Developer https://dotnet.microsoft.com/platform/ customers/blazor
9. メリット Pros .NET 開発者に優しい ▪ C# や .NET の知識がそのまま活きる ▪ Visual Studio あるいは Visual Studio Code で開発、デバッグできる ▪ NuGet パッケージも普通に使える Blazor への移行 案件が活発化 既存のソフトウェア資産や開発の ノウハウをそのまま活用可能
10. デメリット Cons 結局はブラウザネイティブではない ▪ 実用レベルでは JavaScript との相互呼び出し が必要になる ▪ Blazor WebAssembly だと .wasm ファイル がかなりデカくなる https://x.com/shibayan/status/1805164426561229199 https://x.com/tmyt/status/1805161535167406347
11. JavaScript 以外の言語での フロントエンド Web 開発は 既に実用段階 ▪ 少なくとも C# + Blazor についてはそう ▪ しかし、JavaScript を捨てて C# に移行し よう、という話ではない ▪ あくまでもニッチを埋める存在 ▪ とはいえその界隈では救世主的存在 ▪ JavaScript 以外でのフロントエンド Web 開発の存在に理解を 結論：
12. Thank you! ありがとうございました Learn, Practice, Share.