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

この先生きのこるためのPostCSS実践入門

 この先生きのこるためのPostCSS実践入門

Frontend de KANPAI! #frokan LT枠での資料です。

Pちゃん

June 21, 2017
Tweet

More Decks by Pちゃん

Other Decks in Programming

Transcript

  1. ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    PostCSS࣮ફೖ໳
    Shintaro Fujiwara
    DeNA Co., Ltd. / Design Strategies Office

    View full-size slide

  2. ! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ࣗݾ঺հ

    View full-size slide

  3. ! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ౻ݪ৻ଠ࿠
    a.k.a. P-Chan
    " UI Design / Front-End
    # DeNA Co., Ltd.
    $ MyAnimeList.net

    View full-size slide

  4. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    PostCSSͱ͸

    View full-size slide

  5. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    en) PostCSS is a tool for transforming styles with JS plugins.
    ja) PostCSS͸ɺJSϓϥάΠϯͰελΠϧΛม׵͢ΔͨΊͷπʔϧ
    PostCSSͱ͸
    input
    CSS
    CSS
    PostCSS
    Plugin
    "
    "
    PostCSS
    Plugin
    #
    Input
    CSS
    #
    Output
    CSS
    $
    PostCSS
    Plugin
    "
    "
    PostCSS

    View full-size slide

  6. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    جຊతʹ͸ɺ֤छϓϥάΠϯΛ͍ΕΔ͜ͱʹΑͬͯɺ༷ʑͳγϯλοΫ
    ε͕࢖͑ΔΑ͏ʹͳΓ·͢ɻ
    ٯʹݴ͏ͱɺԿ΋ೖΕͳ͚Ε͹ɺͦͷ··ͷελΠϧγʔτ͕ు͖ग़͞
    Ε·͢ɻ
    input
    CSS
    CSS
    PostCSS
    Plugin
    "
    "
    PostCSS
    Plugin
    #
    Input
    CSS
    #
    Output
    CSS
    $
    PostCSS
    Plugin
    "
    "
    input
    CSS
    PostCSS
    Plugin
    #
    Input
    CSS
    #
    Output
    CSS
    #

    View full-size slide

  7. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ࣍ੈ୅ඪ४Ͱॻͨ͘ΊͷτϥϯεύΠϥʔ
    ࠓͷͱ͜ΖɺҰ൪ϝδϟʔͳ࢖ΘΕํ͸ʮϓϥάΠϯΛ૊Έ߹Θͤͯɺ
    ࣍ੈ୅ඪ४ $44 $44
    Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α͏ʯ
    ͱ͍͏΋ͷͰ͢ɻ
    +4ք۾Ͱىͬͨ͜ʮ࣍ੈ୅ඪ४Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α
    ͏ʯͷྲྀΕͱಉ͡΋ͷͷΑ͏ʹײ͡·͢ɻ
    ࠓͷͱ͜Ζɺ࣍ੈ୅ඪ४Ͱ໨ۄͳػೳͱݴ͑͹ɺWBS ม਺
    ͱ͔
    !BQQMZ ม਺ηοτ
    ͱ͔DBMD ԋࢉ
    ͱ͔Ͱ͢ɻ

    View full-size slide

  8. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ϓϥάΠϯΛબͿ

    View full-size slide

  9. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ϚδͰແ਺ͷϓϥάΠϯ͕ଘࡏ͢Δ

    View full-size slide

  10. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    precss
    PostCSSͰSASSͬΆ͍ॻ͖ํͰ͖ΔΑ͏ʹ͢Δ΍ͭ

    View full-size slide

  11. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    sugarss
    ΠϯσϯτϕʔεͷγϯλοΫεͰ͔͚ΔΑ͏ʹͳΔ

    View full-size slide

  12. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ޷͖উख΍Δͱ
    ΅͘ͷ͔Μ͕͍͖͑ͨ͞ΐ͏ͷ
    ͠ʔ͑͠Ύ͑͠Ύ΀Γ΀Ζͤͬ͞ʔ
    ͕Ͱ͖͕͋Δ

    View full-size slide

  13. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ൒೥ޙʹ͸ɺ͢Ͱʹਏ͘ͳͬͯͦ͏

    View full-size slide

  14. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ͜ͷઌੜ͖ͷ͜Δ
    ϓϥάΠϯ͚͕ͩΠΠͳʜ"

    View full-size slide

  15. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    postcss-cssnext
    ࣍ੈ୅ඪ४Ͱॻ͚ΔΑ͏ʹͳΔϓϥάΠϯΛηοτʹͨ͠΍ͭ

    View full-size slide

  16. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞

    View full-size slide

  17. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    Ͱ΋ɺ4BTTͷ΄͏͕ڧ͘ͳ͍ʁ
    1PTU$44ͷ࿩Λ͢ΔͱɺඞͣҾ͖߹͍ʹग़͞ΕΔͷ͕4BTTͰ͢ɻ
    ʮ4BTTͷ΄͏͕ͭΑ͘ͳ͍ʁ4BTTͰΑ͘ͳ͍ʁʯͱݴΘΕ·͢ɻ
    ͓ͬ͠ΌΔͱ͓Γɺ4BTTͷ΄͏͕ͭΑ͍Ͱ͢ɻ

    View full-size slide

  18. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞
    4BTT͸͔֬ʹͭΑ͍Ͱ͢ɻ
    ͔͠͠ɺ࣍ੈ୅ඪ४Ͱ͋Δͱ͍͏͜ͱʹ͸ɺҎԼͷΑ͏ͳϝϦοτ͕͋
    Γ·͢ɻ
    ௕ظతͳαϙʔτ WTBMUYYY

    ࣍ʑੈ୅ඪ४΁ͷҠߦίετͷ௿͞
    ΤίγεςϜͷྲྀߦΓ΍͢͞
    τϥϯεύΠϧແ͠Ͱಈ͘ະདྷ͕དྷΔ ͨͩ͠

    ྲྀߦΕ͹ڧ͍ػೳ͕૿͑Δ

    View full-size slide

  19. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    ඪ४ͰԺ΍͔ΛखʹೖΕΔ
    ݸਓతʹ͸ɺʮͰ͖Δ͚ͩඪ४తͳٕज़Ͱ΍͍ͬͯ͘΄͏͕ɺԺ΍͔ʹ
    ੜ͖͍͚ͯΔʯͱࢥ͍ͬͯΔͷͰɺ͜Ε͔Β͸Ͱ͖Δ͚ͩ1PTU$44Λ
    ࢖͍ͬͯ͜͏ͱࢥ͍ͬͯ·͢ɻ
    ੋඇɺΈͳ͞Μ΋࢖ͬͯΈ͍ͯͩ͘͞"

    View full-size slide

  20. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ
    1PTU$44࣮ફೖ໳
    "
    ͓͠·͍

    View full-size slide