Zenn
💨

【オブジェクト指向,is関数,リファクタリングベストプラクティス】JavaScript,Go,TypeScript, Ruby,Python

2024/05/16に公開
JavaScript
TypeScript
オブジェクト指向
リファクタリング
命名規則
tech

前回のおさらい

前回: https://zenn.dev/llc_starhacks/articles/98cd2b28eab887

  • オブジェクト指向を取り入れると: 階層構造でエンティティを表現できるのでした
    • 例 users[].followers[]
    • 例 users[].medias[].likes[]
    • 例 users[].medias[].comments[]
  • 変数名に注意！「フォローしているユーザー」は followUserではありません。
    • followUser: "ユーザーをフォローする" という動詞(関数)になります
    • プロパティ(変数)には名詞/動名詞/形容詞を使いましょう。 following, followed
    • (フォロワーはfollowerで良いでしょう。【名詞】)

出来上がり:

users[].follwoings[] = { user_id, created_at }; // 皆さんはキャメルケースで統一して下さいね

View側にロジックを書くのはもう辞めましょう

/components/ 配下にロジック書くのも論外です。

View.jsx（NG例）
// Viewコンポーネント内（NG例）
const ButtonForFollow = ({ user }) => {
  const getIsAlreadyFollowed = () => mine.followings.state.some((following) => following.user_id === user.uid);
  retrun (
    ...
    {getIsAlreadyFollowed() ? xxx : xxx}
    ...
  )

ではなくロジック用のクラスを書いてControllerとして管理しましょう。

User.js
class User {...}
    constructor() {...}
    set() {...}
    get() {...}
    update() {...}
    remove() {...}
    // メソッド名ももう少し改善できそうですね
    getIsAlreadyFollowed(user_id) {
        this.followings.some((following) => following.user_id === user_id);
    }
}

↑ロジック用エンティティクラスは以下のようなものがあるでしょう

  • User
    • 継承: Mine // 自分自身のUser。 .edit()などのメソッドがある
    • 継承: Admin // 管理者ユーザー
  • Car
  • Article
  • Building
  • Animal
    など

最適なメソッド名とは？

主語にはすでにusersやfollowingsが含まれているのです。
それを意識するとここまでシンプルになり、読みては負担なく理解できるでしょう。 【可読性】

- x: users[].followings.getIsAlreadyFollowed(mine.uid)
- △: users[].followings.getIsFollowing(mine.uid)
- o: users[].followings.has(mine.uid)

まとめ(完成形）

User.js
class User {...}
class Following {
    [this.state, this.useState] = useState([]);
    set() {...}
    get() {...}
    update() {...}
    remove() {...}
    // とてもシンプル！ オブジェクト指向の賜物です！
    static has(user_id) {
        this.state.some((following) => following.user_id === user_id);
    }
}

このようなシンプルなメソッド名はポリモーフィズムととても親和性が高いです。

Discussion