はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
「いいね」か「ブックマーク」
を頂けると僕のモチベーションアップになります！
少しでも気に入っていただけたらよろしくお願いいたします！
今回の目的
自分の作ったコンポーネントを確認したり検証するための技術を身に付けたい！
公式のクイックスタートを参考に進めていきます。
項目ごとに補足のみ書いて進めています。わかりづらいところの理解の手助けになれば幸いです！
前回
主に参考にさせていただいた記事
バージョン
React-18.2
Storybook-8.1.4
Deploy Storybook
Chromaticに公開することで、チームに共有することが可能です。
Exporting as a static app
下記のコマンドでビルドします。
npm run build-storybook
Publish Storybook
Set up a repository in GitHub
黙々と。
GitHub Actionsのことについて言及があるが今回はスキップ
https://docs.github.com/ja/actions/quickstart
Get Chromatic
Chromaticにログインリンク押すとチュートリアルが切り替わるので注意
画面に表示された下記のコマンドを実行します。Cromaticの画面上を見るとBuildされてるところが見れます。
npx chromatic --project-token=~
ビルドエラーで止まってしまった場合は「taskbox/build-storybook.log」を確認しましょう
もし、logがない時はyarnコマンドがない時なので下記コマンド実行
npm i yarn
Chromaticは、各コンポーネントの概要を見れるだけでなくstorybookでの確認も可能です。
Visual Tests
今までのスナップショットと比較して目視で問題がないか確認するテストです。
GitHub Actions使っての内容ですが、mainブランチでも一応画面確認のみなら可能です。
1.chromaticで「Unreviewed」になっている項目をクリックし確認したいもののみ「Accept」しましょう。
2.コマンドを打って、Chromaticにあげましょう。
npm run build-storybook
npx chromatic --project-token=~
下記のようにズレの比較できる画面が出ればOKです。もし出ない場合は別ブランチでやる変更をしてから確認してみましょう。
Addons
下記サイトで便利なアドオンが紹介されている。
https://storybook.js.org/integrations
Conclusion
NextStepとして、ベストプラクティスを学べるサイトをいくつか紹介している。
https://storybook.js.org/tutorials/intro-to-storybook/react/en/conclusion/
最後に
なんとなくのできる範囲が知れました！