概要

Storybookはコンポーネントを一覧表示できるツールです。

ページ自体を実装することなくコンポーネントを個別に表示できるため、
単体のコンポーネント実装やコードレビューに便利です。

私の担当しているReactNativeプロジェクトで大規模なページ実装があり、
大量のコンポーネントが必要になるため導入してみました。

今回はExpoでのStorybookの導入を紹介します！

導入

以下を実行してStorybookをインストールします。
途中でいくつか選択肢が出てきますが、初期選択のもので進めて問題ありません。

npm create storybook@latest

npx expo@latest customize metro.config.js

次にmetro.config.jsを編集し、withStorybookを追加しましょう。

// module.exports = config; こちらは削除

const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(config);

app/storybook.tsxファイルを追加して以下を設定します。

export { default } from '@storybook/react-native';

_layout.tsxを編集してStorybookを組み込みます

<Stack.Protected guard={__DEV__}>

  <Stack.Screen name="storybook" options={{headerShown: false}} />

</Stack.Protected>

あとは適当なファイルにStorybookへの遷移を実装しましょう！

<Link href="/storybook">Open Storybook</Link>

これでStorybookの導入が完了しました！
ページを開くことで.rnstorybookに入っているサンプルコンポーネントが一覧表示されます。

自前のコンポーネントを追加する

次に自身が作成したコンポーネントをStorybookに追加してみましょう！

まずはStorybookとして読み込むフォルダを指定していきます。
.rnstorybook/main.tsを開いてstoriesをコンポーネントフォルダ向けに変更しましょう。

import type { StorybookConfig } from '@storybook/react-native';



const main: StorybookConfig = {

  stories: ['../components/*/*.stories.?(ts|tsx|js|jsx)'],

  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],

};



export default main;

そのあとnpm run startを再度実施し、
.rnstorybook/storybook.requires.tsに設定を反映させます。

そうしたらいよいよStorybookファイルを作っていくわけですが、
今回は以下の簡単なボタンコンポーネントを対象に作成していきます。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/53881

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

フリーランスエンジニア大募集中！

現在、「WEBエンジニア」「フロントエンジニア」「データサイエンティスト」など、様々な職種のフリーランスエンジニア様を募集中です。まずは以下よりお気軽にご応募ください！

採用ページはこちら：https://itanken.com/register

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

Wantedly：https://www.wantedly.com/companies/rightcode

コーポレート：https://rightcode.co.jp/