そのSPA、本当に必要ですか？

Transcript

1. ͦͷSPAɺ ຊ౰ʹඞཁͰ͔͢ʁ Roppongi.rb #3 2017/05/31 ೋࣾ୩ ߉༎ @nishaya
2. ࣗݾ঺հ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ • (ג) Speee ϓϩδΣΫτਪਐࣨ • React͸2016೥຤ʙ
3. ࠷ۙͷ࢓ࣄ • ۈଵγεςϜ1 • API: Rails w/jsonapi-resources • Front: React/Redux 1 χϡʔεղઆ - ϥζύΠͰένένۈଵ؅ཧγεςϜɺSpeee͕಺੡ɿITpro http:/ /itpro.nikkeibp.co.jp/atcl/column/14/346926/050800960/
4. झຯͷ։ൃ • React/ReduxͰγϯηαΠβʔΛ࡞ͬ ͨ2 • ԻΛग़͍ͨ͠ͱ͍͏ڧ͍Ϟνϕʔ γϣϯ • React/Redux৯Θͣݏ͍Λࠀ෰͢Δ • ࣄલʹ΍͓͍ͬͯͨ͜ͱͰϓϩδΣ ΫτͰͷ໎͍͕ܰݮ͞Εͨ 2 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG http:/ /tech.speee.jp/entry/2017/04/06/100000
5. AGENDA • SPAʹͭΒ͍ʁ • SPA=ϑϩϯτΤϯυʁ • ͦͷSPAɺຊ౰ʹඞཁͰ͔͢ʁ • ͦΕͰ΋SPAΛ࡞ΔͳΒ • զʑ͸ԿΛ͔ͨ͠
6. SPAʹͭΒ͍ʁ • ReactΘ͔Βͳ͗͢ΔɻRedux΋ՃΘΔͱ͞Βʹ • JSXॻ͖ͨ͘ͳ͍ • σʔλϑϩʔ௥͍ͮΒ͍
7. SPA=ϑϩϯτΤϯυʁ WebΞϓϦέʔγϣϯͷϑϩϯτΤϯυͱ͍͏ΑΓ… • APIͱ࿈ܞͯ͠ಈ࡞͢ΔΫϥΠΞϯτΞϓϦέʔγϣϯ • αʔόαΠυͱ͸ҟͳΔίϯςΩετΛ࣋ͬͨผͷαʔϏε ैདྷͷϑϩϯτΤϯυͷԆ௕ͱͯ͠ɺ ಉ͡εΩϧ/ϚΠϯυηοτͰ΍Γͱ͛Δͷ͸೉͍͠ɻ
8. ͦͷSPAɺຊ౰ʹඞཁͰ͔͢ʁ SPA͕࠷దղ͔ɺཱͪࢭ·ͬͯߟ͑Δ • ͪΐͬͱUI֨޷ྑ͍ͨ͘͠ • RailsͷΤίγεςϜͷதͰReact࢖͑͹े෼ • ͍ܰؾ࣋ͪͰ΍Δͱࢮ͵ • ࠓ͸ͳΜͱ͔ಈ͘΋ͷ͕࡞Εͯ΋ɺӡ༻͍ͯ͘͠͏ͪʹࢮ͵ • ! ΍ͬͯΈ͍ͨ " ΍͍ͬͯ͘
9. ͦΕͰ΋SPAΛ࡞ΔͳΒ ࣄલʹ΍͓͖͍ͬͯͨ͜ͱ • έʔεͷݟۃΊ • ํ޲ੑ • ணखલͷ४උ
10. έʔεͷݟۃΊ SPAʹϚον͢ΔέʔεΛߟ͑Δ • APIଆʹશͯͷσʔλͱϩδοΫΛஔ͖ɺදࣔɺΠϯλϥΫγϣ ϯΛߦ͏͜ͱʹಛԽ • ෳ਺ͷϚΠΫϩαʔϏεΛ౷߹͢Δ৽͍͠αʔϏεͱͯ͠ • όοΫΤϯυͱϑϩϯτΛઈରࠞͥͨ͘ͳ͍
11. ํ޲ੑΛܾΊΔ • ࣮૷ํ਑ΛݻΊΔ • Smart/Dumb Componentͷ੾Γ෼͚ • stateͷઃܭํ਑ • ߈Ί͗͢ͳ͍ • ཧղͷ͠΍͢͞΋ޮ཰ͷ͏ͪ
12. ணखલͷ४උ • ެࣜಡΉ • best practiceΛ಄ʹೖΕΔ • ࠷௿ݶඞཁͳ΋ͷΛ஌Γɺখ࢝͘͞ΊΔ • ԿͰ΋͍͍͔ΒϓϩδΣΫτͱ͸ผʹԿ͔ಈ͘΋ͷΛ࡞Δ • ϓϩδΣΫτͰ׆͔ͤΔֶͼ͕͋Δ͸ͣ
13. զʑ͸ԿΛ͔ͨ͠ • ެࣜͷϕετϓϥΫςΟεʹ௥ै • JSON APIͷ࠾༻(jsonapi-resources) • APIͱϑϩϯτͷίϛϡχέʔγϣϯίετ࡟ݮ • API͸Ruby/RailsͰͳͯ͘΋͍͍͕ɺϝϯςφϯεੑΛॏࢹ • ϑϩϯτʹAPIଆͷresourceͱରԠͨ͠ϞσϧΛಋೖ͠ɺUI Componentͱ෼཭ • σʔλϑϩʔΛ௥͍΍͘͢
14. ·ͱΊ • ແཧͯ͠/͍ܰؾ࣋ͪͰSPAʹखΛग़͞ͳ͍ • έʔεʹϚον͢Δ͔ͷ൑அΛ • ͦͷ্Ͱɺ΍ΔͳΒ͔͠Δ΂͖४උΛ • ޿͛͗ͣ͢ɺίϯτϩʔϧՄೳͳൣғͰਐΊΕ͹ා͘ͳ͍