Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
121
Help us understand the problem. What is going on with this article?
@moriyuu

polyfill.io が便利すぎた

More than 1 year has passed since last update.

2019-03-28 追記

@babel/polyfill を import しとくだけでいいんじゃないかというマイブームが来ています。

IE で Array.prototype.flatMap() は使えた。詳しくは知らない。

TL;DR

index.html に下の 1 行を追加しただけ1 で各種ブラウザ対応終わった。

+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

IE 対応

社内で真面目に IE 対応する雰囲気が出てきてしまってどうしようかと思ってたところ noteをNuxt.jsで再構築した話 を思い出したので、とりあえず polyfill.io 入れてみようかってことで入れてみた。

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.
(Polyfill.ioは、各リクエストの User-Agent ヘッダーを読み取り、要求元のブラウザに適した polyfills を返します。)

便利すぎかよ。

こういうことね。すごい。

src の後ろで ?features= に続けてポリフィルしたい機能を指定することができるので、ソースコードの中で使ってる機能に限定してポリフィルすることもできる。こうすることで余計に大きなファイルはロードしなくて済むのでファイルサイズの最適化ができそう。
だけど、そんなの features の中から選んでちまちま指定するの嫌だったし、どこまでポリフィルしてるかを気にせずにコードを書いていきたかったし、polyfill.js は CDN (Fastly) から配信されるのでどうせ速いしパフォーマンスは誤差やろ(計測しろや)と思ったので、今回はグループエイリアス es6 とだけ書いて祈ることにした(便利)

IE 対応、javascript に関してはもうこれに任せて安心して寝たい気持ちがある。

もしかしたらポフィリル自体が低品質だったせいで結局うまく動作しないってことがあるかも知れないけど、今回は対応コスト超〜低めでやれたんで、あとは何か起きたときの自分のカバー力に託したいと思います。それでは、おやすみなさい。


  1. うちは React 製 SPA なので 

121
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
moriyuu
standfm
stand.fmは多くの人が音声コンテンツを気軽に発信したり、お気に入りのチャンネルを簡単に見つけられるプラットフォームを目指しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
121
Help us understand the problem. What is going on with this article?