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ͷ࣮ྫ /PEFKT41"
Slide 4
Slide 4 text
࣍
w +85ͱ
w +85ͷར༻
w +85ͷ࣮ྫ /PEFKT41"
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ͷ࣮ྫ /PEFKT41"
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ͷ࣮ྫ /PEFKT41"
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ͷ࣮ྫ /PEFKT41"
Slide 16
Slide 16 text
ͦͷଞ
ൿີݤΛ͍ͬͯΕͲ͔͜Β Ͳͷαʔό
Ͱೝূ͕
ग़དྷΔͷͰɺαʔόؒͰͷೝূใͷΓͱΓʹ͍ͯ
Δɻ
୯Ұͷݤ ൿີݤ
Ͱͷೝূͩͱ৺ͳ߹ɺ
+8,4 +40/8FC,FZ4FU
ͱ͍͏ͷΛͬͯɺݤΛ
SPUBUF ೖΕସ͑
͢ΔΈ͋ΔɻϋοΩϯάͳͲ
Ͱݤ͕࿙Εͨ߹ʹڧ͍ɻ
+85͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓɺ
"VUIʹཔΔํ͕ݱ࣮త ίεύѱ͍
4/4ϩάΠϯɺ-%"1ೝূͱ͔ʹରԠͯ͠Δɻ
Slide 17
Slide 17 text
͝੩ௌ͋Γ͕ͱ͏͟͝
͍·ͨ͠