Zenn
🎨

Storybook with TypeScript の実行環境を構築する

2022/04/20に公開
React
Storybook
TypeScript
tech

はじめに

オハコンバンニチハ、Kiiiyo です。
久しぶりにStorybookを触る機運が高まり、2019年に執筆した記事の2022年版として執筆してみようと思います。

DevelopersIO

Storybookとは

Storybookは、UI Component 管理・開発環境を提供するオープンソースのツールです。

Storybook

主な用途としては以下な感じです。

  • デザインスタイルガイド
  • コンポーネントライブラリ
  • コンポーネントの挙動確認
  • コンポーネントの仕様確認
  • UIスナップテストなどなど

Webフロントエンド界隈で主要なフレームワークに対応しているので、ご利用できる範囲も広い印象です。

  • React
  • Vue
  • Angular
  • Web Components
  • Ember
  • HTML
  • Svelte
  • Preact

そして、サンフランシスコに拠点を置く、Chromatic 社がツールの主な運営のもと、 世界中の有志のコントリビューターさん達によって維持されているみたいです。

この場をかりて「🙏Arigato Gozaimasu🙏」

開発環境情報

それではローカルの開発環境の確認をしてみたいと思います。

$ node -v
v14.17.0

$ npm -v                                                                     
8.7.0

node.jsが動作する環境にはなっているのが確認できました。

Create React App 環境を構築する

それでは、まずCreate React App(TypeScript)環境を構築していこうと思います。

参考記事

$ cd <Project_Directory>
$ yarn create react-app . --template typescript 

Success! Created learn-storybook at /Users/kiyota.takashi/git/learn-storybook
Inside that directory, you can run several commands:

yarn start
  Starts the development server.

yarn build
  Bundles the app into static files for production.

yarn test
  Starts the test runner.

yarn eject
  Removes this tool and copies build dependencies, configuration files
  and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd /Users/xxxxx/
yarn start

Happy hacking!
✨  Done in 92.69s.

インストール完了後、Reactアプリケーションが実行されるか試してみます。

$ yarn start

ブラウザのURLに http://localhost:3000/ のアドレスを入力すると以下の画面が表示されます。

React Create App

Storybook 環境の構築

Storybookを実際にインストールしていきたいと思います。

参考サイト
公式ドキュメント - Install Storybook

$ npx sb init 

...

To run your Storybook, type:

   yarn storybook 

For more information visit: https://storybook.js.org

🔎 checking 'cra5'
Found builder @storybook/builder-webpack5, skipping
🔎 checking 'webpack5'
Found builder @storybook/builder-webpack5, skipping
🔎 checking 'angular12'
🔎 checking 'mainjsFramework'
🔎 checking 'eslintPlugin'
🔎 checking 'builder-vite'
Not using community vite builder, skipping

正常にインストールができると上記のようになると思います。

動作確認

インストールが完了できたので、実際に動作確認をしてみたいと思います。

$ yarn storybook 

...
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.4.22 for React started               │
│   15 s for manager and 23 s for preview            │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.0.125:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
No issues found.

正常に起動されると、上記が表示されます。ブラウザのURLにhttp://localhost:6006/を入力して表示されるか確認してみます。

Storybookが表示されることが確認できましたので今回はここまでの記事にしたいと思います。
ご参考用にGithubのブランチをURLを記載しておきます。

Github

Discussion