ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptおよびDOM互換性テーブルのリソース

JavaScriptおよびDOM互換性テーブルのリソース

Jennifer Anistonオリジナル: 2025-02-20 09:22:10793ブラウズ

近年に登場する最高の情報アプリの1つは、Alexis Deveriaが使用できる有名で非常に実用的なことです。

は多くの最先端の機能に最適ですが、そこには含まれていないJavaScriptとDOMのものはまだたくさんあります。では、さまざまなJavaScriptとDOM機能のブラウザサポートを検索するための他のオプションはありますか？私は常にさまざまなフロントエンドテクノロジーの研究を行っていますが、私がまだ見つけていないことの1つは、JavaScriptとDOMのあらゆる側面のブラウザサポートをリストする非常に優れたワンストップリソースです。 html5 apis。

単一のリソースは実際には存在しませんが（少なくとも私が知っていることはありません）、私がそれに遭遇したいくつかのリソースが一緒になって、ブラウザのどの機能がサポートされているかのかなり良い概要を形成します。特に、まだサポートしなければならない可能性のあるIEの古いバージョン。

キーテイクアウト

JavaScriptとDOMの互換性のための包括的なリソースは1つもありませんが、いくつかのリソースは、さまざまなブラウザにわたる機能サポートの適切な概要を提供します。これらには、MDNのリファレンス、Peter-Paul KochによるQuirksmode DOMリファレンス、Cody LindleyによるWebブラウザ互換性テーブル、Tobias Buschor、Dottoro Javascript Webリファレンス、IE Dev Center Javascript、Dom Reference、ecmascriptによるビッグJS互換性テーブルの使用が含まれます。 Kangax/Arnottによる互換性テーブル、およびThijsによるJavaScriptの互換性チェッカーBUSSER。

MDNのリファレンスは、必要な情報を使用できない場合に適した出発点です。さまざまなJavaScript機能のサポートの予備概要を提供します。また、誰でも編集可能なので、誤った情報を見つけた場合は、更新できます。
もちろん、実際のテストはすべて
リソースに入る前に、サポートしなければならないさまざまなデバイスやブラウザで実際のテストを行うことは言うまでもなく、常にサポートを決定するための主要な方法である必要があると思います。
サポートの中古概要を取得できてうれしいです。ただし、「サポート」テーブルには、問題の機能を使用できない可能性のある関連するバグが常に含まれるとは限りません。そして、それはいくつかのリソースがただ間違っている可能性があるという事実に加えてです。
では、テストを行い、この記事で説明されている参照をガイドとして使用してください。特定のデバイスの特定のプラットフォームの特定のブラウザで何かが機能するかどうかについての最終的な言葉としてではありません。
mdnのリファレンス

で何かが見つからない場合は、
を使用できますか？そして、私はあなたのほとんどがまさにそれをしていると確信しています。ほとんどの場合、特定のJavaScript機能のサポートの適切な予備概要を取得するために必要なのは、> を使用できますか？たとえば、addeventlistener（）およびremoveEventListener（）を調べたいとします。
を使用できませんか？ただし、ブラウザ情報でMDNで両方を見つけることができます。
上記の画面グラブでわかるように、どのブラウザが「基本的なサポート」を持っているかを示す詳細に加えて、ECMAScriptの後のバージョンに追加された可能性のある機能に関するそのチャートに追加情報がよくあります。
MDNのリファレンスは誰でも編集可能であることを忘れないでください。したがって、何かが間違っていることがわかった場合は、自由に更新してください。 Peter-Paul KochによるQuirksmode Dom Reference
ブラウザの互換性テーブルに関する議論は、ピーター・ポール・コッホと彼の優れたリファレンステーブルに言及せずに完了しません。これらはすべて彼自身のテストに基づいています。

Kochのテーブルには、デスクトップおよびモバイルブラウザのサポート情報が含まれています。Domのものはかなり最新であるように見え、IE11とiOS7のサポートを示しています。 Cody Lindley
によるWebブラウザー互換性テーブル
これはあまりにもよく知られていないように見えるものです。CodyLindleyによって構築されました。これは、Webブラウザー互換性テーブル（WBCT）と呼ばれ、マンモスリソースです。

CodyのWebサイトには、IE6に戻るサポート表が含まれており、以下が含まれています。デスクトップおよびタブレット/電話ブラウザのdomサポート

デスクトップおよびタブレット/電話ブラウザのDOMイベントサポート

デスクトップおよびタブレット/電話ブラウザのES6サポート

これらは、JavaScriptサポート情報を研究する開発者の主要な分野ですが、WBCTにはCSS、BOM、SVGなどのサポートテーブルも含まれています。それで、必ずそれをブックマークしてください。 MDNを徹底的に補完するものとして機能しますTobias Buschor
による大きなJS互換性テーブルこれは間違いなくあまり知られていませんが、Cody Lindleyのテーブルに含まれていないものやMDNで十分に文書化されていないものがあるかもしれません。

Tobias Buschorによって作成された大きなJS互換性テーブルです。

これも巨大なリソースであり、特定のJavaScriptまたはDOM機能にドリルダウンできる方法が本当に好きです。たとえば、最初のリスト（ウィンドウオブジェクトから始まる）をスクロールすると、StorageEventのようなものをクリックすると、その特定のオブジェクトのメソッドとプロパティのリストが表示されます。

これは本当に包括的なリソースですが、時々遅くなる可能性があり、主要なサイトにはいくつかのエラーが発生しているように見えるので、トビアスがリソースを維持しているかどうかはわかりません。。
他の場所であまり文書化されていない特定の機能を見ている場合、私は通常、これを3番目または4番目の可能性として使用します。
dottoro javascript webリファレンス
ITサービス会社であるDottoroが維持しているDottoro JavaScriptのリファレンスは、多くの異なるJavaScriptとDOM機能のためのかなりまともなリソースです。

ブラウザのサポートがいっぱいになっている場合、すべてのバージョンで、これを示すブラウザアイコン、またはサポートの欠如を示す洗浄されたアイコンが表示されます。また、サポートが特定のバージョンで始まる場合、これも示されます。これは、以下のスクリーンショットで見ることができます：

ブラウザのサポートに加えて、これはあなたが見上げている機能の簡単な説明も提供しているので、それは少しボーナスです。
私がこのリソースについて本当に気に入っているのは素晴らしい検索機能です。これは、最初にサイトにアクセスしたときにそれほど明白ではありません。 2つの「名前で閲覧する」ボタンのいずれかをクリックすることにより、ライトボックスウィンドウでトリガーされます。横方向のボタンは、以下のスクリーンショットに示されています：

メインページで直接検索することもできますが、最初に結果ページを表示するのではなく、タイプのものに基づいて結果を即座にフィルタリングするため、ライトボックスで検索が好きです。
全体として、Dottoroリファレンスは、HTMLおよびCSS機能のブラウザサポート情報も含まれる優れた魅力的なリソースです。
IE DEV Center JavaScriptおよびDOM Reference

通常、ブラウザのサポートについて疑問に思っているとき、それはIEの古いバージョン（現在はIE9とIE10を含む現在、今日の基準で「古い」と見なされている）に関する情報が必要だからです。
MicrosoftのInternet Explorer Dev Centerには、JavaScriptとDOM機能に関する詳細なサポート情報を備えた良いページがたくさんあります。

たとえば、
JavaScriptバージョン情報ページにアクセスできます。これには、IE6-11のサポート情報が記載されたテーブルの多くの機能がリストされています。また、各機能をドリルダウンして、最終的に単一の機能に捧げられたページに登場することもできます。
したがって、マップオブジェクトのforeachメソッドのページにドリルダウンすると、その機能のセクションとともにその機能の説明が表示されます。 >

それは、検索できるもののほんの小さなサンプリングです。また、DOMリファレンス、Webアプリケーションリファレンス（HTML5 APIの多くをカバーする）、およびCanvas、Audio/Video API、SVG、およびWebGLをカバーするグラフィックスとメディアリファレンスもあります。これらのIE開発センター参照ページにおける唯一の実際の欠陥は、IEブラウザーのサポートのみをカバーするという事実です。しかし、IEは通常、ブラウザのサポートに関する情報を調べている主な理由であるため、それは大したことではありません。 Kangax/Arnottによるecmascriptの互換性テーブル
ecmascriptの互換性テーブル

参照には、ES5、ES6、ES7、および非標準機能の互換性情報をカバーする表が含まれています。
ボーナス：JavaScriptの互換性チェッカーThijs Busser

これは、JavaScript Compatibility Checker（JSCC）と呼ばれるThijs Busserによって構築された新しいツールです。これにより、JavaScriptを貼り付けたりアップロードしたり、コードの分析を取得したりできます。
ツールはKangaxテーブルからの情報を使用し、
それがどのように機能するかを示すために、このMDN記事からWebワーカーに関するコードを追加しました。示されている結果に注意してください：

ここでは、互換性の問題があるコードで使用されている機能（つまり、100％未満のサポートがあり、ブラウザが問題を引き起こすことがあります。
このツールは新しく、おそらくいくつかの改善を使用できることを警告します。たとえば、データセットプロパティを使用する一部のコードに貼り付けた場合、JSCCは、コードに互換性の問題がないことを教えてくれます。しかし、MDNは、IE10以下ではサポートされていないと言います。これは、データセットが使用できますが、使用できるので、結果は正確になるはずです。

したがって、これは完全で完全なツールではありませんが、改善するにつれて目を光らせておくべきことは確かです。結論

前述のように、実際のテストは常に互換性に関する情報の主要な手段でなければなりません。また、すべてのJavaScriptとDOM機能の完全なブラウザ互換性情報を備えたソースはどこにもあるとは思いません。しかし、私がこの投稿にリストしたリソースは、かなり正確な情報のためにあなたが頼ることができる集合体として役立つと思います。
もちろん、私が見逃したものがあったかもしれません。したがって、別のソースを知っている場合は、コメントにお気軽に追加してください。
JavaScript Domの互換性表
に関するよくある質問（FAQ）
JavaScript DOM互換性のテーブルとは？
JavaScriptドキュメントオブジェクトモデル（DOM）互換性テーブルは、さまざまなWebブラウザーにわたるさまざまなWebテクノロジーの互換性に関する情報を提供する包括的なリソースです。 JavaScript、HTML、CSS、およびその他のWeb標準の詳細が含まれています。これらのテーブルは、どのブラウザーによってサポートされているかを理解するのに役立つ開発者にとって重要です。すべてのプラットフォームで動作するコードを作成できるようにします。 🎜> JavaScript DOM互換性テーブルを使用するのは簡単です。テーブルは通常、行と列に分割され、各行は特定の機能またはプロパティを表し、各列は異なるブラウザを表します。機能が特定のブラウザでサポートされているかどうかを確認するには、行の機能を配置して、目的のブラウザの列に進みます。セルがサポートされているとマークされている場合、ブラウザがその機能をサポートすることを意味します。さまざまなブラウザにわたるさまざまなWebテクノロジーの互換性を迅速かつ簡単に確認します。これは重要です。すべてのブラウザがすべての機能をサポートしているわけではなく、特定のブラウザによってサポートされていない機能を使用すると、エラーやユーザーエクスペリエンスの低下につながる可能性があります。互換性のあるテーブルを使用することにより、開発者はすべてのプラットフォームでコードが正しく機能することを保証できます。
ecmascriptとjavascriptの違いは何ですか？
ecmascriptは、ECMA Internationalが標準化されたスクリプト言語仕様です。 JavaScriptは、この仕様に準拠するプログラミング言語です。言い換えれば、ECMAScriptは青写真として機能し、JavaScriptはその青写真の実装の1つです。 ActionScriptのような他の言語は、ECMAScriptの仕様にも従います
JavaScript Domの互換性テーブルが更新される頻度はどれくらいですか？

JavaScript DOM互換性テーブルの更新の頻度はさまざまです。ただし、通常、Webブラウザーの最新バージョンと最新のWebテクノロジーを反映するために、定期的に更新されます。信頼できる最新の互換性テーブルを使用して、正確な情報を確保することが重要です。

互換性の表で機能が「部分的なサポート」としてマークされている場合はどういう意味ですか？互換性のあるテーブルでの部分的なサポートは、ブラウザが機能を認識している一方で、そのすべての側面をサポートしないか、既知の問題でそれをサポートすることはないことを意味します。より具体的な情報については、「部分的なサポート」ラベルに関連するメモまたは詳細を確認することをお勧めします。オープンソースプロジェクト。誰でも貢献できることを意味します。これには通常、特定のプロセスを介してデータまたは修正を送信することが含まれます。貢献する前に、プロジェクトの貢献ガイドラインに慣れることが重要です。

「Caniuse」Webサイトは何ですか？デスクトップおよびモバイルWebブラウザーでフロントエンドWebテクノロジーをサポートするためのテーブルをサポートします。開発者がJavaScript、HTML、CSSなどを含むさまざまなWebテクノロジーの互換性を確認することは貴重なリソースです。互換性テーブルは貴重なリソースであり、ブラウザの互換性を確認する他の方法があります。これらには、「使用できますか」などのオンラインツールの使用、Webテクノロジーの公式ドキュメントのチェック、またはコードの機能検出を使用して、実行時に機能がサポートされているかどうかを判断します。すべてのブラウザで動作しますか？

すべてのブラウザでコードが動作することを確認するには、JavaScript Dom互換性テーブルを使用して機能サポートを確認し、コードの機能検出を使用し、徹底的なテストを行うことが含まれます。さまざまなブラウザとデバイス。また、最新のWeb標準とブラウザの更新を最新の状態に保つことも重要です。