Help us understand the problem. What is going on with this article?

Storybookが遅いと感じたらLoocを使おう

storybookを導入したことがある人なら分かるけど、そこそこ規模が大きいReactプロジェクトだと、Storybookのビルドがかなり遅いです。いつでも確認できるようにデプロイされたコンポーネントのカタログとして優れているが、頻繁に小さい修正が入るコンポーネントを視覚的に確認するには遅いです。一度に一つのコンポーネントを独立して見て、ステートを操作するためのツールとして相応しくないように感じます。そこで 僕は looc を書くことを決めました。

Loocとは何か?

Looc は、React コンポーネントをすぐに個別にブラウザーで確認するためのツールです。Looc を使うと、コンポーネントを"サンドボックス化"して 独立してprops も操作できるので、表示がどう更新されるかを確認できます。小さい修正ごとに大きいプロジェクトを時間をかけて再ビルドしなくてもすむので、コンポーネントのテストに非常に役に立ちます。一度に一つのコンポーネントしか見ない、自動的なknobs addonを入れた Storybook のようなものだと考えてもいいです。トランスパイルや外部ライブラリのバンドルが不要になるブラウザーの ES モジュール対応に頼るので、コンポーネントをゼロに近い時間で確認できます。

loocをインストールすると、

$ looc start src/component.tsx

とするだけでコンポーネントをブラウザーで確認できます。

LOOC-BETTER.gif

このGIFの下に見えるUIは、全てloocがpropsの型をもとに自動的に生成してくれます。

詳しくは READMEを見てください。

なぜこんなことができるのか?

looc.tsxファイルを解析し、interface を抽出します。そのために内部でtsx-ray というライブラリを使います。あなたのコンポーネントにどの型のどの props を渡すことができるか分かるためにその情報を使います。

※ この仕組みが一番根本的な仕組みなので.tsx以外のファイルをloocで使うことができません

次は, emotionstyled-componentsのようなライブラリを使う場合, Looc は snowpack でそのライブラリの ESM 版をダウンロードし、ブラウザーから直接インポートできるようにします. それがnpxが必要な理由: 内部でsnowpacknpxで起動します.

このアプローチでは、ビルド・再ビルド時間をほぼゼロにできます(他コンポーネントのインポートとバンドルや、Typescript のトランスパイルは避けられないので完全にゼロにはできない)。初期のライブラリのインストールは 1 分ぐらい、少し時間がかかりますが、次回以降の起動は数秒しかかからないです。大きなプロジェクトで Storybook 使った場合と比べて、非常に速いです。トランスパイルとバンドルリングは rollupでします。

コンポーネントがロードされたら、ブラウザーで確認できます。Looc は props 操作用に簡単な UI を自動的に生成します(上記の GIF にある)。その UI は、props の型をもとに作られます。そして、どの props がオプショナルかわからないので、全ての props のデフォルトの値も型によって決めます。

どの型に対してどの <input> が生成されるかは以下の通り:

  • string: <input type="text">
  • number: <input type="number">
  • string[]: <input type="text">
  • number[]: <input type="text">
  • boolean: <input type="checkbox">

Union (特にリテラル型の union) 型は はきれいに <select>になります.例えば "round" | "squared" 型に対して roundsquaredをオプションとして持つ<select>が生成されます.

🚧 開発中 🚧

このライブラリはできたばかりなので、バグがある可能性がほぼ100%です。Reactのコンポーネントのテストに使ってみて、issueを作っていただけると非常にありがたいです!または、コントリビューションも歓迎します!

jlkiri
Webでのユーザーインターフェースを作っています @ Yumemi Co., Ltd.
https://phantasiai.dev/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした