浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【npm】対応ブラウザ外のJavaScriptコードを検出する

 JavaScriptは仕様こそECMAScriptとして明確に決まっていますが、実装は個々のブラウザまちまちです。未実装の機能も程々あります。
 ECMAScript® 2020 Language Specification
 このブラウザ間の差異を考慮、吸収するための仕組みがJavaScript界隈では培われてきました。例えば、Can I useというあるブラウザがJavaScriptのある機能を使えるか調べるためのサイトがあります。
Can I use… Support tables for HTML5, CSS3, etc
ブラウザ対応状況参照サイトCan I useの紹介 – 株式会社シーポイントラボ | 浜松のシステム開発会社
 これでも便利なのですが、実際のところJavaScriptのコードを作りながら問題が起きていることを知りたいものです。このための基盤としてbrowserslistというパッケージがあります。
browserslist – npm
 browserslistは設定に応じたブラウザのリストを得るためのパッケージです。設定はnpmの設定定義ファイルであるpackage.jsonに次の様に記述できます。

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

 こうすると記述してある様に環境変数を読んで、開発環境は最新のメジャーブラウザ用のリスト、製品環境はサポートの続いてるブラウザのリストをbrowserlistから得られます。環境変数の場合分け抜きでも、もちろん使えます。
 blowserlistを利用して多くのメジャーなパッケージが対応ブラウザの問題の対策をしています。
 一つ、BabelというJavaScript変換パッケージがあります。
Babel · The compiler for next generation JavaScript
javascriptのコンパイラであるbabelの紹介 – 株式会社シーポイントラボ | 浜松のシステム開発会社
 Babelは次の様に対象のブラウザリストに合う様に、JavaScriptの記法を変換してくれます。()=>{}やclassを安心して使えます。
 もう一つ、ESLintのプラグインに eslint-plugin-compat というものがあります。ESLintはJavaScriptファイルを走査して問題点を見つけてくれるパッケージです。
eslint-plugin-compat – npm
 eslint-plugin-compat ではブラウザの互換を検査できるようになります。次動画は上記リンクから引用したデモです。実際はコンソールにまとめて表示することになるでしょうが次動画の様に、ブラウザに対応していない関数、メソッドを発見次第、知らせてくれます。

  • この記事いいね! (0)