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

We Are JavaScripters! @21st【初心者歓迎LT大会】の発表資料です。
https://wajs.connpass.com/event/87473/

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 ϞʔυͰσόοά͢Δ
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 Ͱ΋࢖ΘΕͯͨ ͦΜͳத͍͚ͦ͏ͳࠓ࣌ͷ΍ͭΈ͚ͭͨ
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. ͞ΑͳΒ