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

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

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