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

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発

Takayuki

June 25, 2019
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. Laravel + Nuxt.js + FirebaseでDXͱ
    ։ൃίετΛҙࣝͨ͠SPA։ൃ
    Laravel + Nuxt.js + FirebaseでDXͱ
    ։ൃίετΛҙࣝͨ͠SPA։ൃ

    View Slide

  2. 2 ٕज़બఆʹ͍ͭͯ
    Agenda
    3 νʔϜϏϧσΟϯάʹ͍ͭͯ
    1 ࣗݾ঺հ

    View Slide

  3. 1 ࣗݾ঺հ

    View Slide

  4. Copyright Re:Build.inc All Rights Reserved.
    ◆໊લ
    ླ໦ ޹೭(Suzuki Takayuki)
    ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
    ◆ࣗݾ঺հ
    ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ
    ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ
    ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ
    ɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛ൒೥΍ͬͨޙʹԭೄͰىۀ
    ◆झຯ
    ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
    ◆εΩϧ
    ɾPHP,
    Symfony2,CakePHP3,Laravel6
    ɾJavaScript,
    backbone.js,Angular4,Vue.js,Nuxt.js
    BDD(Ϗʔνۦಈ։ൃ)
    1.ࣗݾ঺հ

    View Slide

  5. Copyright Re:Build.inc All Rights Reserved.
    ԭೄͰ 150ਓن໛ͷΤϯδχΞ޲͚ษڧձΛओ࠵
    h&ps:/
    /phpcon.okinawa.jp/
    ҰؾʹΤϯδχΞͱͷܨ͕ΓΛ֦େͤ͞Δʂ
    PHPΧϯϑΝϨϯε͸ɺPHPΤϯδχΞʹΑΔ࠷େ
    ن໛ͷٕज़ऀΠϕϯτͱͯ͠ɺ౦ژɺؔ੢ɺ෱Ԭɺ๺
    ւಓͰ։࠵͞Ε͖ͯ·ͨ͠ɻ
    1.ࣗݾ঺հ

    View Slide

  6. Copyright Re:Build.inc All Rights Reserved.
    ࣗݾ঺հ
    1

    View Slide

  7. Copyright Re:Build.inc All Rights Reserved.
    ࣗݾ঺հ
    1

    View Slide

  8. Copyright Re:Build.inc All Rights Reserved.
    1.ձࣾ঺հ
    ◆ձ໊ࣾ
    גࣜձࣾRe:Build
    ◆ॅॴ
    ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕
    ◆ࣄۀ಺༰
    ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
    ɾडୗ։ൃ
    ◆ࣾһ
    7໊
    ◆ΤϯδχΞͷಇ͖ํ
    ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

    View Slide

  9. 9
    ࣗࣾWebαʔϏεͷ։ൃ
    ɾαʔϏε໊
    Tadoru
    ɾγεςϜ֓ཁ
    ΤϯδχΞಛԽܕͷ
    ϦϑΝϥϧ
    Ϋϥ΢υιʔγϯά
    ɾ࢖͍ͬͯΔٕज़
    ݴޠ : PHP,JavaScript
    ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ

    View Slide

  10. 2 ٕज़બఆʹ͍ͭͯ

    View Slide

  11. 11
    ౰࣌ͷ։ൃϝϯόʔͷεΩϧηοτ
    SPAͷWebΞϓϦܦݧ
    ऀ Ұਓ
    αʔόαΠυ(Laravel)
    ͸ಘҙͳਓ͕ଟ͍
    Vue.js(MPA)͸৮ͬͨ͜ͱ
    ͋Δϝϯόʔ͕ଟ͍
    20୅લ൒ʙ20୅ޙ൒Ͱ
    ։ൃܦݧ͸গ͠ઙ͍

    View Slide

  12. 1 2
    ։ൃεέδϡʔϧ
    2018೥12݄ʙ 2019೥3݄ 2019೥4݄ʙ6݄
    ։ൃ։࢝ Ϋϩʔζυβ൛׬੒
    ࠷௿ݶͷ։ൃج൫ɺυ
    Ωϡϝϯτɺ։ൃମ੍
    Λ੔උͯ͠ɺ͕ͬͭΓ
    ։ൃΛਐΊΔ
    ଟগɺόά͕͋ͬͯ΋
    ྑ͍ͷͰɺશମతʹ࠷
    ௿ݶͷॳظͷػೳ͕Ϧ
    Ϧʔε͞Ε͍ͯΔঢ়ଶ
    Λ໨ࢦ͢ɻ
    γʔυϥ΢ϯυͷࢿۚ
    ௐୡ༧ఆ
    ॳظͷػೳ͕ϦϦʔε
    ͞Ε͓ͯΓɺ͋Δఔ౓ɺ
    Ϣʔβͷొ࿥΋֬อ͞
    Ε͍ͯΔঢ়ଶΛ໨ࢦ͢

    View Slide

  13. 1 3
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ࠓޙɺࢢ৔ͱͯ͠஫໨͞Ε
    ͦ͏ͳٕज़
    ݕࡧͨ͠Β͋Δఔ౓ɺωοτʹ
    υΩϡϝϯτ͕͋Δ
    ԭೄͰ͸ઑ͍ͬͯΔٕज़
    ։ൃίετ͕ߴ͗ͣ͢ɺఔ
    Α͘௅ઓ͍ͨ͠

    View Slide

  14. 1 4
    DXͱ͸ʁ
    Developer Experience ʢ։ൃମݧʣͱ͸ɺ͋Δγ
    εςϜΛʮؾ࣋ͪΑ͘։ൃɾอकͰ͖Δ͔Ͳ͏͔ʯ
    Λࣔ͢΋ͷ
    ։ൃऀ͸։ൃɾอकͱ͍͏ߦҝΛ௨ͨͦ͡ͷγε
    ςϜͷϢʔβʔͰ͋ΓɺDX͸UXͷҰछͰ͋Δ
    https://gfx.hatenablog.com/entry/2018/06/28/100103

    View Slide

  15. Copyright Re:Build.inc All Rights Reserved.
    ؾ࣋ͪͷ༨༟͕ͰΔͱίʔ
    υͷ඼࣭͕͕͋Γอक࣌
    ͷσάϨ΋ݮΒͤΔ
    ೔ʑͷ։ൃΛָ͠ΊΔΑ
    ͏ʹͳΓɺؾ࣋ͪʹ༨༟
    ͕Ͱ͖Δɻ
    DX͕ྑ͍ࣄࣗମ͕DXΛߴ
    ΊΔಈػʹͳΓɺਖ਼ͷεύ
    ΠϥϧΛݟࠐΊΔɻ
    1 2 3
    https://gfx.hatenablog.com/entry/2018/06/28/100103
    DX͕ߴ͘ͳΔͱԿ͕ྑ͍ͷ͔ʁ

    View Slide

  16. 1 6
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺(ओ؍)
    ࢢ৔Ձ஋͕ߴ͍
    ΤϯδχΞͷ฼਺ଟ͍
    ΤϯδχΞͷ฼਺গͳ͍
    ࢢ৔Ձ஋͕௿͍
    ͜͜Λૂ͏ʂ
    ༏लͳਓࡐΛ
    ࠾༻͠΍͍͢

    View Slide

  17. 1 7
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺(ओ؍)
    ࢢ৔Ձ஋͕ߴ͍
    ΤϯδχΞͷ฼਺ଟ͍
    ΤϯδχΞͷ฼਺গͳ͍
    ࢢ৔Ձ஋͕௿͍

    View Slide

  18. 1 8
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    Laravel͸ࠓޙ΋ਓؾ͸ଓ͖ͦ͏

    View Slide

  19. 1 9
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ͏ʔΜɺΘ͔Βͳ͍ɻɻɻ

    View Slide

  20. 2 0
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ౦ژͷNuxt MeetupʹࢀՃͯ͠ࢀՃऀͷ൓Ԡ΋ݟͯΈΔࣄʹͨ͠ʂ
    2018/10/18
    ࢀՃ࿮100ਓʹରͯ͠ɺ
    Ԡื͕161ਓ΋͍Δʂʂ

    View Slide

  21. 2 1
    ౰೔ͷ༷ࢠ
    https://techblog.scouter.co.jp/entry/2018/10/19/153000
    ը૾͸SCOUTER։ൃऀϒϩάΑΓҾ༻ͤͯ͞௖͖·ͨ͠ɻ
    ੌ͍೤ؾʂʂ

    View Slide

  22. 2 2
    ࢀՃऀͷ੠
    ࢖͍͍͚ͨͲɺ·ͩ౦ژͷ
    ձࣾͰ΋ͳ͔ͳ͔ɺಋೖ͠
    ͍ͯΔاۀ͸গͳ͍
    ϓϥΠϕʔτͰ͸ษڧͯ͠
    ͍Δਓ͕ଟ͍
    Nuxtͷٻਓࣗମ͸૿͖͑ͯ
    ͍ͯΔҹ৅

    View Slide

  23. 2 3
    બఆٕͨ͠ज़
    ■ٕज़ཁ݅
    ɾαʔόαΠυ
    PHP(Laravel6)
    ɾϑϩϯτΤϯυ
    JavaScript(Vue.js,Nuxt.js)
    ɾςετ
    PHPUnit,Cypress
    ɾ੩తղੳ
    ESlint,PHPStan
    ɾΠϯϑϥ
    AWS(EC2,S3,RDS(mariadb))
    ɾ։ൃ؀ڥ
    php7,nginx,mariadb,docker,webpack
    ɾͦͷଞ
    gitlab,gitlabCI(ࣗಈσϓϩΠͳ
    Ͳ),Slack,phpStorm

    View Slide

  24. ϑϩϯτΤϯυ αʔόαΠυ
    શମߏ੒
    Gitlab CI
    ςετɾLintͳͲ
    Firebase
    ςετɾLintͳͲ

    View Slide

  25. શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ)
    ϑϩϯτΤϯυ αʔόαΠυ
    blade
    MPAߏ੒
    ϑϩϯτΤϯυ αʔόαΠυ
    SPAߏ੒
    αʔόαΠυ
    ϑϩϯτΤϯυ αʔόαΠυ
    blade
    MPAߏ੒
    ϫʔΧʔը໘ ΤʔδΣϯτը໘
    اۀը໘
    SPAߏ੒
    ϑϩϯτΤϯυ
    ӡӦը໘
    MPA
    SPA

    View Slide

  26. (1)PUSH
    (2)GitlabCI࣮ߦ (3)ίϯςφىಈ
    Gitlab
    (6)Envoy࣮ߦ
    ςετ࣮ߦ
    ίϯςφ
    σϓϩΠ࣮ߦ
    ίϯςφ
    (5)ίϯςφىಈ
    (4)UnitTest࣮ߦ
    (7)Pull
    εςʔδϯά؀ڥ
    ϦϙδτϦ
    Gitlab CI

    View Slide

  27. 3 νʔϜϏϧσΟϯάʹ͍ͭͯ

    View Slide

  28. 2 8
    TwitterͰืूͯ͠ΈΔ
    ஌Γ߹͍ͷΤϯδχΞ͞Μ
    5ਓ͘Β͍͔Β࿈བྷ͕͖ͨʂ

    View Slide

  29. 2 9
    ։ൃνʔϜߏ੒
    Suzuki Takayuki
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    Kakazu Yuki
    (ਖ਼ࣾһ)
    Ϛωδϝϯτ&։ൃ
    ։ൃ
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि1೔ۈ຿)
    ཁ݅ఆٛ
    UI/UX
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    ෭ۀ
    (ि1೔ۈ຿)

    View Slide

  30. LaravelΛख़஌͓ͯ͠Γɺ
    ਂ͍஌͕ࣝ͋Δ
    εΫϥϜϚελʔͷ
    ܦݧ͕͋Δ
    ϑϩϯτΤϯυ
    (Nuxt.jsɺVue.js)͕ಘҙ
    3 0
    ϑϦʔϥϯεͷํͷεΩϧηοτ

    View Slide

  31. 3 1
    ϑϦʔϥϯεͷํʹґཔ͢Δ࢓ࣄ
    ϑϩϯτΤϯυ(Nuxt.js)ͷ։ൃ
    ৽͍ٕ͠ज़ͷબ୒ʹ
    ͋ͨͬͯͷ૬ஊ
    (Firebase΍CypressͳͲ)
    શମͷΞʔΩςΫνϟͷ૬ஊ
    εΫϥϜͷճ͠ํͷ૬ஊ

    View Slide

  32. 3 2
    ϦϞʔτϫʔΫͷ׆༻
    ౦ژ
    ٶ࡚ ԭೄ
    ීஈ͔ΒϦϞʔτϫʔΫΛಋೖ
    ͍ͯ͠ΔࣄʹΑͬͯɺ
    ݝ֎ͷํʹ΋࢓ࣄΛґཔͰ͖Δ

    View Slide

  33. 3 3
    ෼ใͷ׆༻

    View Slide

  34. 3 4
    εΫϥϜ։ൃ
    ݄ Ր ਫ ໦ ۚ ౔
    Sprint
    ϙʔΧʔϓϥϯ
    χϯά/։ൃ
    σΠϦʔεΫϥ
    Ϝ/։ൃ
    σΠϦʔεΫϥ
    Ϝ/։ൃ
    σΠϦʔεΫϥ
    Ϝ/։ൃ
    εϓϦϯτϨϏ
    ϡʔ/

    ϦϦʔε
    εϓϦϯτϓϥ
    ϯχϯά

    View Slide

  35. 3 5
    εΫϥϜ։ൃ

    View Slide

  36. 3 6
    ·ͱΊ
    ɾٕज़બఆ͸ษڧձʹࢀՃͯ͠ɺ࣮ࡍͷԹ౓ײ΋ݟΔ
    ɾٕज़తʹকདྷੑ͕͋Γͦ͏ͳ΋ͷΛબఆ
    ɾϦϞʔτϫʔΫͷ׆༻Ͱ࠾༻ൣғ͸શࠃʹ޿͛ΒΕΔ

    View Slide

  37. 3 7
    ࠂ஌
    2020೥ PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ

    View Slide

  38. 3 8
    ࠂ஌
    2020೥ 2݄͝Ζʹ୆࿷ͰLaravelϛʔτΞοϓΛ΍Γ·͢ʂ

    View Slide