Storybook with TypeScript の実行環境を構築する
はじめに
オハコンバンニチハ、Kiiiyo です。
久しぶりにStorybookを触る機運が高まり、2019年に執筆した記事の2022年版として執筆してみようと思います。
DevelopersIO
Storybookとは
Storybookは、UI Component 管理・開発環境を提供するオープンソースのツールです。
主な用途としては以下な感じです。
- デザインスタイルガイド
- コンポーネントライブラリ
- コンポーネントの挙動確認
- コンポーネントの仕様確認
- 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/ のアドレスを入力すると以下の画面が表示されます。
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
Author And Source
この問題について(Storybook with TypeScript の実行環境を構築する), 我々は、より多くの情報をここで見つけました https://zenn.dev/kiiiyo/articles/3c699ce1bc9dae著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol