NestJS で始める怖くない バックエンド開発

Transcript

1. NestJS で始める怖くない バックエンド開発 PWA Night Conference 2022.12.03 tomohiro.goto
2. goto tomohiro accenture Application engineer @_mikakane
3. NestJS で始める怖くないバックエンド開発 Why NestJS ?
4. NestJS で始める怖くないバックエンド開発 NestJS is backend framework And, this is PWA Night.
5. NestJS で始める怖くないバックエンド開発 But, Important for you. (Maybe!)
6. NestJS で始める怖くないバックエンド開発 Target Frontend Engineer Backend Beginner
7. NestJS で始める怖くないバックエンド開発 today’s topic NestJS introduction Work with Backend Work with NestJS
8. NestJS Introduction
9. NestJS introduction NestJS Progressive Node.js Framework
10. NestJS introduction Next.js NestJS NuxtJS
11. NestJS introduction Next.js NestJS NuxtJS frontend framework (react) backend framework (Angular Module) frontend framework (Vue)
12. NestJS – Progressive Framework NestJS は Node.js の Backend フレームワークです。 All-in-one for Backend NestJS introduction out-of-box configuration Angular Module / DI REST API や GraphQL , CLI や OpenAPI など Backend 開発で必要とされる様々な シーンの開発ニーズを柔軟に サポート。 初期状態でTypeScript や Jest など、モダンな開発に必 要なツール構成が整っており、 誰にとって明瞭な構成でプロ ジェクトに取り掛かることが できます。 Angular Module を採⽤し拡 張性の⾼い DI を実現。アプ リケーション構造化の指針を 提供し、チーム開発における 設計指針の共有をより容易に。
13. NestJS introduction NestJS Tutorial
14. NestJS – REST Endpoint NestJS を⽤いた REST API の作成は⾮常にシンプルで簡単です。 NestJS introduction シンプルなクラスを⽤いた Controller 実装 デコレータを利⽤した HTTP メソド定義 Array/Object を return し て JSON レスポンス⽣成
15. NestJS – Validation NestJS では class-validator を⽤いたバリデーション処理がサポートされています。 NestJS introduction class-validator 準拠のバリ デーション処理 Request Body / Route Param に⾃動でバリデー ションを適⽤ ルートごとの DTO を⽣成し て型付け
16. NestJS – Prisma Support Database を活⽤するバックエンド開発に⽋かせないORM ライブラリ対応も充実 TypeORM や Prisma をサポートしています。 NestJS introduction Prisma / TypeORM のサ ポート Prisma の強⼒な migration & ORM 機能の活⽤
17. NestJS introduction Easy to Use シンプルなだけでなく豊富な機能を活⽤して、バックエンド のプロジェクトを効率的に進めることができます。 Easy to Team 事前に⽤意された NestJS の構成に沿って作業を進めること が可能で、チーム制作における設計共有も簡単です。 Easy to Design Angular Module の採⽤でモジュール化の⽅針が提供されて おり、設計のハードルが下がる。 NestJS – Progressive Style “Progressive“ をコンセプトにおく NestJS は、⼤⼩様々なチーム構成に適合する魅⼒的な要素が詰 まったバックエンドフレームワークです。
18. NestJS introduction とはいえ私はフロントエンドエンジニア
19. Work with Backend
20. Backend dev Style 10年前ならいざ知らず、今や Backend の開発スタイルにも様々なものがあります。 Work with Backend BaaS FaaS Application no code low code scratch サービスとしてのバックエン ドで、クライアント部分の コード記述のみでアプリケー ションを構築できる。 簡単なスクリプトファイルを 使ってバックエンドの API を 構築できる。 フレームワークを⽤いて、イ チからコードを記述してバッ クエンドを構築する。
21. Backend with Framework Scratch の バックエンド開発が必要となるケースは、どのようなケースでしょうか︖ Work with Backend ⼤規模な制作を ⼤規模なアプリケーション開発では、BaaS や Faas の 導⼊よりもスクラッチ開発が好まれる傾向にあります。 保守性も考慮しつつ フレームワークを⽤いたフルスクラッチの開発は、 チーム内での設計指針の共有を進めやすく、安定的に 修正や拡張を進められる傾向にあります。 ⾼い拡張性で BaaS や FaaS の開発では、サービスベンダの制約に 直⾯するケースが多く、導⼊前の要件突合が重要な作 業になります。 逆に⾔えば、⼩規模な Web サービスの開発では、 BaaS や FaaS でも⼗分、ということ
22. You may think Too large for me Work with Backend
23. Knowledge Backend with Framework フロントエンドエンジニアが BaaS や FaaS を利⽤する上で、バックエンドの知識はとても重要なも のになってくるでしょう。 Work with Backend Web Application において Backend の領域の概念は必 要不可⽋ BaaS や FaaS の評価に、 Backend の観点が必要とな るケースも Image by https://www.cloudflare.com/ja- jp/learning/serverless/glossary/backend-as-a-service-baas/
24. Not Only Function Also Backend Work with Backend
25. Security Performance Maintainability Work with Backend
26. Start to learn Backend With NestJS Work with Backend
27. Work with Backend とはいえ私はフロントエンドエンジニア
28. Work with NestJS/Heroku
29. Hitch in learning Backend とはいえ、新しい概念を学び始めるのはとても億劫なものです。 NestJS introduction 新しい技術 新しい概念 インフラ知識 Backend を始めるにあたっ て、まず新しいフレームワー クで新しい書き⽅を⾝につけ る必要があり、技術選定の段 階で困難がつきまといます。 Frontend の開発が⽬に⾒え る UI を扱うのに対し、 Backend の開発は、保守性、 パフォーマンス、セキュリ ティなど⽬に⾒えない分野の 関⼼が⼤きくなります。 Backend アプリケーション を動作させるインフラの世界 は、Frontend の領域ではほ とんど触れることのない未知 の領域です。
30. NestJS for Backend Beginner これから Backend の開発にチャレンジする Frontend Engineer にとって、 NestJS x Heroku はとても魅⼒的な選択肢に映るはずです。 NestJS introduction 新しい技術 新しい概念 インフラ知識 TypeScript Angular Module Heroku NestJS x Heroku NestJS のコードは、 TypeScript ベース。これま でに⾝につけた JS 知識をフ ルに活⽤できます。 Angular ベースの Module 構造 を活⽤することで、DI や保守性の⾼いコード記述の 仕組みを理解することが出来 ます。 Heroku はインフラ知識不要 で Backend の環境を⽤意で きアプリケーションる PaaS のサービスです。
31. NestJS & Heroku They will suite for you Work with Backend
32. NestJS – FullStack Framework NestJS はフルスタックのフレームワークで、Web アプリケーション構築に必要な様々な機能が備 わっています。 NestJS introduction • TypeORM, Prisma など主要な ORM のサポート • REST API / GraphQL / Websocket サポート • Open API を利⽤したドキュメントのサポート • Jest を利⽤した⾃動テスト Express を利⽤した開発では、必要なラ イブラリを選定して導⼊する必要があり、 初学者にはハードルが⾼くなりがち。 Express を利⽤した開発では、必要な構 成をチームが⾃分で⽤意する必要があり、 ビルドやテストの構造が独⾃のスタイル に陥りがち 信頼性の⾼い Node.js ライブラリ群の活⽤で、薄くて広いフ レームワークとして、Backend 開発の様々なシーンをサポート note Concept
33. NestJS – Configuration-less NestJS は多機能さに加えて、設定の簡便さと Angular Module を利⽤した明瞭なコード構成が特徴 で、チーム開発における保守性を⼤きく向上させます。 NestJS introduction • TypeScript や Jest の構築が out of box • 各種機能の利⽤も npm install & 簡単な設定のみで利⽤可 • Angular Module による構造化指針の提供 • StandAlone Mode での構造分離 TypeScript や Jest などでチーム独⾃の 設定が⼊れば⼊るほど、チームの学習コ ストが増加。 Angular Module で構造化のフォーマッ トが提供されているため、プロジェクト 個別のニーズにもモジュール単位での設 計を通じて簡潔な設計指針が共有できる。 プロジェクトの環境設定やコードの構造化の指針をフレームワー ク側が提供することで、理解しやすいコード構成を⻑期的に維持 note Concept
34. Heroku – PaaS for Enterprise Heroku は Node.js アプリケーションをデプロイ可能な PaaS のサービスです。 Computing だけでなく Postgres や Redis などの Storage サービスも簡単に構築できます。 NestJS introduction • Web GUI / CLI で構築可能なインフラ環境 • Postgres や Redis など Storage サービスの提供 • GitHubと連動した CD 環境 • Enterprise ユースに対応した豊富な機能 • Heroku Connect を利⽤した Salesforce との連携 EC2 などの IaaS 環境の整備には、様々 な⼿間と知識が必要なり、構築後のサー バ管理も⾮常に⾯倒 チーム開発で必要な CD 環境の構築や、 チームのニーズに合わせた検証環境の複 製などが簡単にできるのも Heroku の強 み インフラ知識不要の PaaS を活⽤し、アプリケーション開発者が ⾃⾝でインフラ環境を整備する開発体制を構築 note Concept 2022 冬より Pricing に変更があったので注意が必要
35. Heroku – Pricing Heroku の無料プランは 2022.winter で廃⽌となり、代わって廉価で新しいプランがリリースされる こととなりました。 NestJS introduction See also https://blog.heroku.com/new-low-cost-plans dyno postgres redis eco mini mini $5 for 1000h per month $0.007/hour up to $5/month $0.004/hour up to $3/month Heroku new Pricing アプリ単位ではなく、ア カウント単位での利⽤が 可能になった新プラン 従来の hobby プラン Postgres が、値下げし てより使いやすく。 新しくリリースされた、 Redis の廉価版プラン。 アプリケーションのデプロイと、使い捨 ての Postgres 利⽤といったユースケー スでも ⽉ $10 未満で PaaS が利⽤可能。 Usecase • Private な素振り環境に • Private Product の開発環境に note
36. Of course, Other PaaS Available Work with Backend 「Heroku 代替」で検索
37. NestJS で始める怖くない バックエンド開発
38. NestJS で始める怖くないバックエンド開発 Why NestJS ?
39. NestJS で始める怖くないバックエンド開発 It’s best way to start Backend
40. NestJS で始める怖くないバックエンド開発 Deep Dive to Application (not only UI/Views)
41. Thank you.