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

Transcript

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

   FirebaseでDXͱ ։ൃίετΛҙࣝͨ͠SPA։ൃ

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

3. 1 ࣗݾ঺հ

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.ࣗݾ঺հ

5. Copyright Re:Build.inc All Rights Reserved. ԭೄͰ 150ਓن໛ͷΤϯδχΞ޲͚ษڧձΛओ࠵ h&ps:/ /phpcon.okinawa.jp/ ҰؾʹΤϯδχΞͱͷܨ͕ΓΛ֦େͤ͞Δʂ

   PHPΧϯϑΝϨϯε͸ɺPHPΤϯδχΞʹΑΔ࠷େ ن໛ͷٕज़ऀΠϕϯτͱͯ͠ɺ౦ژɺؔ੢ɺ෱Ԭɺ๺ ւಓͰ։࠵͞Ε͖ͯ·ͨ͠ɻ 1.ࣗݾ঺հ

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

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

8. Copyright Re:Build.inc All Rights Reserved. 1.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕

   ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 7໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

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

   : PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ

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

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

    ։ൃܦݧ͸গ͠ઙ͍

12. 1 2 ։ൃεέδϡʔϧ 2018೥12݄ʙ 2019೥3݄ 2019೥4݄ʙ6݄ ։ൃ։࢝ Ϋϩʔζυβ൛׬੒ ࠷௿ݶͷ։ൃج൫ɺυ Ωϡϝϯτɺ։ൃମ੍

    Λ੔උͯ͠ɺ͕ͬͭΓ ։ൃΛਐΊΔ ଟগɺόά͕͋ͬͯ΋ ྑ͍ͷͰɺશମతʹ࠷ ௿ݶͷॳظͷػೳ͕Ϧ Ϧʔε͞Ε͍ͯΔঢ়ଶ Λ໨ࢦ͢ɻ γʔυϥ΢ϯυͷࢿۚ ௐୡ༧ఆ ॳظͷػೳ͕ϦϦʔε ͞Ε͓ͯΓɺ͋Δఔ౓ɺ Ϣʔβͷొ࿥΋֬อ͞ Ε͍ͯΔঢ়ଶΛ໨ࢦ͢

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

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

    https://gfx.hatenablog.com/entry/2018/06/28/100103

15. Copyright Re:Build.inc All Rights Reserved. ؾ࣋ͪͷ༨༟͕ͰΔͱίʔ υͷ඼࣭͕͕͋Γอक࣌ ͷσάϨ΋ݮΒͤΔ ೔ʑͷ։ൃΛָ͠ΊΔΑ ͏ʹͳΓɺؾ࣋ͪʹ༨༟

    ͕Ͱ͖Δɻ DX͕ྑ͍ࣄࣗମ͕DXΛߴ ΊΔಈػʹͳΓɺਖ਼ͷεύ ΠϥϧΛݟࠐΊΔɻ 1 2 3 https://gfx.hatenablog.com/entry/2018/06/28/100103 DX͕ߴ͘ͳΔͱԿ͕ྑ͍ͷ͔ʁ

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

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

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

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

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

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

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

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

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

25. શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ) ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ੒ ϑϩϯτΤϯυ αʔόαΠυ SPAߏ੒ αʔόαΠυ ϑϩϯτΤϯυ

    αʔόαΠυ blade MPAߏ੒ ϫʔΧʔը໘ ΤʔδΣϯτը໘ اۀը໘ SPAߏ੒ ϑϩϯτΤϯυ ӡӦը໘ MPA SPA

26. (1)PUSH (2)GitlabCI࣮ߦ (3)ίϯςφىಈ Gitlab (6)Envoy࣮ߦ ςετ࣮ߦ ίϯςφ σϓϩΠ࣮ߦ ίϯςφ (5)ίϯςφىಈ

    (4)UnitTest࣮ߦ (7)Pull εςʔδϯά؀ڥ ϦϙδτϦ Gitlab CI

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

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

29. 2 9 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ)

    Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿)

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

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

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

33. 3 3 ෼ใͷ׆༻

34. 3 4 εΫϥϜ։ൃ ݄ Ր ਫ ໦ ۚ ౔ Sprint

    ϙʔΧʔϓϥϯ χϯά/։ൃ σΠϦʔεΫϥ Ϝ/։ൃ σΠϦʔεΫϥ Ϝ/։ൃ σΠϦʔεΫϥ Ϝ/։ൃ εϓϦϯτϨϏ ϡʔ/
 ϦϦʔε εϓϦϯτϓϥ ϯχϯά

35. 3 5 εΫϥϜ։ൃ

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

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

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