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
@babel/polyfill 再確認
Search
muryoimpl
January 24, 2018
Technology
1
1.4k
@babel/polyfill 再確認
2018/01/24(水) に弊社 コワーキングにて開催されたカレンダー配布回でぐだったLTです
muryoimpl
January 24, 2018
Tweet
Share
More Decks by muryoimpl
See All by muryoimpl
人魚とたわむれる
muryoimpl
0
19
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
1.3k
Kanazawa.rb LT大会用/kzlt コマンドの説明 2024/01版
muryoimpl
0
2.9k
kzltコマンドの新たなソリューションについて
muryoimpl
0
2.9k
俺とTODOアプリ~Linearの変~
muryoimpl
0
2.4k
POSIX文字クラスでの躓き
muryoimpl
0
2.3k
/kzlt コマンドとは
muryoimpl
0
950
meetup.kzrb.org の更新を考える 事前激闘編
muryoimpl
0
1.5k
meetup.kzrb.org の更新を 考える ゆるふわ編
muryoimpl
0
1.5k
Other Decks in Technology
See All in Technology
人工衛星のファームウェアをRustで書く理由
koba789
15
8.1k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
「Linux」という言葉が指すもの
sat
PRO
4
140
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
460
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
200
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
240
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
210
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
Featured
See All Featured
Done Done
chrislema
185
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Automating Front-end Workflow
addyosmani
1370
200k
Building an army of robots
kneath
306
46k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Designing Experiences People Love
moore
142
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Code Review Best Practice
trishagee
70
19k
Music & Morning Musume
bryan
46
6.8k
Transcript
@babel/polyfill 再確認 2018 アジャイル事業部 年始のご挨拶 2 月担当: muryoimpl ( 無量井
健)
None
そもそも、polyfill って何?
Web 開発でいえば、ブラウザが未実装の機能を、導入すること で利用できるようにするコードのこと ネイティブ実装のように 動くようにしてくれるもののこと != 代替関数を用意してくれているライブラリ (lodash のような 便利関数の集まりとは違う)
polyfill とは?
@babel/polyfill (babel-polyfilll) core-js regenerator-runtime dialog-polyfill (material-design-lite で利用) raf にある polyfill.js
(React.js v16 利用時に必要) ( 私が使っている代表的な) polyfill ※ dialog-polyfill は HTML の <dialog> タグを使うためのものです。
最も利用機会が多いのは、 @babel/polyfill だと思うので 改めて利用方法を 確認してみましょう
Q: 中身どうなってるの? @babel/polyfill
A: core-js 内の shim.js と regenerator-runtime を 取り込んでいるだけ!! @babel/polyfill
None
Q: polyfill と Shim の違いって何? <!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
A: Shim は旧環境に新API を提供するも の polyfill はShim の一種でブラウザ間の API の差分をなくすもの
※ パテみたいなものが語源? 参考: http://2ality.com/2011/12/shim-vs-polyfill.html
None
Q: @babel/preset-env における polyfill の設定を雰囲気でやっている… どうなっているの?
.babelrc の設定でみるべきは以下の2つ 1. useBuiltIns 2. targets.browsers // .babelrc { "presets":
[ ["@babel/preset-env", { "useBuiltIns": "usage", "targets": { "browsers": ["last 2 versions", "safari 7"] } }] ] }
1. useBuiltIns
“usage” | “entry” | false の3 つの値をとれる default は false
どのように polyfill を import するかが異なる。うまく使うと ファイルサイズを減らせる browserslist から取得した環境に則って、polyfill を差し込む browserslist は後ほど説明する .babelrc の useBuiltIns
呼んだ各所に呼んだ関数を含むpolyfill のimport 文を挿入する ファイルに対して1 回しか読み込まない これが一番よさそう import 文を書かないから混乱する?(polyfill ってでも意識し ないものだよね?)
var a = new Promise(); ↓ import "core-js/modules/es6.promise"; var a = new Promise(); .babelrc の useBuiltIns: "usage"
entry file に書いてある import “babel/polyfill” を置換して、 使っているpolyfill のimport 文を差し込む global
で衝突の可能性があるけど、entry file が1 つなら心配 なさそう global._babelpolyfill の値で多重読み込みしているかチェック はしている import "@babel/polyfill"; ↓ // padStart と padEnd を使っている場合 import "core-js/modules/es7.string.pad-start"; import "core-js/modules/es7.string.pad-end"; .babelrc の useBuiltIns: "entry"
何もしない entry file に import “babel/polyfill” を書いていれば全 polyfill を読み込む import
"babel/polyfill"; .babelrc の useBuiltIns: false
2. targets.browsers
babel を通して使うJavaScript コードのサポート対象を指定す るパート 内部的には browserslist という npm package を利用してい
る browserslist は、クエリをparse して caniuse-lite のデータを 元に対応ブラウザの情報を生成する caniuse-lite は caiuse のデータを元にしている caniuse は https://caniuse.com/ のデータを使っている模様 ここで取得した情報と、preset-env/data の情報をつきあわせ て対象ブラウザに polyfill が必要かどうかを判断している .babelrc の targets.browsers
browserslist をコマンドラインで使ってみると↓ のような感じで情報がとれる これと preset-env のdata 以下にある JSON の情報とつきあわせて判断する %
npx browserslist "> 1%" and_chr 62 and_uc 11.4 chrome 63 chrome 62 firefox 57 ie 11 ios_saf 11.0-11.2 ios_saf 10.3 op_mini all safari 11 samsung 6.2 samsung 4 .babelrc の targets.browsers
None
つまり……
ちゃんと指定すると 無駄な polyfill を適用しないで済む 衝突を気にしなくてよい 無駄な import が減る = 容量削減!
まとめ
polyfill は未実装の機能をnative に動くようにしてくれる、便 利なライブラリ polyfill は shim 一種。ブラウザ間のJavaScript の機能差異を 埋めてくれる
.babelrc に useBuildIns があるので使うとよさそう .babelrc に targets.browsers があるので使うとよさそう 雰囲気でなく、あるものちゃんと使っていこう まとめ