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

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 ٕज़બఆʹ͍ͭͯ Agenda 3 νʔϜϏϧσΟϯάʹ͍ͭͯ 1 ࣗݾ঺հ

Slide 3

Slide 3 text

1 ࣗݾ঺հ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2 ٕज़બఆʹ͍ͭͯ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

3 νʔϜϏϧσΟϯάʹ͍ͭͯ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

3 3 ෼ใͷ׆༻

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

3 5 εΫϥϜ։ൃ

Slide 36

Slide 36 text

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