その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ʹखΛग़͞ͳ͍ • έʔεʹϚον͢Δ͔ͷ൑அΛ • ͦͷ্Ͱɺ΍ΔͳΒ͔͠Δ΂͖४උΛ • ޿͛͗ͣ͢ɺίϯτϩʔϧՄೳͳൣғͰਐΊΕ͹ා͘ͳ͍