React最近Storybookを会社で導入していて、環境設定についてまとめました。基本的には、公式サイトのとおりですが、コンポーネントの例の記載がなかったり、ReactとVueでできるものが異なったりして、困った部分が合ったので、すぐに動く環境を作りました。v8.9.4の環境で動作を確認しています。EnvironmentReactやVueなどのUIライブラリで作成したコンポーネントの動作やデザインをエンジニア、デザイナ間で共有、閲覧できるツールです。Storybookという名前の通り、あるコンポーネントやコンポーネントの集合に対して、storyを複数用意し、storyごとの振る舞いを閲覧することができます。環境構築StorybookはReact、Vueの場合それぞれ、内部的にWebpackを利用しています。このエントリで紹介しているものを動かすためには特別な設定は必要ありませんが、必要に応じてWebpackの設定をすることもできます。StorybookとReactについて必要なライブラリを追加@storybook/reactおよび、react、react-dom、babel-coreを追加する必要があります。}}ここでpacage.jsonの全容は以下のようになります。Storybookの設定ファイルを作成Storybookは設定ファイルを.storybookというディレクトリに置きます。最小環境では、Storybookにstoryの場所を伝える設定を.storybook/config.jsに書くだけです。以下では、stories/index.jsを読み込むという設定をしています。好きな場所のstoryをrequireできます。Reactのコンポーネントを作成ボタンの中身と、クリック時のメソッドをPropsとして渡せる単純なコンポーネントを作成します。components/Button.jsxとして以下を保存します。storyを作成ここまでいけばあとはstoryを書くことができます。ストーリーはいわば、そのコンポーネントの初期状態です。Storybookの起動と確認これで準備は完了です。以下のコマンドにてStorybookを起動し、localhost:9001にアクセスしてみましょう。StorybookとVueについて必要なライブラリを追加@storybook/vueおよび、vue、babel-coreを追加する必要があります。}}ここでpacage.jsonの全容は以下のようになります。Storybookの設定ファイルを作成Storybookは設定ファイルを.storybookというディレクトリに置きます。.storybook/addons.jsをそれぞれ用意する必要があります。.storybook/config.jsstories/index.jsを読み込むという設定をしています。module);.storybook/addons.js@storybook/addon-actionsという、イベントハンドラのコールバック関数として設定し、そのイベントが発火したことをロギングするためのaddonを利用する旨を設定します。Vueのコンポーネントを作成ボタンの中身と、クリック時のメソッドをPropsとして渡せる単純なコンポーネントを作成します。components/Button.vueとして以下を保存します。storyを作成ここまでいけばあとはstoryを書くことができます。ストーリーはいわば、そのコンポーネントの初期状態です。Storybookの起動と確認これで準備は完了です。以下のコマンドにてStorybookを起動し、localhost:9001にアクセスしてみましょう。storybookまとめReactとVueで同じStorybookが動くサンプル環境を作ってみました。コードベースも基本的に記事中のものが全てですので、是非一度動かしてみていただければなと思います。CSSなど、コンポーネントに当てるCSSとは別にグローバルになにかコンテンツを読み込んでおきたいということがあると思います。その際は、設定ファイル置き場である.storybookにpreview-head.htmlを作成し、HTMLのheaderに追加したいタグを書くことができます。入門した久しぶりのブログ更新。買って設定し3ヶ月使ってみたペーパードライバー歴10年、出張講習で3時間公道を走ってきた2022年の振り返り電子書籍をiPhoneで聴くようにしたら読書への苦手意識が和らいだ2021年の振り返り検索はてなブログをはじめよう!zuckey_17さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。