Polyfill奮闘記 / genba_ts2

2025年6月18日（水）に開催の現場.tsの登壇資料です。

イベントURL：https://spacemarket.connpass.com/event/353393/

発表者情報：医療プラットフォーム本部　エンジニア　吉岡雄也

Transcript

1. 現場.ts vol2 〜Webサービス開発の中⾝⾒せます〜 株式会社メドレー 吉岡雄也 Polyfill奮闘記
2. ©2025 MEDLEY, INC. 2 ⽬次 1. はじめに 2. ECMAScriptについて 3. 効いてなかったPolyfill 4. Polyfillが効くようになるまで 5. まとめ
3. ©2025 MEDLEY, INC. 3 3 はじめに
4. ©2025 MEDLEY, INC. メドレーは、医療ヘルスケア領域の課題を解決するために設⽴されました。 医療ヘルスケアの未来を作るために、 メドレーは「⼈材プラットフォーム事業」と「医療プラットフォーム事業」を中⼼に、事業を展開しています。 会社名 事業内容 代表者 設⽴ 本社所在地 グループ会社 株式会社メドレー ⼈材プラットフォーム事業 医療プラットフォーム事業 代表取締役社⻑ CEO 瀧⼝ 浩平 2009 年 6 ⽉ 5 ⽇ 東京都港区六本⽊6-10-1 六本⽊ヒルズ森タワー 13F 株式会社パシフィックメディカル 株式会社メドレーフィナンシャルサービス 株式会社ASFON TRUST NETWORK 他 会社概要 事業内容 ※2025年3⽉末現在 4 「医療ヘルスケアの未来をつくる」会社
5. ©2025 MEDLEY, INC. 5 電⼦カルテCLINICS カルテ画⾯
6. ©2025 MEDLEY, INC. 6 電⼦カルテCLINICS 最近リリースしたiPadでの⼿書き機能 テックブログも書いたので、是⾮読んでください！ https://developer.medley.jp/entry/2025/05/27/153652/
7. ©2025 MEDLEY, INC. 7 ⾃⼰紹介 名前 • 吉岡雄也 経歴 • 2022年新卒⼊社 • 2023年9⽉まで患者向けアプリ‧WebサービスCLINICSの開発 ◦ TypeScript（Next）、Swift、Kotlin • 2023年10⽉〜現在は医療機関向け電⼦カルテCLINICSの開発 ◦ TypeScript（React）、Ruby（Rails） 趣味 • ボルダリング • Bリーグ観戦
8. ©2025 MEDLEY, INC. 8 今回お話する内容 現場.tsということで、 • AI活⽤ • コンポーネント設計 • 最新フレームワーク‧ライブラリの紹介 などの華やかな話題ではなく、「現場」感のあるリアルな泥臭いテーマにしました！ 今回のテーマ Polyfill有効化までの道のり
9. ©2025 MEDLEY, INC. 9 9 ECMAScriptについて
10. ©2025 MEDLEY, INC. 10 ECMAScriptについて ECMAScriptはJavaScriptの標準仕様。新しいバージョンが定期的にリリースされており、ES2025 も2025年6⽉にリリース予定。 ES2025の新機能の⼀部抜粋 • Promise.try ◦ Promiseを返すかわからない関数を同期的に処理できる ▪ Promise.try(functionAsyncOrSync) • Setに集合演算メソッドが使えるようになった ◦ AND→intersection ◦ OR→union ◦ 差集合→difference 便利な機能が増えるので使いたい！
11. ©2025 MEDLEY, INC. 11 11 効いてなかったPolyfill
12. ©2025 MEDLEY, INC. 12 効いてなかったPolyfill ある⽇の出来事‧‧‧ sortをtoSortedに書き換えて、 元の配列を変更しないように 改善しよう！ ◯◯機能が使えなくなっ たんですけど。。。 △△クリニック
13. ©2025 MEDLEY, INC. 13 効いてなかったPolyfill • toSortedはES2023から追加された機能で、Chrome110から使⽤できる • ⼀部医療機関では、Chromeのバージョンアップが⾏われていなかった ◦ 使⽤しているPCのバージョンが古く、Chromeのバージョンが上げられない医療機関も 存在 ◦ 業務システムであるため、カルテが使えなくなることはクリティカルな問題になる。PC 購⼊までの時間もかかるので、PC買い替えてねと案内だけするわけにもいかない • プロジェクトのソースコードには、babel.config.jsファイルが存在しPolyfillの設定は⾏われ ていそうだった Polyfillの設定はされていたが、効いていなかったことが判明
14. ©2025 MEDLEY, INC. 14 効いてなかったPolyfill ところで‧‧‧ Polyfillとは、古いブラウザでサポートされていない機能を使えるようにするためのコードのこ と。今回Polyfillが効いていれば、toSortedがサポートされていないブラウザでもエラーにならな かった。 今回は、toSortedをsortに戻したことでエラーを解消した。 しかし、Polyfillが効いていない原因は不明で、すぐに解消するのは難しい。開発は⽇々⾏われてい るので、次いつ同じことが発⽣してしまうかわからない。 皆さんならどうやって再発を防⽌しますか？
15. ©2025 MEDLEY, INC. 15 効いてなかったPolyfill 考えうる対策 • 実装時‧コードレビュー時に気をつける →⼈の作業になるので必ずミスが発⽣する❌ • E2Eの⾃動テストツールで検知する →全ての画⾯を検証できるわけではない❌ • GitHub Copilotによるコードレビュー →正しくない可能性もあり、レビューが無視されて開発される可能性もある❌ • ESLintでの静的解析 →毎年アップデートが必要になり、実装コストも⾼い❌ ⼈の⼿に頼らず、静的解析で検知したい！
16. ©2025 MEDLEY, INC. 16 効いてなかったPolyfill 特定バージョンのES（今回はES2023以上）が使われた場合に静的解析で気づきたい！ tsconfigのlibオプション https://www.typescriptlang.org/tsconfig/#lib > Your runtime platform provides certain JavaScript API objects (maybe through polyfills), but doesn’t yet support the full syntax of a given ECMAScript version targetを変更せずに、libのみes2022に変更することでトランスパイル 結果を変えずに、ES2023以上が使⽤された場合に検知できる！
17. ©2025 MEDLEY, INC. 17 17 Polyfillが効くようになるまで
18. ©2025 MEDLEY, INC. 18 Polyfillが効くようになるまで 現状の設定 useBuiltInsにentryを指定し、エントリファイルで core-js/stableをimportしているので⼀⾒設定は正しそう
19. ©2025 MEDLEY, INC. 19 Polyfillが効くようになるまで corejs: "3.42.0"と最新のバージョンを明記することでPolyfillが効くようになった！ しかし、core-js/stableをimportすると不要なPolyfillまでimportされ、ファイルサイズが無駄に⼤ きくなってしまう。 https://babeljs.io/docs/babel-preset-env#usebuiltins-entry corejsの古いバージョンが参照されており、 最新のPolyfillが効いていなかった
20. ©2025 MEDLEY, INC. 20 Polyfillが効くようになるまで useBuiltIns: "usage"を指定することで、必要なPolyfillのみがimportされるようになる。 https://babeljs.io/docs/babel-preset-env#usebuiltins-usage usageに変更して、不要になったcore-jsのimportも削除する！
21. ©2025 MEDLEY, INC. 21 Polyfillが効くようになるまで プロジェクト内のNumbers.tsxでtoSortedを使⽤しているので、これでPolyfillが効くようになるは ず！ toSortedのPolyfillが効かなかった😭
22. ©2025 MEDLEY, INC. 22 webpackの設定を確認してみると‧‧‧ https://webpack.js.org/configuration/module/#ruletest Polyfillが効くようになるまで Polyfillが必要なコードを解析する対象が jsファイルのみになっていた
23. ©2025 MEDLEY, INC. 23 tsファイルもbabelの対象になったので、@babel/preset-typescriptを追加。 https://babeljs.io/docs/babel-preset-typescript Polyfillが効くようになるまで Polyfillが効くようになった🎉
24. ©2025 MEDLEY, INC. 24 Polyfillの検証⽅法 babel/preset-envのdebugオプションを有効にすることで、 Polyfillが効いているかログで確認できます。 https://babeljs.io/docs/babel-preset-env#debug また、特定のChromeのバージョンでの動作検証には、 BrowserStackを使⽤しました！ https://www.browserstack.com/ Chrome以外のブラウザにも対応しており、 細かくバージョン指定できるのでめっちゃ便利です。 Polyfillが効くようになるまで
25. ©2025 MEDLEY, INC. 25 今後の対応 Polyfillが効くようになったので、今後は何も⼼配することなく最新ESの機能を使って良いのか？ →NO󰢃 ES2025がリリースされてもcore-jsでそのPolyfillが未対応かもしれないし、そもそもプロジェクト で使⽤しているcore-jsのバージョンが古いかもしれない。 https://github.com/zloirock/core-js Polyfillが効くようになるまで • 意図しないESのバージョンの機能が使われないように、 tsconfigのlibで引き続きチェックは必要になる • ESのバージョンはcore-jsと⼀緒に上げていく必要がある
26. ©2025 MEDLEY, INC. 26 26 まとめ
27. ©2025 MEDLEY, INC. 27 • tsconfigのlibで特定のESのバージョンを指定することで、意図しないバージョンのESの機能 が使われたときに検知できる • Polyfillで追加するコードの範囲をuseBuiltInsオプションで指定できる ◦ entry：Polyfillが必要なコードを⾃分でimportする ◦ usage：必要なPolyfillを⾃動でimportしてくれる • TypeScriptのコードもPolyfillの解析対象にするには設定が必要 ◦ babel-loaderの対象ファイルにtsファイルも含める ◦ @babel/preset-typescriptを追加する • Polyfillの検証には、debugオプションやBrowserStackが使える まとめ
28. ©2025 MEDLEY, INC. 28 We’re hiring カジュアル面談も大歓迎です！ 募集一覧 Developer Portal