$30 off During Our Annual Pro Sale. View Details »

webpackによる人類共通コンポーネント計画

joe_re
March 11, 2016

 webpackによる人類共通コンポーネント計画

gotanda.js#3のLT資料です

joe_re

March 11, 2016
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. WebpackʹΑΔ
    ਓྨڞ௨

    ίϯϙʔωϯτܭը
    @joe_re

    View Slide

  2. twitter: @joe_re

    github: @joe-re
    - ໊લ: ͡ΐ͏
    - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢
    - ࠓ͸Ϋϥ΢υڅ༩ܭࢉ΍ͬͯ·͢

    View Slide

  3. React͕୆಄͠ɺੈք͸·͞
    ʹେίϯϙʔωϯτ࣌୅ʂʂʂ

    View Slide

  4. ͱ͜ΖͰͦ΋ͦ΋
    ίϯϙʔωϯτͬͯԿʁʁʁ

    View Slide

  5. DOM͓Αͼ
    ৼΔ෣͍͕ఆٛ͞Εͨ΋ͷ

    View Slide

  6. ίϯϙʔωϯτࢦ޲ʹ͓͚Δ
    ίϯϙʔωϯτ͸࠶ར༻Մೳ
    Ͱͳ͚Ε͹ͳΒͳ͍

    View Slide

  7. ࠶ར༻Մೳͳίϯϙʔωϯτ
    Λ࡞Δʹ͸ʁ

    View Slide

  8. ίϯϙʔωϯτ͸༩͑ΒΕͨ
    ஋ΛϢʔβͷཧղͰ͖Δ
    View(DOM)ʹม׵͢Δɺ
    DOMม׵ػʹప͢Δ

    View Slide

  9. ༩͑ΒΕͨ஋͕ಉ͡ͳͷʹɺ
    ҧ͏ϨϯμϦϯά݁Ռʹͳͬ
    ͯ͸͍͚ͳ͍

    View Slide

  10. ඳըͷݩʹͳΔ஋ͷੜ੒ϩδο
    Ϋ͸ܾͯ͠ίϯϙʔωϯτʹ
    ؚΜͰ͸͍͚ͳ͍
    (ͦͷͨΊͷFlux)

    View Slide

  11. ਓྨڞ௨ίϯϙʔωϯτͱ͸

    View Slide

  12. ͜͏͍͏ͷ

    View Slide

  13. ͜͏ݟ͑ͯ໿150ߦͷ

    ϩδοΫ͕٧·͍ͬͯΔ
    • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ
    • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ
    ͍೔෇Λબ୒͠ͳ͍

    (2016/3/31 ➡ 2016/2/29ʹͳΔ)
    • ͳͲͳͲ

    View Slide

  14. ڞ௨Խͯ͠ͲͷϓϩμΫτ͔
    ΒͰ΋ݺ΂ΔΑ͏ʹ͍ͨ͠ʂ

    View Slide

  15. ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ
    Ͱ
    • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ
    ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ
    ͖Λͳͤ͘Δ

    (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ
    ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ)
    • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰
    Խ

    View Slide

  16. ஫ҙ
    • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ͸

    1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ
    ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ
    • Reactͷ࢖༻Λલఏʹ͓࿩͠·͢

    View Slide

  17. Α͠ɺWebpackͩʂ

    View Slide

  18. Webpackͱ͸
    • WebΞϓϦέʔγϣϯͷ੩తΞηοτͷϏϧυ
    πʔϧͰ͢
    • JSͷτϥϯεύΠϧ΍ґଘղܾ͸΋ͪΖΜͰ͖
    ·͢
    • JS͚ͩͰͳ͘Style΍ImageͳͲͷϏϧυ͓Αͼ
    όϯυϧ΋αϙʔτ͠·͢

    View Slide

  19. ࠶ར༻Մೳͳίϯϙʔωϯτ΁
    ͷཉ๬
    • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯ͸ཁٻͨ͘͠ͳ
    ͍(babelͷόʔδϣϯͱ͔)
    • ͱ͸͍͑࢖༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ͸֤Ξϓ
    ϦέʔγϣϯͰ؅ཧ͍ͨ͠
    • ݟͨ໨΋ἧ͍͑ͨ(styleఆٛ΋ؚΈ͍ͨ)
    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍
    ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)

    View Slide

  20. ͬ͘͟Γํ਑
    • τϥϯεύΠϧޙͷjsΛఏڙ͢Δ
    • ࢖༻͢ΔϥΠϒϥϦ͸externalsʹࢦఆ͢Δ
    • css loaderΛ࢖͍ɺstyleఆٛΛϩʔΧϧείʔ
    ϓͰ࣋ͨͤΔ

    View Slide

  21. Webpackͷexternalsͷࢦఆ

    View Slide

  22. Webpackͷexternalsͷࢦఆ
    ᶃFYUFSOBMTର৅ͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ
    ᶅґଘղܾํ๏

    View Slide

  23. ɾϏϧυલ
    ɾϏϧυޙ
    XFCQBDL
    Webpackͷexternalsͷࢦఆ

    View Slide

  24. ɾϏϧυલ
    ɾϏϧυޙ
    XFCQBDLͰϏϧυ
    Webpackͷexternalsͷࢦఆ
    ᶃFYUFSOBMTର৅ͷจࣈྻ
    ᶅґଘղܾํ๏
    ᶄτϥϯεύΠϧޙͷจࣈྻ

    View Slide

  25. externalsࢦఆͰಘΔ΋ͷ
    • ϥΠϒϥϦͷόʔδϣϯࢦఆ͸ར༻ଆʹدͤ
    ΒΕΔ
    • ϏϧυޙͷjsΛఏڙͯ͠΋αΠζ͕཈͑ΒΕΔ

    View Slide

  26. css loaderͷར༻
    IPHFSFBDUKT
    IPHFTDTT

    View Slide

  27. css loaderͷར༻

    View Slide

  28. css loaderʹΑͬͯಘΔ΋ͷ
    • style΋ίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨ໨ͷ͹
    Β͖ͭΛ཈͑ΒΕΔ
    • ϩʔΧϧείʔϓ͸ηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ
    ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ౓͕ߴ͘ͳ
    Δ͜ͱ͸ͳ͍

    (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ
    Δ

    View Slide

  29. ίϯϙʔωϯτͷߏ଄ͷن໿
    ൪֎ଆʹ͸֎෦͔Β౉͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ
    ൪໨͸ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ
    ͦΕΑΓ಺ଆʹίϯϙʔωϯτͷ಺༰Λهड़͢Δ

    View Slide

  30. ن໿Λ࣋ͨͤΔ͜ͱͰɺ
    ֎෦͔ΒͷελΠϧͷ
    ଧͪফ͠΍্ॻ͖͕
    ͠΍͘͢ͳΔ

    View Slide

  31. ن໿ʹ͍ͭͯ͸

    ઈࢍࢼߦࡨޡதͰ͢ɻɻ

    ྑ͍ϓϥΫςΟε͝ଘ஌Ͱ͠
    ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ

    View Slide

  32. ΤϯδχΞઈࢍืूதʂ

    View Slide

  33. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide