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
12k
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
6.2k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.1k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
690
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.4k
191109_sacss.pdf
fukuiretu
1
2.3k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
181117_wannatech.pdf
fukuiretu
1
490
noteをNuxt.jsで再構築した話
fukuiretu
22
56k
フロントエンド刷新中のnoteの開発環境について
fukuiretu
6
7.6k
Other Decks in Technology
See All in Technology
Shift-from-React-to-Vue
calm1205
3
1.3k
Autify Company Deck
autifyhq
1
39k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
850
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
4.7k
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
Featured
See All Featured
Fireside Chat
paigeccino
32
3k
Adopting Sorbet at Scale
ufuk
73
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing Experiences People Love
moore
138
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
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