このページは Cloud Translation API によって翻訳されました。

ウェブコンポーネントの更新 - v1 API へのアップグレードに要する時間の延長

Jonathan Bingham

Arthur Evans

Web Components v1 API は、Chrome、Safari、Firefox、（まもなく）Edge に搭載されているウェブプラットフォーム標準です。v1 API は数百万ものサイトで使用され、毎日数十億人のユーザーにリーチしています。ドラフト v0 API を使用しているデベロッパーから、仕様に影響する有益なフィードバックが寄せられました。ただし、v0 API は Chrome でのみサポートされていました。相互運用性を確保するため、昨年後半に、これらのドラフト API のサポートを終了し、Chrome 73 で削除することを発表しました。

十分な数のデベロッパーから移行にさらに時間が必要とのリクエストがあったため、これらの API は Chrome からまだ削除されていません。v0 ドラフト API は、2020 年 2 月頃の Chrome 80 で削除される予定です。

v0 API を使用していると思われる場合は、次の点にご注意ください。

v0 API を無効にしてサイトをテストします。サイトが想定どおりに動作している場合は、おめでとうございます。これで完了です。手順については、Back to the future: disabling the v0 APIs をご覧ください。
Polymer ライブラリ v1 または v2 を使用している場合 - Polymer チームが以前に公開した手順に沿って対応してください。
Shadow DOM v0、カスタム要素 v0、HTML Imports を使用している場合は、ポリフィルを読み込む必要があります。v0 ポリフィルを使用するをご覧ください。
使用しているアカウントがわからない場合は、ご安心ください。ヘルプをご覧ください。使用している API がわからない

未来への回帰: v0 API の無効化

v0 API を無効にしてサイトをテストするには、次のフラグを使用してコマンドラインから Chrome を起動する必要があります。

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Chrome をコマンドラインから起動する前に、Chrome を終了する必要があります。Chrome Canary がインストールされている場合は、Chrome でこのページを読み込んだまま、Canary でテストを実行できます。

v0 API を無効にしてサイトをテストするには:

Mac OS の場合は、chrome://version に移動して Chrome の実行可能パスを確認します。このパスは手順 3 で必要になります。
Chrome を終了します。
コマンドラインフラグを使用して Chrome を再起動します。

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

フラグを使用して Chrome を起動する手順については、フラグを使用して Chromium を実行するをご覧ください。たとえば、Windows では次のように実行します。
```
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
```
ブラウザが正しく起動したことを再確認するには、新しいタブを開き、DevTools コンソールを開いて、次のコマンドを実行します。
```
console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
```
すべてが想定どおりに機能している場合は、次のように表示されます。
```
Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
```
これらの機能の一部またはすべてについて、ブラウザが true を報告している場合は、問題が発生しています。フラグを使用して再起動する前に、Chrome を完全に終了していることを確認してください。
最後に、アプリを読み込んで機能を確認します。すべてが想定どおりに動作している場合は、完了です。

v0 ポリフィルを使用する

Web Components v0 ポリフィルは、ネイティブサポートを提供していないブラウザで v0 API をサポートします。v0 API を無効にして Chrome でサイトが動作しない場合は、ポリフィルが読み込まれていない可能性があります。次のような可能性があります。

ポリフィルがまったく読み込まれていません。この場合、Firefox や Safari などの他のブラウザでもサイトが機能しなくなります。
ブラウザのスニッフィングに基づいて、ポリフィルを条件付きで読み込んでいます。この場合、サイトは他のブラウザで動作するはずです。Polyfill を読み込むに進みます。

これまで、Polymer プロジェクトチームやその他のチームは、機能検出に基づいてポリフィルを条件付きで読み込むことを推奨してきました。このアプローチは、v0 API が無効になっている場合に問題なく機能します。

v0 ポリフィルをインストールする

Web Components v0 ポリフィルは npm レジストリに公開されたことはありません。プロジェクトですでに Bower を使用している場合は、Bower を使用してポリフィルをインストールできます。または、zip ファイルからインストールすることもできます。

Bower を使用してインストールするには:

bower install --save webcomponents/webcomponentsjs#^0.7.0
zip ファイルからインストールするには、GitHub から最新の 0.7.x リリースをダウンロードします。

https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

ZIP ファイルからインストールする場合は、別のバージョンがリリースされたときにポリフィルを手動で更新する必要があります。ポリフィルがコードで機能することを確認してください。

v0 polyfill を読み込む

Web Components v0 ポリフィルは、次の 2 つの別々のバンドルで提供されています。

webcomponents-min.js すべてのポリフィルが含まれています。このバンドルには、他のポリフィルよりもはるかに大きく、パフォーマンスへの影響が大きいシャドー DOM ポリフィルが含まれています。このバンドルは、Shadow DOM のサポートが必要な場合にのみ使用してください。

webcomponents-lite-min.js Shadow DOM を除くすべてのポリフィルが含まれています。注: Shadow DOM エミュレーションは Polymer ライブラリに直接含まれているため、Polymer 1.x ユーザーは、このバンドルを選択する必要があります。Polymer 2.x ユーザーは、別のバージョンのポリフィルが必要です。詳しくは、Polymer プロジェクトのブログ投稿をご覧ください。

また、Web コンポーネントの polyfill パッケージの一部として、個別の polyfill も利用できます。個々のポリフィルを別々に使用することは高度なトピックであり、ここでは説明しません。

無条件で polyfill を読み込むには:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

または

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

GitHub からポリフィルを直接インストールした場合は、ポリフィルをインストールしたパスを指定する必要があります。

機能検出に基づいてポリフィルを条件付きで読み込む場合、v0 のサポートが削除されてもサイトは引き続き機能します。

ブラウザスニッフィングを使用してポリフィルを条件付きで読み込む（Chrome 以外のブラウザでポリフィルを読み込む）場合、Chrome から v0 のサポートが削除されると、サイトが失敗します。

クレジットが使用している API がわからない

v0 API を使用しているかどうか、または使用している API がどれかわからない場合は、Chrome でコンソール出力を確認できます。

v0 API を無効にするフラグを使用して Chrome を起動していた場合は、Chrome を閉じて通常どおり再起動します。
新しい Chrome タブを開き、サイトを読み込みます。
Ctrl+Shift+J（Windows、Linux、ChromeOS）または Command+Option+J（Mac）を押して、DevTools のコンソールを開きます。
コンソール出力で非推奨に関するメッセージがないか確認します。コンソール出力が大量にある場合は、[フィルタ] ボックスに「非推奨」と入力します。

使用している v0 API ごとに非推奨メッセージが表示されます。上記の出力には、HTML Imports、Custom Elements v0、Shadow DOM v0 のメッセージが表示されています。

これらの API の 1 つ以上を使用している場合は、v0 ポリフィルを使用するをご覧ください。

次のステップ: v0 からの移行

v0 ポリフィルが読み込まれるようにすれば、v0 API が削除されてもサイトが引き続き機能します。広くサポートされている Web Components v1 API に移行することをおすすめします。

Polymer ライブラリ、X-Tag、SkateJS などのウェブコンポーネントライブラリを使用している場合は、まず、v1 API をサポートする新しいバージョンのライブラリが利用可能かどうかを確認します。

独自のライブラリがある場合や、ライブラリなしでカスタム要素を作成した場合は、新しい API に更新する必要があります。次のリソースが役に立ちます。

まとめ

Web Components v0 ドラフト API は廃止されます。この投稿で 1 つだけ覚えておいてほしいのは、v0 API を無効にしてアプリをテストし、必要に応じてポリフィルを読み込むことです。

長期的には、最新の API にアップグレードし、引き続き Web Components を使用することをおすすめします。

ウェブ コンポーネントの更新 - v1 API へのアップグレードに要する時間の延長