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
noteをNuxt.jsで再構築した話 -2nd-
Search
Retu Fukui
August 17, 2019
Technology
6
4.7k
noteをNuxt.jsで再構築した話 -2nd-
2019-08-17 CaT vol.7 真夏のVue.js祭りにてお話してきました。
Retu Fukui
August 17, 2019
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
330
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
1
470
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
600
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
1.5k
191109_sacss.pdf
fukuiretu
1
2.1k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.4k
181117_wannatech.pdf
fukuiretu
1
460
noteをNuxt.jsで再構築した話
fukuiretu
22
47k
フロントエンド刷新中のnoteの開発環境について
fukuiretu
6
7.4k
Other Decks in Technology
See All in Technology
layerx-0-to-1-product-development-in-compound-startups
shnjtk
1
520
二刀流でWinActorを活用してみた話
tamai_63
0
120
「わたしたちのコード」を安定させるためにフレームワークとの距離を保つ / phperkaigi2024
blue_goheimochi
5
790
皆がすなるカオスエンジアリングといふものを、ネットワークオペレーションでもしてみむとてするなり
tjmtrhs
0
110
滑空スポーツ講習会2023 航空安全講習会 第4回 日常整備に役立ちそうな雑情報 / JSA Safety Seminar 2023 glider maintenance
jsaseminar
0
110
We Fear Change, for DevOpsDays LA 2024
cote
PRO
0
130
OpenStack再入門「アーキテクチャ編」
kajinamit
0
240
『QAという人』が必要ではなく、『QAという技術』が必要
sadonosake
2
250
S3成長記録@Storage-JAWS#3
p0n
0
130
マルチテナントの実現におけるDB設計とRLS / Utilizing RSL in multi-tenancy
soudai
20
5k
SREのキャリア、 あるいは生態 / #ya8
cohalz
10
1k
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
480
Featured
See All Featured
Making Projects Easy
brettharned
106
5.4k
Agile that works and the tools we love
rasmusluckow
323
20k
Six Lessons from altMBA
skipperchong
19
2.9k
GraphQLとの向き合い方2022年版
quramy
28
12k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Designing with Data
zakiwarfel
94
4.8k
Thoughts on Productivity
jonyablonski
57
3.7k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Transcript
OPUFΛ/VYUKTͰ ࠶ߏஙͨ͠ OE $B5WPMਅՆͷ7VFKTࡇΓ Ҫ |@GVLVJSFUV
ࣗݾհ Ҫc@fukuiretu w גࣜձࣾϐʔεΦϒέΠΫ • since 2015.3 ~ • Engineer
w ϑϩϯτΤϯυόοΫΤϯυ ΠϯϑϥͱͳΜͰΔϚϯ w ࠷ۙͬͺΒ(P w ੨ࡏॅ w ϦϞʔτϫʔΧʔ @fukuiretu @fukuiretu r82
˞ଓฤͰ͢
OPUFͷϑϩϯτΤϯυͷาΈ /VYUKTͷ৽ΛৼΓฦΔ /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ ΞδΣϯμ
OPUFͷϑϩϯτΤϯυͷาΈ /VYUKTͷ৽ΛৼΓฦΔ /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ ΞδΣϯμ
50%0ޙೖΕ ΫϦΤΠλʔ͕จষϚϯΨɺࣸਅɺԻΛߘ ͢Δ͜ͱ͕Ͱ͖ɺϢʔβʔͦͷίϯςϯπΛָ ͠ΜͰԠԉͰ͖ΔϝσΟΞϓϥοτϑΥʔϜ
݄ؒΞΫςΟϒϢʔβʔ 1,000ສਓ ˞݄࣌
OPUFͷ։ൃ։࢝ #BDLCPOFKT͕ओྲྀ͕ͩͬͨ"OHVMBS+4 ܥ Λ࠾༻ ཧ༝ w XBZCJOEJOH w αʔόʔαΠυΛ"1*ʹઐ೦ˠωΠςΟϒΞϓϦͱڞ༻ w
ϦΫϧʔςΟϯά
ϩʔϯνɻ͕ɺঃʑʹ՝͕ු͖ூΓʹ ٕज़త w /PU443ˠॳظද͕͍ࣔ w 3BJMTͷΤίγεςϜΛར༻ͨ͠ϑϩϯτΤϯυ ٕज़తෛ࠴ w /PίʔσΟϯάن w
/Pίϯϙʔωϯτઃܭϧʔϧ
θϩϕʔεͰ৽Λݕ౼ طଘͷٕज़ͷԆͰղܾ͕ࠔ ࠾༻
/VYUKTͷ࠾༻ཧ༝ ίϛϡχςΟͷΓ্͕Γ ͠Έ͢͞ ن Ϟμϯͳ։ൃڥ ΤΩεύʔτͷίϯαϧ
'&ઐ͕͍ͳͯ͘ ϝϯςφϒϧʹ ίϛϡχςΟͷΓ্͕Γ ͠Έ͢͞ ن Ϟμϯͳ։ൃڥ ΤΩεύʔτͷίϯαϧ /VYUKTͷ࠾༻ཧ༝
)5.-͕ গ͠༨ஊ
! ! ! ΤϯδχΞc໊ ! ! σβΠφʔc໊ /VYUҠߦνʔϜͷര ˞'&ઐ໊ /VYUҠߦνʔϜ
/VYUҠߦνʔϜͷϛογϣϯ OPUFܑఋͷҠߦ w هࣄৄࡉϖʔδ w ΫϦΤΠλʔ5PQϖʔδ w ϚΨδϯ5PQϖʔδ
։ൃϑϩʔ िؒ4QSJOU λεΫཧ ZenHub ;Γ͔͑Γ KPT ϫʔΫϑϩʔ GitHubFlow
w "OHVMBS+4൛ॏϝϯςͱͷਏ͍ઓ͍ʜ w '&!OJDFEFSZೖࣾΤϯδχΞ໊ମ੍ w ΞΫηγϏϦςΟ w ίʔυεϓϦοςΟϯά d63-୯ҐͰগͮͭ͠/VYUԽ
࣌ͷOPUFͷΞʔΩςΫνϟ
-BNCEB͕ಥવམͪΔͷר
IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT
ΞδΣϯμ ͋Δಥવਖ਼ৗʹಈ࡞࢝͠Ί͕ͨʜ ෆ҆Λ১͑ͣΞʔΩςΫνϟมߋΛݕ౼ -BNCEB͕ಥવམͪΔͷר
ΞʔΩςΫνϟͷมߋ w 43&!GVUPBTFೖࣾ w -BNCEBˠ&MBTUJD#FBOTUBMLʹ w บ͋Δ͚Ͳ҆ఆӡ༻ͯ͠Δʢͱࢥ͏ʣ
dݱࡏͷOPUFͷΞʔΩςΫνϟ
5ZQF4DSJQUԽΛਐΊΔ w '&!NQೖࣾΤϯδχΞ໊ମ੍ w ίʔυංେԽˠ*'ͷᐆດ͕͞ঃʑʹετϨεʹ w 54ͷݟ͕͋Δ!NQΛத৺ʹஈ֊తʹҠߦ
هࣄৄࡉϖʔδϦϦʔε
ϦϦʔεޙʹҰଉ͍͍ͭͯΔγʔϯ هࣄৄࡉϖʔδϦϦʔε
"1*ͷෛՙࢄͰ͖͓ͯΒͣߴෛՙʹ Γ͠खॱΛޡΓɺαʔϏεશମ͕མͪΔ࣍ࡂ ͕ʜແࣄނͱ͍͔ͳ͔ͬͨʜ ޙʹແࣄϦϦʔε هࣄৄࡉϖʔδϦϦʔε
ΫϦΤΠλʔ5PQϖʔδϦϦʔε
͓͓Αͦॲཱ͕ͬͨͷͰ/VYUҠߦνʔϜղࢄ ΫϦΤΠλʔ5PQϖʔδϦϦʔε
ϚΨδϯ5PQϖʔδϦϦʔε
/VYUҠߦνʔϜղࢄޙ!TOBHBJ͕ҰਓͰॗʑͱ To Be Continued… ϚΨδϯ5PQϖʔδϦϦʔε
OPUFͷϑϩϯτΤϯυͷาΈ /VYUKTͷ৽ΛৼΓฦΔ /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ ΞδΣϯμ
ྑ͔ͬͨ͜ͱ /VYUKTͷ৽ΛৼΓฦΔ
69ͷ্ %9ͷ্ ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ ΤϥʔͷݕͱΈԽ ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
69ͷ্ ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
ϖʔδͷॳظදࣔ 69ͷ্
443ͷ͓͔͛ͰΊͪΌ͘ͳͬͨ ϖʔδͷॳظදࣔ ಛʹ4UBSU3FOEFSͱ4QFFE*OEFY 4UBSU3FOEFSϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ 4QFFE*OEFYίϯςϯπ͕ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
"OHVMBS+4൛ /VYUKT൛ ࣌ 8FC1BHF5FTUͷൺֱ
/VYUKT൛ ࣌ /VYUKT൛ ࣌ 8FC1BHF5FTUͷൺֱ
"OHVMBS+4൛ /VYUKT൛ ࣌ -JHIUIPVTFͷൺֱ
/VYUKT൛ ࣌ /VYUKT൛ ࣌ -JHIUIPVTFͷൺֱ
͔࣌ΒͷύϑΥʔϚϯε্ཁҼ w -BNCEBˠ&MBTUJD#FBOTUBML w /VYUKTͷόʔδϣϯΞοϓ w ίʔυεϓϦοςΟϯά w ϥΠϒϥϦʢOPEF@NPEVMFTʣͷܰྔԽ w
OVYUCVJMEBOBMZ[FͰνΣοΫ
ϒϥβόοΫ࣌ͷεΫϩʔϧҐஔ 69ͷ্
"OHVMBS+4൛ผΠϯυͰ։͍͍ͯͨ εΫϩʔϧҐஔ͕อ࣋͞ΕΔΑ͏ʹͳͬͨ ϒϥβόοΫ࣌ͷεΫϩʔϧҐஔ
%9ͷ্ ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
Ͳ͜ʹԿΛॻ͚͍͍͔໌֬ʹͳͬͨ %9ͷ্
ΞδΣϯμ Ͳ͜ʹԿΛॻ͚͍͍͔໌֬ʹͳͬͨ w /VYUKTͷن w ෦ຖͷ͕໌֬ w "UPNJD%FTJHOϕʔεͷίϯϙʔωϯτઃܭϧʔϧ w ཻʹ໊শ͕͋ΔͷͰ͕͍ٞ͢͠
w ݫີʹΓ͗ͣ͢ɺνʔϜͰམͱ͠ॴΛܾΊΔ
$44ͷάϩʔόϧείʔϓͷղফ %9ͷ্
ΞδΣϯμ $44ͷάϩʔόϧείʔϓͷղফ w 4DPQFE$44ͷԸܙ w ίϯϙʔωϯτʹTDPQFด͡Δ͕ɺ '-0$44ϕʔεͰͷωʔϛϯάΛ࠾༻ w (SFQBCJMJUZͷ؍
ΞδΣϯμ FH "UPNJD%FTJHOͷཻͷ಄จࣈ lz ίϯϙʔωϯτ໊ $44ͷάϩʔόϧείʔϓͷղফ
ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
63-୯ҐͰͷҠߦ ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ
ΞδΣϯμ 63-୯ҐͰͷҠߦ ϏοΫόϯϦϦʔεΛආ͚Δͷఆੴ͕ͩʜ 63-୯ҐΑΓখ͞ͳϦϦʔεʹͰ͖ͳ͍
ΞδΣϯμ 63-୯ҐͰͷҠߦ ࣄނͬͯ"OHVMBS+4൛ʹ͙͢ʹΓସ͑ΕΔ҆৺ײ Γସ͑࡞ۀ$MPVE'SPOUͷઃఆมߋͷΈ ਫ਼ਆతΏͱΓ
ΤϥʔͷݕͱΈԽ ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
ΞδΣϯμ Τϥʔͷݕ &MBTUJD#FBOTUBML αʔόʔαΠυͷΤϥʔΛૹ৴ ΫϥΠΞϯταΠυͷΤϥʔΛૹ৴ Τϥʔ༻ͷνϟϯωϧʹ௨
ΞδΣϯμ ΫϦςΟΧϧͳΤϥʔҎ֎์ஔ͞Ε͕ͪʜ ൪੍ͰεϓϨουγʔτʹΤϥʔϩάΛ ϓʔϧ͠ɺఆظతʹ୨Է͠ Τϥʔͷݕ
ΞδΣϯμ ൪੍ ͰࣗಈԽ εϓϨουγʔτ ͷॻ͖ࠐΈ ͰޮԽ ࣗಈԽɾޮԽ
ΞδΣϯμ ൪ͷϩʔςγϣϯΛࣗಈԽ
ΞδΣϯμ ".ʹىಈ લճͷ൪ऀͷ ΠϯσοΫεΛऔಘ ࠓճͷ൪ऀͷ 4MBDL*%Λऔಘ ࠓճͷ൪ऀͷ ΠϯσοΫεΛอଘ 4MBDLʹ൪Λ௨ ൪ͷϩʔςγϣϯΛࣗಈԽ
ΞδΣϯμ Τϥʔͷ͚ΛޮԽ ಛఆͷϦΞΫγϣϯΛϑοΫͯ͠ εϓϨουγʔτʹॻ͖ࠐΈ
ΞδΣϯμ ϦΞΫγϣϯ JHOPSF আ֎ର CVH ΞϓϦέʔγϣϯ ͷόά EJTDVT ཁٞ EVQMJDBUF
Ҏલ͚ͨ͠ Τϥʔͱॏෳ Τϥʔͷ͚ΛޮԽ
ΞδΣϯμ Τϥʔϩάਫ਼ࠪͷΈԽ ࡁͱඋߟҎ֎ࣗಈೖྗ͞ΕΔ
ΞδΣϯμ ࠓޙͷ՝ /VYUKTͷ৽ΛৼΓฦΔ
ύϑΥʔϚϯε εέʔϥϏϦςΟ ϝϯςφϏϦςΟ ࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
ύϑΥʔϚϯε ࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
ը૾͕ॏ͍ ύϑΥʔϚϯε
1BHF4QFFE*OTJHIUTͰͷղੳ݁Ռ ը૾͕ॏ͍ Ϩεϙϯγϒʹը૾Λ࠷దԽ͢Δػӡ
Ұ෦Ͱ Λݕূத ը૾͕ॏ͍
9 performance secrets revealed ύϑΥʔϚϯε
ݩωλ https://slides.com/akryum/vueconfus-2019#/
Functional components GVODUJPOBMΛ͚Δ͚ͩ https://slides.com/akryum/vueconfus-2019#/3
εςʔτϨεͰϥΠϑαΠΫϧෆཁͳ ίϯϙʔωϯτશͯஔ͖͑ΒΕΔʢϋζʣ Functional components
εέʔϥϏϦςΟ ࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
/PEFKTαʔόʔͷෛՙܰݮ εέʔϥϏϦςΟ
/PEFKTαʔόʔͷෛՙܰݮ هࣄ͕όζΔ Φʔτεέʔϧ͕͍͔ͭͣʹαʔϏεఀࢭ ઈରʹආ͚͍ͨʂʂ
w $%/ͷ&EHFͰ͍͍ײ͡ʹ w 4FSWJDF8PSLFS 8PSLCPY Ͱ͍͍ײ͡ʹ w ίϯϙʔωϯτͷΩϟογϡΛ͍͍ײ͡ʹ w هࣄ୯ҐͰΞΫηε੍ݶʢΛฦ͢ʣ
ෛՙܰݮରࡦҊ
ϝϯςφϏϦςΟ ࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
"1*ϦΫΤετॲཧͷநԽ ϝϯςφϏϦςΟ
ݩωλ https://slides.com/nakajmg/replace-axios-module#/
ݱঢ় OVYUDPNNVOJUZBYJPTNPEVMFΛར༻ FHετΞ͔Βͷར༻ྫ
nuxt-community/axios-module w ίϯϙʔωϯτετΞ͔ΒUIJTͰࢀরͰ͖͓ͯखܰ w Πϯλʔηϓλʔ͕༻ҙ͞Εͯͯศར w PO3FRVFTU DPOGJH w
PO&SSPS FSS w FUDʜ
Կ͕͔ w ΤϯυϙΠϯτύϥϝʔλมߋ w IUUQΫϥΠΞϯτมߋ "1*ϦΫΤετॲཧ͕ࢄࡒ͠มߋʹऑ͘Մಡੑ͕͍
Ͳ͏͍͔ͨ͠ "1*௨৴༻ͷήʔτΣΠΛڬΉ ΤϯυϙΠϯτຖʹؔԽ มߋՕॴΛ࠷খݶʹ͑ΒΕ͔ͭՄಡੑ্͕͕Δ
OPUFͷϑϩϯτΤϯυͷาΈ /VYUKTͷ৽ΛৼΓฦΔ /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ ΞδΣϯμ
27VFKT /VYUKT Λ࢝Ίɺ3FBDU"OHVMBS ͳͲ͍ΘΏΔେϑϨʔϜϫʔΫͷ͍ͣΕ͔Λͬͯ ։ൃ͠ͳ͍ͱμϝ
"શવμϝ͡Όͳ͍ͱࢥ͍·͢ʂ w ղܾ͍ͨ͠՝ͷຊ࣭ΛݟۃΊͯɺ αʔϏενʔϜʹ͋ͬͨબΛ͢Δ͜ͱ͕େࣄɻ w ৗʹ࠷৽ͷτϨϯυΛ͏ඞཁͳ͍͕ɺ ΑΓ࠷ྑͷબ͕͋ΔͷͰʁৗʹࣗ͠ɺ ใऩू͖ͩ͢ͱࢥ͍·͢ɻ
2443࠾༻͢Δ͖
w ϢχόʔαϧରԠͰ։ൃίετ w /PEFKTαʔόʔͷӡ༻Ͱӡ༻ίετ "αʔϏεͷಛੑ্ɺຊʹඞཁ͔Ͳ͏͔ۛຯ͠ɺ ۃྗ࠾༻͠ͳ͍͖ͩͱࢥ͍·͢ʂ ࠾༻͢Δ߹ͷτϨʔυΦϑ
2443Λ࠾༻͠ͳ͍߹ /VYUKTΘͳ͍͖
"443ΛΘͣͱेՁ͕͋Δ͠ɺ Θͣͱར༻Ͱ͖ΔϞʔυ͕༻ҙ͞Ε͍ͯ·͢ʂ 41" OVYUDPOGJHKTʹNPEFTQBΛઃఆ͢Δ͚ͩ ੩తαΠτੜ OVYUHFOFSBUFΛ࣮ߦ͢Δ͚ͩ
$44/JUF"PNPSJWPM ૣׂ͋Γ·͢ʂ http://cssnite-aomori.net/vol12/
7VF'FT اۀϒʔεͰ͓͓ͪͯ͠Γ·͢ https://vuefes.jp/2019/
͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞશํҐͰืूத https://www.wantedly.com/companies/pieceofcake/projects