Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Retu Fukui
September 05, 2018
7.3k

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

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

Retu Fukui

September 05, 2018
Tweet

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