進化が激しい 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-9-17

    2019年8月度社員総会&懇親会@Nagoya

    気づけば夏の暑さも去ろうとしています。そんな9月うまれのおみです。 さて!少しお時間空いてしまいま…
  2. 2019-9-16

    [JavaScript] オブジェクト & 配列のイマドキなコピー方法 (スプレッド構文)

    オブジェクトや配列のコピーってどうやって書きますか? 皆さん JavaScript 書いてますか?…
  3. 2019-9-9

    Web で物理アニメーション・その5(最終回) 「ライブラリを使おう」

    前回の回答 前回の宿題は、バウンド時の跳ね返り方を制御するんでしたね。 では回答。 [code…
  4. 2019-9-6

    第3回 倶楽部ぽじてぃぶ ~釣り~

    2019年7月13日に、第3回となる倶楽部ぽじてぃぶの活動が開催されました! 今回は、その様子をお…
  5. 2019-9-2

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

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

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

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

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

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