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
970
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
160
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
230
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.4k
フロントエンドのサーバーレス SSR編
boiyama
0
660
Serverless for Front-end Server-Side Rendering
boiyama
1
87
Learning Elm in JS
boiyama
1
520
JSでElmを学ぶ
boiyama
0
80
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
460
Fast JSX: Don't clone props object #28768
yossydev
1
160
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
SIMD Parallel Programming with the Vector API
josepaumard
0
230
2 週間で Twitter Bot を作ってみた
contour_gara
0
760
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Elm 0.19.0 Changes
bkuhlmann
0
500
Hanami and htmx
bkuhlmann
0
220
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
For a Future-Friendly Web
brad_frost
172
9k
A better future with KSS
kneath
231
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Debugging Ruby Performance
tmm1
70
11k
Building Your Own Lightsaber
phodgson
100
5.7k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
What's in a price? How to price your products and services
michaelherold
238
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
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 ࣦͬͨͷ͕௧͍
͞ΑͳΒ