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

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

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

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

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

June 19, 2018
Tweet

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. ͞ΑͳΒ