Storybook学んでみた①

はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。

「いいね」か「ブックマーク」
を頂けると僕のモチベーションアップになります！
少しでも気に入っていただけたらよろしくお願いいたします！

今回の目的

自分の作ったコンポーネントを確認したり検証するための技術を身に付けたい！
公式のクイックスタートを参考に進めていきます。
項目ごとに補足のみ書いて進めています。わかりづらいところの理解の手助けになれば幸いです！

主に参考にさせていただいた記事

バージョン

React-18.2
Storybook-8.1.4

始める

チュートリアルに沿ってプロジェクトをクローンしセッティングのみ

Simple component

Taskコンポーネントの作成

default

export default {
  component: Task,
  title: 'Task',
  tags: ['autodocs'],
  excludeStories: /.*Data$/,
  args: {
    ...ActionsData,
  },
};

・component
　ストーリーブックで表示するコンポーネント
・title
　ストーリブックでのグループ名
・tags
・excludeStories
・args
　各Storyで使われる共通的な引数を記載。上書きも可能。

設定

taskbox/.storybook/preview.js

Storybookの全体に適用させる設定です。（デコレータの追加、パラメータの設定、グローバルCSSのインポート）
たとえば、main.cssを読み込ませることで全体にスタイルを反映させることができます。

import '../src/index.css';

Build out the states

HTMLの整形のみ

Specify data requirements

マニュアルだとpropsの型チェックのため下記を使用していますが、TypeScriptを使っている人にとっては余分かも。

import PropTypes from 'prop-types';

Catch accessibility issues

アクセシビリティの問題を確認する。

npm i --dev @storybook/addon-a11y

@storybook/addon-a11yをmain.jsのaddonsに記載する。
ストーリーブックを再起動し、画面に表示されていることを確認。

コントラストなどデザインに関わる部分で警告が出ます。
https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axeAPI

次