Save 37% off PRO during our Black Friday Sale! »

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

107ba69ff7888cacdb4307a28adf5527?s=47 Retu Fukui
September 05, 2018
7k

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

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

107ba69ff7888cacdb4307a28adf5527?s=128

Retu Fukui

September 05, 2018
Tweet

Transcript

  1. ϑϩϯτΤϯυ࡮৽தͷ noteͷ։ൃ؀ڥʹ͍ͭͯ )5.-ͱ͔ษڧձ  QJFDFPGDBLF 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 4UBOEBSE4UZMF  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. ࠷ޙʹগ͚ͩ͠ࠂ஌Λ…