Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Serverless SPA development starting with Angular
Search
Haruna Oka
July 03, 2020
Programming
0
3.3k
Serverless SPA development starting with Angular
フロント知識0から始めるサーバーレスSPA開発
フロントもバックエンドもフルスタックに爆速で開発していくための、Angularの使い方や勘所を解説します。
Haruna Oka
July 03, 2020
Tweet
Share
More Decks by Haruna Oka
See All by Haruna Oka
AWS AppSyncと仲良くするためのTips
okaharuna
1
160
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
5.8k
re:Growth 2020 Serverless
okaharuna
2
1.3k
EventBridgeでAWSとShopifyの統合
okaharuna
2
6k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2.1k
SPA×Auth0
okaharuna
5
2k
Fargate_Super_Introduction.pdf
okaharuna
2
3.2k
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
770
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.8k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
型で語るカタ
irof
0
760
PipeCDのプラグイン化で目指すところ
warashi
1
310
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
250
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
180
What's new in AppKit on macOS 26
1024jp
0
160
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
570
AIのメモリー
watany
7
510
テスト駆動Kaggle
isax1015
1
850
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Scaling GitHub
holman
460
140k
Building Applications with DynamoDB
mza
95
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
It's Worth the Effort
3n
185
28k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
"OHVMBSʷ"84 $9ࣄۀຊ෦Ԭय़ಸ ϑϩϯτ͔ࣝΒ࢝ΊΔ αʔόʔϨε41"։ൃ
ࣗݾհ Ԭय़ಸ $MBTTNFUIPE *OD $9#VTJOFTT%JW."%5FBN ˏ0LB)BSVOB αʔόʔαΠυαʔόʔϨε
ຊͷΞδΣϯμ "OHVMBSͷಛ पลπʔϧɾ։ൃલͷ४උ ։ൃ࣌ͷϙΠϯτ ʲ׆༻ྫʳ%FWFMPQFST*0$"'&ཧը໘
ओͳରͷํ ϑϩϯτΛ࣮ͨ͜͠ͱ͕ͳ͍ "OHVMBSΛͬͨ͜ͱ͕ͳ͍ 5ZQFTDSJQUɺ͘͠+BWBTDSJQU͔Δ όοΫΤϯυϑϩϯτ։ൃ͍ͨ͠
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά
"OHVMBS+4ϦϦʔε
"OHVMBSϦϦʔε
"OHVMBS+4
"OHVMBS+4 "OHVMBS
"OHVMBS+4 "OHVMBS 5ZQFTDSJQU +BWBTDSJQU ɾɾɾ ɾɾɾ
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά "OHVMBSͱ"OHVMBS+4͕ࠞಉ͞Ε͍ͯΔ!
"OHVMBS ʹ"OHVMBS͕ϦϦʔε͞Ε·ͨ͠ʂ"
"OHVMBS
"OHVMBSͷಛ 5ZQFTDSJQUඪ४ ϑϧελοΫϑϨʔϜϫʔΫ ίϯϙʔωϯτࢦΞʔΩςΫνϟ ํόΠϯσ Οϯά "OHVMBS$-*
OHOFX"OHVMBSΞϓϦͷ࡞ OHHίϯϙʔωϯτͷ࡞ SPVUF TFSWJDF QJQFT OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻
"OHVMBS$-*ͰͰ͖Δ͜ͱ
OHOFX"OHVMBSΞϓϦͷ࡞ OHHίϯϙʔωϯτͷ࡞ SPVUF TFSWJDF QJQFT OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻
"OHVMBS.BUFSJBM
"OHVMBSͰ18" ؆୯ $ ng add @angular/pwa —project prj-name $
ng generate app-shell (ҙ)
"OHVMBSͰ443 αʔόʔαΠυϨϯμϦϯά "OHVMBS6OJWFSTBMΛ͏ͱ؆୯ʹͰ͖Δ $ ng add @nguniversal/express-engine $ npm
run dev:ssr ෦తʹ/PEF+4FYQSFTTͰ࣮ߦ͞ΕΔ
ϞόΠϧΞϓϦ ϞόΠϧΞϓϦҰॹʹఏڙ͢Δ߹ /BUJWF4DSJQUΛ͓͏
/BUJWF4DSJQU
8&#ϗεςΟϯά (JUIVC$PEF$PNNJUΛ࿈ܞͯ͠$*$%ڥ͕࡞ΕΔ ϏϧυઃఆʹΑͬͯ"OHVMBSͷ&&ςετ࣮ߦͰ͖·͢ ΧελϜυϝΠϯઃఆՄೳ $034Λ͍͍ͨ߹$MPVE'SPOU 4ʹ͠Α͏ "NQMJGZ$POTPMFΛ͓͏
͜͜·Ͱ "OHVMBSͷجຊΘ͔͚ͬͨͲɺ ࣮ࡍͲ͏։ൃ͍͚͍͍ͯ͠ʁ
ॳظඋ ୯ମςετLBSNB &&QSPUSBDUPS -JOU54-JOU
͓͢͢Ίඋ ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞࣌ʹબՄೳ -JOU&4-JOU ϑΥʔϚολʔ1SFUUJFS
͓͢͢Ίඋ ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞࣌ʹબՄೳ -JOU&4-JOU˞ެࣜαϙʔτ·ͩ ϑΥʔϚολʔ1SFUUJFS
όοΫΤϯυ5ZQFTDSJQUʹ ϑϩϯτόοΫΤϯυ5ZQFTDSJQUͰ౷Ұ͢Δ͜ͱͰ อकੑ։ൃޮ্͕Δ
ϑΥϧμߏ DPSFɾɾɾೝূϞδϡʔϧαʔόʔ௨৴Λߦ͏αʔϏε܈ TIBSFEɾɾɾڞ௨Ͱ͏ίϯϙʔωϯτσ ΟϨΫςΟϒ GFBUVSFɾɾɾ֤ը໘ͷίϯϙʔωϯτ TSDBQQ
3Y+4ͱʁ ϦΞΫςΟϒɾϓϩάϥϛϯά༻ͷϥΠϒϥϦ
SYKTΠϕϯτॲཧͷྫ ϚεΫϦοΫ͔Β0CTFSWBCMFΛ࡞ import { fromEvent } from ‘rxjs’; ngOnInit():
void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
SYKTΠϕϯτॲཧͷྫ ϚεΫϦοΫ͔Β0CTFSWBCMFΛ࡞ import { fromEvent } from ‘rxjs’; ngOnInit():
void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
SYKTඇಉظॲཧͷྫ 1SPNJTF͔Β0CTFSWBCMFΛ࡞ JNQPSU\GSPN^GSPNbSYKT DPOTUEBUBGSPN GFUDI BQJFOEQPJOU EBUBTVCTDSJCF \
OFYU SFTQPOTF \DPOTPMFMPH SFTQPOTF ^ FSSPS FSS \DPOTPMFFSSPS &SSPS FSS ^ DPNQMFUF \DPOTPMFMPH $PNQMFUFE ^ ^
%FWFMPQFST*0$"'&ͷཧը໘
%FWFMPQFST*0$"'&ͷػೳ จཧ ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷՃɾઃఆ Ϣʔβʔݕࡧɾઃఆ
"ENJOݖݶ
%FWFMPQFST*0$"'&ͷػೳ จཧ ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷՃɾઃఆ Ϣʔβʔݕࡧɾઃఆ
"ENJOݖݶ #SPVUFSͷ$BO"DUJWBUFΛͬͯΞΫηε੍ޚ
͓͢͢Ίͷֶशࡐྉ "OHVMBSελΠϧΨΠυ 5ZQFTDSJQU%FFQ%JWF IUUQTBOHVMBSJPHVJEFTUZMFHVJEF IUUQTCBTBSBUHJUCPPLJPUZQFTDSJQU