kubell Advent Calendar 2024 シリーズ 1の12/9の記事です。
qiita.com
こんにちはkubellのフロントエンド開発部の末竹(magcho)🐧です。
今日においてフロントエンドのUIにおけるカタログ・テスト基盤としてStorybookが採用されることがあるかと思います。
特に最近のStorybookではコンポーネントテスト・UIテスト・振る舞いテストとしての機能が充実しています。
Storybookは公式にReact, Vue, Angular, ...をサポートしており少しの設定でこれらのフレームワーク(テンプレートエンジン)で作られたコンポーネントを掲載できますがそれ以外のフレームワークで作られたものは利用ができません。
本記事では任意のフレームワーク(テンプレートエンジン)で書かれたマークアップをStorybookに掲載する方法について紹介します。
今回は以下のbuttonタグを10個表示するSmartyのマークアップを題材に扱っていきます。
{$lang = "smarty"}
<div>
{for $i=1 to 10}
<button>{$i}</button>
{/for}
</div>
<b>This is {$lang}</b>
続きを読む