👻

オブジェクト指向に階層構造を取り入れる #複数型クラス

2024/08/04に公開

JavaScript

階層型オブジェクト #シンプル！

エンティティ(実体)を .(=チェーン)で繋ぐだけ。

『階層型オブジェクト』と名付けている。

ツリー状のオブジェクトの例:

user.name: string
user.posts[n].likes[n].createdBy: User Aさんの投稿にイイネしたUserさん
user.posts[n].comments[n].likes.length: number コメントにイイネされた数
user.posts[n].comments[n].likes.push({ createdBy: User })
user.posts[n].comments.create({ title, body, by }: Comment)
user.posts[n].comments.fetch(): Promise<Array<Comment>>
user.posts[n].comments[n].update({ title, body })
user.posts[n].comments[n].medias[n].delete()

ディレクトリ構成 #シンプル！

推奨ディレクトリ: src/model/
- 例: User.ts
- 例: Media.ts
- 例: Comment.ts
- 例: Thumbnail.ts
- 例: Room.ts
- 例: Member.ts
- 例: List.ts
- 例: Content.ts

API (CRUD) 通信も思いのまま #シンプル！

上の例では、さらにAPI通信のCRUDを備えた抽象クラス(例: Document API CRUD)からextendsすればすべてのエンティティがCRUD通信を行えるようになる。 #拡張性

Comment extends CRUD {
  ...

Thumbnail extends CRUD {
  ...

User extends CRUD {
  ...

使う側 #シンプル！

// 更新
user.posts[n].comments[n].update({ title, body })
// 削除
user.delete();

// 関数型プログラミングも使える
users.filter(...)
users.find(...)

// Arrayを拡張してこんなことも
users.filter(...).orderBy('createdAt', 'desc')
user.posts[n].comments.filter(...).orderBy('createdAt')

複数型クラス

複数型エンティティも、Arrayからextendsすることで、

class Users extends Array {

以下のようにメソッドを拡張でき、あんなことやこんなこともスッキリ🚽簡潔きれい🧽

例:

users.orderBy('created_at', 'desc')
users.filterOnlyInfluencer().delete() #デスノート

さらに、

▼こんな複雑なコードを隠蔽しておくと

Rooms.ts

class Rooms extends Array {
  has(user: User): boolean {
    return this.some((room) => room.members.some((member) => member.id === user.id));
  }

↓使い回しが良い（if文にペタンと貼れる）

if( rooms.has(mine) && ...) {...}
rooms.has(you) ? xxx : xxx;

※someはビルドイン関数です: Array.prototype.some(): boolean