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
230
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
550
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
340
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
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
520
Laravel Boost 超入門
fire_arlo
2
200
MLH State of the League: 2026 Season
theycallmeswift
0
220
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.8k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
1から理解するWeb Push
dora1998
6
1.6k
Design Foundational Data Engineering Observability
sucitw
3
160
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
690
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
The Invisible Side of Design
smashingmag
301
51k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
BBQ
matthewcrist
89
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
A Tale of Four Properties
chriscoyier
160
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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ೝূͱ͔ʹରԠͯ͠Δɻ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠