Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018年、IE6対応サイトを作る
Search
boiyama
June 19, 2018
Programming
4
980
2018年、IE6対応サイトを作る
We Are JavaScripters! @21st【初心者歓迎LT大会】の発表資料です。
https://wajs.connpass.com/event/87473/
boiyama
June 19, 2018
Tweet
Share
More Decks by boiyama
See All by boiyama
Reproのビジネスサイドを支えるJS
boiyama
0
170
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
260
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
700
Serverless for Front-end Server-Side Rendering
boiyama
1
110
Learning Elm in JS
boiyama
1
550
JSでElmを学ぶ
boiyama
0
97
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
160
CSC509 Lecture 06
javiergs
PRO
0
260
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
870
CSC509 Lecture 07
javiergs
PRO
0
240
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6k
CSC509 Lecture 05
javiergs
PRO
0
310
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
One Enishi After Another
snoozer05
PRO
0
150
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
100
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
Cursorハンズオン実践!
eltociear
2
1.2k
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
RailsConf 2023
tenderlove
30
1.3k
It's Worth the Effort
3n
187
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Making Projects Easy
brettharned
120
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Transcript
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
P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL
• GitHub: boiyaa Twitter: boiyaaaaaa
Ζ ͏ ͱ ࢥ ͬ ͨ ಈ ػ ϠέΫι
2018ݱࡏ IE6 ͷγΣΞ΄΅ 0% Β͍͠͠ IE7~10 ΄΅ 0% Β͍͠ ͍͍ςʔϚ͡Όͳ͍͔
͠ Γ ͱ ͯ͠ɺ ࠓ ࣌ ͷ ͭ
Λ ͏ ੲͳ͕ΒͷίʔσΟϯάΛͯͭ͠·Βͳ͍ Backbone ͱ͔ AngularJS ͷݹ͍όʔδϣϯΘͳ͍ ͠ࠓ࣌ͷ͕ͭ͑ͨΒۤ͡Όͳ͍͔
ࠓ ࣌ ͷ ͭ ͷ α ϙʔ τϒ ϥ
β ௐ Δ • React ͱ͔ Vue ͱ͔ Angular ͱ͔େମΈΜͳ IE9+ • jQuery ͢Β IE9+ • webpack IE9+ ( Parcel, Rollup, FuseBox ෆ໌ ) • ͭ·Γ ES5 ޓϒϥβରԠͱ͍͏͜ͱ
ͱ ͍ ͍ ͭ ͭ ReactDOM υΩϡϝϯτ webpack υΩϡϝϯτ
݁ہͷͱ͜Ζ Polyfill ೖΕͨΒಈ͘ʁ Babel TypeScript ES3 ʹมͰ͖ΔΈ͍ͨͩ͠
ଓ ͍ͯɺ I E 6 ڥ ೖ ख ํ
๏ • Windows XP • ·ͨ BrowserStack
ࠓ ճ B ro w s e r S
t a c k Λ ͏
ແྉϓϥϯͩͱIE6͕͑ͳ͔ͬͨͷͰɺ Ұ൪͍҆ϓϥϯΛܖͨ͠ ͭΓ͚ͩͬͨͲɺ ؒҧ͑ͯؒҰׅʹͯͯ͠ $350 ࢧͬͨ
ͱΓ͋͑ͣ Next.js Ͱ࡞ͬͨͭΛࢼ͢
X P I E 6
͋Εɺ͍͖ͳΓಈ͍ͨ Next.js ͦ͜·Ͱͬͯ͘ΕΜͷʂʁ ͳΘ͚ͳ͍
SSR ͯ͠Δը໘͕ग़ͯΔ͚ͩ ී௨ʹ JS ΤϥʔʹͳͬͯΔ IE6 ͩͱ༰͕Θ͔ΓͣΒ͍ͷͰɺ Ұ୴ IE11 ͷ
IE8 ϞʔυͰσόοά͢Δ
None
IE8- ͰϓϩύςΟ໊ʹ༧ޠΛ͏߹ ϒϥέοτදه͡Όͳ͍ͱΤϥʔ obj.class // error obj[“class”] // ok
ͦͷมΛͬͯ͘ΕΔ es3ify-loader ͱ͍͏ webpack loader ͕͋ͬͨ ͕ Next.js ͷ webpack
config Ͱ͏ͱౖΒΕͨ ૉͷ React + webpack Ͱࢼ͢
͏·͍͚͘͜Ε͕ͰΔ IE8͖ͬ͞ͷग़ͳ͘ͳ͚ͬͨͲผͷΤϥʔ͕ग़ͨ
IE8- ʹ get / set ߏจ͕ͳ͍ ม͢Δํ๏͕͋Δͷ͔Ͳ͏͔Θ͔Βͳͯ͘ ͱΓ͋͑ͣ get /
set ߏจΛؚΜͩϥΠϒϥϦఘΊͨ
React ͖͋ΒΊΔͱͯ͠ Vue Ͱ Angular ͰΘΕͯͨ ͦΜͳத͍͚ͦ͏ͳࠓ࣌ͷͭΈ͚ͭͨ
None
ͱΓ͋͑ͣ webpack Ͱ Hyperapp ΛϏϧυͯ͠ΈͨΒ ͜Ε Next.js ͱಉ༷ʹ es3ify-loader ͰౖΒΕͨ
ؾసʹ Parcel ʹม͑ͨ
parcel ެࣜʹ͋Δ hyperapp ͷαϯϓϧʹ es3ify ΛΈ߹ΘͤΔ ( ࢀߟɿhttps://gist.github.com/ bard/5cb927e7abb6988b2f2e516b5f0e6070 )
͏·͍͚͘͜Ε͕ग़Δ
ES5 Ճϝιου͕ଘࡏ͠ͳ͍͜ͱʹΑΔΤϥʔ ·͊ͦΜͳ͏·͍͔͘ͳ͍
es5-shim, es5-sham Λಋೖͯ͠ରԠͨ͠ ͨͩɺࠓճͷ Object.defineProperty શͳαϙʔτ Ͱͳ͘ɺྫ͑ get, set هड़ࢠΛ͏ͱΤϥʔʹͳΔ
ͦ͏͍ IE8- addEventListener ͡Όͳ͔ͬͨ attachEvent ͱ͍͏ಠ࣮ࣗ ·ͩग़Δ
addEventListener ͷ Polyfill ͋ͬͨ https://gist.github.com/jonathantneal/3748027 ͜ΕΛ es5-shim ͷ࣍ʹಡΈࠐΉ
͍ͦͯͭ͠ʹ
X P I E 8
X P I E 7
X P I E 6 · Ͱ ಈ ͍ ͨ
ʂ
͜͜Ͱྗਚ͖ͨ
· ͱ Ί • https://github.com/boiyaa/i6-challenge • ಈ͘ JS ίʔυͷ҆ getter
/ setter ͷ༗ແ • ·ͩ CSS ͷۤʹೖΕͯͳ͍ɻઈɻ • ͜ͷൃදͷͨΊʹ $350 ࣦͬͨͷ͕௧͍
͞ΑͳΒ