Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンド刷新中のnoteの開発環境について
Retu Fukui
September 05, 2018
6
7.2k
フロントエンド刷新中のnoteの開発環境について
第70回 HTML5とか勉強会で発表しました
Retu Fukui
September 05, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
1
340
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
370
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
1
1.3k
191109_sacss.pdf
fukuiretu
1
2k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
4.4k
CloudFront use cases - noteの事例 -
fukuiretu
0
7.9k
181117_wannatech.pdf
fukuiretu
1
430
noteをNuxt.jsで再構築した話
fukuiretu
22
46k
フロントエンド初学者のためのNuxt.jsの歩き方
fukuiretu
3
6k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
GitHub's CSS Performance
jonrohan
1020
430k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Thoughts on Productivity
jonyablonski
49
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
How to name files
jennybc
47
73k
Become a Pro
speakerdeck
PRO
6
3.2k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
10k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
Transcript
ϑϩϯτΤϯυ৽தͷ noteͷ։ൃڥʹ͍ͭͯ )5.-ͱ͔ษڧձ QJFDFPGDBLF JOD!GVLVJSFUV
ࣗݾհ • @fukuiretu / Ҫ • piece of cake,
inc. • since 2015.03 ~ • Engineer • Live in Aomori •RemoteWorker https://twitter.com/fukuiretu https://github.com/fukuiretu
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ w จষɺࣸਅɺΠϥετɺԻָɺө૾ͳ Ͳͷ࡞Λߘ͢Δ͜ͱ͕Ͱ͖Δ wߘͨ͠࡞Λ؆୯ʹൢച͢Δ͜ͱ͕Ͱ͖Δ
ݱঢ়ͷnoteͷٕज़ελοΫ ݄ͷϦϦʔε͔࣌Β΄΅มΘ͓ͬͯΒͣ
IUUQTOPUFNVLPOQZVOOCCG ઈࢍ৽த⚙
IUUQTOPUFNVOPUFEFNPOOGCCF ઈࢍ৽த⚙
ຊͷ͓ ։ൃʹ·ͭΘΔϧʔϧͷ ΧΠθϯঢ়گΛ͓͍ͨ͠ͱࢥ͍·͢ ςʔϚ͕։ൃڥͱ͍͏͜ͱͰʜ
w طଘίʔυΛΈͯจ຺Λ ߹ΘͤΔ w ࣮ऀʹґଘ FHγϯλοΫε͕·ͪ·ͪ before: ໌֬ͳίʔσΟϯάن͕ͳ͍
w &4-JOU 4UBOEBSE4UZMF w 1SFUUJFS ߏจνΣοΫ ϑΥʔϚοτ after: ໌֬ͳίʔσΟϯάن͕ͳ͍
/VYUKTʹΑͬͯͨΒ͞Εͨن after: ໌֬ͳίʔσΟϯάن͕ͳ͍
w σΟϨΫτϦߏ w ϧʔςΟϯάͷࣗಈੜ w ඇಉظॲཧͷ࡞๏ w ϓϥάΠϯػߏFUDʜ Nuxt.jsʹΑͬͯͨΒ͞Εͨنͷྫ 443ͷจ຺ͰޠΒΕΔ͜ͱ͕ଟ͍͕ɺ
ن͕खʹೖΔ͜ͱͭͷϝϦοτ
IUUQTTMJEFTDPNQPUBUPE
[email protected]
Nuxt.jsʹؔ͢Δࢀߟࢿྉ
w ཻ͕࣮ऀʹґଘ w ॏෳίʔυ͕େྔʹʜ before: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍
"UPNJD%FTJHO 6*ͷߏΛݪࢠʹݟཱͯͯϖʔδΛΈཱͯΔઃܭख๏ w "UPNT ݪࢠ w .PMFDVMFT ࢠ
w 0SHBOJTNT ੜମ w 5FNQMBUFT ςϯϓϨʔτ w 1BHFT ϖʔδ after: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍
"UPNT .PMFDVMFT 0SHBOJTNT w ಠཱͯ͠ଘࡏͰ͖ͳ͍ w ࠶ར༻ੑߟྀ w ػೳతʹͦΕҎ্ׂͰ͖ͳ͍ w
࠶ར༻ੑߟྀ w ಠཱͯ͠ଘࡏͰ͖Δ w TUPSF 7VFY Λར༻Ͱ͖Δ w ࠶ར༻ੑ͋·Γߟྀ͠ͳ͍ ཻ֤ͷྨࢦඪ ཻʹ໊শ͕͋Δ͜ͱͰձ͕εϜʔζʹͳΔͱ͍͏ϝϦοτ
AtomicDesignʹؔ͢Δࢀߟࢿྉ IUUQTNFEJVNDPN
[email protected]
WVFKT &#&&#'&'BUPNJDEFTJHO F IUUQBN[OBTJBEPIY86H
ࠓޙͷݕ౼ࣄ߲ w ςετ $* w ͍͖ͬͯ w 5ZQF4DSJQU w /VYUͱ7VFY͕ରԠͯ͠ͳ͍ͷͰਏ͍ͱݴΘΕͨΓͯ͠Δ͕ʜ
w 4UPSZCPPL w ಋೖͨ͠ͷͷ์ஔʜ w TUPSZॻ͘ͷਏ͍ w ઃఆ໘ w ίϯϙʔωϯτͷΧλϩά ϦϑΝϨϯεཉ͍͠
·ͱΊ தdେنαʔϏεͷνʔϜ։ൃʹ ૬Ԡͷϧʔϧ͕ඞཁ OPUFඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
·ͱΊ தdେنαʔϏεͷνʔϜ։ൃʹ ૬ԠͷϧʔϧͱՄࢹԽ͕ඞཁ ن΄͍͚͠ͲࣗୡͰ࡞Δͷݫ͍͠ ⇢/VYUKT ίϯϙʔωϯτͷཻΛ౷Ұ͍ͨ͠ ⇢"UPNJD%FTJHO ϧʔϧ࡞Γͷࢀߟʹʜ OPUFඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
࠷ޙʹগ͚ͩ͠ࠂΛ…