Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPA & JWT でWeb アプリケーションを作る
Search
Shunta Saito
August 28, 2019
Programming
0
220
SPA & JWT でWeb アプリケーションを作る
Node.jsなAPIサーバとReactを用いたかんたんなSPAを、Fetch API & JWTを使いつつ繋ぎこむサンプルコードを見ながら、JWTの活用方法事例をご紹介します。
Shunta Saito
August 28, 2019
Tweet
Share
More Decks by Shunta Saito
See All by Shunta Saito
Nuxt.jsの静的サイト 出力を試してみる
subuta
0
540
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
330
Tailwind CSSでいろんなUIをつくる
subuta
3
1.2k
JestとWallaby.jsで始める楽しいJavaScript testing
subuta
2
1.5k
jspmで爆速開発する
subuta
1
1.3k
Other Decks in Programming
See All in Programming
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
無関心の谷
kanayannet
0
120
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
340
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
400
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
420
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
100
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
150
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
160
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
150
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
120
Blueskyのプラグインを作ってみた
hakkadaikon
1
390
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Producing Creativity
orderedlist
PRO
346
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
A better future with KSS
kneath
239
17k
Designing for Performance
lara
608
69k
Visualization
eitanlees
146
16k
Become a Pro
speakerdeck
PRO
28
5.4k
BBQ
matthewcrist
89
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
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/8FC5PLFO +85 JTBO*OUFSOFUTUBOEBSE GPSDSFBUJOH+40/CBTFEBDDFTTUPLFOTUIBU BTTFSUTPNFOVNCFSPGDMBJNT
JWTͱ +40/8FC5PLFOʢδΣΠιϯɾΣϒɾτʔΫ ϯʣɺ+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༗ޮظݶ &YQJSBUJPO5JNF w JBUൃߦ࣌ *TTVFEBU
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" 4JOHMF1BHF"QQMJDBUJPO Ͱɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
ͦͷଞ ൿີݤΛ͍ͬͯΕͲ͔͜Β Ͳͷαʔό Ͱೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূใͷΓͱΓʹ͍ͯ Δɻ ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺ͳ߹ɺ +8,4
+40/8FC,FZ4FU ͱ͍͏ͷΛͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢ΔΈ͋ΔɻϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ߹ʹڧ͍ɻ +85͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓɺ "VUIʹཔΔํ͕ݱ࣮త ίεύѱ͍ 4/4ϩάΠϯɺ-%"1ೝূͱ͔ʹରԠͯ͠Δɻ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠