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、本当に必要ですか?
Search
nishaya
May 31, 2017
Technology
0
3.2k
そのSPA、本当に必要ですか?
nishaya
May 31, 2017
Tweet
Share
More Decks by nishaya
See All by nishaya
ブラウザで一緒に音楽をつくる
nishaya
0
1.8k
Webで音楽を奏でる
nishaya
0
5.8k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.1k
Other Decks in Technology
See All in Technology
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
簡単に始めるSnowflakeの機械学習
nayuts
1
190
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
18
2.6k
A Tale of Four Properties
chriscoyier
155
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Leading Effective Engineering Teams 2024
addyosmani
3
300
The Pragmatic Product Professional
lauravandoore
29
6.1k
What's in a price? How to price your products and services
michaelherold
239
11k
Side Projects
sachag
451
42k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Transcript
ͦͷSPAɺ ຊʹඞཁͰ͔͢ʁ Roppongi.rb #3 2017/05/31 ೋࣾ୩ ߉༎ @nishaya
ࣗݾհ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ •
(ג) Speee ϓϩδΣΫτਪਐࣨ • React2016ʙ
࠷ۙͷࣄ • ۈଵγεςϜ1 • API: Rails w/jsonapi-resources • Front: React/Redux
1 χϡʔεղઆ - ϥζύΠͰένένۈଵཧγεςϜɺSpeee͕ɿITpro http:/ /itpro.nikkeibp.co.jp/atcl/column/14/346926/050800960/
झຯͷ։ൃ • React/ReduxͰγϯηαΠβʔΛ࡞ͬ ͨ2 • ԻΛग़͍ͨ͠ͱ͍͏ڧ͍Ϟνϕʔ γϣϯ • React/Redux৯Θͣݏ͍Λࠀ͢Δ •
ࣄલʹ͓͍ͬͯͨ͜ͱͰϓϩδΣ ΫτͰͷ໎͍͕ܰݮ͞Εͨ 2 ReactͰγϯηαΠβʔΛ࡞ͬͨ - Speee DEVELOPER BLOG http:/ /tech.speee.jp/entry/2017/04/06/100000
AGENDA • SPAʹͭΒ͍ʁ • SPA=ϑϩϯτΤϯυʁ • ͦͷSPAɺຊʹඞཁͰ͔͢ʁ • ͦΕͰSPAΛ࡞ΔͳΒ •
զʑԿΛ͔ͨ͠
SPAʹͭΒ͍ʁ • ReactΘ͔Βͳ͗͢ΔɻReduxՃΘΔͱ͞Βʹ • JSXॻ͖ͨ͘ͳ͍ • σʔλϑϩʔ͍ͮΒ͍
SPA=ϑϩϯτΤϯυʁ WebΞϓϦέʔγϣϯͷϑϩϯτΤϯυͱ͍͏ΑΓ… • APIͱ࿈ܞͯ͠ಈ࡞͢ΔΫϥΠΞϯτΞϓϦέʔγϣϯ • αʔόαΠυͱҟͳΔίϯςΩετΛ࣋ͬͨผͷαʔϏε ैདྷͷϑϩϯτΤϯυͷԆͱͯ͠ɺ ಉ͡εΩϧ/ϚΠϯυηοτͰΓͱ͛Δͷ͍͠ɻ
ͦͷSPAɺຊʹඞཁͰ͔͢ʁ SPA͕࠷దղ͔ɺཱͪࢭ·ͬͯߟ͑Δ • ͪΐͬͱUI֨ྑ͍ͨ͘͠ • RailsͷΤίγεςϜͷதͰReact͑े • ͍ܰؾ࣋ͪͰΔͱࢮ͵ • ࠓͳΜͱ͔ಈ͘ͷ͕࡞Εͯɺӡ༻͍ͯ͘͠͏ͪʹࢮ͵
• ! ͬͯΈ͍ͨ " ͍ͬͯ͘
ͦΕͰSPAΛ࡞ΔͳΒ ࣄલʹ͓͖͍ͬͯͨ͜ͱ • έʔεͷݟۃΊ • ํੑ • ணखલͷ४උ
έʔεͷݟۃΊ SPAʹϚον͢ΔέʔεΛߟ͑Δ • APIଆʹશͯͷσʔλͱϩδοΫΛஔ͖ɺදࣔɺΠϯλϥΫγϣ ϯΛߦ͏͜ͱʹಛԽ • ෳͷϚΠΫϩαʔϏεΛ౷߹͢Δ৽͍͠αʔϏεͱͯ͠ • όοΫΤϯυͱϑϩϯτΛઈରࠞͥͨ͘ͳ͍
ํੑΛܾΊΔ • ࣮ํΛݻΊΔ • Smart/Dumb ComponentͷΓ͚ • stateͷઃܭํ • ߈Ί͗͢ͳ͍
• ཧղͷ͢͠͞ޮͷ͏ͪ
ணखલͷ४උ • ެࣜಡΉ • best practiceΛ಄ʹೖΕΔ • ࠷ݶඞཁͳͷΛΓɺখ࢝͘͞ΊΔ • ԿͰ͍͍͔ΒϓϩδΣΫτͱผʹԿ͔ಈ͘ͷΛ࡞Δ
• ϓϩδΣΫτͰ׆͔ͤΔֶͼ͕͋Δͣ
զʑԿΛ͔ͨ͠ • ެࣜͷϕετϓϥΫςΟεʹै • JSON APIͷ࠾༻(jsonapi-resources) • APIͱϑϩϯτͷίϛϡχέʔγϣϯίετݮ • APIRuby/RailsͰͳ͍͍͕ͯ͘ɺϝϯςφϯεੑΛॏࢹ
• ϑϩϯτʹAPIଆͷresourceͱରԠͨ͠ϞσϧΛಋೖ͠ɺUI Componentͱ • σʔλϑϩʔΛ͍͘͢
·ͱΊ • ແཧͯ͠/͍ܰؾ࣋ͪͰSPAʹखΛग़͞ͳ͍ • έʔεʹϚον͢Δ͔ͷஅΛ • ͦͷ্ͰɺΔͳΒ͔͠Δ͖४උΛ • ͛͗ͣ͢ɺίϯτϩʔϧՄೳͳൣғͰਐΊΕා͘ͳ͍