私たちはなぜ SPA で開発するのか / Why you choose SPA

私たちはなぜ SPA で開発するのか / Why you choose SPA

2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

November 02, 2019
Tweet

Transcript

  1. 2.

    Takuma HANATANI (@potato4d) • Status • Senior Front-End Enginner at

    LINE Corp. • CEO at ElevenBack LLC. • Core skills • Front-End and Cloud Native Engineering • User Interface and Interaction Design • OpenSource Ecosystem • React.js / Vue.js ja document maintainer • Ex-Nuxt.js ja document maintainer • Nuxt.js beginners guide (C&R Institute) author
  2. 17.

    SPA ٕज़ͷબఆΛߏ੒͢Δ2ͭͷཁ݅ w 69ཁ݅ʹΑΔ41"બఆ w αʔϏεͷཧ૝తͳମݧΛ8FCͰ࣮ݱ͢ΔͨΊʹબͿඞཁͷ͋Δ৔߹ʹ ߦΘΕΔબఆ w %9ཁ݅ʹΑΔ41"બఆ w

    ։ൃͷମݧΛվળ͠ɺ։ൃޮ཰Λ޲্ɺ݁ՌతʹϓϩμΫτͷఏڙ଎౓Λ ૣΊΔͨΊͷબఆ νʔϜ͕ͲͪΒͷҙຯͰ41"ͷٕज़Λ࠾༻͍ͯ͠Δ͔Λ೺Ѳ͠ͳ͚Ε͹ͳΒͳ͍
  3. 27.

    ͦ΋ͦ΋ SPA ͕ඞཁ͔ʁඞཁͰ΋શ෦ඞཁ͔ʁ w ͦ΋ͦ΋41"ͷٕज़͕ඞཁ͔ʁ w ͜Ε·Ͱͷจ຺Λߟ͑Δͱ41"ͷٕज़͕ඞཁͰ͋Δ͜ͱ͸ؒҧ͍ͳ͍ w 41"ͷٕज़ʹ෇ਵ͢Δٕज़͕શͯඞཁͳͷ͔ʁ w

    ྫ͑͹3FBDU7VFKTʹৗʹ3FEVY7VFY͸ඞཁ͔ʁ w ೝূ͚ͩͳΒϦΞΫςΟϒͳPCKFDUɺϞʔμϧϑϥά੍ޚ͸QPSUBMͰ΋ w ͳΜͰ΋Ͱ͖Δ։ൃ؀ڥ͸ඞཁ͔ʁϑϧελοΫͰ͋Δඞཁ͸͋Δ͔ʁ w 41"ʹ͢Δʹͯ͠΋ɺৗʹશͯͷٕज़Λ૯ಈһ͢Δඞཁ͸ͳ͍ w ͔ͩΒͱ͍ͬͯෆ଍΋·͍ͣɻΞϯμʔ΋Φʔόʔ΋౳͘͠ಟʹͳΔ
  4. 30.

    ͦͷ SPA ຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ 2 69ཁ݅Ͱ41"Ͱ͋Δ͜ ͱ͕ඞਢʁ :&4 গͳ͘ͱ΋41"ʹ͸͢Δ 2 "KBY͕͍͚ͨͩ͠ͳͲͰ

    ͸ͳ͘ϦΞΫςΟϒΛ൐͏ :&4 2 41"ٕज़ͷ%9͕ཉ͍͠ ཻ౓ͷมߋ͕͋Δ :&4 ຊ౰͸͍Βͳ͍͔΋ʁ /0
  5. 31.

    ͦͷ SPA ຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ 2 69ཁ݅Ͱ41"Ͱ͋Δ͜ ͱ͕ඞਢʁ :&4 গͳ͘ͱ΋41"ʹ͸͢Δ 2 "KBY͕͍͚ͨͩ͠ͳͲͰ

    ͸ͳ͘ϦΞΫςΟϒΛ൐͏ :&4 2 41"ٕज़ͷ%9͕ཉ͍͠ ཻ౓ͷมߋ͕͋Δ :&4 ຊ౰͸͍Βͳ͍͔΋ʁ /0 41"ͷ౔৕͕͋Δͷʹ 41"Λ΍Βͳ͍ҙٛ͸ͳ͍
  6. 32.

    ͦͷ SPA ຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ 2 69ཁ݅Ͱ41"Ͱ͋Δ͜ ͱ͕ඞਢʁ :&4 গͳ͘ͱ΋41"ʹ͸͢Δ 2 "KBY͕͍͚ͨͩ͠ͳͲͰ

    ͸ͳ͘ϦΞΫςΟϒΛ൐͏ :&4 2 41"ٕज़ͷ%9͕ཉ͍͠ ཻ౓ͷมߋ͕͋Δ :&4 ຊ౰͸͍Βͳ͍͔΋ʁ /0 ࣮͸7BOJMMBͳΓͰղܾ Ͱ͖ΔͳΒ͠ͳ͍Ͱྑ͍ʁ 41"ͷ౔৕͕͋Δͷʹ 41"Λ΍Βͳ͍ҙٛ͸ͳ͍
  7. 33.

    ͦͷ State ؅ཧຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ :&4 ΦʔόʔΤϯδχΞϦϯά͔΋ 2 ೝূ৘ใҎ֎ͷঢ়ଶ͸ϑΥʔ Ϝ΍ϦετͰ׬݁͢Δ :&4 2

    αʔόʔͷσʔλ͕ਅͰ͋ ΓΫϥΠΞϯτ͸தؒঢ়ଶ :&4 ߴ֬཰Ͱඞཁ͔΋ 2 ࣮͸΄͍͠ͷ͸4DPQFE $44΍Ϟδϡʔϧ෼ׂ /0
  8. 34.

    ͦͷ State ؅ཧຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ :&4 ΦʔόʔΤϯδχΞϦϯά͔΋ 2 ೝূ৘ใҎ֎ͷঢ়ଶ͸ϑΥʔ Ϝ΍ϦετͰ׬݁͢Δ :&4 2

    αʔόʔͷσʔλ͕ਅͰ͋ ΓΫϥΠΞϯτ͸தؒঢ়ଶ :&4 ߴ֬཰Ͱඞཁ͔΋ 2 ࣮͸΄͍͠ͷ͸4DPQFE $44΍Ϟδϡʔϧ෼ׂ /0 ϑΥʔϜҰͭʹ3FEVYΛ ࢖ͬͯෆ޾ʹͳΔྫ
  9. 35.

    ͦͷ State ؅ཧຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ :&4 ΦʔόʔΤϯδχΞϦϯά͔΋ 2 ೝূ৘ใҎ֎ͷঢ়ଶ͸ϑΥʔ Ϝ΍ϦετͰ׬݁͢Δ :&4 2

    αʔόʔͷσʔλ͕ਅͰ͋ ΓΫϥΠΞϯτ͸தؒঢ়ଶ :&4 ߴ֬཰Ͱඞཁ͔΋ 2 ࣮͸΄͍͠ͷ͸4DPQFE $44΍Ϟδϡʔϧ෼ׂ /0 ϑΥʔϜҰͭʹ3FEVYΛ ࢖ͬͯෆ޾ʹͳΔྫ ʮΞϓϦέʔγϣϯʯͳͷʹ 4UBUF͕όϥόϥͰۤ͠Ήྫ
  10. 36.

    ͦͷ State ؅ཧຊ౰͸͍Βͳ͍͔΋ʁνϟʔτ :&4 ΦʔόʔΤϯδχΞϦϯά͔΋ 2 ೝূ৘ใҎ֎ͷঢ়ଶ͸ϑΥʔ Ϝ΍ϦετͰ׬݁͢Δ :&4 2

    αʔόʔͷσʔλ͕ਅͰ͋ ΓΫϥΠΞϯτ͸தؒঢ়ଶ :&4 ߴ֬཰Ͱඞཁ͔΋ 2 ࣮͸΄͍͠ͷ͸4DPQFE $44΍Ϟδϡʔϧ෼ׂ /0 ϑΥʔϜҰͭʹ3FEVYΛ ࢖ͬͯෆ޾ʹͳΔྫ ʮΞϓϦέʔγϣϯʯͳͷʹ 4UBUF͕όϥόϥͰۤ͠Ήྫ ༨ஊɿ 4UBUF؅ཧࣗମɺ4UPSF͕શͯΛ಺แͨ݁͠Ռ υϝΠϯɾϢʔεέʔεɾ7JFXͳͲ͕ࠞࡏ͠΍͘͢ɺ কདྷతʹ͸Ξϯμʔʹ΋ͳΓ͏Δதن໛޲͚ͷࢪࡦ
  11. 58.

    ݁ہͲ͏͢Δͷ͕͍͍ͷʁ  ݱঢ়ͷ݁࿦ͱͯ͠͸ʮ41"͸࢖͑ΔͳΒ࢖͑ʯͰؒҧ͍ͳ͍ʜʜ͸ͣ w ҰํͰ͜Ε͔Β͸Θ͔Βͳ͍ͷͰɺݱঢ়Ͱͷ࠷దղͱ৺ಘ͓ͯ͘  41"ͷٕज़͸ࠜװతͳ΋ͷ͸࢖ͬͯ΋ྑ͍͕ɺิॿతͳ΋ͷ͸ద౓ʹ w গͳ͘ͱ΋'MVYΞʔΩςΫνϟ͸ඞਢͰ͸ͳ͍ 

    কདྷͷෛ࠴ฦࡁΛݴ͍༁ʹকདྷੑΛܽ͘΋ͷ͸΋ͪΖΜɺͦͷٯ΋஫ҙ͢Δ w Ξϯμʔ͕໨ͷఢʹ͞Ε͕͕ͪͩɺΦʔόʔ΋े෼ͳةݥ৴߸ w զʑʹͰ͖Δͷ͸ɺཁ݅ͱن໛Λৗʹߟ͑ଓ͚Δ͜ͱ
  12. 59.
  13. 61.

    ·ͱΊ w ͍͕ͭ69ཁ݅Ͱ͋Γɺ͍͕ͭ%9ཁ݅Ͱ͋Δ͔ ྫ  w ύϑΥʔϚϯε΍ΠϯλϥΫγϣϯઃܭɺ18"ରԠͳͲ͸69ཁ݅ w ٕज़తଥ౰ੑ΍ϝϯςφϏϦςΟͳͲ͸%9ཁ݅ w

    41"ٕज़Λϑϧ׆༻͢΂͖͔ɺͦ͏Ͱͳ͍ͷ͔ w 69ཁ݅ͷ৔߹͸ࣄۀʹؔΘΔͨΊɺࣄۀతʹඞཁ͔Ͱ൑அ w %9ཁ݅͸ෆ଍͢ΔͱকདྷੑΛଛͳ͍ɺա౓Ͱ͋ΔͱΤΰʹͳΔͨΊ৻ॏ ͳ൑அΛඞཁͱ͢Δɻྑ͍Ԙകͷٕज़Ͱ͓஡Λ୙͢͜ͱ΋େ੾ɻ
  14. 62.

    ·ͱΊ w ٕज़બఆΛߦ͏ཱ৔ͷਓؒ͸Ͳ͏͢Δ΂͖͔ w ཁ݅ʹର͢ΔΞϯμʔΦʔόʔΤϯδχΞϦϯά͸Կ͔ w Կ͕ඞཁԽΛ໌֬ʹݴޠԽ͠ɺৗʹҙࣝ͢Δඞཁ͕͋Δ w ੒Ռ෺ͷকདྷΛ௵͞ͳ͍ͨΊʹ w

    ͦΕΒ͍͠ݴ༿ͰΤΰΛຬͨ͢ΤϯδχΞɺෆग़དྷΛޡຐԽ͢ΤϯδχΞ w όϥϯεײ֮Λഁյ͢Δ࠮ٗࢣʹৗʹ໨ΛޫΒͤɺબఆऀ͕੹೚Λ࣋ͭ