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
370
エンジニアのキャリア論
bumptakayuki
1
210
地方カンファレンス主催のススメ
bumptakayuki
1
220
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
680
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
710
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Cursorハンズオン実践!
eltociear
2
990
私はどうやって技術力を上げたのか
yusukebe
43
18k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
520
CSC509 Lecture 03
javiergs
PRO
0
330
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing for Performance
lara
610
69k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Site-Speed That Sticks
csswizardry
11
890
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
The Cost Of JavaScript in 2023
addyosmani
54
9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.5k
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ϛʔτΞοϓΛΓ·͢ʂ