$30 off During Our Annual Pro Sale. View Details »

Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7

Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7

CaT vol.7 登壇資料です。

Toro_Unit (Hiroshi Urabe)

August 17, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. Nuxt ͸ ؆୯ʹSPA࡞ΕΔ͚Ͳɺ
    ΞϓϦέʔγϣϯ͕؆୯ʹ࡞ΕΔͱ
    ࢥͬͨΒେؒҧ͍ͩͬͨ
    Toro_Unit @ CaT vol.7
    1

    View Slide

  2. $ whoami
    2

    View Slide

  3. Toro_Unit
    ઎෦ ߛ (͏Β΂ ͻΖ͠)
    • Frontend Engineer
    • WordPress Plugin and Theme
    Developer
    Github: @torounit
    Twitter: @Toro_Unit
    3

    View Slide

  4. ௕໺ݝদຊࢢ͔Β͖·ͨ͠
    • ࠷ۙɺچ։ஐֶߍߍࣷͱ͍͏໌࣏ͷ
    ݐங͕ࠃๅʹͳΓ·ͨ͠ɻ
    • 8/29~9/9 ϏʔϧࡇΓ(দຊαϚʔϑΣ
    ετ)
    • 9/20~23 ΫϥϑτϏʔϧϑΣε
    4

    View Slide

  5. ϑϩϯτΤϯυΤϯδχΞͱͯ͠
    • WebαΠτͷCSSઃܭ
    • WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST API ͰΫΠζͱ͔ͷ UI ʣ
    • ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ
    • WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣ΁ͷߩ
    ݙɻ
    • ϨΨγʔͳWEBΞϓϦͷJSվम
    • WP Meetup Map ( React + WordPress.org API )
    • etc…
    5

    View Slide

  6. ࠓ͔Β࿩͢࿩͸ฃಆهɾࣦഊஊͰ͢ɻ
    স͍ͳ͕Βฉ͍ͯ΋Β͑Ε͹͍͞Θ͍ɻ
    6

    View Slide

  7. 2018೥ ๭೔
    ͱ͋ΔελʔτΞοϓͷɺ
    • AWS Lambda + API Gateway Ͱͷ API
    • ೝূܥ͸ Cognito
    • ϑϩϯτΤϯυ͸ɺS3 ʹ഑ஔͯ͠ɺCloudFront Ͱ഑৴ɻ
    ͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲౰͢Δ͜ͱ
    ʹɻ
    7

    View Slide

  8. • APIɺόοΫΤϯυɺΠϯϑϥ͸ઌํ͕։ൃɻ
    • Bootstrap ͰͷϞοΫΞοϓͳͲ΋ଘࡏɻ
    8

    View Slide

  9. Nuxt.js + Vuex Λ࠾༻͢Δ͜ͱʹɻ
    9

    View Slide

  10. 10

    View Slide

  11. Nuxt.js
    • Next.js ʹӨڹΛड͚ͨɺVue.js ͰΞ
    ϓϦέʔγϣϯΛ࡞ΔͨΊͷϑϨʔ
    ϜϫʔΫɻ
    • Ϗϧυͷઃఆͱ͔શ෦΍ͬͯ͘ΕΔ
    • Vue Router ΋ built-in.
    • URLͷࣗಈੜ੒ɻ
    $ npx create-nuxt-app
    11

    View Slide

  12. URL ͷࣗಈੜ੒ɻ
    pages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞੒͢Δͱ
    • pages/
    • user/
    • index.vue
    • one.vue
    • index.vue
    12

    View Slide

  13. ͜ͷΑ͏ͳܗͰURL͕ੜ੒͞ΕΔɻ
    • /
    • /user/
    • /user/one
    13

    View Slide

  14. σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ౳ͱ͢Δ
    ͱɺม਺ͱͯ͠ಈతͳURL Λ࡞੒Մೳɻ
    • pages/
    • user/
    • _id.vue
    /user/1 ౳ͷಈతͳURLΛ࡞੒Մೳɻ
    this.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ
    14

    View Slide

  15. Vuex
    • Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ়
    ଶ؅ཧύλʔϯ + ϥΠϒϥϦɻ
    • Vue.js ༻ͷ Flux ࣮૷ɻ
    • Vue ͷίϯϙʔωϯτ͔Β੾Γ཭͠
    ͨঢ়ଶ؅ཧɻ
    15

    View Slide

  16. Vue.js / Vuex / Nuxt.js ͍͢͝ɻ
    16

    View Slide

  17. Vue ͕ղܾͯ͘͠ΕΔ͜ͱ
    • ૒ํ޲σʔλόΠϯσΟϯά
    • σʔλมߋ → HTML ͷϨϯμϦϯά
    • ϑΥʔϜͷมߋ → v-model ͳͲͰ؆୯ʹ஋Λऔಘ
    17

    View Slide

  18. Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ
    • WebPack ͷઃఆ ( CSS / JS / Vue SFC )
    • ϧʔςΟϯά
    • URL + Vue SFC ͱͷؔ࿈෇͚ ( page )
    18

    View Slide

  19. Vuex ͕ղܾͯ͘͠ΕΔ͜ͱ
    • ঢ়ଶΛ Vue ίϯϙʔωϯτ͔Β੾Γ཭ͯ͠ಠཱͤ͞Δɻ
    • ෳ਺ͷ Vue ίϯϙʔωϯτΛލ͍ͩঢ়ଶ؅ཧɻ
    19

    View Slide

  20. ͍͚͢͝Ͳɻ
    20

    View Slide

  21. ͍͢͝Μ͚ͩͲɻ
    • ͜ΕΒ͕ղܾ͢Δͷ͸ɺWEBΞϓϦέʔγϣϯͷ View ͷ໰
    ୊ɻ
    • Rails ΍ɺ LaravelɺDjango ౳Ͱݴ͏ MVC ͷ View ͷϨΠ
    Ϡʔɻ
    ͦΕ͚ͩɻ
    21

    View Slide

  22. case.1 ϓϩδΣΫτ΁ͷޡղ
    22

    View Slide

  23. • ϞοΫΞοϓΛ͔ͬ͜Α͘ʹͯ͠ɺAPI ͷ஋Λ Vue Ͱදࣔ͢
    Δɺͨ·ʔʹɺϑΥʔϜͰ ஋Λૹ৴͢Δ؆୯ͳ͓࢓ࣄͩͱ
    ࢥͬͨɻ
    23

    View Slide

  24. ਺ϲ݄ɾɾɾɾ
    • มߋ͞ΕΔཁ݅
    • ౰ॳͷ໘Ө΋ͳ͍
    24

    View Slide

  25. ઌํͷ API ઃܭɺۀ຿ϑϩʔઃܭɺͳͲ΋͔ͬ͠Γఆٛ͞Εͯ
    ͍ΔϞϊͩͱࢥͬͯͨɻ
    • ελʔτΞοϓ + ৽نͰαʔϏεΛ্ཱͪ͛Δ࣌఺ͰɺͦΜ
    ͳΘ͚ͳ͍ɻ
    25

    View Slide

  26. ૝ఆͱҟͳΔ࢓༷ɻ
    • ͜ͱ͹͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ
    • ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ
    • WEBαΠτ։ൃͷৗࣝ != WEBαʔϏεͷৗࣝ
    • αΠτͱαʔϏεͷҧ͍
    • ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผ෺ɻ
    26

    View Slide

  27. ڭ܇ 1.
    • ΞϓϦέʔγϣϯͷશମ૾ɺۀ຿ͷϑϩʔͳͲΛ͔ͬ͠Γͭ
    ͔ΜͰ࢓༷ܾఆɻ
    • γεςϜઃܭɺۀ຿ઃܭɺ࣮૷ίετΛߟٕ͑ͨज़બఆΛɻ
    • ͦ΋ͦ΋ JAMStack Λબ୒͢Δඞཁ͕͋Δͷʁ
    • Rails ΍ Laravel ౳ɺϊ΢ϋ΢ͷ͋Δ WEBΞϓϦέʔγϣϯ
    ϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰ͸ʁ
    27

    View Slide

  28. JAMStack ͳ։ൃ͸ɺطଘͷ WAF ʹൺ΂ͯ
    • ඇಉظॲཧ΁ͷରԠ
    • σʔλͷϥΠϑαΠΫϧ
    • ϑϩϯτΤϯυͱόοΫΤϯυͷ໾ׂͷఆٛ
    • etc...
    ౳ɺߟ͑Δ͜ͱ΋ଟ͍ɻ
    28

    View Slide

  29. case.2 Vue.js / Nuxt Ͱͷ։ൃʹ͓͚Δࣦഊ
    29

    View Slide

  30. ίϯϙʔωϯτઃܭͷࣦഊɻ
    • Έ͍ͨͳෳ਺ͷϞϊΛѻ͏ίϯϙʔωϯτ͸ɺࡶ
    ʹ࡞ΔͱɺΧΦεʹͳΓ͕ͪɻ
    • ཁૉશମ΁ͷૢ࡞ͱɺ୯ମ΁ͷૢ࡞͕ͪ͝Όͪ͝Όʹɻ
    30

    View Slide

  31. But Pattern


    {{ hoge(item) }}


    export default {
    methods: {
    hoge(item) {} // <-͜Ε͸୯ମ΁ͷૢ࡞ɻ
    }
    }
    31

    View Slide

  32. ಠཱͨ͠ίϯϙʔωϯτʹɻ





    ୯ҰͷΞΠςϜ͸ɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ
    32

    View Slide

  33. ڭ܇ 2.
    v-for ͕ग़͖ͯͨΒɺத਎Λಠཱͨ͠ίϯϙʔωϯτʹɻv-
    for ͷத਎Λɺmethod Ͱ͍͡Δͷ͸ɺݟ௨͠ͱ࠶ར༻ੑΛѱ
    ͘͢Δɻ
    • MyList.vue
    • MyListItem.vue
    ͷΑ͏ʹɺ෼཭ɻ
    33

    View Slide

  34. Nuxt ศར͚ͩͲɻ
    Կ΋ߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ං
    େԽɻ
    Կ΋ϑϨʔϜϫʔΫΛ࢖Θͳ͍ PHP Έ͍ͨʹͳΔɻ
    index.php
    edit.php
    create.php
    తͳϊϦɻ
    34

    View Slide

  35. ڭ܇ 3.
    • খ͞ͳίϯϙʔωϯτ͔Β࡞ͬͯɺͦΕΛPageͰར༻ɻ
    • σβΠϯσʔλۦಈɺը໘ۦಈͳ։ൃ͸τϥϒϧͷݩɻ
    35

    View Slide

  36. case.3 Vuex ͱͷ෇͖߹͍ํͰͷࣦഊ
    36

    View Slide

  37. ͳΜͰ΋͔ΜͰ΋ Vuex Α͘ͳ͍ɻ
    • Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ
    • Vuex ʹࡌͤΔ΂͖͸ɺϓϨθϯςʔγϣϯ૚ɻ
    • Vuex ͷ Action ͸ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ
    37

    View Slide


  38. • Vuex Store ʹͷΈೝূܥͷ৘ใΛ࣋ͨͤΔͱɺVuex Λ௨͠
    ͔ͯ͠ར༻Ͱ͖ͳ͍ɻ
    • ͳΜͰ΋͔ΜͰ΋ Vuex Λܦ༝͢Δ͸Ίʹͳͬͯݟ௨͠ͱ࠶
    ར༻ੑ͕࠷ѱʹɾɾɾɾ
    38

    View Slide

  39. ڭ܇ 4
    • ϏδωεϩδοΫɺσʔλΞΫηε૚ͳͲ͸ɺVuex ʹґଘ͠
    ͳ͍࣮૷ɻ
    • ͦΕΒΛɺVuex Action ౳͔Βݺͼग़ͯ͠࢖͏ɻ
    39

    View Slide

  40. but
    40

    View Slide

  41. Good
    41

    View Slide

  42. ͍͞͝ʹ
    ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ
    ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱ͸ݴ͍
    ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ
    ͡Δࠓ೔͜ͷࠒɻ
    • ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ
    • Clean Architecture ୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ
    ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ஌͕ࣝ໾ʹཱ͔ͭ΋ʁଟ෼ɻ
    42

    View Slide

  43. 43

    View Slide

  44. ·ͱΊ
    44

    View Slide

  45. • ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB
    αΠτɺCMSͷΧελϚΠζͷϊϦͰ΍Δͱ௧͍໨ΛݟΔɻ
    • ͦ΋ͦ΋ɺNuxt Ͱ΍Δ΂͖ʁ Λ͔ͬ͠Γߟ͑ͨબ୒Λɻ
    • ը໘ۦಈ։ൃ΁ͷ༠࿭Λஅͪ੾Δɻ
    • ԿͰ΋͔ΜͰ΋ Vuex ͸஍ཕɻϏδωεϩδοΫͱϓϨθϯςʔ
    γϣϯϩδοΫΛ੾Γ෼͚ɻ
    • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔͸վΊͯͪΌΜͱ
    ษڧ͠௚ͨ͠ํ͕ྑ͛͞ɻ
    45

    View Slide

  46. Thanks!
    Github: @torounit
    Twitter: @Toro_Unit
    Facebook: fb.me/torounit
    Blog: https://torounit.com
    46

    View Slide