Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serverless SPA development starting with Angular

Serverless SPA development starting with Angular

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

C48e299db326cf1bf10cf2d0ab399f10?s=128

Haruna Oka

July 03, 2020
Tweet

More Decks by Haruna Oka

Other Decks in Programming

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.  OHOFX"OHVMBSΞϓϦͷ࡞੒ OHHίϯϙʔωϯτͷ࡞੒ SPVUF TFSWJDF QJQFT  OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻

    "OHVMBS$-*ͰͰ͖Δ͜ͱ
  17.  OHOFX"OHVMBSΞϓϦͷ࡞੒ OHHίϯϙʔωϯτͷ࡞੒ SPVUF TFSWJDF QJQFT  OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻

    "OHVMBS.BUFSJBM
  18.  "OHVMBSͰ18" ௒؆୯ $ ng add @angular/pwa —project prj-name $

    ng generate app-shell (೚ҙ)
  19.  "OHVMBSͰ443 αʔόʔαΠυϨϯμϦϯά "OHVMBS6OJWFSTBMΛ࢖͏ͱ؆୯ʹͰ͖Δ $ ng add @nguniversal/express-engine $ npm

    run dev:ssr ಺෦తʹ͸/PEF+4FYQSFTTͰ࣮ߦ͞ΕΔ
  20.  ϞόΠϧΞϓϦ ϞόΠϧΞϓϦ΋Ұॹʹఏڙ͢Δ৔߹͸ /BUJWF4DSJQUΛ࢖͓͏

  21.  /BUJWF4DSJQU

  22.  8&#ϗεςΟϯά (JUIVC΍$PEF$PNNJUΛ࿈ܞͯ͠$*$%؀ڥ͕࡞ΕΔ ϏϧυઃఆʹΑͬͯ"OHVMBSͷ&&ςετ΋࣮ߦͰ͖·͢ ΧελϜυϝΠϯ΋ઃఆՄೳ $034Λ࢖͍͍ͨ৔߹͸$MPVE'SPOU 4ʹ͠Α͏ "NQMJGZ$POTPMFΛ࢖͓͏

  23. ͜͜·Ͱ "OHVMBSͷجຊ͸Θ͔͚ͬͨͲɺ ࣮ࡍͲ͏։ൃ͍͚ͯ͠͹͍͍ʁ

  24. ॳظ૷උ  ୯ମςετLBSNB &&QSPUSBDUPS -JOU54-JOU

  25. ͓͢͢Ί૷උ  ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞੒࣌ʹબ୒Մೳ  -JOU&4-JOU ϑΥʔϚολʔ1SFUUJFS

  26. ͓͢͢Ί૷උ  ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞੒࣌ʹબ୒Մೳ  -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^GSPNbSYKT DPOTUEBUBGSPN 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