最強のTODOアプリ作りたくなったので、久々に土日はプログラム書くだけの日にする

from 2023/07/14(biwa.iconの日記)

とりあえずReactでパパッと作ろうかな。そんなに詳しいわけではないけど、まあいけるでしょ。

Reactの状態管理のライブラリとか何使えばいいんだろ。

過去にそんな話をしたinajob.icon

結論出てない

ScrapBubbleやscrapbox-select-suggestionはhooks onlyで頑張ってるtakker.icon

まともな設計かどうかは不明。だれか良さげな設計を教えてほしい

hooks onlyで始めて「困ったな」と思う時って「自明でないコンポーネント間の通信が必要になった時」だと思うnishio.icon

そういう時にアドホックに通信を作ると混乱するからメディエイターパターンで一箇所にまとめる的なイメージでReactNを導入してる

必要になったコード例を見るのが早そう

「困ったな」と思ったことはたくさんあるが、それがこの状況と同じなのかどうかを知りたい

例: コンポーネントのヒエラルキーの上下関係にないものがやり取りをする場合

メニューアイテムをクリックしたら、サイドバーの中の個別アイテムが変化する的なやつ

コンポーネント階層

メニュー

メニューアイテムX

コンテンツ

サイドバー

サイドバーアイテムY

XとYが通信する時にどうするか

こういう時に「よしYにイベントリスナーを生やしてXからイベントを投げよう」とかやると数が増えたり実はその情報を欲しいコンポーネントZが別の場所にもあることが判明したりした時にカオスが生まれる

この場合、「階層関係にない」ことが「自明でない」ということかtakker.icon

メニューとコンテンツの親から流し込む方法もあるけど、propsバケツリレーになって悲惨なことになるし(2,3敗)、確かにglobalに持たせるのが便利そう

PreactNはないが、ReactN相当のことができそうな@preact/signalsがあるtakker.icon

これを今度使ってみよう

signalsはSolidJSの仕組みを転用したもの

@preact/signalsはReactでも使える

とりあえずhooks onlyでやって、困ったら導入する感じでいいかなbiwa.icon

後からうわーってなるやつ

カフェイン飲むと貧乏ゆすりしたり、机叩いたりするな

いずれ机が疲労破壊しそう(適当)takker.icon