Storybookを試してみた

はじめに

Storybookは、UIコンポーネントのカタログです。

Storybookの存在は以下の本を読んだ時に知りました。

WordPressでStorybookを使おうとしたところ、おそらく依存ファイルが足りないなどの理由で、上手くいきませんでした。

なので、Next.jsで使ってみることにしました。

公式サイトのドキュメントに従って、インストールを行いました。

まずは以下のコマンドをターミナルで打ち込みました（HTMLとありますが、ターミナルに打ち込んだコードです）。

See the Pen ターミナル by Shibata Hiroki (@khiro-enginner) on CodePen.

色んな処理が走り、最終的に以下のようにインストールが成功しました。

To run your Storybook, type:

   yarn storybook

とあったので、言われた通りにコマンドを打ち込みました。

そうすると、Chromeで開いてもいいか？というモーダルが表示されました。

「OK」を押すと、Storybookの「welcome page」が表示されました。

ターミナルには以下の表示がされていました。

今回は、Storybookをインストールして起動できました。

ただ、「Storybookのコンポーネントを、どうやって既存のNext.jsに当てはめるのか」というのが分かりませんでした。

今後は、Next.jsのウェルカムページに、Storybookのボタンを表示させたいです。