2023.06.02フロントエンドStorybookハンズオンtanesanこんにちは。6月で入社して1年になるtanesanです。今回はStorybookの基本的な使い方をハンズオン形式でご紹介できればと思います。Hooksを使用するStoryStoryの再利用play関数で振る舞いを検証Story内でテストの実行まとめStorybookとはStorybookは、UIコンポーネントを独立して開発、テスト、ドキュメント化するためのツールです。Storybookを使用すると、コンポーネントを簡単に作成・プレビューし、テストすることができます。Storybookは、React、Vue等やその他のフレームワークで使用することができます。Storybookは、コンポーネントをストーリーと呼ばれる独立したユースケースに分割します。ストーリーは、コンポーネントのプロパティや状態を変更することで、コンポーネントの様々な状態を視覚的に表現することができます。これによって、コンポーネントの機能や外観をテストしたり、コンポーネントのドキュメントを作成することができます。Storybookを使用することで、開発プロセスを迅速化し、チーム全体でコンポーネントの品質の向上が期待できます。今回はNext.jsプロジェクトを作成し、その上でコンポーネントとStoryを作成していくことにします。Next.jsのインストール下記コマンドでNext.jsをインストールします。実行後の設問はすべてデフォルトの選択肢を選択します。執筆時のVer:13.4.4Storybookのインストール下記コマンドでStorybookをインストールします。実行後の設問はすべてデフォルトの選択肢を選択します。執筆時のVer:7.0.18tailwindをStorybookで使用できるようにするNext.jsのデフォルト設定でプロジェクトを作成した場合、tailwindを使うことができます。デフォルトではStorybook上でtailwindで設定したスタイルが反映されません。そこで、下記の通り変更します。autoprefixerpreview.tsの変更Storybook共通の設定は.storybook配下のpreview.tsで行っています。ここを下記の通り変更します。preview;JestをStorybookで使用できるようにするStoryのテストはStorybook上で行う方法と、テストファイルにStoryを取り込んで行う方法があります。今回は前者で行おうと思います。JestをStorybookで実行するためのプラグインを追加する必要があります。今回はButtonとそれを集約するButtonGroup、名前とメールアドレスの入力欄を持つFormという3つのコンポーネントについてStoryを作成していきたいと思います。それぞれ下記のとおりです。);};以上で準備は終了です。Storybookの基本的な使い方まずはButtonを表示するだけのStoryを作ってみます。{};Storybookを起動して確認してみます。storybook下記の通り表示されていたらOKです。Storyで使用するコンポーネントへのPropsの渡し方Storyで使用するコンポーネントのプロップを設定したい場合、ざっくり3パターン方法があります。argsで渡す方法renderメソッドで渡す方法metaのargsで渡す方法argsで渡す方法StoryのargsオブジェクトにButtonのPropsを設定する方法です。},};renderメソッドで渡す方法Storyのrenderメソッドを使って直接Propsを指定したButtonを設定する方法です。/>,};また、render関数はargsを引数に取れるので、下記のように設定しても同じ出力を得ることができます。},};metaのargsで渡す方法metaにもargsオブジェクトを設定することができ、ここで設定した場合は、ファイル内すべてのStoryのargsに適用されます。Hooksを使いたい場合は、ファイル内で対象のコンポーネントをラップしたコンポーネントを作成してrender関数内で呼び出します。/>,};Storyの再利用Storyで設定したargsは再利用できます。下記はButtonGroupのStoryで使用するButtonに対してStoryを再利用する例です。),};Buttonに対して、UseArgsで設定したargsを展開しています。method」は表示されません。play関数で振る舞いを検証play関数を使えば、ユーザのアクションをStorybook内で再現することができます。下記は、Formコンポーネントで名前とメールアドレスの入力を再現するStoryを追加した例です。},};play関数の合成play関数内で、他のStoryのplay関数を呼び出すことができます。※現状tsエラーが発生するようです。},};Story内でテストの実行play関数内で、jestの関数を呼び出すことができます。下記は、useStateを使ってButtonWithHooksコンポーネントを使って、クリック後にテキストが表示されているかを検証するStoryとなります。Interactionタブにテスト結果が表示されます。},};まとめ以上、Storybookの基本的な使い方の紹介でした。今回紹介した機能以外にも、Storybookは豊富な機能を備えています。整備することで、コンポーネントの開発やテストがよりスムーズに行えるようになると思います。私自身もまだまだ勉強中ですが、Storybookを使いこなし、高品質なアプリケーション開発に貢献できるように頑張りたいと思います。ウェブサービス株式会社(DWS)公式ブログ記事URLをコピーしました。