UI コンポーネントカタログ “Storybook” を、C# で SPA が作れる Blazor で再実装した話

Web フロントエンド開発で使われる機会の多い UI コンポーネントカタログ “Storybook” ですが、残念ながら、C# で SPA が作れる Blazor には対応していません。そこで Storybook と同等の UI と機能を目指して、Storybook のクローンを Blazor でスクラッチ開発してみました。そうしてできあがった Blazor ネイティブな UI コンポーネントカタログ “Blazing Story” を紹介します。

Transcript

1. 1 UI コンポーネントカタログ “Storybook” を、 C# で SPA が作れる Blazor で再実装した話 Jan. 20, BuriKaigi 2024
2. 2 Storybook とは About Storybook
3. 3 Storybook とは UI コンポーネントカタログ ▪ UI コンポーネントカタログ ▪ JavaScript ライブラリ ▪ MIT License (81.4k GitHub Stars) ▪ JavaScript によるコンポーネントベースのクライアント Web アプリに、UI コンポーネントカタログ機能を追加 ▪ 主要な JavaScript フレームワーク/ライブラリに対応 ▪ Angular や React、Vue、Svelte など 概要
4. 4 ▪ 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" />, };
5. 5 デモンストレーション UIコンポーネントカタログ Storybook
6. 6 利点 Storybook とは コンポーネントを アプリから分離して開発 ▪ アプリケーション本体の開発ペースとは独 立・分離して、コンポーネント単位での開 発に集中できる ▪ コンポーネント単位で Visual Regression テストやブラウザテストを運用可能 コンポーネントの存在と 使い方の共有 ▪ 開発メンバー間でのコンポーネントの存 在の周知や習熟度の加速 ▪ コンポーネントにどのようなパラメーター (プロパティ) があり、それがどう作用する かをライブで試すことができる
7. 7 活発な議論とサポート、月次のミーティング https://discord.gg/storybook Discord 豊富なプラグイン https://storybook.js.org/integrations プラグイン イベントやブログ記事の案内 https://storybook.js.org/community コミュニティサイト コミュニティ Storybook とは
8. 8 ▪ 開発者やデザイナと共有 ▪ ディスカッションやデザインレ ビューの実施 インターネット上での共有 ▪ 発行のたびにレンダリング結果の ピクセル差分を検出 ▪ GitHub 連携あり Visual Regression テスト Chromatic との統合 Storybook とは Web 上の SaaS ▪ https://www.chromatic.com/ ▪ 無料枠あり Storybook アプリを Chromatic に発行 ▪ Chromatic によって Storybook アプリをネット 上にホスティング
9. 9 Blazor とは About Blazor
10. 10 Blazor とは C# で SPA を実装する ▪ クライアント Web アプリケーションを C# で実装 ▪ コンポーネント指向 ▪ JavaScript へのトランスパイラではない ▪ .NET のインタープリターを WebAssembly で実行 ▪ あるいは WebSocket でサーバとリアルタイム通信 ▪ 開発環境のエコシステムが、完全に .NET ▪ Web 標準 ▪ プラグインや XAML ではない ▪ 普通に HTML/CSS を書く ▪ JavaScript で書いてきた部分を C# で書く 概要
11. 11 <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# 版みたいな </>
12. 12 Blazor でも Storybook したい! C# で SPA を実装する Blazor
13. 13 Storybook は Blazor をサポートしない...
14. 14 Storybook は Blazor を サポートしない… C # で SPA を 実装す る Bl azor Storybook は Web Components には対応して いるらしい ▪ Blazor コンポーネントは Web Components カスタム要素 に登録できるので、この方向で使える可能性 ▪ しかし Discord では成功したとの報告はなし だがしかし Web Components 経由で使えたと して、それは Blazor 開発者にとって幸せか? ▪ JavaScript/TypeScript 構文によるストーリーコードを実装 する必要 ▪ npm や package.json などの JavaScript 開発エコシステ ムの理解・習熟の必要 </>
15. 15 Blazing Story About Blazing Story
16. 16 Blazing Story Storybook を 100% Blazor で再実装 Storybook の動作・外観を 100% 再現 することを目標に自作した Blazor WebAssembly 用 OSS ライブラリ https://github.com/jsakamoto/BlazingStory Mozilla Public License v.2.0 Storybook を 100% Blazor で再実装
17. 17 デモンストレーション Storybook を 100% Blazor で再実装
18. 18 100% Blazor として再実装 利点 Blazing Story .NET スタイルで開発 .NET ▪ npm や package.json、webpack.config.js などを 扱う必要がない ▪ いつものプロジェクトファイル (.csproj) と NuGet パッケージだけ ▪ Visual Studio によるデバッグ体験もそのまま すべてが Razor コンポーネント ▪ ストーリーも Blazor コンポーネントで記述 ▪ JavaScript/TypeScript の記述不要 ▪ Blazor のスキルだけでストーリーを実装できる
19. 19 豊富なプラグインが利用できない 見た目こそそっくりだが、構造・仕組みはまるっきり違う 弱点 Blazing Story Chromatic が利用できない なのでやっぱり本当は、Web Components 経由で Blazor でも Storybook を公式に 使えるようになるのを待つべき?
20. 20 それも Blazing Story を開発する意義 Blazing Story Blazor でも今すぐ UI コンポーネントカタログが使える Blazor によるクライアント Web アプリ開発事例になる ▪ いつか将来 Storybook 本家に取って代わられるとしても ▪ JavaScript 製である Storybook と同等の機能・外観・体感速 度を備えたクライアント Web アプリケーションを、Blazor で も開発できる ▪ しかもじゅうぶん短期に 今すぐ使える 開発事例
21. 21 まとめ Conclusion
22. 22 まとめ Storybook という UI コンポーネントカタログライブラリ その Storybook を 100% Blazor で再実装しました ▪ コンポーネントに集中した開発や、開発メンバー間での知識の共有、 Chromatic と連携したデザインレビューや Visual Regression テスト などを可能とします。 ▪ Blazor でも Storybook と同じ外観・使い勝手で UI コンポーネントカ タログを利用できます。 ▪ ただし Storybook が擁する豊富なプラグインやサービスなど、巨大な エコシステムの恩恵に預かることはできません。 ▪ とはいえ、Blazor でも Storybook と同等のアプリケーションを、趣味 開発でも実装できることが証明できました。
23. 23 Bl a z or で も St or yb ook した い ! Learn, Practice, Share. UI コンポーネントカタログ “Storybook” を、 C# で SPA が作れる Blazor で再実装した話