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
170
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
240
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.4k
フロントエンドのサーバーレス SSR編
boiyama
0
670
Serverless for Front-end Server-Side Rendering
boiyama
1
92
Learning Elm in JS
boiyama
1
530
JSでElmを学ぶ
boiyama
0
85
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
Quine, Polyglot, 良いコード
qnighy
4
650
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Jakarta EE meets AI
ivargrimstad
0
220
みんなでプロポーザルを書いてみた
yuriko1211
0
280
Arm移行タイムアタック
qnighy
0
330
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
C++でシェーダを書く
fadis
6
4.1k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
240
Featured
See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
Practical Orchestrator
shlominoach
186
10k
What's in a price? How to price your products and services
michaelherold
243
12k
Ruby is Unlike a Banana
tanoku
97
11k
Happy Clients
brianwarren
98
6.7k
Unsuck your backbone
ammeep
668
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Invisible Side of Design
smashingmag
298
50k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Code Review Best Practice
trishagee
64
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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 ࣦͬͨͷ͕௧͍
͞ΑͳΒ