Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発
Search
Takayuki
June 25, 2019
Programming
3
2.5k
Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発
Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発
Takayuki
June 25, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
390
エンジニアのキャリア論
bumptakayuki
1
210
地方カンファレンス主催のススメ
bumptakayuki
1
220
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.2k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
690
沖縄観光、名物を一挙紹介!
bumptakayuki
2
680
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.9k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Programming
See All in Programming
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
CSC305 Lecture 08
javiergs
PRO
0
280
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
CSC509 Lecture 06
javiergs
PRO
0
270
What's new in Spring Modulith?
olivergierke
1
170
技術的負債の正体を知って向き合う
irof
0
260
チームの境界をブチ抜いていけ
tokai235
0
230
SODA - FACT BOOK(JP)
sodainc
1
8.8k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Designing for humans not robots
tammielis
254
26k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Making Projects Easy
brettharned
120
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
4 Signs Your Business is Dying
shpigford
185
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Transcript
Laravel + Nuxt.js + FirebaseでDXͱ ։ൃίετΛҙࣝͨ͠SPA։ൃ Laravel + Nuxt.js +
FirebaseでDXͱ ։ൃίετΛҙࣝͨ͠SPA։ൃ
2 ٕज़બఆʹ͍ͭͯ Agenda 3 νʔϜϏϧσΟϯάʹ͍ͭͯ 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.js BDD(Ϗʔνۦಈ։ൃ) 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
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 4 DXͱʁ Developer Experience ʢ։ൃମݧʣͱɺ͋Δγ εςϜΛʮؾ࣋ͪΑ͘։ൃɾอकͰ͖Δ͔Ͳ͏͔ʯ Λࣔ͢ͷ ։ൃऀ։ൃɾอकͱ͍͏ߦҝΛ௨ͨͦ͡ͷγε ςϜͷϢʔβʔͰ͋ΓɺDXUXͷҰछͰ͋Δ
https://gfx.hatenablog.com/entry/2018/06/28/100103
Copyright Re:Build.inc All Rights Reserved. ؾ࣋ͪͷ༨༟͕ͰΔͱίʔ υͷ࣭͕͕͋Γอक࣌ ͷσάϨݮΒͤΔ ʑͷ։ൃΛָ͠ΊΔΑ ͏ʹͳΓɺؾ࣋ͪʹ༨༟
͕Ͱ͖Δɻ DX͕ྑ͍ࣄࣗମ͕DXΛߴ ΊΔಈػʹͳΓɺਖ਼ͷεύ ΠϥϧΛݟࠐΊΔɻ 1 2 3 https://gfx.hatenablog.com/entry/2018/06/28/100103 DX͕ߴ͘ͳΔͱԿ͕ྑ͍ͷ͔ʁ
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ͳͲ
શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ) ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ ϑϩϯτΤϯυ αʔόαΠυ SPAߏ αʔόαΠυ ϑϩϯτΤϯυ
αʔόαΠυ blade MPAߏ ϫʔΧʔը໘ ΤʔδΣϯτը໘ اۀը໘ SPAߏ ϑϩϯτΤϯυ ӡӦը໘ MPA SPA
(1)PUSH (2)GitlabCI࣮ߦ (3)ίϯςφىಈ Gitlab (6)Envoy࣮ߦ ςετ࣮ߦ ίϯςφ σϓϩΠ࣮ߦ ίϯςφ (5)ίϯςφىಈ
(4)UnitTest࣮ߦ (7)Pull εςʔδϯάڥ ϦϙδτϦ Gitlab CI
3 νʔϜϏϧσΟϯάʹ͍ͭͯ
2 8 TwitterͰืूͯ͠ΈΔ Γ߹͍ͷΤϯδχΞ͞Μ 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ϛʔτΞοϓΛΓ·͢ʂ