[命名規則]

tryXxxxxx

"tryXxxxxxx" は if文を内包する際に便利なプレフィックスだが、
そもそもif文に依存しており、if文を除外して実行したい際にこのメソッドは使えなくなる。

つまり非推奨。

  async tryGetTokenAndPush(mine: any) {
    if (await this.isSupported()) {
      console.log('ONCE処理[mine, fcm.isGranted()]:', mine, this.isGranted());
      this.getToken().then((token) => {
        new FCMtokens([], { user: mine }).push({ token });
      });
    }
  }

CSSをファイルとして分けたほうが良い理由

• デバッガーツールで、クラス単位でスタイルを変更・検証できるから。
• クラス名を付与することになるのでHTML上でどのコンポーネントか判断しやすい。

デメリット

• MUIなどの高機能が使えない sx={{ bgcolor, m: 2 }}

• 以下SWRでだいたい解決

DB変更時の状態反映: 差分追加方式 vs 再読み込み方式

差分追加方式

• 並び順が初期ロード(読み込み)時と同じでないため、再計算してあげる必要がある
  • 並び替えがqueryで依頼できるなら尚更、無駄な処理である
• 負荷が軽い: チャットやユーザー一覧などに向いている

再読み込み方式

• 並び順が初期ロード(読み込み)時と同じ
• 負荷がかかる: チャットやユーザー一覧などは量が莫大なので避けたい

Viewとロジックはどうあるべきか？

ロジックの書き方

• コンポーネントごとにAPI通信を行う
• コンポーネントに即したロジックはそのコンポーネント内に書く
• 複数コンポーネント間でロジックを共有したい場合は /src/lib/ 配下へ

ファイルの分け方

• Drawerなどのhiddenを持つコンポーネントは、大元に定義し、内部を別ファイルにおく
• ファイルの置き場所: 同階層に配置。(Buttonなど)他の箇所でも使用したい場合、汎用性をもたせて/compoents/配下へ。

よくある複雑な要件

• ユーザープロフィールページ:
  • ユーザーの詳細
  • ユーザーが持つメディアらの表示, CRUD
    • メディアにあるコメントらの表示, CRUD
  • 編集ボタンをおしたら
    • モーダルがでてユーザー詳細の編集
• ユーザー一覧ページ
  • ユーザーがもつ「フォロワー数」「いいね数」などの表示

それぞれのコンポーネントをshowしたら、データを高速でフェッチして表示させたい

"...x" 構文で配列として引数全てを受け取れる

class Users extends Array {
  constructor(...x) {
    console.warn(x); // [1,2,3]
    super(...x);

const [members, setMembers] = useState([]);

Object.assign(members.prototype, sayHiMixin); // 生成後のArrayにmixinはできるのか？
list.addChild(members);

---

x:

View(state) <-> Model <-> DataBase 本来どうあるべきか？

本来は

• ViewはModelを、ModelはDBを監視して、常に最新の状態にしておくべき

しかし、描画していない部分(まだ表示していないチャットなど)は、負荷軽減のためにそのルールからはずれたい

• よって、Viewが表示されたら(モーダルを開くなどもそう)、キックする方式に。