Serverless SPA development starting with Angular

フロント知識0から始めるサーバーレスSPA開発
フロントもバックエンドもフルスタックに爆速で開発していくための、Angularの使い方や勘所を解説します。

Transcript

1. "OHVMBSʷ"84  $9ࣄۀຊ෦
   Ԭ
   य़ಸ ϑϩϯτ஌͔ࣝΒ࢝ΊΔ
   αʔόʔϨε41"։ൃ
2. ࣗݾ঺հ  Ԭ
   य़ಸ $MBTTNFUIPE
   *OD
   $9
   #VTJOFTT
   %JW
   
   ."%
   5FBN ˏ0LB)BSVOB αʔόʔαΠυαʔόʔϨε
3. ຊ೔ͷΞδΣϯμ 
   "OHVMBSͷಛ௃
   
   पลπʔϧɾ։ൃલͷ४උ
   
   ։ൃ࣌ͷϙΠϯτ
   
   ʲ׆༻ྫʳ%FWFMPQFST*0
   $"'&
   ؅ཧը໘
4. ओͳର৅ͷํ 
   ϑϩϯτΛ࣮૷ͨ͜͠ͱ͕ͳ͍
   
   "OHVMBSΛ࢖ͬͨ͜ͱ͕ͳ͍
   
   5ZQFTDSJQUɺ΋͘͠͸+BWBTDSJQU͸෼͔Δ
   
   όοΫΤϯυ΋ϑϩϯτ΋։ൃ͍ͨ͠
5. +4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά 
6.  
   "OHVMBS+4ϦϦʔε
7.  
   "OHVMBS
   ϦϦʔε
   
8.  "OHVMBS+4 
9.  "OHVMBS+4   "OHVMBS
10.  "OHVMBS+4   "OHVMBS 5ZQFTDSJQU +BWBTDSJQU ɾɾɾ ɾɾɾ
11. +4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά 
12. +4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά  "OHVMBSͱ"OHVMBS+4͕ࠞಉ͞Ε͍ͯΔ!
13. "OHVMBS  ʹ"OHVMBS͕ϦϦʔε͞Ε·ͨ͠ʂ"
14. "OHVMBS 
15.  "OHVMBSͷಛ௃
    5ZQFTDSJQUඪ४
    
    ϑϧελοΫϑϨʔϜϫʔΫ
    
    ίϯϙʔωϯτࢦ޲ΞʔΩςΫνϟ
    
    ૒ํ޲όΠϯσ Οϯά
    
    "OHVMBS
    $-*
16. 
    OH
    OFX
    "OHVMBSΞϓϦͷ࡞੒
    
    OH
    H
    ίϯϙʔωϯτͷ࡞੒ SPVUF
    TFSWJDF
    QJQFT
    
    OH
    TFSWF
    ϩʔΧϧαʔόʔͷىಈ
    
    OH
    UFTU
    &&ςετ
    
    OH
    MJOU
    -JOUͷద༻ "OHVMBS
    $-*ͰͰ͖Δ͜ͱ
17. 
    OH
    OFX
    "OHVMBSΞϓϦͷ࡞੒
    
    OH
    H
    ίϯϙʔωϯτͷ࡞੒ SPVUF
    TFSWJDF
    QJQFT
    
    OH
    TFSWF
    ϩʔΧϧαʔόʔͷىಈ
    
    OH
    UFTU
    &&ςετ
    
    OH
    MJOU
    -JOUͷద༻ "OHVMBS
    .BUFSJBM
18.  "OHVMBSͰ18" ௒؆୯ $ ng add @angular/pwa —project prj-name $ ng generate app-shell (೚ҙ)
19.  "OHVMBSͰ443 αʔόʔαΠυϨϯμϦϯά
    "OHVMBS
    6OJWFSTBMΛ࢖͏ͱ؆୯ʹͰ͖Δ $ ng add @nguniversal/express-engine $ npm run dev:ssr ಺෦తʹ͸/PEF+4
    FYQSFTTͰ࣮ߦ͞ΕΔ
20.  ϞόΠϧΞϓϦ ϞόΠϧΞϓϦ΋Ұॹʹఏڙ͢Δ৔߹͸
    /BUJWF4DSJQUΛ࢖͓͏
21.  /BUJWF4DSJQU
22.  8&#ϗεςΟϯά
    (JUIVC΍$PEF$PNNJUΛ࿈ܞͯ͠$*$%؀ڥ͕࡞ΕΔ
    
    ϏϧυઃఆʹΑͬͯ"OHVMBSͷ&&ςετ΋࣮ߦͰ͖·͢
    
    ΧελϜυϝΠϯ΋ઃఆՄೳ
    
    $034Λ࢖͍͍ͨ৔߹͸$MPVE'SPOU 4ʹ͠Α͏ "NQMJGZ
    $POTPMFΛ࢖͓͏
23. ͜͜·Ͱ "OHVMBSͷجຊ͸Θ͔͚ͬͨͲɺ
    ࣮ࡍͲ͏։ൃ͍͚ͯ͠͹͍͍ʁ
24. ॳظ૷උ 
    ୯ମςετ
    LBSNB
    
    
    &&
    QSPUSBDUPS
    
    -JOU
    54-JOU
25. ͓͢͢Ί૷උ 
    ୯ମςετ
    +FTU
    
    
    &&
    $ZQSFTT
    
    $44
    4BTT
    ΞϓϦ࡞੒࣌ʹબ୒Մೳ
    
    -JOU
    &4-JOU
    ϑΥʔϚολʔ
    1SFUUJFS
26. ͓͢͢Ί૷උ 
    ୯ମςετ
    +FTU
    
    &&
    $ZQSFTT
    
    $44
    4BTT
    ΞϓϦ࡞੒࣌ʹબ୒Մೳ
    
    -JOU
    &4-JOU
    ˞ެࣜαϙʔτ͸·ͩ
    ϑΥʔϚολʔ
    1SFUUJFS
27.  όοΫΤϯυ΋5ZQFTDSJQUʹ ϑϩϯτ΋όοΫΤϯυ΋5ZQFTDSJQUͰ౷Ұ͢Δ͜ͱͰ
    อकੑ΋։ൃޮ཰΋্͕Δ
28.  ϑΥϧμߏ੒
    DPSFɾɾɾೝূϞδϡʔϧ΍αʔόʔ௨৴Λߦ͏αʔϏε܈
    
    TIBSFEɾɾɾڞ௨Ͱ࢖͏ίϯϙʔωϯτ΍σ ΟϨΫςΟϒ
    
    GFBUVSFɾɾɾ֤ը໘ͷίϯϙʔωϯτ TSDBQQ
29. 3Y+4ͱ͸ʁ  ϦΞΫςΟϒɾϓϩάϥϛϯά༻ͷϥΠϒϥϦ
30.  SYKT
    Πϕϯτॲཧͷྫ Ϛ΢εΫϦοΫ͔Β0CTFSWBCMFΛ࡞੒ import { fromEvent } from ‘rxjs’; ngOnInit(): void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
31.  SYKT
    Πϕϯτॲཧͷྫ Ϛ΢εΫϦοΫ͔Β0CTFSWBCMFΛ࡞੒ import { fromEvent } from ‘rxjs’; ngOnInit(): void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
32.  SYKT
    ඇಉظॲཧͷྫ 1SPNJTF͔Β0CTFSWBCMFΛ࡞੒ JNQPSU
    \
    GSPN
    ^
    GSPN
    bSYKT
    DPOTU
    EBUB
    
    GSPN GFUDI BQJFOEQPJOU 
    EBUBTVCTDSJCF \
    
    
    OFYU SFTQPOTF
    \
    DPOTPMFMPH SFTQPOTF 
    ^
    
    
    FSSPS FSS
    \
    DPOTPMFFSSPS &SSPS
    
    
    FSS 
    ^
    
    
    DPNQMFUF
    \
    DPOTPMFMPH $PNQMFUFE 
    ^
    ^ 
33.  %FWFMPQFST*0
    $"'&ͷ؅ཧը໘
34.  %FWFMPQFST*0
    $"'&ͷػೳ
    ஫จ؅ཧ
    
    ঎඼؅ཧ
    
    ച্ूܭɾ$47ΤΫεϙʔτ
    
    Ϋʔϙϯ؅ཧ ళฮελοϑ
    ֤ηϯαʔͷઃఆ
    
    ళฮͷ௥Ճɾઃఆ
    
    Ϣʔβʔݕࡧɾઃఆ "ENJOݖݶ
35.  %FWFMPQFST*0
    $"'&ͷػೳ
    ஫จ؅ཧ
    
    ঎඼؅ཧ
    
    ച্ूܭɾ$47ΤΫεϙʔτ
    
    Ϋʔϙϯ؅ཧ ళฮελοϑ
    ֤ηϯαʔͷઃఆ
    
    ళฮͷ௥Ճɾઃఆ
    
    Ϣʔβʔݕࡧɾઃఆ "ENJOݖݶ #
    SPVUFSͷ$BO"DUJWBUFΛ࢖ͬͯΞΫηε੍ޚ
36. ͓͢͢Ίͷֶशࡐྉ 
    "OHVMBS
    ελΠϧΨΠυ
    
    
    5ZQFTDSJQU
    %FFQ
    %JWF IUUQTBOHVMBSJPHVJEFTUZMFHVJEF IUUQTCBTBSBUHJUCPPLJPUZQFTDSJQU