NestJS_meetup_atamaplus

NestJS meetup Online #3にて、atama plus・WEBエンジニアの久米が登壇しました。

▼開発チームの情報発信リンク集
https://linktr.ee/atama_plus_dev

Transcript

1. 新プロダクト開発で
   NestJSを導⼊してみた
   Wataru Kume / kumewata
   2022.07.22
   

   View Slide

2. ⾃⼰紹介
   atama plus株式会社
   Product Engineer
   NestJS歴 1年弱
   とり@wataridori_k
   すき：バスケ、カレー、Podcast、クラフトビール、将棋
   W a t a r u K u m e /
   K u m e w a t a
   2
   

   View Slide

3. atama plus
   

   View Slide

4. ⓒ 2022 atama plus Inc.
   atama plusのミッション
   4
   新プロダクト開発でNestJSを導⼊してみた
   「基礎学⼒」の習得
   「基礎学⼒」の習得 「社会でいきる⼒」の習得
   学習を⼀⼈ひとり最適化し、「基礎学⼒」を最短で⾝につけ、
   そのぶん増える時間で、「社会でいきる⼒」を伸ばす。
   そんな新しい学びを数億⼈の⽣徒に届け、社会のまんなかから変えていきます。
   

   View Slide

5. ⓒ 2022 atama plus Inc.
   アジェンダ
   • atama plusの技術背景
   • プロダクト背景
   • 選定⽅針
   • 採⽤スタック
   • 採⽤理由と使ってみて
   • よかったこと
   • 苦労したこと
   • 全体のふりかえり
   5
   新プロダクト開発でNestJSを導⼊してみた
   

   View Slide

6. ⓒ 2022 atama plus Inc.
   atama plusの技術背景：プロダクトと採⽤技術
   6
   新プロダクト開発でNestJSを導⼊してみた
   安定感や開発スピードを重視した開発環境を構築しています。事業や開発組織の変化に合わせて、適宜最適化します
   。
   技術選定のコンセプト
   Webエンジニア全員が、アプリとサーバの
   両⽅に携わる体制に適している
   安定感や開発スピードを重視し、
   よいプロダクトを早く届けるのに適している
   Contents ⼊稿ツール*
   Tools & Services
   *atama＋の教材コンテンツは、⼊稿ツールを含め全て⾃社で開発しています。
   React SPA の技術選定
   で考えたこと
   Case
   frontend
   backend
   Data/Infra
   →
   ※刷新中
   オンライン模試
   **
   atama＋ / atama＋
   COACH
   atama＋ PORTAL
   Cloud Functions
   

   View Slide

7. ⓒ 2022 atama plus Inc.
   プロダクト背景
   • 検証のため、短期間でクイックに体験を提供する必要がある。
   • 既存の複数プロダクト（atama＋、オンライン模試）の体験を⼀つのアプリ
   上で提供する。
   • 詳しくはzennにて
   • 連載：「学⼒の測定」と「学習」をつなぐプロダクトのリリースにむけ
   てやってきたこと
   7
   新プロダクト開発でNestJSを導⼊してみた
   

   View Slide

8. ⓒ 2022 atama plus Inc.
   選定⽅針
   • 体験上のメリットによりフロントはReact / TypeScriptを選定済み。
   • チームメンバーがフロント / バック両⽅を担当するため、⾔語を統⼀すると
   スイッチングコストを抑えられそう（TypeScriptは普段から利⽤している）
   。
   • Djangoのようなフルスタックのフレームワークに乗りたい。
   • ノウハウのあるRESTful APIにしつつ、型安全なクライアントを使いたい。
   • チームメンバーが気持ちよく開発できるか。
   8
   新プロダクト開発でNestJSを導⼊してみた
   

   View Slide

9. ⓒ 2022 atama plus Inc.
   採⽤スタック：こうなった
   • フレームワーク / ⾔語
   • NestJS / TypeScript
   • ORM
   • TypeORM
   • API連携
   • OpenAPI + aspida
   • （おまけ）管理画⾯
   • nestjs-tsx-views + ???
   9
   新プロダクト開発でNestJSを導⼊してみた
   

   View Slide

10. ⓒ 2022 atama plus Inc.
    採⽤理由と使ってみて：フレームワーク / ⾔語 →NestJS / TypeScript
    • 採⽤理由
    • 選定⽅針ベースで触ってみて、ニーズをひと通り満たしていた。
    • よかったこと
    • Nodeのベストプラクティスに添いやすい
    • “Tao of Node - Design, Architecture & Best Practices” ⽇本語翻訳
    • ドキュメントが充実していて、アクセシビリティも良い。
    • DIと依存モジュールの明⽂化はやはり便利
    • TypeScriptなこともあり、コードの再構成（モジュールの切り出しや移
    動）がかなりスムーズ
    10
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

11. ⓒ 2022 atama plus Inc.
    採⽤理由と使ってみて：フレームワーク / ⾔語 →NestJS / TypeScript
    • 苦労したこと
    • 学習コストがﾁｮｯﾄ⾼いｶﾓｼﾚﾅｲ
    • デコレーター祭になりがち（OpenAPI、validator、etc.）
    • モジュールが増えてくると依存関係が複雑になり、管理が⼤変
    • 次プロダクトでdependency-cruiserを試し中
    • ドキュメントが⼀部カタログ的、もう少し踏み⼊った事例も知りたい場
    合のリソースはあまり多くない。
    • 気になり
    • 今回エンジンには枯れているexpressを採⽤したけど、fastifyはどうなん
    だろう？
    11
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

12. ⓒ 2022 atama plus Inc.
    採⽤理由と使ってみて：ORM→TypeORM
    • 採⽤理由
    • 利⽤ユーザー数が多い。
    • Django経験者が多く、厚めなORMの⽅が慣れている。
    • Prismaにも惹かれたが、選定時期が2021/8頃（ver2）でまだ若⼲不安定
    だったので⾒送り（もう少し遅ければ選んでたかも）
    • よかったこと
    • なんだかんだ便利（Repository簡単に利⽤できたり、transformerかませ
    たり）
    • 苦労したこと
    • ドキュメント読むだけだと罠が多い。issueやstack overflowなどからワ
    ークアラウンドを積極的に拾う必要がある。
    12
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

13. ⓒ 2022 atama plus Inc.
    採⽤理由と使ってみて：API連携→OpenAPI + aspida
    • 採⽤理由
    • 型安全なクライアントを利⽤できる。
    • スキーマファーストな開発によりフロント / バックで並⾏開発できる。
    • よかったこと
    • ドキュメントが充実していて利⽤に迷わなかった。
    • ローカル開発でバックエンド側のコード変更検知→API定義を再⽣成する
    ことでストレスレスで開発できた（frourioの体験を拝借）。
    • サーバー間（NestJS<->Django）でも型安全なAPI連携を実現できた。
    • 苦労したこと
    • aspida/SWRのキャッシュ管理
    • Provide .esm.js and .mjs files with @aspida/swr
    13
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

14. ⓒ 2022 atama plus Inc.
    • 採⽤経緯
    • ⽴ち上げ時に管理画⾯の構築に時間をかける余裕がなく、ローコストな
    ⽅法を模索していった。
    • nestjs-admin is dead…
    • AdminJSはちょうどAdminBroからの改名でドキュメントまわり崩壊
    してたり、ActiveRecordパターンとの併⽤を避けたかったので⾒送
    り。
    • hbsはさすがにつらい。せめてReactで書いてレンダリングだけでも
    欲しい→nestjs-tsx-views
    • 管理画⾯がどんどんリッチになり、hydrationがないと⾟い状況に...
    採⽤理由と使ってみて：（おまけ）管理画⾯→nestjs-tsx-views + ???
    14
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

15. ⓒ 2022 atama plus Inc.
    • 最終形
    • nestjs-tsx-views + 独⾃のhydration middleware
    • チームのつよつよエンジニアがｶｯとなって実装
    • よかったこと
    • hydration⼊ってからはかなり快適
    • サクッと画⾯を作りたい時に、同じ型を参照しながらフロントから
    バックまでTypeScriptで書き切れる体験が良かった。
    • 苦労したこと
    • （hydration前）なつかしのjQueryや⽣に近いJSを書くはめになった。
    • 気になり
    • みんな管理画⾯どうしてる？
    採⽤理由と使ってみて：（おまけ）管理画⾯→nestjs-tsx-views + ???
    15
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

16. ⓒ 2022 atama plus Inc.
    チームメンバーにも聞いてみた
    • Iさん
    • ⾊々揃ってるけどモジュラーなのは好感が持てる⼀⽅で、それゆえにフ
    レームワークとしてレールが敷かれてない感じの⾟さもちょこちょこあ
    ったかな、という感じ。
    • Oさん（フロントメイン）
    • プロジェクトのはじめやすさがメリットかな？雑な設計でも何とかなる
    というか。TypeScriptだけどReactとの⽂化的な相性は良くない。
    Angular好きなら良いかもしれないが、Reactだとフロントとサーバーで
    頭の切り替え必要。
    • Dさん
    • フロントもバックも全部TypeScriptになって嬉しかったです。
    16
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

17. ⓒ 2022 atama plus Inc.
    全体のふりかえり
    • Keep
    • NestJSの利⽤（6⽉から作り始めたプロダクトでも採⽤中）
    • スキーマ駆動で型安全なAPI開発
    • Problem
    • 低凝集な設計でモジュール内＆モジュール間の依存が複雑になった。
    • 管理画⾯のユースケースまで⾒越して選定を⾏わなかった。
    • Try
    • そもそもの設計⽅針を⾒直す＆dependency-cruiserで明⽰的に境界を付
    ける。
    • ユーザー利⽤開始後の検証が⾏われるかまで認識合わせた上で開発を進
    める。
    17
    新プロダクト開発でNestJSを導⼊してみた
    

    View Slide

18. ⓒ 2022 atama plus Inc.
    おしまい
    18
    新プロダクト開発でNestJSを導⼊してみた
    Happy Hacking with NestJS!
    

    View Slide

19. もっと知りたい⽅はこちら
    @atamaplus_dev
    プロダクト開発に関する情報発信を⾒る atama plusのニュースレターに登録
    

    View Slide