Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
2018年、IE6対応サイトを作る
boiyama
June 19, 2018
Programming
4
950
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
boiyaa
0
120
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyaa
1
210
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyaa
0
1.4k
チームをCQRS
boiyaa
1
1.2k
フロントエンドのサーバーレス SSR編
boiyaa
0
630
Serverless for Front-end Server-Side Rendering
boiyaa
1
66
Learning Elm in JS
boiyaa
1
480
JSでElmを学ぶ
boiyaa
0
65
フロントエンドのサーバーレス SPA編
boiyaa
1
1k
Other Decks in Programming
See All in Programming
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
1k
Groovy Roadmap
paulk
7
13k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.6k
機能横断型チームにおける技術改善
takeshiakutsu
3
440
Where and how to run UI tests (Droidcon London, 2021)
nonews
0
210
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
310
既存のプロジェクトにKMMを導入するための対応策
martysuzuki
2
290
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
480
TSDサービスRecap ~PMBOK®ガイド第7版超速まるわかりガイド~|ミツエーリンクスTSD
mlctsd
0
100
How useEvent would change our applications
koba04
1
1.5k
2022 FrontEnd Training
mixi_engineers
1
270
iOSアプリの技術選択2022
tattn
6
2.3k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
3
770
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
We Have a Design System, Now What?
morganepeng
35
2.9k
Code Reviewing Like a Champion
maltzj
506
37k
Making Projects Easy
brettharned
98
4.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
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 ࣦͬͨͷ͕௧͍
͞ΑͳΒ