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

Transcript

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

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

   • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. 3.

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

4. 4.

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

5. 5.

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

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

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

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

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

8. 8.

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

9. 9.

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

   ๏ • Windows XP • ·ͨ͸ BrowserStack
10. 10.

    ࠓ ճ ͸ B ro w s e r S

    t a c k Λ ࢖ ͏
11. 11.

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

12. 12.

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

13. 13.

    X P I E 6

14. 14.

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

15. 15.

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

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

    None
17. 17.

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

18. 18.

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

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

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

20. 20.

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

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

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

22. 22.

    None
23. 23.

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

    ؾ෼స׵ʹ Parcel ʹม͑ͨ
24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

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

29. 29.

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

30. 30.

    ͍ͦͯͭ͠ʹ

31. 31.

    X P I E 8

32. 32.

    X P I E 7

33. 33.

    X P I E 6 · Ͱ ಈ ͍ ͨ

    ʂ
34. 34.

    ͜͜Ͱྗਚ͖ͨ

35. 35.

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

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

    ͞ΑͳΒ