logo
/
個人サイトのブログ部をサブドメインに切り出して、NuxtからNextに移行した
【OPPO】画面を傾けたときに表示される回転ボタンを無効にする
React×Recoil×Storybook を動かす
storybook の Args の型推論をオプショナルじゃなくする
自分好みのアウトライナーを開発した記録
自作のアウトライナーに Markdown 互換ビューを実装
毎日文章を書き続けたいと思いもう数年が経っている
ブログは情報を捨てる場にしたい
人生の電車からは降りない方が良い
行動ログの形式を３種類に分けて考えてみる
トップページ
ブログ
React×Recoil×Storybook を動かす
2022-04-24
ブログ
react
プログラミング
recoil
storybook

なぜこの記事を書いたか

Recoil でのデータ管理が含まれているコンポーネントを Storybook で動かしたかった。
ちゃんと探せばあったと思うけど、軽く探しても見つからなかったので雛形を作った。 ※Recoil も Storybook も今日はじめて触ったので多分に間違っている可能性あり

構成

Storybook Get startedを流用したタスクリストがベース。 
- /src
  - /components
    - Task.stories.tsx
    - Task.tsx
    - TaskList.stories.tsx
    - TaskList.tsx
  - stores
    - taskStore.ts
  - types
    - storybook.d.ts
  - App.tsx
tasksをtaskStore.tsで定義して Recoil で管理する。
TaskList.tsxでtasksの状態を変化させる。
Task.tsxはtasksの map から作成される。

解決策(TaskList.stories.tsx)

モックコンポーネントを作る

recoil にセットしたい変数を props の定義に追加する

props の値を recoil にセットする

元のコンポーネントを返す

モックコンポーネントを Default Export する

各ストーリーオブジェクトで props として recoil にセットしたい値を渡す

ソース

全体：https://github.com/k4a-dev/react-recoil-storybook

TaskList.stories.tsx

TaskList.tsx

免責

  • 実際の運用だと tasks はサーバサイドで管理するが、今回はローカルのグローバルステートとして扱う
  • この程度の実装なら もとから props で渡しちゃったほうが楽だけど、今回は recoil を使うのが目的
storybook の Args の型推論をオプショナルじゃなくする【OPPO】画面を傾けたときに表示される回転ボタンを無効にする

関連

ブログ
reactstorybook の Args の型推論をオプショナルじゃなくするBEMを始めとした手法はReactやVueには不向き(不要)Container・PresentationalコンポーネントReact.Children.mapReactとVueの比較(2021)Reactのconditional renderとdisplay noneの違いReactのsetStateで設定した値を同期的に反映させるにはReactのuseCallBack地獄ReactのuseEffectでのアンマウント処理は普通の更新や遷移では発火しないReactのディレクトリ構造Reactの技術質問の想定React・VueなどのJS系フレームワークとJS・jQueryは何が違うのかreactでビューに状態（計算？）をもたせちゃいけない？reactで巨大なリストやグリッドの再描画問題state→❌️値を保持　⭕️再レンダリングを引き起こす状態を保持「3種類」で管理するReactのState戦略マイクロフロントエンド(SPA)行動規範の参考👀useCallbackはとにかく使え！　特にカスタムフックでは👀本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった📄Obsidianで使うタイトル用語集🤔VueとReactの最終検討 @20210803
プログラミングすべての関数は、それを変更する理由がただ1つになるように設計する👀答えだけを知りたがる人（プログラミングスクールの講師を2年間続けて限界が来て辞めた話 ）
storybookstorybookなどのUIコンポーネント管理（テスト）の問題点
月別アーカイブ