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

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

joe_re
March 11, 2016
Technology
1
7.7k

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

gotanda.js#3のLT資料です

joe_re

March 11, 2016
Tweet

More Decks by joe_re

See All by joe_re
Real-Time applications with GraphQL
joere
0
38
Prisma2 with Graphql
joere
3
800
Go beyound static on Netlify
joere
1
170
Building Real-time Vue App
joere
4
4k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
210
Mock Native API in your E2E test
joere
2
890
Data feching and caching on Apollo Client
joere
2
2.2k
Typed Vuex Data Flow
joere
0
460
AsyncStorageをNodeのREPLから操作するためにTop-levelでawaitしたい人生だった
joere
0
400

Other Decks in Technology

See All in Technology
20分でわかる！速習resultBuilder（iOSDC 2022）
chocoyama
2
270
20220915modelingLT
levii
4
420
KDD2022論文読み会：LinkedInの推薦システムから学ぶ
pacocat
0
250
TokyoR#101 パーマーステーションのペンギンたち2 データクリーニング編
bob3bob3
1
290
PHP メモリ管理術
memory1994
PRO
2
340
SSI DIDs VCs 入門資料
kayato
0
440
C向けサービスで 使われている認証方式と安全な使い方
ritou
5
360
Roslyn とその活用法
nenonaninu
2
230
OCI IaaS 新機能アップデート 2022/6 - 2022/8
oracle4engineer
PRO
0
120
All About Regular Expressions
jadeallenx
1
100
Agile and DevOps の歴史をチェリーピック
kawaguti
PRO
10
1.9k
PHPバージョンアップのための依存ライブラリとの付き合い方 / phpcon2022
blue_goheimochi
1
530

Featured

See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
174
8.7k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
What's in a price? How to price your products and services
michaelherold
230
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
21
1.3k
Bash Introduction
62gerente
598
210k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
How GitHub (no longer) Works
holman
298
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
A designer walks into a library…
pauljervisheath
197
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
28k
Designing Experiences People Love
moore
130
22k
Gamification - CAS2011
davidbonilla
75
4k

Transcript

  1. WebpackʹΑΔ ਓྨڞ௨
 ίϯϙʔωϯτܭը @joe_re

  2. twitter: @joe_re
 github: @joe-re - ໊લ: ͡ΐ͏ - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢ -

    ࠓ͸Ϋϥ΢υڅ༩ܭࢉ΍ͬͯ·͢

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

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

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

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

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

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

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

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

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

  12. ͜͏͍͏ͷ

  13. ͜͏ݟ͑ͯ໿150ߦͷ
 ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍೔෇Λબ୒͠ͳ͍
 (2016/3/31 ➡ 2016/2/29ʹͳΔ)

    • ͳͲͳͲ

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

  15. ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ ͖Λͳͤ͘Δ
 (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰

    Խ

  16. ஫ҙ • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ͸
 1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ • Reactͷ࢖༻Λલఏʹ͓࿩͠·͢

  17. Α͠ɺWebpackͩʂ

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

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

    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)

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

  21. Webpackͷexternalsͷࢦఆ

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

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

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

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

  26. css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

  27. css loaderͷར༻

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

    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ

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

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

  31. ن໿ʹ͍ͭͯ͸
 ઈࢍࢼߦࡨޡதͰ͢ɻɻ 
 ྑ͍ϓϥΫςΟε͝ଘ஌Ͱ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ

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

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