フロントエンド刷新中のnoteの開発環境について

Transcript

1. ϑϩϯτΤϯυ࡮৽தͷ noteͷ։ൃ؀ڥʹ͍ͭͯ )5.-ͱ͔ษڧձ
    QJFDF
   PG
   DBLF
   JOD
   !GVLVJSFUV

2. ࣗݾ঺հ • @fukuiretu / ෱Ҫ ྽ • piece of cake,

   inc. • since 2015.03 ~ • Engineer • Live in Aomori •RemoteWorker https://twitter.com/fukuiretu https://github.com/fukuiretu

3. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ

4. ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ w จষɺࣸਅɺΠϥετɺԻָɺө૾ͳ Ͳͷ࡞඼Λ౤ߘ͢Δ͜ͱ͕Ͱ͖Δ w౤ߘͨ͠࡞඼Λ؆୯ʹൢച͢Δ͜ͱ͕Ͱ͖Δ

5. ݱঢ়ͷnoteͷٕज़ελοΫ ݄ͷϦϦʔε͔࣌Β΄΅มΘ͓ͬͯΒͣ

6. IUUQTOPUFNVLPOQZVOOCCG ઈࢍ࡮৽த⚙

7. IUUQTOPUFNVOPUFEFNPOOGCCF ઈࢍ࡮৽த⚙

8. ຊ೔ͷ͓୊ ։ൃʹ·ͭΘΔϧʔϧͷ ΧΠθϯঢ়گΛ͓࿩͍ͨ͠ͱࢥ͍·͢ ςʔϚ͕։ൃ؀ڥͱ͍͏͜ͱͰʜ

9. w طଘίʔυΛΈͯจ຺Λ
 ߹ΘͤΔ
   w ࣮૷ऀʹґଘ FH
   γϯλοΫε͕·ͪ·ͪ before: ໌֬ͳίʔσΟϯάن໿͕ͳ͍

10. w &4-JOU
    4UBOEBSE
    4UZMF
    w 1SFUUJFS ߏจνΣοΫ
    
    ϑΥʔϚοτ after: ໌֬ͳίʔσΟϯάن໿͕ͳ͍

11. /VYUKTʹΑͬͯ΋ͨΒ͞Εͨن໿ after: ໌֬ͳίʔσΟϯάن໿͕ͳ͍

12. w σΟϨΫτϦߏ੒
    w ϧʔςΟϯάͷࣗಈੜ੒
    w ඇಉظॲཧͷ࡞๏
    w ϓϥάΠϯػߏ
    FUDʜ Nuxt.jsʹΑͬͯ΋ͨΒ͞Εͨن໿ͷྫ 443ͷจ຺ͰޠΒΕΔ͜ͱ͕ଟ͍͕ɺ
    

    ن໿͕खʹೖΔ͜ͱ΋ͭͷϝϦοτ

13. IUUQTTMJEFTDPNQPUBUPEWVFKT@NFFUVQ Nuxt.jsʹؔ͢Δࢀߟࢿྉ

14. w ཻ౓͕࣮૷ऀʹґଘ
    w ॏෳίʔυ͕େྔʹʜ before: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍

15. "UPNJD%FTJHO 6*ͷߏ଄ΛݪࢠʹݟཱͯͯϖʔδΛ૊ΈཱͯΔઃܭख๏ w "UPNT ݪࢠ
    w .PMFDVMFT ෼ࢠ
    

    w 0SHBOJTNT ੜମ
    w 5FNQMBUFT ςϯϓϨʔτ
    w 1BHFT ϖʔδ after: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍

16. "UPNT .PMFDVMFT 0SHBOJTNT w ಠཱͯ͠ଘࡏͰ͖ͳ͍
    w ࠶ར༻ੑ΋ߟྀ w ػೳతʹͦΕҎ্෼ׂͰ͖ͳ͍
    w

    ࠶ར༻ੑ΋ߟྀ w ಠཱͯ͠ଘࡏͰ͖Δ
    w TUPSF 7VFY Λར༻Ͱ͖Δ
    w ࠶ར༻ੑ͸͋·Γߟྀ͠ͳ͍ ཻ֤౓΁ͷ෼ྨࢦඪ ཻ౓ʹ໊শ͕͋Δ͜ͱͰձ࿩͕εϜʔζʹͳΔͱ͍͏ϝϦοτ΋

17. AtomicDesignʹؔ͢Δࢀߟࢿྉ IUUQTNFEJVNDPN!U@TVHBXBSBWVFKT &#&&#'&'BUPNJDEFTJHO F IUUQBN[OBTJBEPIY86H

18. ࠓޙͷݕ౼ࣄ߲ w ςετ
    
    $*
    w ΍͍͖ͬͯ
    w 5ZQF4DSJQU
    w /VYUͱ7VFY͕ରԠͯ͠ͳ͍ͷͰਏ͍ͱݴΘΕͨΓͯ͠Δ͕ʜ
    

    w 4UPSZCPPL
    w ಋೖ͸ͨ͠΋ͷͷ์ஔʜ
    w TUPSZॻ͘ͷਏ͍
    w ઃఆ໘౗
    w ίϯϙʔωϯτͷΧλϩά
    ϦϑΝϨϯε͸ཉ͍͠

19. ·ͱΊ தdେن໛αʔϏεͷνʔϜ։ൃʹ͸
    ૬Ԡͷϧʔϧ͕ඞཁ OPUF΋ඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத

20. ·ͱΊ தdେن໛αʔϏεͷνʔϜ։ൃʹ͸
    ૬ԠͷϧʔϧͱՄࢹԽ͕ඞཁ ن໿͸΄͍͚͠Ͳࣗ෼ୡͰ࡞Δͷ͸ݫ͍͠
 ⇢
    /VYUKT
    ίϯϙʔωϯτͷཻ౓Λ౷Ұ͍ͨ͠
    ⇢
    "UPNJD%FTJHO ϧʔϧ࡞Γͷࢀߟʹʜ OPUF΋ඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத

21. ࠷ޙʹগ͚ͩ͠ࠂ஌Λ…