Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fce89ba6c42ee675dba62e4b127a7290?s=47 nishaya
May 31, 2017

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

Fce89ba6c42ee675dba62e4b127a7290?s=128

nishaya

May 31, 2017
Tweet

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