Zenn
🌟

設計手順、考え方

に公開
1件
JavaScript
tech
  1. Viewを描く
  2. 読みやすいコードを書く
    3. オブジェクト指向: 主語
    4. 動詞は1~2語。.getAndPush()などは主語を分けることができる
  3. それにそったmodelを書いていく

使う側を書いていく

  • 要件定義の洗い出し
  • グルーピングしたくなる要因がでる
    • 同じ処理(数行程度以上の塊)の発見
    • ファットになってきて、関数内の処理が見分けがつかない(=依存関係がわからない)

グルーピングしたくなる要因がでてきたあたりで、
グルーピング(ライブラリ側)を書いていく。

ライブラリ側は汎用的に書かないといけないので、

  • 主語になるエンティティは慎重に選ぶ必要がある(特に単数形と複数形)
  • 使う側の要件の変更をする場合がある

データフェッチ機能: fetch問題をライブラリで解決

  • 子孫データをfetchするタイミング

    • 都度パターン: 子孫componentを開く度にfetchする。初期読み込みコストが低い。
    • 初期パターン: 初期読み込みコストが高い。

  • N+1問題: 条件をつける, サブコレクションに対する一括クエリで解決か？

  • インスタンスでsetStateを持っていくと便利（編集とか）=> set時は通信してthenでルートモデルを書き換えればいいのでは？それを必要な(たぶんルート)コンポーネントでsetState。

  • インスタンスにsetStateいれると配列のときにuseStateがn個必要

  • ルートモデル: どこからでもアクセスできる。各コンポーネントでロード。set時は通信してthenでルートモデルを書き換えればいいのでは？それを必要な(たぶんルート)コンポーネントでsetState。

    • App.mine
    • Page.users
    • Page.user

  • useStateとは: stateをもとにsetStateで再描画させるためのシステム。それだけ。

    • stateはいじれない。再描画を実行するsetStateの引数に更新値をいれる。
    • そのコンポーネント名では？: App, setApp

React

SWR

  • URLは変わらないけどトークンなどで結果が変わる場合の対処

https://qiita.com/hakshu/items/3f2810bfff751b38c612#key-について

React Model: 状態管理ライブラリで解決

  • グローバルに(user, mine, usersなどの)ルートモデルを置きたい
  • それを各コンポーネントが自由に更新、読み込みしたい。
  • setXxxxがない。あってもルートのsetXxxxを更新するのは高負荷な気がする。
  • Thumbnail.tsなどクラスファイルをmodel/配下におきたい。

参考

  • 階層型オブジェクトを狙っててよい！

https://befool.co.jp/blog/8823-scholar/use-model-on-react/

Jotai

importの順番

  • 依存関係順, そのあとa~Z順。
  • 依存度が少ないほうが上。

Tips

  if (room === undefined)
    return;
  const { trigger, isMutating } = useSWRMutation(room ? `/rooms/${room.id}/contents?orderBy=[["created_at"]]` : null, (path, { arg }) => arg());
  • useSWRMutationの前にif文おいてもダイジョーブ♡
  • ~useSWRの前にif文おいてもダイジョーブ♡~ ウソ♡
  if (SWRcontents.isLoading || SWRcontents.data.length === 0)
    return;

  const SWRuser = useSWR(mine ? `/users/${room.getAnotherUserId()}` : null);

Discussion

llc_starhacksllc_starhacks

useXxxxx().then(onSuccess).catch(onFail);

をどうしてもやりたかった。が、



const then = (onSuccess) => {
  const SWR: any = useSWR(key, {
    onSuccess,
    onError: (a, b, c) => {
      console.error(a, b, c);
      throw a;
    },
  });

  const { trigger, isMutating } = useSWRMutation(key, (path, { arg }: any) => arg());
  SWR.trigger = trigger;
  SWR.isMutating = isMutating;

  return {
    SWR
  }
};

export const useSWR_ = (key: string) => {
  return {
    then: (onSuccess) => then(key, onSuccess),
    SWR,
  }
}

▲
useXxxxx() で useSWRを実行すると onSuccessが拾えないし
then(onSuccess) で useSWRを実行すると useXxxxx() 単体では何もしなくなってしまう。

目標

  • useXxxxx() で 通信を開始し
  • thenでその結果を拾いcallbackを実行する