Slide 1

Slide 1 text

SPA & JWT ͰWeb
 ΞϓϦέʔγϣϯΛ࡞Δ @subuta 2019/8/28

Slide 2

Slide 2 text

ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa + Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ

Slide 3

Slide 3 text

໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

Slide 4

Slide 4 text

໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

Slide 5

Slide 5 text

JWTͱ͸ +40/8FC5PLFO +85 JTBO*OUFSOFUTUBOEBSE GPSDSFBUJOH+40/CBTFEBDDFTTUPLFOTUIBU BTTFSUTPNFOVNCFSPGDMBJNT

Slide 6

Slide 6 text

JWTͱ͸ +40/8FC5PLFOʢδΣΠιϯɾ΢ΣϒɾτʔΫ ϯʣ͸ɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४ 3'$ Ͱ͋Δɻ ུশ͸+85ɻ

Slide 7

Slide 7 text

JWTͱ͸ zFZ+IC(DJ0J+*6[*/J*T*O3D$**LQ97$+FZ+TCEO;83+CL'[*KPJ:8 3UB8J-$+Q:92J0K&.K*/[L.[IH[4SB4:4&9#Y-/@P8O'43H $[DN+N.K-JVZV$4QZ)*z
 CBTFΤϯίʔυ͞Εͨ+40/จࣈྻ҉߸Խ ͞Ε͍ͯΔ༁Ͱ͸ͳ͍ͷͰɺCBTFσίʔυ͢Ε ͹த਎͸ݟ͑Δɻ

Slide 8

Slide 8 text

JWTͱ͸ +85͸ɺαʔόʔ্ʹೝূঢ়ଶΛอ࣋͠ͳ͍εςʔ τϨεͳೝূํࣜͰ͋Δɻαʔόʔ͸"VUIPSJ[BUJPO ϔομʔͰ౉͞ΕͨτʔΫϯ͕ਖ਼͍͔͚ͩ͠Λݕূ ͠ɺΞΫηεΛڐՄ͢Δɻ+85ʹ͓͍ͯ͸ɺೝূʹ ඞཁͳ৘ใ͸શͯτʔΫϯ಺ʹ֨ೲ͞Ε͓ͯΓɺ σʔλϕʔε΁ͷ໰͍߹ΘͤΛ࡟ݮ͢Δ͜ͱ͕Ͱ͖ Δɻ

Slide 9

Slide 9 text

໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

Slide 10

Slide 10 text

JWTͷར༻(ϖΠϩʔυ) +85ʹ͸೚ҙͷσʔλ ྫVTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ΋ଘࡏ͠·͢ɻҎԼɺྫɻ w JTTൃߦऀ *TTVFS  w FYQ༗ޮظݶ &YQJSBUJPO5JNF  w JBUൃߦ೔࣌ *TTVFEBU

Slide 11

Slide 11 text

JWTͷར༻(ϒϥοΫϦετ) +85͸εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ͸ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢Ε͹Մೳ͕ͩɺ ͦͷ৔߹εςʔτϨεͷར఺͸ࣦΘΕΔɻ

Slide 12

Slide 12 text

໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

Slide 13

Slide 13 text

JWTͷ࣮૷ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU

Slide 14

Slide 14 text

JWTͷ࣮૷ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
 
 +85͸͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ͸௨ৗ௨Γ ࠓճ͸FNBJMQBTTXPSE ߦ͏ɻ Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱͸"1*ʹ౉͞Εͨ +85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ 41" 4JOHMF1BHF"QQMJDBUJPO Ͱ͸ɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ

Slide 15

Slide 15 text

໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

Slide 16

Slide 16 text

ͦͷଞ ൿີݤΛ஌͍ͬͯΕ͹Ͳ͔͜Β Ͳͷαʔό Ͱ΋ೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূ৘ใͷ΍ΓͱΓʹ͸޲͍ͯ Δɻ ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺഑ͳ৔߹͸ɺ +8,4 +40/8FC,FZ4FU ͱ͍͏ͷΛ࢖ͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢Δ࢓૊Έ΋͋ΔɻϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ৔߹ʹڧ͍ɻ +85࢖͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓ͸ɺ "VUIʹཔΔํ͕ݱ࣮త ίεύ͸΍΍ѱ͍  4/4ϩάΠϯ΍ɺ-%"1ೝূͱ͔ʹ΋ରԠͯ͠Δɻ

Slide 17

Slide 17 text

͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠