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

第70回 HTML5とか勉強会で発表しました

Transcript

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

   View Slide

2. ࣗݾ঺հ
   • @fukuiretu / ෱Ҫ ྽
   • piece of cake, inc.
   • since 2015.03 ~
   • Engineer
   • Live in Aomori
   •RemoteWorker
   https://twitter.com/fukuiretu
   https://github.com/fukuiretu
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. IUUQTOPUFNVLPOQZVOOCCG
   ઈࢍ࡮৽த⚙
   

   View Slide

7. IUUQTOPUFNVOPUFEFNPOOGCCF
   ઈࢍ࡮৽த⚙
   

   View Slide

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

   View Slide

9. w طଘίʔυΛΈͯจ຺Λ

   ߹ΘͤΔ
   w ࣮૷ऀʹґଘ
   FHγϯλοΫε͕·ͪ·ͪ
   before: ໌֬ͳίʔσΟϯάن໿͕ͳ͍
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. "UPNJD%FTJHO
    6*ͷߏ଄ΛݪࢠʹݟཱͯͯϖʔδΛ૊ΈཱͯΔઃܭख๏
    w "UPNT ݪࢠ
    
    w .PMFDVMFT ෼ࢠ
    
    w 0SHBOJTNT ੜମ
    
    w 5FNQMBUFT ςϯϓϨʔτ
    
    w 1BHFT ϖʔδ
    
    after: ίϯϙʔωϯτઃܭͷϧʔϧ͕ͳ͍
    

    View Slide

16. "UPNT
    .PMFDVMFT
    0SHBOJTNT
    w ಠཱͯ͠ଘࡏͰ͖ͳ͍
    w ࠶ར༻ੑ΋ߟྀ
    w ػೳతʹͦΕҎ্෼ׂͰ͖ͳ͍
    w ࠶ར༻ੑ΋ߟྀ
    w ಠཱͯ͠ଘࡏͰ͖Δ
    w TUPSF 7VFY
    Λར༻Ͱ͖Δ
    w ࠶ར༻ੑ͸͋·Γߟྀ͠ͳ͍
    ཻ֤౓΁ͷ෼ྨࢦඪ
    ཻ౓ʹ໊শ͕͋Δ͜ͱͰձ࿩͕εϜʔζʹͳΔͱ͍͏ϝϦοτ΋
    

    View Slide

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

    View Slide

18. ࠓޙͷݕ౼ࣄ߲
    w ςετ$*
    w ΍͍͖ͬͯ
    w 5ZQF4DSJQU
    w /VYUͱ7VFY͕ରԠͯ͠ͳ͍ͷͰਏ͍ͱݴΘΕͨΓͯ͠Δ͕ʜ
    w 4UPSZCPPL
    w ಋೖ͸ͨ͠΋ͷͷ์ஔʜ
    w TUPSZॻ͘ͷਏ͍
    w ઃఆ໘౗
    w ίϯϙʔωϯτͷΧλϩά ϦϑΝϨϯε͸ཉ͍͠
    

    View Slide

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

    View Slide

20. ·ͱΊ
    தdେن໛αʔϏεͷνʔϜ։ൃʹ͸
    ૬ԠͷϧʔϧͱՄࢹԽ͕ඞཁ
    ن໿͸΄͍͚͠Ͳࣗ෼ୡͰ࡞Δͷ͸ݫ͍͠

    ⇢/VYUKT
    ίϯϙʔωϯτͷཻ౓Λ౷Ұ͍ͨ͠
    ⇢"UPNJD%FTJHO
    ϧʔϧ࡞Γͷࢀߟʹʜ
    OPUF΋ඞཁͳہ໘Λܴ͑ઈࢍΧΠθϯத
    

    View Slide

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

    View Slide