長期運用（年単位）するにはツールが不安定すぎる
- 体感的に Breaking Changes が多く、Storybook のバージョンアップで Story の大改修が必要になるか壊れる。
- Storybook のコードが特定のライブラリに強く依存しており、製品コードと独立にバージョンアップできない。
  - 未確認だが emotion とか react-router とか webpack とか
- alpha 版含む最新バージョンでのみバグ修正されるため、（安定版が出るまでの間）しばらくバグが直らない。
  - alpha 版はもちろん不安定なので使うのは厳しい
  - 過去バージョン複数は大変なのでそれらへのバックポートは無くて良いのだが、せめて最新安定版に適応してくれれば…
使い勝手
- 意図せずショートカットを実行してしまったりする
- 製品コード用の Webpack 設定そのままでは Storybook のコンテンツが期待通り動かなかったりする

MasuqaT

Ladle は生まれたばかりかつ安定版もないので、Storybook と安定さを比較するには待たないといけない。

MasuqaT

Vite の設定がシンプルというのはあるが、Ladle がプロジェクトの Vite 設定を読み込んでくれるので、ビルド設定が面倒なことになるという課題は解決しているように見える。

MasuqaT

Ladle の機能 - 高速さ

ES modules コード（実態はTypeScript）、かつ、Vite を使うことで^[1]、起動時間を大幅に短縮した。（なお、Storybook も Vite が使える^[2]はずだが言及されていない。）

速度比較（※上記の記事より引用）

	Storybook	Ladle	比較
Cold start	58s	6s	10%
Hot start	25s	3s	12%
Production ビルド	80s	22s	28%
hot reload	2.5s	<100ms	<4%
総ビルドサイズ	16.1MB	4.6MB	29%
初期ダウンロードサイズ	338kB	14.3MB	2%

Vite と Code Splitting の恩恵をよく受けるよう作られているように感じる。

脚注

デプロイ用ビルド時には Rollup で最適化するらしい - https://www.ladle.dev/docs/ ↩︎
https://storybook.js.org/blog/storybook-for-vite/ ↩︎

MasuqaT

Ladle の機能 - 使い勝手の良さ

Storybook 互換

Ladle は Component Story Format に準拠しているため Storybook の Story をそのまま表示できる。
Storybook の Controls も同じような機能があるらしい？

準備

初期状態からいろいろな機能・アドインが載っている
設定ファイルいらず（"Zero Configuration"）

他のツールとの繋ぎやすさ

アドインの状態が URL に含まれるため再現しやすい
Story 一覧のメタデータを提供したり、Story 固有のメタデータを定義できたりする。^[1]
JavaScript API が提供されている。^[2]

脚注

MasuqaT

"Zero Configuration" ではあるが、プロジェクトで使う CSS in JS とか global style とかを Ladle でも使えるようにする設定は書く必要がありそう。

MasuqaT

story のソースコードを表示する addon と a11y の問題を検出する addon が新しく追加された。

https://github.com/tajo/ladle/pull/112

https://github.com/tajo/ladle/pull/115

MasuqaT

ストーリーが追加・削除されたらリロードしてくれるようになった。

https://github.com/tajo/ladle/pull/146

（今まで WSL 上で動かすときに特有のバグかと思っていた）

MasuqaT

Ladle の見た目

公式のデモがあるのですぐに触ることができる。

https://baseweb.netlify.app/

表示はシンプルではあるが殺風景ともいえる。

レポジトリ付属デモ

Controls

Controls は可能な場所でのみアイコンが表示される模様。（公式デモでは見つけられなかった。）

レポジトリ付属のデモをローカルで起動したときには http://localhost:61000/?story=controls--controls でその例を使える。

MasuqaT

2022 年 3 月時点では見た目はまだこれからという段階だと思っておいて良さそう。

MasuqaT

Ladle ではタブを押すごとに、表示部分、検索バー、リスト、下の各アクション、と移動していく。キーボードでリストからストーリーを選んで操作する、という操作がやりやすい。

Storybook ではリストの各要素にフォーカスが当たるため、表示部分との行き来がかなり面倒。

MasuqaT

レイアウトを良くする提案も出ていた

https://github.com/tajo/ladle/issues/82

MasuqaT

デモが今は落ちている

MasuqaT

今見たらデモは復活していた。URL を変えたらしい。

MasuqaT

Storybook と Ladle とで大きく違うところ

Links

モジュールの関数をそのまま使うか hook から渡される関数を使うかで違う。

import { linkTo } from '@storybook/addon-links';

export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;

https://www.ladle.dev/docs/links/

import { useLink } from "@ladle/react";

export const Link = () => {
  const to = useLink();
  return <button onClick={() => to("controls--first")}>Controls</button>;
};