Webコンポーネントをブラウザでサッと確認するのにStorybookが便利ですね。Storybookは自分で作ったコンポーネントをブラウザ上で一覧できるツールです。以下のようなコンポーネントを表示できるWebページを簡単に作ることができます。
始め方は簡単で、Reactの場合は以下のように始められます。
npx -p @storybook/cli sb init --type=react
これだけでも便利なのですが、Vercelにホスティングすると更に便利になります。Vercelはデベロッパの開発体験にフォーカスしたプラットフォームで、特にフロントエンド開発に重きを置いています。個人用プロジェクトの場合には無料で使うことができます。
Vercelの特徴として、Gitリポジトリとの統合が非常に優秀で、数クリックでリポジトリをインポートするだけで自動的にデプロイが行われます。また、VercelはGitHubでPRを作られたことを検出するとプレビュー用のURLを生成してPRにコメントします。
ここでコメントされたURLにアクセスすると、PRの変更が反映されたStorybookを見ることができます。
StorybookをVercelにデプロイするとこれらの特徴が自動的に使えます。ちょっとした変更であれば、手元でビルドしなくてもPRの差分を簡単に確認できるようになります。しかも、自分で記述しなくてはいけない追加の設定は全くありません。これほどの恩恵が全自動で受けられるのはVercelを使う上でとても便利なことの一つです。開発体験も非常に良いですね。
デプロイも簡単で、https://vercel.com/import からWeb UIに従って入力していくだけで完了します。
まず、リポジトリのURLを入力します。
次に、プロジェクトのディレクトリを設定します。多くの場合はデフォルトでContinueを押して大丈夫でしょう。
最後に、プロジェクトの設定を行います。多くのフロントエンドフレームワークの場合プリセットから自動設定が行われるのですが、Storybookの場合は自分で記述する必要があります。FRAMEWORK PRESETはOtherを選び、Build and Output Settingsを開き、以下のように記述しましょう。
| 設定 | 値 |
|---|---|
| BUILD COMMAND | npm run build-storybook |
| OUTPUT DIRECTORY | storybook-static |
最初に説明したように、以下のコマンドでStorybookを作成した場合はpackage.jsonにbuild-storybookスクリプトが追加されるので、それを利用するように記述します。もし違う場合は自分のpackage.jsonを確認して適切な値に書き換えましょう。
npx -p @storybook/cli sb init --type=react
Deployボタンを押すと、自動的にデプロイが開始されます。設定が誤っていなければ少し待つとこのような画面になり、設定が完了します。
この例でのデプロイ先はこちらです: https://storybook-vercel.vercel.app/
とても簡単ですね。あとはPRを作るだけで最初に書いた自動的にStorybookプレビューを確認するためのURLをVercelがコメントしてくれます。
