Tweet
Tweet

Slide 1

Slide 1 text

"OHVMBSʷ"84 $9ࣄۀຊ෦Ԭय़ಸ ϑϩϯτ஌͔ࣝΒ࢝ΊΔ αʔόʔϨε41"։ൃ

Slide 2

Slide 2 text

ࣗݾ঺հ Ԭय़ಸ $MBTTNFUIPE *OD $9#VTJOFTT%JW."%5FBN ˏ0LB)BSVOB αʔόʔαΠυαʔόʔϨε

Slide 3

Slide 3 text

ຊ೔ͷΞδΣϯμ "OHVMBSͷಛ௃ पลπʔϧɾ։ൃલͷ४උ ։ൃ࣌ͷϙΠϯτ ʲ׆༻ྫʳ%FWFMPQFST*0$"'&؅ཧը໘

Slide 4

Slide 4 text

ओͳର৅ͷํ ϑϩϯτΛ࣮૷ͨ͜͠ͱ͕ͳ͍ "OHVMBSΛ࢖ͬͨ͜ͱ͕ͳ͍ 5ZQFTDSJQUɺ΋͘͠͸+BWBTDSJQU͸෼͔Δ όοΫΤϯυ΋ϑϩϯτ΋։ൃ͍ͨ͠

Slide 5

Slide 5 text

+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά

Slide 6

Slide 6 text

"OHVMBS+4ϦϦʔε

Slide 7

Slide 7 text

"OHVMBSϦϦʔε

Slide 8

Slide 8 text

"OHVMBS+4

Slide 9

Slide 9 text

"OHVMBS+4 "OHVMBS

Slide 10

Slide 10 text

"OHVMBS+4 "OHVMBS 5ZQFTDSJQU +BWBTDSJQU ɾɾɾ ɾɾɾ

Slide 11

Slide 11 text

+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά

Slide 12

Slide 12 text

+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬ଍౓ͷϥϯΩϯά "OHVMBSͱ"OHVMBS+4͕ࠞಉ͞Ε͍ͯΔ!

Slide 13

Slide 13 text

"OHVMBS ʹ"OHVMBS͕ϦϦʔε͞Ε·ͨ͠ʂ"

Slide 14

Slide 14 text

"OHVMBS

Slide 15

Slide 15 text

"OHVMBSͷಛ௃ 5ZQFTDSJQUඪ४ ϑϧελοΫϑϨʔϜϫʔΫ ίϯϙʔωϯτࢦ޲ΞʔΩςΫνϟ ૒ํ޲όΠϯσ Οϯά "OHVMBS$-*

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

"OHVMBSͰ18" ௒؆୯ $ ng add @angular/pwa —project prj-name $ ng generate app-shell (೚ҙ)

Slide 19

Slide 19 text

"OHVMBSͰ443 αʔόʔαΠυϨϯμϦϯά "OHVMBS6OJWFSTBMΛ࢖͏ͱ؆୯ʹͰ͖Δ $ ng add @nguniversal/express-engine $ npm run dev:ssr ಺෦తʹ͸/PEF+4FYQSFTTͰ࣮ߦ͞ΕΔ

Slide 20

Slide 20 text

ϞόΠϧΞϓϦ ϞόΠϧΞϓϦ΋Ұॹʹఏڙ͢Δ৔߹͸ /BUJWF4DSJQUΛ࢖͓͏

Slide 21

Slide 21 text

/BUJWF4DSJQU

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

͓͢͢Ί૷උ ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞੒࣌ʹબ୒Մೳ -JOU&4-JOU˞ެࣜαϙʔτ͸·ͩ ϑΥʔϚολʔ1SFUUJFS

Slide 27

Slide 27 text

όοΫΤϯυ΋5ZQFTDSJQUʹ ϑϩϯτ΋όοΫΤϯυ΋5ZQFTDSJQUͰ౷Ұ͢Δ͜ͱͰ อकੑ΋։ൃޮ཰΋্͕Δ

Slide 28

Slide 28 text

ϑΥϧμߏ੒ DPSFɾɾɾೝূϞδϡʔϧ΍αʔόʔ௨৴Λߦ͏αʔϏε܈ TIBSFEɾɾɾڞ௨Ͱ࢖͏ίϯϙʔωϯτ΍σ ΟϨΫςΟϒ GFBUVSFɾɾɾ֤ը໘ͷίϯϙʔωϯτ TSDBQQ

Slide 29

Slide 29 text

3Y+4ͱ͸ʁ ϦΞΫςΟϒɾϓϩάϥϛϯά༻ͷϥΠϒϥϦ

Slide 30

Slide 30 text

SYKTΠϕϯτॲཧͷྫ Ϛ΢εΫϦοΫ͔Β0CTFSWBCMFΛ࡞੒ import { fromEvent } from ‘rxjs’; ngOnInit(): void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }

Slide 31

Slide 31 text

SYKTΠϕϯτॲཧͷྫ Ϛ΢εΫϦοΫ͔Β0CTFSWBCMFΛ࡞੒ import { fromEvent } from ‘rxjs’; ngOnInit(): void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }

Slide 32

Slide 32 text

SYKTඇಉظॲཧͷྫ 1SPNJTF͔Β0CTFSWBCMFΛ࡞੒ JNQPSU\GSPN^GSPNbSYKT DPOTUEBUBGSPN GFUDI BQJFOEQPJOU EBUBTVCTDSJCF \ OFYU SFTQPOTF \DPOTPMFMPH SFTQPOTF ^ FSSPS FSS \DPOTPMFFSSPS &SSPSFSS ^ DPNQMFUF \DPOTPMFMPH $PNQMFUFE ^ ^

Slide 33

Slide 33 text

%FWFMPQFST*0$"'&ͷ؅ཧը໘

Slide 34

Slide 34 text

%FWFMPQFST*0$"'&ͷػೳ ஫จ؅ཧ ঎඼؅ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯ؅ཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷ௥Ճɾઃఆ Ϣʔβʔݕࡧɾઃఆ "ENJOݖݶ

Slide 35

Slide 35 text

%FWFMPQFST*0$"'&ͷػೳ ஫จ؅ཧ ঎඼؅ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯ؅ཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷ௥Ճɾઃఆ Ϣʔβʔݕࡧɾઃఆ "ENJOݖݶ #SPVUFSͷ$BO"DUJWBUFΛ࢖ͬͯΞΫηε੍ޚ

Slide 36

Slide 36 text

͓͢͢Ίͷֶशࡐྉ "OHVMBSελΠϧΨΠυ 5ZQFTDSJQU%FFQ%JWF IUUQTBOHVMBSJPHVJEFTUZMFHVJEF IUUQTCBTBSBUHJUCPPLJPUZQFTDSJQU