Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 Storybook とは About Storybook

Slide 3

Slide 3 text

3 Storybook とは UI コンポーネントカタログ ▪ UI コンポーネントカタログ ▪ JavaScript ライブラリ ▪ MIT License (81.4k GitHub Stars) ▪ JavaScript によるコンポーネントベースのクライアント Web アプリに、UI コンポーネントカタログ機能を追加 ▪ 主要な JavaScript フレームワーク/ライブラリに対応 ▪ Angular や React、Vue、Svelte など 概要

Slide 4

Slide 4 text

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 = { /* 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; /* * 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: () => , };

Slide 5

Slide 5 text

5 デモンストレーション UIコンポーネントカタログ Storybook

Slide 6

Slide 6 text

6 利点 Storybook とは コンポーネントを アプリから分離して開発 ▪ アプリケーション本体の開発ペースとは独 立・分離して、コンポーネント単位での開 発に集中できる ▪ コンポーネント単位で Visual Regression テストやブラウザテストを運用可能 コンポーネントの存在と 使い方の共有 ▪ 開発メンバー間でのコンポーネントの存 在の周知や習熟度の加速 ▪ コンポーネントにどのようなパラメーター (プロパティ) があり、それがどう作用する かをライブで試すことができる

Slide 7

Slide 7 text

7 活発な議論とサポート、月次のミーティング https://discord.gg/storybook Discord 豊富なプラグイン https://storybook.js.org/integrations プラグイン イベントやブログ記事の案内 https://storybook.js.org/community コミュニティサイト コミュニティ Storybook とは

Slide 8

Slide 8 text

8 ▪ 開発者やデザイナと共有 ▪ ディスカッションやデザインレ ビューの実施 インターネット上での共有 ▪ 発行のたびにレンダリング結果の ピクセル差分を検出 ▪ GitHub 連携あり Visual Regression テスト Chromatic との統合 Storybook とは Web 上の SaaS ▪ https://www.chromatic.com/ ▪ 無料枠あり Storybook アプリを Chromatic に発行 ▪ Chromatic によって Storybook アプリをネット 上にホスティング

Slide 9

Slide 9 text

9 Blazor とは About Blazor

Slide 10

Slide 10 text

10 Blazor とは C# で SPA を実装する ▪ クライアント Web アプリケーションを C# で実装 ▪ コンポーネント指向 ▪ JavaScript へのトランスパイラではない ▪ .NET のインタープリターを WebAssembly で実行 ▪ あるいは WebSocket でサーバとリアルタイム通信 ▪ 開発環境のエコシステムが、完全に .NET ▪ Web 標準 ▪ プラグインや XAML ではない ▪ 普通に HTML/CSS を書く ▪ JavaScript で書いてきた部分を C# で書く 概要

Slide 11

Slide 11 text

11
    @foreach (var item in _toDoList) {
  • @item
  • }
Add @code { private readonly List _toDoList = new(); private string _newToDo = ""; private void OnSubmit() { _toDoList.Add(_newToDo); _newToDo = ""; } } 実際のソースコード C# で SPA を実装する Blazor とは ▪ HTML 中に C# のコードを混ぜて書く ▪ JSX の C# 版みたいな >

Slide 12

Slide 12 text

12 Blazor でも Storybook したい! C# で SPA を実装する Blazor

Slide 13

Slide 13 text

13 Storybook は Blazor をサポートしない...

Slide 14

Slide 14 text

14 Storybook は Blazor を サポートしない… C # で SPA を 実装す る Bl azor Storybook は Web Components には対応して いるらしい ▪ Blazor コンポーネントは Web Components カスタム要素 に登録できるので、この方向で使える可能性 ▪ しかし Discord では成功したとの報告はなし だがしかし Web Components 経由で使えたと して、それは Blazor 開発者にとって幸せか? ▪ JavaScript/TypeScript 構文によるストーリーコードを実装 する必要 ▪ npm や package.json などの JavaScript 開発エコシステ ムの理解・習熟の必要 >

Slide 15

Slide 15 text

15 Blazing Story About Blazing Story

Slide 16

Slide 16 text

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 で再実装

Slide 17

Slide 17 text

17 デモンストレーション Storybook を 100% Blazor で再実装

Slide 18

Slide 18 text

18 100% Blazor として再実装 利点 Blazing Story .NET スタイルで開発 .NET ▪ npm や package.json、webpack.config.js などを 扱う必要がない ▪ いつものプロジェクトファイル (.csproj) と NuGet パッケージだけ ▪ Visual Studio によるデバッグ体験もそのまま すべてが Razor コンポーネント ▪ ストーリーも Blazor コンポーネントで記述 ▪ JavaScript/TypeScript の記述不要 ▪ Blazor のスキルだけでストーリーを実装できる

Slide 19

Slide 19 text

19 豊富なプラグインが利用できない 見た目こそそっくりだが、構造・仕組みはまるっきり違う 弱点 Blazing Story Chromatic が利用できない なのでやっぱり本当は、Web Components 経由で Blazor でも Storybook を公式に 使えるようになるのを待つべき?

Slide 20

Slide 20 text

20 それも Blazing Story を開発する意義 Blazing Story Blazor でも今すぐ UI コンポーネントカタログが使える Blazor によるクライアント Web アプリ開発事例になる ▪ いつか将来 Storybook 本家に取って代わられるとしても ▪ JavaScript 製である Storybook と同等の機能・外観・体感速 度を備えたクライアント Web アプリケーションを、Blazor で も開発できる ▪ しかもじゅうぶん短期に 今すぐ使える 開発事例

Slide 21

Slide 21 text

21 まとめ Conclusion

Slide 22

Slide 22 text

22 まとめ Storybook という UI コンポーネントカタログライブラリ その Storybook を 100% Blazor で再実装しました ▪ コンポーネントに集中した開発や、開発メンバー間での知識の共有、 Chromatic と連携したデザインレビューや Visual Regression テスト などを可能とします。 ▪ Blazor でも Storybook と同じ外観・使い勝手で UI コンポーネントカ タログを利用できます。 ▪ ただし Storybook が擁する豊富なプラグインやサービスなど、巨大な エコシステムの恩恵に預かることはできません。 ▪ とはいえ、Blazor でも Storybook と同等のアプリケーションを、趣味 開発でも実装できることが証明できました。

Slide 23

Slide 23 text

23 Bl a z or で も St or yb ook した い ! Learn, Practice, Share. UI コンポーネントカタログ “Storybook” を、 C# で SPA が作れる Blazor で再実装した話