Slide 1
Slide 1 text
ϑϩϯτΤϯυ৽தͷ
noteͷ։ൃڥʹ͍ͭͯ
)5.-ͱ͔ษڧձ
QJFDFPGDBLF
JOD!GVLVJSFUV
Slide 2
Slide 2 text
ࣗݾհ
• @fukuiretu / Ҫ
• piece of cake, inc.
• since 2015.03 ~
• Engineer
• Live in Aomori
•RemoteWorker
https://twitter.com/fukuiretu
https://github.com/fukuiretu
Slide 3
Slide 3 text
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
Slide 4
Slide 4 text
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
w จষɺࣸਅɺΠϥετɺԻָɺө૾ͳ
Ͳͷ࡞Λߘ͢Δ͜ͱ͕Ͱ͖Δ
wߘͨ͠࡞Λ؆୯ʹൢച͢Δ͜ͱ͕Ͱ͖Δ
Slide 5
Slide 5 text
ݱঢ়ͷnoteͷٕज़ελοΫ
݄ͷϦϦʔε͔࣌Β΄΅มΘ͓ͬͯΒͣ
Slide 6
Slide 6 text
IUUQTOPUFNVLPOQZVOOCCG
ઈࢍ৽த⚙
Slide 7
Slide 7 text
IUUQTOPUFNVOPUFEFNPOOGCCF
ઈࢍ৽த⚙
Slide 8
Slide 8 text
ຊͷ͓
։ൃʹ·ͭΘΔϧʔϧͷ
ΧΠθϯঢ়گΛ͓͍ͨ͠ͱࢥ͍·͢
ςʔϚ͕։ൃڥͱ͍͏͜ͱͰʜ
Slide 9
Slide 9 text
w طଘίʔυΛΈͯจ຺Λ
߹ΘͤΔ
w ࣮ऀʹґଘ
FHγϯλοΫε͕·ͪ·ͪ
before: ໌֬ͳίʔσΟϯάن͕ͳ͍
Slide 10
Slide 10 text
w &4-JOU 4UBOEBSE4UZMF
w 1SFUUJFS
ߏจνΣοΫ ϑΥʔϚοτ
after: ໌֬ͳίʔσΟϯάن͕ͳ͍
Slide 11
Slide 11 text
/VYUKTʹΑͬͯͨΒ͞Εͨن
after: ໌֬ͳίʔσΟϯάن͕ͳ͍
Slide 12
Slide 12 text
w σΟϨΫτϦߏ
w ϧʔςΟϯάͷࣗಈੜ
w ඇಉظॲཧͷ࡞๏
w ϓϥάΠϯػߏFUDʜ
Nuxt.jsʹΑͬͯͨΒ͞Εͨنͷྫ
443ͷจ຺ͰޠΒΕΔ͜ͱ͕ଟ͍͕ɺ
ن͕खʹೖΔ͜ͱͭͷϝϦοτ
Slide 13
Slide 13 text
IUUQTTMJEFTDPNQPUBUPEWVFKT@NFFUVQ
Nuxt.jsʹؔ͢Δࢀߟࢿྉ
Slide 14
Slide 14 text
w ཻ͕࣮ऀʹґଘ
w ॏෳίʔυ͕େྔʹʜ
before: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍
Slide 15
Slide 15 text
"UPNJD%FTJHO
6*ͷߏΛݪࢠʹݟཱͯͯϖʔδΛΈཱͯΔઃܭख๏
w "UPNT ݪࢠ
w .PMFDVMFT ࢠ
w 0SHBOJTNT ੜମ
w 5FNQMBUFT ςϯϓϨʔτ
w 1BHFT ϖʔδ
after: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍
Slide 16
Slide 16 text
"UPNT
.PMFDVMFT
0SHBOJTNT
w ಠཱͯ͠ଘࡏͰ͖ͳ͍
w ࠶ར༻ੑߟྀ
w ػೳతʹͦΕҎ্ׂͰ͖ͳ͍
w ࠶ར༻ੑߟྀ
w ಠཱͯ͠ଘࡏͰ͖Δ
w TUPSF 7VFY
Λར༻Ͱ͖Δ
w ࠶ར༻ੑ͋·Γߟྀ͠ͳ͍
ཻ֤ͷྨࢦඪ
ཻʹ໊শ͕͋Δ͜ͱͰձ͕εϜʔζʹͳΔͱ͍͏ϝϦοτ
Slide 17
Slide 17 text
AtomicDesignʹؔ͢Δࢀߟࢿྉ
IUUQTNFEJVNDPN!U@TVHBXBSBWVFKT
&#&&#'&'BUPNJDEFTJHO
F
IUUQBN[OBTJBEPIY86H
Slide 18
Slide 18 text
ࠓޙͷݕ౼ࣄ߲
w ςετ $*
w ͍͖ͬͯ
w 5ZQF4DSJQU
w /VYUͱ7VFY͕ରԠͯ͠ͳ͍ͷͰਏ͍ͱݴΘΕͨΓͯ͠Δ͕ʜ
w 4UPSZCPPL
w ಋೖͨ͠ͷͷ์ஔʜ
w TUPSZॻ͘ͷਏ͍
w ઃఆ໘
w ίϯϙʔωϯτͷΧλϩά
ϦϑΝϨϯεཉ͍͠
Slide 19
Slide 19 text
·ͱΊ
தdେنαʔϏεͷνʔϜ։ൃʹ
૬Ԡͷϧʔϧ͕ඞཁ
OPUFඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
Slide 20
Slide 20 text
·ͱΊ
தdେنαʔϏεͷνʔϜ։ൃʹ
૬ԠͷϧʔϧͱՄࢹԽ͕ඞཁ
ن΄͍͚͠ͲࣗୡͰ࡞Δͷݫ͍͠
⇢/VYUKT
ίϯϙʔωϯτͷཻΛ౷Ұ͍ͨ͠
⇢"UPNJD%FTJHO
ϧʔϧ࡞Γͷࢀߟʹʜ
OPUFඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
Slide 21
Slide 21 text
࠷ޙʹগ͚ͩ͠ࠂΛ…