ライブラリを作る思考回路
•
0 likes•75 views
ライブラリを作るに当たって、どういう思考回路で設計していったのかを、実際に作成したReactのカスタムフックの実例をもとに解説します。
Recommended
More Related Content
More from Yoichi Toyota
More from Yoichi Toyota (20)
ライブラリを作る思考回路
- 2. ライブラリを作った（ている） ▰ useMaterialUIForm ▰ ReactのカスタムHook ▰ フォーム定義を渡すとMaterial-UIで作られた フォームコンポーネントが返る ▰ フォーム入力の値はstateとして管理
- 3. 今日のお話 ▰ ライブラリの話 ▰ …はしません ▰ これがどのような思考回路で出来たか ▰ という話
- 5. 開発中 ▰ 結構大変 ▰ あれ、このままだと予定通り終わらん ▰ 開発をスピードアップしたい ▰ 他のメンバーの開発 ▰ あんまり共通ルールとか作りたくない ▰ 自然に共通化されるのがよい
- 6. どう書けたら楽になる？ ▰ フォーム作るときに考えたいこと ▰ 更新する値と利用するフォームの種類 ▰ テキスト、ラジオボタン、セレクト、 etc. ▰ バリデーション ▰ 考えたくないこと ▰ GUIの配置・整理 ▰ HTMLの書き方 ▰ Reactでの状態の管理
- 7. 考えたいことだけ表現する ▰ フォーム定義 ▰ 変数名 ▰ フォームの種類 ▰ 選択肢（セレクトボックスとか）
- 8. 考えたくないものを受け取る ▰ 考えたくないもの ▰ GUIのコンポーネント ▰ フォームで管理する値の状態
- 9. プロトタイプ ▰ 欲しいもの ▰ 入力 ▰ フォーム定義 ▰ 出力 ▰ GUIコンポーネント ▰ フォームで管理する値の状態 ▰ 隠蔽されるもの ▰ フォームで値を更新すると状態が書き変わる
- 10. 書いてみる const formDefinitions = [ { name: “title”, type: “text” }, ] const { state, comp } = useMaterialUIForm(formDefinitions) return <> { comp.name } </>
- 11. 書いてみて ▰ 悪くない ▰ formDefinition書いたらフォームがにょきにょき 生えてくるの楽しい ▰ やりたいことが増える ▰ 時間用のフォーム欲しい ▰ 必須マークつけたい ▰ etc.
- 12. 構造のテコ入れ ▰ 不満点 ▰ フォーム送信 ▰ 今回は大半がfirebaseの更新 ▰ 保存時になんか処理書きたい ▰ あんまり共通化できなさそう ▰ 保存自体の処理は毎回書きたくない ▰ これは隠すか ▰ コンポーネントのカスタマイズ ▰ 複雑であんまり使わないフォームもある ▰ All or Nothingにしたくない
- 13. インターフェイスの改善 ▰ 暗黙的処理を外部に公開する ▰ 状態管理はuseReducerを利用 ▰ reducer用のdispatch関数を外部から触れる ようにする ▰ そういや今のままだと保存できんわ
- 14. 改善した const formDefinitions = [ { name: “title”, type: “text” }, ] const { state, comp, dispatch } = useMaterialUIForm(formDefinitions) return <> { comp.name } <Button onClick={() => dispatch({ type: “create” })}> 保存 </Button> </>
- 15. さらに書いてみて ▰ 既存のものをリプレース ▰ フォームの初期値は渡したい ▰ 改善 ▰ あとはだいたいきれいに置き換えられた
- 16. 一通り作ってみて ▰ 設計のポイント ▰ 誰が幸せになるか ▰ 自分 ▰ 楽に書ける ▰ その時考えなくてもいいことを考えない ▰ プロジェクトメンバー ▰ 似たようなものを同じコードで表現出来る ▰ プロジェクト外の人が幸せになるようだったら公 開ライブラリにするとよい
- 17. 結論 ▰ ライブラリを作る理由 ▰ 幸せになる ▰ 幸せになろうとしたら結果的に出来る ▰ 幸せになれないなら作らない方がいい