2018年、IE6対応サイトを作る

Transcript

1. 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

2. P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL

   • GitHub: boiyaa
 Twitter: boiyaaaaaa

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

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

5. ͠ ͹ Γ ͱ ͯ͠ɺ ࠓ ࣌ ͷ ΍ ͭ

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

6. ࠓ ࣌ ͷ ΍ ͭ ͷ α ϙʔ τϒ ϥ

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

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

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

9. ଓ ͍ͯɺ I E 6 ؀ ڥ ೖ ख ํ

   ๏ • Windows XP • ·ͨ͸ BrowserStack

10. ࠓ ճ ͸ B ro w s e r S

    t a c k Λ ࢖ ͏

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

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

13. X P I E 6

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

15. SSR ͯ͠Δը໘͕ग़ͯΔ͚ͩ ී௨ʹ JS ͸ΤϥʔʹͳͬͯΔ IE6 ͩͱ಺༰͕Θ͔ΓͣΒ͍ͷͰɺ
 Ұ୴ IE11 ͷ

    IE8 ϞʔυͰσόοά͢Δ
16. None

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

18. ͦͷม׵Λ΍ͬͯ͘ΕΔ es3ify-loader ͱ͍͏
 webpack loader ͕͋ͬͨ ͕ Next.js ͷ webpack

    config Ͱ࢖͏ͱౖΒΕͨ ૉͷ React + webpack Ͱࢼ͢

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

20. IE8- ʹ͸ get / set ߏจ͕ͳ͍ ม׵͢Δํ๏͕͋Δͷ͔Ͳ͏͔Θ͔Βͳͯ͘
 ͱΓ͋͑ͣ get /

    set ߏจΛؚΜͩϥΠϒϥϦ͸ఘΊͨ

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

22. None

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

    ؾ෼స׵ʹ Parcel ʹม͑ͨ

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

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

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

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

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

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

30. ͍ͦͯͭ͠ʹ

31. X P I E 8

32. X P I E 7

33. X P I E 6 · Ͱ ಈ ͍ ͨ

    ʂ

34. ͜͜Ͱྗਚ͖ͨ

35. · ͱ Ί • https://github.com/boiyaa/i6-challenge • ಈ͘ JS ίʔυͷ໨҆͸ getter

    / setter ͷ༗ແ • ·ͩ CSS ͷۤ೰ʹೖΕͯͳ͍ɻઈ๬ɻ • ͜ͷൃදͷͨΊʹ $350 ࣦͬͨͷ͕௧͍

36. ͞ΑͳΒ