Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発
Laravel + Nuxt.js + FirebaseでDXͱ։ൃίετΛҙࣝͨ͠SPA։ൃLaravel + Nuxt.js + FirebaseでDXͱ։ൃίετΛҙࣝͨ͠SPA։ൃ
View Slide
2 ٕज़બఆʹ͍ͭͯAgenda3 νʔϜϏϧσΟϯάʹ͍ͭͯ1 ࣗݾհ
1 ࣗݾհ
Copyright Re:Build.inc All Rights Reserved.◆໊લླ ೭(Suzuki Takayuki)※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ◆ࣗݾհɾ1990ɺਆಸݝੜ·Εɻɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹಠཱɻɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛͬͨޙʹԭೄͰىۀ◆झຯίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ◆εΩϧɾPHP,Symfony2,CakePHP3,Laravel6ɾJavaScript,backbone.js,Angular4,Vue.js,Nuxt.jsBDD(Ϗʔνۦಈ։ൃ)1.ࣗݾհ
Copyright Re:Build.inc All Rights Reserved.ԭೄͰ 150ਓنͷΤϯδχΞ͚ษڧձΛओ࠵h&ps://phpcon.okinawa.jp/ҰؾʹΤϯδχΞͱͷܨ͕ΓΛ֦େͤ͞ΔʂPHPΧϯϑΝϨϯεɺPHPΤϯδχΞʹΑΔ࠷େنͷٕज़ऀΠϕϯτͱͯ͠ɺ౦ژɺؔɺԬɺւಓͰ։࠵͞Ε͖ͯ·ͨ͠ɻ1.ࣗݾհ
Copyright Re:Build.inc All Rights Reserved.ࣗݾհ1
Copyright Re:Build.inc All Rights Reserved.1.ձࣾհ◆ձ໊ࣾגࣜձࣾRe:Build◆ॅॴԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕◆ࣄۀ༰ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻɾडୗ։ൃ◆ࣾһ7໊◆ΤϯδχΞͷಇ͖ํϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
9ࣗࣾWebαʔϏεͷ։ൃɾαʔϏε໊TadoruɾγεςϜ֓ཁΤϯδχΞಛԽܕͷϦϑΝϥϧΫϥυιʔγϯάɾ͍ͬͯΔٕज़ݴޠ : PHP,JavaScriptϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ
2 ٕज़બఆʹ͍ͭͯ
11࣌ͷ։ൃϝϯόʔͷεΩϧηοτSPAͷWebΞϓϦܦݧऀ ҰਓαʔόαΠυ(Laravel)ಘҙͳਓ͕ଟ͍Vue.js(MPA)৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍20લʙ20ޙͰ։ൃܦݧগ͠ઙ͍
1 2։ൃεέδϡʔϧ201812݄ʙ 20193݄ 20194݄ʙ6݄։ൃ։࢝ Ϋϩʔζυβ൛࠷ݶͷ։ൃج൫ɺυΩϡϝϯτɺ։ൃମ੍Λඋͯ͠ɺ͕ͬͭΓ։ൃΛਐΊΔଟগɺόά͕͋ͬͯྑ͍ͷͰɺશମతʹ࠷ݶͷॳظͷػೳ͕ϦϦʔε͞Ε͍ͯΔঢ়ଶΛࢦ͢ɻγʔυϥϯυͷࢿۚௐୡ༧ఆॳظͷػೳ͕ϦϦʔε͞Ε͓ͯΓɺ͋ΔఔɺϢʔβͷొ֬อ͞Ε͍ͯΔঢ়ଶΛࢦ͢
1 3ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍ࠓޙɺࢢͱͯ͠͞Εͦ͏ͳٕज़ݕࡧͨ͠Β͋ΔఔɺωοτʹυΩϡϝϯτ͕͋ΔԭೄͰઑ͍ͬͯΔٕज़։ൃίετ͕ߴ͗ͣ͢ɺఔΑ͘ઓ͍ͨ͠
1 4DXͱʁDeveloper Experience ʢ։ൃମݧʣͱɺ͋ΔγεςϜΛʮؾ࣋ͪΑ͘։ൃɾอकͰ͖Δ͔Ͳ͏͔ʯΛࣔ͢ͷ։ൃऀ։ൃɾอकͱ͍͏ߦҝΛ௨ͨͦ͡ͷγεςϜͷϢʔβʔͰ͋ΓɺDXUXͷҰछͰ͋Δhttps://gfx.hatenablog.com/entry/2018/06/28/100103
Copyright Re:Build.inc All Rights Reserved.ؾ࣋ͪͷ༨༟͕ͰΔͱίʔυͷ࣭͕͕͋Γอक࣌ͷσάϨݮΒͤΔʑͷ։ൃΛָ͠ΊΔΑ͏ʹͳΓɺؾ࣋ͪʹ༨༟͕Ͱ͖ΔɻDX͕ྑ͍ࣄࣗମ͕DXΛߴΊΔಈػʹͳΓɺਖ਼ͷεύΠϥϧΛݟࠐΊΔɻ1 2 3https://gfx.hatenablog.com/entry/2018/06/28/100103DX͕ߴ͘ͳΔͱԿ͕ྑ͍ͷ͔ʁ
1 6ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍(ओ؍)ࢢՁ͕ߴ͍ΤϯδχΞͷଟ͍ΤϯδχΞͷগͳ͍ࢢՁ͕͍͜͜Λૂ͏ʂ༏लͳਓࡐΛ࠾༻͍͢͠
1 7ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍(ओ؍)ࢢՁ͕ߴ͍ΤϯδχΞͷଟ͍ΤϯδχΞͷগͳ͍ࢢՁ͕͍
1 8ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍Laravelࠓޙਓؾଓ͖ͦ͏
1 9ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍͏ʔΜɺΘ͔Βͳ͍ɻɻɻ
2 0ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍౦ژͷNuxt MeetupʹࢀՃͯ͠ࢀՃऀͷԠݟͯΈΔࣄʹͨ͠ʂ2018/10/18ࢀՃ100ਓʹରͯ͠ɺԠื͕161ਓ͍Δʂʂ
2 1ͷ༷ࢠhttps://techblog.scouter.co.jp/entry/2018/10/19/153000ը૾SCOUTER։ൃऀϒϩάΑΓҾ༻͖ͤͯ͞·ͨ͠ɻੌ͍ؾʂʂ
2 2ࢀՃऀͷ͍͍͚ͨͲɺ·ͩ౦ژͷձࣾͰͳ͔ͳ͔ɺಋೖ͍ͯ͠Δاۀগͳ͍ϓϥΠϕʔτͰษڧ͍ͯ͠Δਓ͕ଟ͍Nuxtͷٻਓࣗମ૿͖͍͑ͯͯΔҹ
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
ϑϩϯτΤϯυ αʔόαΠυશମߏGitlab CIςετɾLintͳͲFirebaseςετɾLintͳͲ
શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ)ϑϩϯτΤϯυ αʔόαΠυbladeMPAߏϑϩϯτΤϯυ αʔόαΠυSPAߏαʔόαΠυϑϩϯτΤϯυ αʔόαΠυbladeMPAߏϫʔΧʔը໘ ΤʔδΣϯτը໘اۀը໘SPAߏϑϩϯτΤϯυӡӦը໘MPASPA
(1)PUSH(2)GitlabCI࣮ߦ (3)ίϯςφىಈGitlab(6)Envoy࣮ߦςετ࣮ߦίϯςφσϓϩΠ࣮ߦίϯςφ(5)ίϯςφىಈ(4)UnitTest࣮ߦ(7)PullεςʔδϯάڥϦϙδτϦGitlab CI
3 νʔϜϏϧσΟϯάʹ͍ͭͯ
2 8TwitterͰืूͯ͠ΈΔΓ߹͍ͷΤϯδχΞ͞Μ5ਓ͘Β͍͔Β࿈བྷ͕͖ͨʂ
2 9։ൃνʔϜߏSuzuki Takayukiਖ਼ࣾһ(ि5ۈ)Kakazu Yuki(ਖ਼ࣾһ)Ϛωδϝϯτ&։ൃ։ൃϑϦʔϥϯε(ि2ۈ)ϑϦʔϥϯε(ि2ۈ)ϑϦʔϥϯε(ि2ۈ)ϑϦʔϥϯε(ि1ۈ)ཁ݅ఆٛUI/UXਖ਼ࣾһ(ि5ۈ)෭ۀ(ि1ۈ)
LaravelΛख़͓ͯ͠Γɺਂ͍͕ࣝ͋ΔεΫϥϜϚελʔͷܦݧ͕͋ΔϑϩϯτΤϯυ(Nuxt.jsɺVue.js)͕ಘҙ3 0ϑϦʔϥϯεͷํͷεΩϧηοτ
3 1ϑϦʔϥϯεͷํʹґཔ͢ΔࣄϑϩϯτΤϯυ(Nuxt.js)ͷ։ൃ৽͍ٕ͠ज़ͷબʹ͋ͨͬͯͷ૬ஊ(FirebaseCypressͳͲ)શମͷΞʔΩςΫνϟͷ૬ஊεΫϥϜͷճ͠ํͷ૬ஊ
3 2ϦϞʔτϫʔΫͷ׆༻౦ژٶ࡚ ԭೄීஈ͔ΒϦϞʔτϫʔΫΛಋೖ͍ͯ͠ΔࣄʹΑͬͯɺݝ֎ͷํʹࣄΛґཔͰ͖Δ
3 3ใͷ׆༻
3 4εΫϥϜ։ൃ݄ Ր ਫ ۚ SprintϙʔΧʔϓϥϯχϯά/։ൃσΠϦʔεΫϥϜ/։ൃσΠϦʔεΫϥϜ/։ൃσΠϦʔεΫϥϜ/։ൃεϓϦϯτϨϏϡʔ/ ϦϦʔεεϓϦϯτϓϥϯχϯά
3 5εΫϥϜ։ൃ
3 6·ͱΊɾٕज़બఆษڧձʹࢀՃͯ͠ɺ࣮ࡍͷԹײݟΔɾٕज़తʹকདྷੑ͕͋Γͦ͏ͳͷΛબఆɾϦϞʔτϫʔΫͷ׆༻Ͱ࠾༻ൣғશࠃʹ͛ΒΕΔ
3 7ࠂ2020 PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ
3 8ࠂ2020 2݄͝ΖʹͰLaravelϛʔτΞοϓΛΓ·͢ʂ