Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Serverless SPA development starting with Angular
Haruna Oka
July 03, 2020
Programming
0
2.6k
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
re:Growth 2020 Serverless
okaharuna
2
930
EventBridgeでAWSとShopifyの統合
okaharuna
2
3.5k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
1.3k
SPA×Auth0
okaharuna
5
1.6k
reGrowth2018-oka.pdf
okaharuna
0
390
Fargate_Super_Introduction.pdf
okaharuna
2
2.5k
Other Decks in Programming
See All in Programming
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
560
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
390
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
io22 extended What's new in app performance
veronikapj
0
350
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.3k
Haskellでオブジェクト指向プログラミング
koheisakata
0
130
Android Compose Component - mapping.
taehwandev
0
140
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
React Nativeアプリを DDDで開発している話
nihemak
0
160
シェーダー氷山発掘記
logilabo
0
150
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Debugging Ruby Performance
tmm1
65
10k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
Robots, Beer and Maslow
schacon
152
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Designing for Performance
lara
597
63k
Building an army of robots
kneath
299
40k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.5k
Code Review Best Practice
trishagee
43
9.3k
A better future with KSS
kneath
225
15k
KATA
mclloyd
7
8.7k
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