Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
NestJS で始める怖くないバックエンド開発
mikakane
December 03, 2022
Technology
0
240
NestJS で始める怖くない バックエンド開発
mikakane
December 03, 2022
Tweet
Share
More Decks by mikakane
See All by mikakane
コーディングがわからない
mikakane
0
100
Web制作現場のディレクションを支えるGitHub
mikakane
0
330
nuxt.js で plugins を作る
mikakane
0
490
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.4k
Laravel Package Development
mikakane
16
4.9k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
1.8k
フロントエンドで作る理由
mikakane
1
950
Firebase で作る Web アプリケーション
mikakane
1
120
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
660
Other Decks in Technology
See All in Technology
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
210
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
810
Pentesting Password Reset Functionality
anugrahsr
0
470
02_プロトタイピングの進め方
kouzoukaikaku
0
520
Kaggleシミュレーションコンペの動向
nagiss
0
270
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.7k
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
150
OPENLOGI Company Profile
hr01
0
12k
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
16k
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
270
PHPのimmutable arrayとは
hnw
1
160
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
300
Featured
See All Featured
The Language of Interfaces
destraynor
149
21k
How to Ace a Technical Interview
jacobian
270
21k
Ruby is Unlike a Banana
tanoku
93
9.5k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Rails Girls Zürich Keynote
gr2m
87
12k
A Tale of Four Properties
chriscoyier
149
21k
Six Lessons from altMBA
skipperchong
15
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
How to train your dragon (web standard)
notwaldorf
66
4.3k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Scaling GitHub
holman
453
140k
Gamification - CAS2011
davidbonilla
75
4.1k
Transcript
NestJS で始める怖くない バックエンド開発 PWA Night Conference 2022.12.03 tomohiro.goto
goto tomohiro accenture Application engineer @_mikakane
NestJS で始める怖くないバックエンド開発 Why NestJS ?
NestJS で始める怖くないバックエンド開発 NestJS is backend framework And, this is PWA
Night.
NestJS で始める怖くないバックエンド開発 But, Important for you. (Maybe!)
NestJS で始める怖くないバックエンド開発 Target Frontend Engineer Backend Beginner
NestJS で始める怖くないバックエンド開発 today’s topic NestJS introduction Work with Backend Work
with NestJS
NestJS Introduction
NestJS introduction NestJS Progressive Node.js Framework
NestJS introduction Next.js NestJS NuxtJS
NestJS introduction Next.js NestJS NuxtJS frontend framework (react) backend framework
(Angular Module) frontend framework (Vue)
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 を実現。アプ リケーション構造化の指針を 提供し、チーム開発における 設計指針の共有をより容易に。
NestJS introduction NestJS Tutorial
NestJS – REST Endpoint NestJS を⽤いた REST API の作成は⾮常にシンプルで簡単です。 NestJS
introduction シンプルなクラスを⽤いた Controller 実装 デコレータを利⽤した HTTP メソド定義 Array/Object を return し て JSON レスポンス⽣成
NestJS – Validation NestJS では class-validator を⽤いたバリデーション処理がサポートされています。 NestJS introduction class-validator
準拠のバリ デーション処理 Request Body / Route Param に⾃動でバリデー ションを適⽤ ルートごとの DTO を⽣成し て型付け
NestJS – Prisma Support Database を活⽤するバックエンド開発に⽋かせないORM ライブラリ対応も充実 TypeORM や Prisma
をサポートしています。 NestJS introduction Prisma / TypeORM のサ ポート Prisma の強⼒な migration & ORM 機能の活⽤
NestJS introduction Easy to Use シンプルなだけでなく豊富な機能を活⽤して、バックエンド のプロジェクトを効率的に進めることができます。 Easy to Team
事前に⽤意された NestJS の構成に沿って作業を進めること が可能で、チーム制作における設計共有も簡単です。 Easy to Design Angular Module の採⽤でモジュール化の⽅針が提供されて おり、設計のハードルが下がる。 NestJS – Progressive Style “Progressive“ をコンセプトにおく NestJS は、⼤⼩様々なチーム構成に適合する魅⼒的な要素が詰 まったバックエンドフレームワークです。
NestJS introduction とはいえ私はフロントエンドエンジニア
Work with Backend
Backend dev Style 10年前ならいざ知らず、今や Backend の開発スタイルにも様々なものがあります。 Work with Backend BaaS
FaaS Application no code low code scratch サービスとしてのバックエン ドで、クライアント部分の コード記述のみでアプリケー ションを構築できる。 簡単なスクリプトファイルを 使ってバックエンドの API を 構築できる。 フレームワークを⽤いて、イ チからコードを記述してバッ クエンドを構築する。
Backend with Framework Scratch の バックエンド開発が必要となるケースは、どのようなケースでしょうか︖ Work with Backend ⼤規模な制作を
⼤規模なアプリケーション開発では、BaaS や Faas の 導⼊よりもスクラッチ開発が好まれる傾向にあります。 保守性も考慮しつつ フレームワークを⽤いたフルスクラッチの開発は、 チーム内での設計指針の共有を進めやすく、安定的に 修正や拡張を進められる傾向にあります。 ⾼い拡張性で BaaS や FaaS の開発では、サービスベンダの制約に 直⾯するケースが多く、導⼊前の要件突合が重要な作 業になります。 逆に⾔えば、⼩規模な Web サービスの開発では、 BaaS や FaaS でも⼗分、ということ
You may think Too large for me Work with Backend
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/
Not Only Function Also Backend Work with Backend
Security Performance Maintainability Work with Backend
Start to learn Backend With NestJS Work with Backend
Work with Backend とはいえ私はフロントエンドエンジニア
Work with NestJS/Heroku
Hitch in learning Backend とはいえ、新しい概念を学び始めるのはとても億劫なものです。 NestJS introduction 新しい技術 新しい概念 インフラ知識
Backend を始めるにあたっ て、まず新しいフレームワー クで新しい書き⽅を⾝につけ る必要があり、技術選定の段 階で困難がつきまといます。 Frontend の開発が⽬に⾒え る UI を扱うのに対し、 Backend の開発は、保守性、 パフォーマンス、セキュリ ティなど⽬に⾒えない分野の 関⼼が⼤きくなります。 Backend アプリケーション を動作させるインフラの世界 は、Frontend の領域ではほ とんど触れることのない未知 の領域です。
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 のサービスです。
NestJS & Heroku They will suite for you Work with
Backend
NestJS – FullStack Framework NestJS はフルスタックのフレームワークで、Web アプリケーション構築に必要な様々な機能が備 わっています。 NestJS introduction
• TypeORM, Prisma など主要な ORM のサポート • REST API / GraphQL / Websocket サポート • Open API を利⽤したドキュメントのサポート • Jest を利⽤した⾃動テスト Express を利⽤した開発では、必要なラ イブラリを選定して導⼊する必要があり、 初学者にはハードルが⾼くなりがち。 Express を利⽤した開発では、必要な構 成をチームが⾃分で⽤意する必要があり、 ビルドやテストの構造が独⾃のスタイル に陥りがち 信頼性の⾼い Node.js ライブラリ群の活⽤で、薄くて広いフ レームワークとして、Backend 開発の様々なシーンをサポート note Concept
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
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 に変更があったので注意が必要
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
Of course, Other PaaS Available Work with Backend 「Heroku 代替」で検索
NestJS で始める怖くない バックエンド開発
NestJS で始める怖くないバックエンド開発 Why NestJS ?
NestJS で始める怖くないバックエンド開発 It’s best way to start Backend
NestJS で始める怖くないバックエンド開発 Deep Dive to Application (not only UI/Views)
Thank you.