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

NestJS_meetup_atamaplus

 NestJS_meetup_atamaplus

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

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

atama plus

July 22, 2022
Tweet

More Decks by atama plus

Other Decks in Programming

Transcript

  1. ⓒ 2022 atama plus Inc. atama plusのミッション 4 新プロダクト開発でNestJSを導⼊してみた 「基礎学⼒」の習得

    「基礎学⼒」の習得 「社会でいきる⼒」の習得 学習を⼀⼈ひとり最適化し、「基礎学⼒」を最短で⾝につけ、 そのぶん増える時間で、「社会でいきる⼒」を伸ばす。 そんな新しい学びを数億⼈の⽣徒に届け、社会のまんなかから変えていきます。
  2. ⓒ 2022 atama plus Inc. アジェンダ • atama plusの技術背景 •

    プロダクト背景 • 選定⽅針 • 採⽤スタック • 採⽤理由と使ってみて • よかったこと • 苦労したこと • 全体のふりかえり 5 新プロダクト開発でNestJSを導⼊してみた
  3. ⓒ 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
  4. ⓒ 2022 atama plus Inc. プロダクト背景 • 検証のため、短期間でクイックに体験を提供する必要がある。 • 既存の複数プロダクト(atama+、オンライン模試)の体験を⼀つのアプリ

    上で提供する。 • 詳しくはzennにて • 連載:「学⼒の測定」と「学習」をつなぐプロダクトのリリースにむけ てやってきたこと 7 新プロダクト開発でNestJSを導⼊してみた
  5. ⓒ 2022 atama plus Inc. 選定⽅針 • 体験上のメリットによりフロントはReact / TypeScriptを選定済み。

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

    • NestJS / TypeScript • ORM • TypeORM • API連携 • OpenAPI + aspida • (おまけ)管理画⾯ • nestjs-tsx-views + ??? 9 新プロダクト開発でNestJSを導⼊してみた
  7. ⓒ 2022 atama plus Inc. 採⽤理由と使ってみて:フレームワーク / ⾔語 →NestJS /

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

    TypeScript • 苦労したこと • 学習コストがチョット⾼いカモシレナイ • デコレーター祭になりがち(OpenAPI、validator、etc.) • モジュールが増えてくると依存関係が複雑になり、管理が⼤変 • 次プロダクトでdependency-cruiserを試し中 • ドキュメントが⼀部カタログ的、もう少し踏み⼊った事例も知りたい場 合のリソースはあまり多くない。 • 気になり • 今回エンジンには枯れているexpressを採⽤したけど、fastifyはどうなん だろう? 11 新プロダクト開発でNestJSを導⼊してみた
  9. ⓒ 2022 atama plus Inc. 採⽤理由と使ってみて:ORM→TypeORM • 採⽤理由 • 利⽤ユーザー数が多い。

    • Django経験者が多く、厚めなORMの⽅が慣れている。 • Prismaにも惹かれたが、選定時期が2021/8頃(ver2)でまだ若⼲不安定 だったので⾒送り(もう少し遅ければ選んでたかも) • よかったこと • なんだかんだ便利(Repository簡単に利⽤できたり、transformerかませ たり) • 苦労したこと • ドキュメント読むだけだと罠が多い。issueやstack overflowなどからワ ークアラウンドを積極的に拾う必要がある。 12 新プロダクト開発でNestJSを導⼊してみた
  10. ⓒ 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を導⼊してみた
  11. ⓒ 2022 atama plus Inc. • 採⽤経緯 • ⽴ち上げ時に管理画⾯の構築に時間をかける余裕がなく、ローコストな ⽅法を模索していった。

    • nestjs-admin is dead… • AdminJSはちょうどAdminBroからの改名でドキュメントまわり崩壊 してたり、ActiveRecordパターンとの併⽤を避けたかったので⾒送 り。 • hbsはさすがにつらい。せめてReactで書いてレンダリングだけでも 欲しい→nestjs-tsx-views • 管理画⾯がどんどんリッチになり、hydrationがないと⾟い状況に... 採⽤理由と使ってみて:(おまけ)管理画⾯→nestjs-tsx-views + ??? 14 新プロダクト開発でNestJSを導⼊してみた
  12. ⓒ 2022 atama plus Inc. • 最終形 • nestjs-tsx-views +

    独⾃のhydration middleware • チームのつよつよエンジニアがカッとなって実装 • よかったこと • hydration⼊ってからはかなり快適 • サクッと画⾯を作りたい時に、同じ型を参照しながらフロントから バックまでTypeScriptで書き切れる体験が良かった。 • 苦労したこと • (hydration前)なつかしのjQueryや⽣に近いJSを書くはめになった。 • 気になり • みんな管理画⾯どうしてる? 採⽤理由と使ってみて:(おまけ)管理画⾯→nestjs-tsx-views + ??? 15 新プロダクト開発でNestJSを導⼊してみた
  13. ⓒ 2022 atama plus Inc. チームメンバーにも聞いてみた • Iさん • ⾊々揃ってるけどモジュラーなのは好感が持てる⼀⽅で、それゆえにフ

    レームワークとしてレールが敷かれてない感じの⾟さもちょこちょこあ ったかな、という感じ。 • Oさん(フロントメイン) • プロジェクトのはじめやすさがメリットかな?雑な設計でも何とかなる というか。TypeScriptだけどReactとの⽂化的な相性は良くない。 Angular好きなら良いかもしれないが、Reactだとフロントとサーバーで 頭の切り替え必要。 • Dさん • フロントもバックも全部TypeScriptになって嬉しかったです。 16 新プロダクト開発でNestJSを導⼊してみた
  14. ⓒ 2022 atama plus Inc. 全体のふりかえり • Keep • NestJSの利⽤(6⽉から作り始めたプロダクトでも採⽤中)

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