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の開発環境について
Search
Retu Fukui
September 05, 2018
6
7.7k
フロントエンド刷新中のnoteの開発環境について
第70回 HTML5とか勉強会で発表しました
Retu Fukui
September 05, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜
fukuiretu
0
150
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.6k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.4k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
760
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.8k
191109_sacss.pdf
fukuiretu
1
2.3k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
181117_wannatech.pdf
fukuiretu
1
510
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
4 Signs Your Business is Dying
shpigford
183
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Facilitating Awesome Meetings
lara
53
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Adopting Sorbet at Scale
ufuk
75
9.2k
Agile that works and the tools we love
rasmusluckow
328
21k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
KATA
mclloyd
29
14k
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ͷจ຺ͰޠΒΕΔ͜ͱ͕ଟ͍͕ɺ
ن͕खʹೖΔ͜ͱͭͷϝϦοτ
IUUQTTMJEFTDPNQPUBUPEWVFKT@NFFUVQ 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!U@TVHBXBSBWVFKT &#&&#'&'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ඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
࠷ޙʹগ͚ͩ͠ࠂΛ…