Tweet
Tweet

Slide 1

Slide 1 text

2 0 1 8 ೥ ɺ I E 6 ର Ԡ αΠ τ Λ ࡞ Δ 2 0 1 8 . 6 . 1 9 We A re J a v a S c r i p t e r s ! @ 2 1 s t

Slide 2

Slide 2 text

P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa

Slide 3

Slide 3 text

΍ Ζ ͏ ͱ ࢥ ͬ ͨ ಈ ػ ϠέΫι

Slide 4

Slide 4 text

2018೥ݱࡏ IE6 ͷγΣΞ͸΄΅ 0% Β͍͠͠ IE7~10 ΋΄΅ 0% Β͍͠ ͍͍ςʔϚ͡Όͳ͍͔

Slide 5

Slide 5 text

͠ ͹ Γ ͱ ͯ͠ɺ ࠓ ࣌ ͷ ΍ ͭ Λ ࢖ ͏ ੲͳ͕ΒͷίʔσΟϯάΛͯ͠΋ͭ·Βͳ͍ Backbone ͱ͔ AngularJS ͷݹ͍όʔδϣϯ͸࢖Θͳ͍ ΋͠ࠓ࣌ͷ΍͕ͭ࢖͑ͨΒۤ͡Όͳ͍͔΋

Slide 6

Slide 6 text

ࠓ ࣌ ͷ ΍ ͭ ͷ α ϙʔ τϒ ϥ ΢ β ௐ ΂ Δ • React ͱ͔ Vue ͱ͔ Angular ͱ͔େମΈΜͳ IE9+ • jQuery ͢Β IE9+ • webpack ΋ IE9+ ( Parcel, Rollup, FuseBox ͸ෆ໌ ) • ͭ·Γ ES5 ޓ׵ϒϥ΢βରԠͱ͍͏͜ͱ

Slide 7

Slide 7 text

ͱ ͸ ͍ ͍ ͭ ͭ ReactDOM υΩϡϝϯτ webpack υΩϡϝϯτ

Slide 8

Slide 8 text

݁ہͷͱ͜Ζ Polyfill ೖΕͨΒಈ͘ʁ Babel ΋ TypeScript ΋ ES3 ʹม׵Ͱ͖ΔΈ͍ͨͩ͠

Slide 9

Slide 9 text

ଓ ͍ͯɺ I E 6 ؀ ڥ ೖ ख ํ ๏ • Windows XP • ·ͨ͸ BrowserStack

Slide 10

Slide 10 text

ࠓ ճ ͸ B ro w s e r S t a c k Λ ࢖ ͏

Slide 11

Slide 11 text

ແྉϓϥϯͩͱIE6͕࢖͑ͳ͔ͬͨͷͰɺ
 Ұ൪͍҆ϓϥϯΛܖ໿ͨ͠ ͭ΋Γ͚ͩͬͨͲɺ
 ؒҧ͑ͯ೥ؒҰׅʹͯͯ͠ $350 ࢧ෷ͬͨ

Slide 12

Slide 12 text

ͱΓ͋͑ͣ Next.js Ͱ࡞ͬͨ΍ͭΛࢼ͢

Slide 13

Slide 13 text

X P I E 6

Slide 14

Slide 14 text

͋Εɺ͍͖ͳΓಈ͍ͨ Next.js ͦ͜·Ͱ΍ͬͯ͘ΕΜͷʂʁ ͳΘ͚ͳ͍

Slide 15

Slide 15 text

SSR ͯ͠Δը໘͕ग़ͯΔ͚ͩ ී௨ʹ JS ͸ΤϥʔʹͳͬͯΔ IE6 ͩͱ಺༰͕Θ͔ΓͣΒ͍ͷͰɺ
 Ұ୴ IE11 ͷ IE8 ϞʔυͰσόοά͢Δ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

IE8- Ͱ͸ϓϩύςΟ໊ʹ༧໿ޠΛ࢖͏৔߹
 ϒϥέοτදه͡Όͳ͍ͱΤϥʔ obj.class // error obj[“class”] // ok

Slide 18

Slide 18 text

ͦͷม׵Λ΍ͬͯ͘ΕΔ es3ify-loader ͱ͍͏
 webpack loader ͕͋ͬͨ ͕ Next.js ͷ webpack config Ͱ࢖͏ͱౖΒΕͨ ૉͷ React + webpack Ͱࢼ͢

Slide 19

Slide 19 text

͏·͍͚͘͹͜Ε͕ͰΔ IE8͸͖ͬ͞ͷ͸ग़ͳ͘ͳ͚ͬͨͲผͷΤϥʔ͕ग़ͨ

Slide 20

Slide 20 text

IE8- ʹ͸ get / set ߏจ͕ͳ͍ ม׵͢Δํ๏͕͋Δͷ͔Ͳ͏͔Θ͔Βͳͯ͘
 ͱΓ͋͑ͣ get / set ߏจΛؚΜͩϥΠϒϥϦ͸ఘΊͨ

Slide 21

Slide 21 text

React ͸͖͋ΒΊΔͱͯ͠ Vue Ͱ΋ Angular Ͱ΋࢖ΘΕͯͨ ͦΜͳத͍͚ͦ͏ͳࠓ࣌ͷ΍ͭΈ͚ͭͨ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ͱΓ͋͑ͣ webpack Ͱ Hyperapp ΛϏϧυͯ͠ΈͨΒ ͜Ε΋ Next.js ͱಉ༷ʹ es3ify-loader ͰౖΒΕͨ ؾ෼స׵ʹ Parcel ʹม͑ͨ

Slide 24

Slide 24 text

parcel ެࣜʹ͋Δ hyperapp ͷαϯϓϧʹ es3ify Λ૊Έ߹ΘͤΔ ( ࢀߟɿhttps://gist.github.com/ bard/5cb927e7abb6988b2f2e516b5f0e6070 )

Slide 25

Slide 25 text

͏·͍͚͘͹͜Ε͕ग़Δ

Slide 26

Slide 26 text

ES5 ௥Ճϝιου͕ଘࡏ͠ͳ͍͜ͱʹΑΔΤϥʔ ·͊ͦΜͳ͏·͍͔͘ͳ͍

Slide 27

Slide 27 text

es5-shim, es5-sham Λಋೖͯ͠ରԠͨ͠ ͨͩɺࠓճͷ Object.defineProperty ͸׬શͳαϙʔτ Ͱ͸ͳ͘ɺྫ͑͹ get, set هड़ࢠΛ࢖͏ͱΤϥʔʹͳΔ

Slide 28

Slide 28 text

ͦ͏͍΍ IE8- ͸ addEventListener ͡Όͳ͔ͬͨ attachEvent ͱ͍͏ಠ࣮ࣗ૷ ·ͩग़Δ

Slide 29

Slide 29 text

addEventListener ͷ Polyfill ͋ͬͨ https://gist.github.com/jonathantneal/3748027 ͜ΕΛ es5-shim ͷ࣍ʹಡΈࠐΉ

Slide 30

Slide 30 text

͍ͦͯͭ͠ʹ

Slide 31

Slide 31 text

X P I E 8

Slide 32

Slide 32 text

X P I E 7

Slide 33

Slide 33 text

X P I E 6 · Ͱ ಈ ͍ ͨ ʂ

Slide 34

Slide 34 text

͜͜Ͱྗਚ͖ͨ

Slide 35

Slide 35 text

· ͱ Ί • https://github.com/boiyaa/i6-challenge • ಈ͘ JS ίʔυͷ໨҆͸ getter / setter ͷ༗ແ • ·ͩ CSS ͷۤ೰ʹೖΕͯͳ͍ɻઈ๬ɻ • ͜ͷൃදͷͨΊʹ $350 ࣦͬͨͷ͕௧͍

Slide 36

Slide 36 text

͞ΑͳΒ