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
13k
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
Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜
fukuiretu
0
220
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.1k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.5k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
860
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.9k
191109_sacss.pdf
fukuiretu
1
2.4k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.7k
181117_wannatech.pdf
fukuiretu
1
530
noteをNuxt.jsで再構築した話
fukuiretu
22
57k
Other Decks in Technology
See All in Technology
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
310
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
860
Kiroから考える AIコーディングツールの潮流
s4yuba
4
670
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
750
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
240
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
240
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
230
Mambaで物体検出 完全に理解した
shirarei24
2
220
Featured
See All Featured
Visualization
eitanlees
146
16k
Facilitating Awesome Meetings
lara
54
6.5k
Six Lessons from altMBA
skipperchong
28
3.9k
For a Future-Friendly Web
brad_frost
179
9.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
BBQ
matthewcrist
89
9.8k
Navigating Team Friction
lara
188
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Code Review Best Practice
trishagee
69
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
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