進化が激しい JS 世界で生き抜くために。 Can I use でブラウザごとの対応状況を見よう。

  • 2019/7/8
  • 進化が激しい JS 世界で生き抜くために。 Can I use でブラウザごとの対応状況を見よう。 はコメントを受け付けていません。

JS を書くときには、ブラウザごとに考慮しなければならないことが…

みなさん、JavaScript 書いてますよね!

最近、JavaScript 界隈の発展は特にすさまじく、
2、3 年前の情報は今年はレガシー…なんてこともあったりします。

それで、どんどん発展していくこと自体はとても喜ばしいことなのですが、
懸念点もありまして。

というのは、JavaScript がよく使われるのは、
やはり Web の画面上で動作を色々つけたいときということなのですね。

つまり、JavaScript が主に使われるのはサーバー側ではなく、
ユーザーのブラウザ内で実行されるということです。

ユーザーのブラウザ内で実行されるということは、実行される環境が色々あると言うことですね。
ぱっと思いつくだけでも

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Safari
  • Microsoft Edge
  • Internet Explorer

6 個もありますからね!
しかも、同じ Google Chrome を使っている人でも、こちらはバージョン 70 であちらはバージョン 73 とか…
色々ありすぎる!

これはすなわち、JavaScript が実行される環境が色々あるということですからね。
ある命令はこっちのブラウザでは使えるけど、あっちのブラウザでは使えない…とか、そういうことになる訳です。

対応状況を見やすく表示してくれる 「Can I use」

で、そんなブラウザごとの対応状況を見やすくまとめてくれているサイトは無いのかな…
と思いますよね?

もちろんあります!

Can I use… Support tables for HTML5, CSS3, etc

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

それでは試しに、以前紹介した変数定義の let, const を調べてみましょうか。
すると…

赤は未対応、黄緑は限定的な対応(一部機能がついていなかったり、本来の定義と違っていたり)で、緑は完全に対応です。
ブラウザごとに縦にバージョンが並べられています。

ちなみに、それぞれのバージョンの箇所へカーソルを合わせると、詳細が表示されます。

大体どちらも、ほぼ緑ですでに対応されてる感じですね!

IE11 の let が黄緑ですね。左上に小さく 5 と書かれていますね。下のノートの 5 番をみてみますと

let variables are not bound separately to each iteration of for loops

let の変数は for ループの各繰り返しで、束縛されません。
ということなので、 IE11 に対応する必要がある場合は for ループ内では使わない方がよさそうですね。

フロントエンドのコードを書く方はぜひ

今回は Can I use のざっくりとしたご紹介をいたしました。

実は機能としてはもっと色々ありまして、

  • 右上には全体シェアから、何パーセントの人が問題無く使えるかの表示がでてたり
  • 特定のブラウザのみリストアップして比較することができたり

とか、色々触ってみると面白いかもしれません。

ちなみに、JS だけでなく、 CSS の対応状況も見ることができますよ。

フロントエンドのコードを書く方は、是非活用していってくださいね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-7-22

    JavaScript で、デフォルト値設定に || (or 演算子) が使える理由

    JavaScript のデフォルト値設定の文法はちょっと珍しい JavaScript 書いてますか…
  2. 2019-7-18

    2019年6月度・第35回福岡社員総会&懇親会

    6 月も社員総会の時期がやってまいりました! どうも、私です!江嵜です! 2019 年の福岡は、…
  3. 2019-7-18

    2019年6月度社員総会&懇親会@東京

    はじめに 7月とは思えないほど涼しい日が続いてますが、みなさまいかがお過ごしでしょうか~ 201…
  4. 2019-7-15

    Babel を使えば、対応ブラウザなんて気にせず新しい文法で JS をガンガン書けるよ!

    対応ブラウザなんて気にせずに JavaScript 書きたい? 前回ご紹介しました 「Can I …
  5. 2019-7-12

    2019年6月度社員総会&懇親会@Osaka

    2019年6月11日(火)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。