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

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

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. ࠷ޙʹগ͚ͩ͠ࠂ஌Λ…