C#でSPAを実装する Blazor で UI コンポーネントカタログ Storybook を使いたい! “Blazing Story” の紹介

"Storybook" は、フロントエンド Web アプリの UI コンポーネントをアプリ本体から分離して個別に開発可能にする OSS です。しかし Storybook は、フロントエンドを C# で実装する Blazor には未対応。そこで Storybook のクローンを Blazor で実装し、"Blazing Story" としてリリースしました。その Blazing Story 開発の背景や活用方法を紹介します。

Transcript

1. 1 “Blazing Story” の紹介 C# で SPA を実装する Blazor で UI コンポーネントカタログ Storybook を使いたい! 6/17, OSC2023 Online/Hokkaido – D 11:00am
2. 2 C# でクライアント Web アプリケーションを 実装する Blazor Blazor とは Storybook を Blazor で再実装したクローン、 Blazing Story Blazing Story UI コンポーネントカタログ “Storybook” の 概要と効能 Storybook とは Agenda “Blazing Story" の紹介
3. 3 Storybook とは About Storybook
4. 4 Storybook とは UI コンポーネントカタログ ▪ UI コンポーネントカタログ ▪ JavaScript ライブラリ ▪ MIT License (79.1k GitHub Stars) ▪ JavaScript によるコンポーネントベースのクライアント Web アプリに、UI コンポーネントカタログ機能を追加 ▪ 既存のクライアント Web アプリプロジェクトに “同居” ▪ package.json を基準に追加 ▪ 主要な JavaScript フレームワーク/ライブラリに対応 ▪ Angular や React、Vue、Svelte など 概要
5. 5 ▪ Storybook の規約に則って、”ストーリー” と呼ばれるオ ブジェクトをエクスポートする JavaScript コードを実装 ▪ TypeScript で書けます ▪ ストーリー内では、同居してる Web アプリ本体で実装さ れている UI コンポーネントをインポートして参照 ▪ そのコンポーネントに備わっているパラメータなどのメタ 情報を付加 ▪ それらストーリーが Storybook の画面上に表示される 構造 Storybook とは UI コンポーネントカタログ // Button.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta: Meta<typeof Button> = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/react/configure * /overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', component: Button, }; export default meta; type Story = StoryObj<typeof Button>; /* *👇 Render functions are a framework specific feature * to allow you control on how the component renders. * See https://storybook.js.org/docs/react/api/csf * to learn how to use render functions. */ export const Primary: Story = { render: () => <Button primary label="Button" />, };
6. 6 デモンストレーション UIコンポーネントカタログ Storybook
7. 7 利点 Storybook とは コンポーネントを アプリから分離して開発 ▪ アプリケーション本体の開発ペースとは独 立・分離して、コンポーネント単位での開 発に集中できる ▪ Atomic デザインに基づく開発ペースの確 保に親和性 コンポーネントの存在と 使い方の共有 ▪ 開発メンバー間でのコンポーネントの存 在の周知や習熟度の加速 ▪ コンポーネントにどのようなパラメーター (プロパティ) があり、それがどう作用する かをライブで試すことができる
8. 8 ▪ 開発者やデザイナと共有 ▪ ディスカッションやデザインレ ビューの実施 インターネット上での共有 ▪ 発行のたびにレンダリング結果の ピクセル差分を検出 ▪ GitHub 連携あり スナップショットテスト Chromatic との統合 Storybook とは Web 上の SaaS ▪ https://www.chromatic.com/ ▪ 無料枠あり Storybook アプリを Chromatic に発行 ▪ Chromatic によって Storybook アプリをネット 上にホスティング
9. 9 デモンストレーション Chromatic との連携
10. 10 活発な議論とサポート、月次のミーティング https://discord.gg/storybook Discord 豊富なプラグイン https://storybook.js.org/integrations プラグイン イベントやブログ記事の案内 https://storybook.js.org/community コミュニティサイト コミュニティ Storybook とは
11. 11 Blazor とは About Blazor
12. 12 Blazor とは C# で SPA を実装する ▪ クライアント Web アプリケーションを C# で実装 ▪ .NET の実行環境をブラウザ内に再現 ▪ JavaScript へのトランスパイラではない ▪ Web 標準 ▪ プラグインや XAML ではない ▪ 普通に HTML/CSS を書く ▪ JavaScript で書いてきた部分を C# で書く 概要
13. 13 <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 = ""; } } 実際のソースコード C# で SPA を実装する Blazor とは ▪ HTML 中に C# のコードを混ぜて書く ▪ JSX の C# 版みたいな </>
14. 14 OSC 2019 Hokkaido LT で紹介 Blazor とは C# で SPA を実装する https://www.youtube.com/watch?v=VpToW 28Txt0&t=224s ▪ 4年前 ▪ 当時はまだ Blazor の公式リリース直前 ▪ ちょっと構文が変わっている ▪ 当時の動画が YouTube に 概要
15. 15 Storybook は Blazor をサポートしない...
16. 16 Web Components 対応 C# で SPA を実装する Blazor ▪ ネイティブな HTML タグのように使える ▪ 他の JavaScript フレームワークから使える Blazor コンポーネントはカスタム要素 として登録・実行可能 WEB COMPONENTS
17. 17 Storybook は Blazor を サポートしない… C # で SPA を 実装す る Bl azor Storybook は Web Components には対応して いるらしい ▪ Blazor コンポーネントは Web Components カスタム要素 に登録できるのでこの方向で使える可能性 ▪ しかし Discord では成功したとの報告はなし だがしかし Web Components 経由で使えたと して、それは Blazor 開発者にとって幸せか? ▪ npm や package.json などの JavaScript 開発エコシステ ムの理解・習熟の必要 ▪ JavaScript/TypeScript 構文によるストーリーコードを実装 する必要 </>
18. 18 Blazing Story About Blazing Story
19. 19 Blazing Story Storybook を 100% Blazor で再実装 Storybook の動作・外観を 100% 再現 することを目標に自作した Blazor WebAssembly 用 OSS ライブラリ https://github.com/jsakamoto/BlazingStory Mozilla Public License v.2.0 Storybook を 100% Blazor で再実装
20. 20 デモンストレーション Storybook を 100% Blazor で再実装
21. 21 100% Blazor として再実装 利点 Blazing Story .NET スタイルで開発 .NET ▪ npm や package.json、webpack.config.js などを 扱う必要がない ▪ いつものプロジェクトファイル (.csproj) と NuGet パッケージだけ ▪ Visual Studio によるデバッグ体験もそのまま すべてが Razor コンポーネント ▪ ストーリーも Blazor コンポーネントで記述 ▪ JavaScript/TypeScript の記述不要 ▪ Blazor のスキルだけでストーリーを実装できる
22. 22 ASP.NET Community Standup で、 ちょこっと取り上げられました Blazing Story Storybook を 100% Blazor で再実装 https://www.youtube.com/watch?v=7W6h4P uQom8&t=474s
23. 23 豊富なプラグインが利用できない 見た目こそそっくりだが、構造・仕組みはまるっきり違う 弱点 Blazing Story Chromatic が利用できない なのでやっぱり本当は、Web Components 経由で Blazor でも Storybook を公式に 使えるようになるのを待つべき?
24. 24 それも Blazing Story を開発する意義 Blazing Story Blazor でも今すぐ UI コンポーネントカタログが使える Blazor によるクライアント Web アプリ開発事例になる ▪ いつか将来 Storybook 本家に取って代わられるとしても ▪ JavaScript 製である Storybook と同等の機能・外観・体感速 度を備えたクライアント Web アプリケーションを、Blazor で も開発できる ▪ しかもじゅうぶん短期に 今すぐ使える 開発事例
25. 25 将来の課題 Blazing Story まだ動作しない Hot Reloading iframe で毎回再読み込み になり、読み込みが遅い Docs ページの速度 仕組みが未整備 プラグイン まだ多く残されている バグ・未実装の機能 開発意欲を失って開発 停止する危険 開発継続性
26. 26 まとめ Conclusion
27. 27 まとめ Storybook という UI コンポーネントカタログライブラリ その Storybook を 100% Blazor で再実装しました ▪ コンポーネントに集中した開発や、開発メンバー間での知識の共有、 Chromatic と連携したデザインレビューやスナップショットテストなど を可能とします。 ▪ Blazor でも Storybook と同じ外観・使い勝手で UI コンポーネントカ タログを利用できます。 ▪ Blazor でも Storybook と同等のアプリケーションを、趣味開発でも 実装できることが証明できました。
28. 28 @jsakamoto 以上 “Blazing Story” の紹介でした C # で SPA を 実装す る Bl azor で UI コ ンポーネ ントカタログ St oryb ook を 使いたい ! Learn, Practice, Share.