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

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

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

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

JWTͱ͸ +40/
8FC
5PLFO
+85
JT
BO
*OUFSOFU
TUBOEBSE
GPS
DSFBUJOH
+40/CBTFE
BDDFTT
UPLFOT
UIBU
BTTFSU
TPNF
OVNCFS
PG
DMBJNT 

JWTͱ͸ +40/
8FC
5PLFOʢδΣΠιϯɾ΢ΣϒɾτʔΫ ϯʣ͸ɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४
3'$

Ͱ͋Δɻ ུশ͸+85ɻ 

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σίʔυ͢Ε ͹த਎͸ݟ͑Δɻ 

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

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

JWTͷར༻(ϖΠϩʔυ) +85ʹ͸೚ҙͷσʔλ ྫ
VTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ΋ଘࡏ͠·͢ɻҎԼɺྫɻ
w JTT

ൃߦऀ *TTVFS
w FYQ

༗ޮظݶ &YQJSBUJPO
5JNF
w JBU

ൃߦ೔࣌ *TTVFE
BU 

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

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

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

JWTͷ࣮૷ྫ(Node.js + SPA) σϞ
IUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
 
 
+85͸͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ͸௨ৗ௨Γ ࠓճ͸FNBJMQBTTXPSE ߦ͏ɻ

Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱͸"1*ʹ౉͞Εͨ +85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ

41" 4JOHMF
1BHF
"QQMJDBUJPO Ͱ͸ɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ 

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

ͦͷଞ 
ൿີݤΛ஌͍ͬͯΕ͹Ͳ͔͜Β Ͳͷαʔό Ͱ΋ೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূ৘ใͷ΍ΓͱΓʹ͸޲͍ͯ Δɻ

୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺഑ͳ৔߹͸ɺ +8,4 +40/
8FC
,FZ
4FU ͱ͍͏ͷΛ࢖ͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢Δ࢓૊Έ΋͋Δɻ

ϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ৔߹ʹڧ͍ɻ

+85࢖͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓ͸ɺ "VUIʹཔΔํ͕ݱ࣮త ίεύ͸΍΍ѱ͍



4/4ϩάΠϯ΍ɺ-%"1ೝূͱ͔ʹ΋ରԠͯ͠Δɻ 

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