InfoQ ホームページ ニュース コンポーネントエクスプローラ Storybook for Svelte が遊び場とドキュメントを自動生成
コンポーネントエクスプローラ Storybook for Svelte が遊び場とドキュメントを自動生成
2021年5月16日 読了時間 3 分
作者:
翻訳者
StorybookコンポーネントエクスプローラのSvelteバージョンであるStorybook for Svelteは、先頃メジャーアップグレードを発表した。これは、コンポーネントのストーリーの作成、保守、および文書化に関する開発者エクスペリエンスの向上を目指すものだ。新しいベータリリースは、新しいSvelteネイティブストーリー形式からコンポーネントの状態をキャプチャするコントロールとドキュメントを自動生成する。
Storybookには、一連の状態でコンポーネントを表示できるSvelteネイティブのストーリー形式が追加された:
<script>
import { Meta, Template, Story } from '@storybook/svelte';
import Button from './Button.svelte';
</script>
<Meta title="Button" component={Button}/>
<Template let:args>
<Button {...args}/>
</Template>
<Story name=”Primary” args={{primary: true}}/>
<Story name=”Secondary” args={{primary: false}}/>
リリースノートで提供された前のコードサンプルは、ストーリー構文がSvelteの単一ファイルコンポーネント構文に厳密に従っていることを示している。コンポーネントとそれに関連するストーリーを宣言的に記述するために、特定のストーリーブックアドオンがインポートされる。前のコードサンプルには、ストーリーブックインターフェイス (title="Button") の Button 記述子とともに表示されるボタンコンポーネント (component={Button}) の2つのストーリー (Primary と Secondary) がある。Svelteネイティブのストーリー形式は、ポータブルで再利用可能なコンポーネントの例として、Storybookで促進される一般的なComponent Story Format (CSF) にコンパイルされている。
コンパイラはさらに、Storybookにコンポーネントを自動的にインポートするインタラクティブな遊び場 (playground) とドキュメントを生成する。リリースノートには、自動生成されたインタラクティブな遊び場の例が記載されている:
Storybook for Svelte automatically generated interactive playground
新しいリリースでは、ゼロ構成のセットアップ、および更新されたチュートリアルとドキュメントを使用して、より簡単で高速なオンボーディングを提供することも目指している。新しい生産性指向の機能は、write less code (コード記述量を減らす) というSvelteのマントラに沿って登場する。コンポーネントドキュメントの自動生成により、開発者の労力がほとんどあるいはまったくなくても、コンポーネントとそのドキュメントの同期を維持することができる。Storybookチームは、自動生成されたインタラクティブコンポーネントの遊び場の価値を次のように説明した:
コンポーネントは複雑です。コンポーネントがさまざまな値にどのように反応するかを予測し、すべての意味のある組み合わせについてストーリーを書くことは困難です。そのため、状態空間をインタラクティブに探索できると非常に便利です。
Storybook for Svelteの最初のリリースは2018年に行われ、その後2019年にSvelte 3にアップグレードされた。Svelteの人気が高まるにつれ、Svelteコミュニティのメンバは生産性指向の機能で以前の基本サポートを拡張しようと試みた。
Storybookは、MITオープンソースライセンスの下で利用できる。Storybook GitHubプロジェクトを介した貢献が歓迎される。Storybookの貢献ガイドラインと行動規範に従う必要がある。
-
関連記事
-
関連スポンサーコンテンツ
特集コンテンツ一覧
InfoQ ニュースレター
毎週火曜日に前週のまとめコンテンツをお送りいたします。(日本語版は不定期リリース)25万人のシニアな開発者コミュニティーにぜひご参加ください。 サンプルを見る