Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.jsでClean ArchitectureとDDD

HYUNSEUNG
November 24, 2021

Next.jsでClean ArchitectureとDDD

HYUNSEUNG

November 24, 2021
Tweet

More Decks by HYUNSEUNG

Other Decks in Programming

Transcript

  1. 1 Next.jsで Clean ArchitectureとDDD Hyunseung Park / 朴賢勝 Uzabase Inc,

    Japan 2021.11.24 v12リリースを踏まえ、Next.jsの採用を考える 1
  2. 2 自己紹介 NewsPicks Expertとは - Next.jsを採用した理由 - Clean ArchitectureとDDDを採用した理由 実践

    まとめ 01 02 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 2 アジェンダ 04 03
  3. 3 @dordieux dordieux • 朴 賢勝(Park Hyunseung) • 株式会社ユーザベース 2020/11/01

    ~ ◦ 2019年新卒から中途入社 ◦ SPEEDA, NewsPicks Expertなど 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 3 自己紹介
  4. 5 5 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 5 エキスパートプラットフォーム「NewsPicks Expert」 “

    自分が持っている知識を社会のために役立てたい ” “ これまで培ってきた知見を異業種で生かしてみたい ” “ 社外の活動を通じて、知的な刺激を得たい ” エキスパートに登録いただく方々の想いはそれぞれですが、 共通していることは「専門性を生かし、貢献したい・活躍したい」という想い。 最先端ビジネス領域の第一人者や、その道30年の経験者など、 様々な業界・分野で実務経験を積んだ数多くの方々に、 「エキスパート」として登録いただいています。 私たちは「Expert First」を念頭に、 エキスパートとして登録いただく個人の方を第一に考え、 専門性を持った個人の方が活躍する機会を作り続けてまいります。 個人一人ひとりが活躍する機会を増やし、知見の流通を促すことで、 世界中の問題解決やイノベーションを加速させ、 エキスパートの皆様と一緒により良い世界をつくっていきたいと考えています。 MESSAGE
  5. 6 NewsPicks Expert 案件例(専門コメント FLASH Opinion:フラッシュオピニオン) クライアントの質問に対し、専門的な知見をお持ちであると思われる方に、メールで質問が届きます。 24時間以内に、200〜800文字で、ご回答をお願いします。 FLASH Opinionとは、クライアントの質問に対し、24時間以内にご回答いただくQ&A形式の案件です。 (FLASH

    Opinionに回答いただいたエキスパートに「インタビューもしたい」というケースも数多くございます) クライアント SPEEDAで 質問投稿 エキスパート 24時間以内に 200字〜800字で 5名以上が回答 SPEEDAで 回答確認 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 6
  6. 15 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 15 チーム構成 - チームは3~5人で構成されています -

    定期的にチームメンバーは入れ替えます - 勤務時間、技術はチームによって異なります イヌチーム ネコチーム クマチーム
  7. 24 24 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 24 Dependency Injection TypeScriptのDI

    Containerのライブラリも充実してる - Inversify - TSyringe - Typed Inject - TypeDI - 自作 ・・・
  8. 25 25 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 25 @injectable() export class

    UserUseCase { constructor(@inject("UserPort") readonly userPort: UserPort) {} async getSelf(): Promise<User> { return await this.userPort.find(); } } // DIコンテナーに追加 container.register("UserPort", { useClass: UserGateway });
  9. 32 32 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 32 export interface ExpertState

    { expertId: number; mailAddress: string; name: string; } export class Expert { constructor( readonly expertId: ExpertId, readonly mailAddress: MailAddress, readonly name: Name, ) {} } state domain
  10. 33 33 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 33 async function fetchMyPage()

    { return await container.resolve(MyPageController).get(); } const MyPage: NextPage = () => { const [profile, setProfile] = useState<Profile>({}); useEffect(() => { const run = async () => { const expert = await fetchMyPage(); setProfile({expert.id, expert.name ・・・}); }, []} }
  11. 34 34 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 34 @injectable() export class

    MyPageController { constructor(readonly expertUseCase: ExpertUseCase) {} async get(): Promise<ExpertState> { const me = await this.expertUseCase.getSelf(); return { expertId: me.expertId.value, name: me.name.value ... } } }
  12. 35 35 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 35 export interface ExpertState

    { expertId: number; mailAddress: string; name: string; } export class Expert { constructor( readonly expertId: ExpertId, readonly mailAddress: MailAddress, readonly name: Name, ) {} } state domain
  13. 37 37 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 37 domain Use Case

    Gateways Controllers API view Storage View Controller UseCase Port Presenter state
  14. 38 38 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 38 domain Use Case

    Gateways Controllers API view Storage View Controller UseCase Port Presenter state
  15. 40 40 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 40 async function fetchMyPage()

    { return await container.resolve(MyPageController).get(); } const MyPage: NextPage = () => { const [profile, setProfile] = useState<Profile>({}); useEffect(() => { const run = async () => { const expert = await fetchMyPage(); setProfile(expert); } }
  16. 41 41 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 41 const MyPage: NextPage

    = () => { const profile = useProfile(); return ( <> ・・・ </> ) } function useProfile() { const expert = await container.resolve(MyPageController).get(); return {expert.id, expert.name ・・・}; }
  17. 42 42 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 42 domain Use Case

    Gateways Controllers API view Storage View Controller UseCase Port Presenter state
  18. 44 44 【 Uzabase×forkwell 】v12リリースを踏まえ、 Next.jsの採用を考える  / 44 よかった点 - Next.jsでClean

    Architecture・DDDの構成で リリースできた - ReduxやRecoilなど使わずにstateの管理ができた - Componentでビジネスロジックを持たなくなって 綺麗になった