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

⾃⼰紹介 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

atama plus

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

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

ⓒ 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

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

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

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

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

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

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

ⓒ 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を導⼊してみた

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

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

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

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

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

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