正しいオブジェクト指向やってると1単語になるよね、って話

まじで1単語になる！！！！

• オブジェクト指向とは: 絶対1単語に済ませられるマン！（3~4%の例外あり)

オブジェクト指向のコツ

オブジェクト指向のコツはむしろ、1単語でなかったら間違ってるかもってことに気づけることかも知れない、、。

オブジェクト指向間違ってると
togglePrivatePersonarityNum とかいう長っがいメソッドや変数はやしがち。

リファクタリング途中の.js

class Members {
  constructor(usingState, { mine, list }) {
    [this.states, this.setStates] = usingState;
    this.mine = mine;
    this.list = list;
  }
  fetch() {
    Firestore(['users', this.mine.state.id, 'lists', this.list.id, 'members']).fetch().then((docs) => {
      this.setStates(docs);
    });
  }
  push(user) {
    Firestore(['users', this.mine.state.id, 'lists', this.list.id, 'members']).push({ user_id: user.state.id }).then((docs) => {
      this.fetch();
    });
  }
  delete(user) {
    Firestore(['users', this.mine.state.id, 'lists', this.list.id, 'members', this.getUidOf(user)]).delete().then((docs) => {
      this.fetch();
    });
  }
  getUidOf(user) {
    return this.states.filter((v) => v.user_id === user.state.id)[0].id;
  }
  has(user) {
    return this.states.some((v) => v.user_id === user.state.id)
  }
}


const XListItem = ({ mine, list, user }) => {

  const members = new Members(useState([]), { mine, list });

  useEffect(() => {
    members.fetch();
  }, [list]);

  return (
  <ListItemButton dense sx={{ p: 0 }}>
    <FormControlLabel
      control={<Checkbox checked={members.has(user)} onChange={(e) => {
        e.target.checked ? members.push(user) : members.delete(user);
      }} />}
      label={list.name}
    />
  </ListItemButton>
  );
};

絶対るーる

• View側はView、ロジックはロジック(Model)にまとめる
• ロジック内にView関係を書かない。抽象化する。
  • alertやそのメッセージ内容もViewである。

サンプル2️⃣

class Editor {
  ...
  async toggle(key) {
    return new Promise((resolve) => {
      const state = { ...this.state };
      state[key] = !state[key];
      this.setState(state);
      setTimeout(() => resolve(state[key]), 100);
    });
  }
  // ↑
  // toggle_private_p_thickness_num() {
  //   if (!this.state.is_private_p_thickness_num)
  //     setTimeout(() => alert('非公開にしました。(※公開推奨)'), 100);
  //   this.setState({ ...this.state, is_private_p_thickness_num: !this.state.is_private_p_thickness_num });
  // }
  // toggle_private_p_length() {
  //   if (!this.state.is_private_p_length)
  //     setTimeout(() => alert('非公開にしました。'), 100);
  //   this.setState({ ...this.state, is_private_p_length: !this.state.is_private_p_length });
  // }
  // toggle_private_face() {
  //   if (this.state.is_private_face)
  //     setTimeout(() => alert('顔出しOKにしました。【鮮明な顔写真の設定をお願いします】'), 100);
  //   else
  //     setTimeout(() => alert('顔出しNGにしました。(※なるべく顔を出しましょう)'), 100);
  //   this.setState({ ...this.state, is_private_face: !this.state.is_private_face });
  // }
  submit() {
    if (!this.state.name)
      alert('名前を入力して下さい');
    if (!this.state.bodytype)
      alert('体型を入力して下さい');
    if (!this.state.birthday)
      alert('生年月日を入力して下さい');
    return this.user.update({
      ...

利用側.jsx

<xxxx
  onClick={() => editor.toggle('is_private_face').then((on) => {
    if (on)
      alert('顔出しNGにしました。(※なるべく顔を出しましょう)');
    else
      alert('顔出しOKにしました。【鮮明な顔写真の設定をお願いします】');
  })}
/>
<xxxx onSubmit={editor.submit} />

まとめ

とりあえずjQuery参考にしよ？