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։ൃ
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ϛʔτΞοϓΛ΍Γ·͢ʂ