このページは 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 は Chrome 80 で削除される予定です（2020 年 2 月頃）。

v0 API を使用している可能性がある場合は、次のことを知っておく必要があります。

v0 API を無効にしてサイトをテストします。サイトが想定どおりに機能していれば、問題ありません。これで完了です。手順については、今後: v0 API を無効にするをご覧ください。
Polymer ライブラリ v1 または v2 を使用している場合 - Polymer チームが以前に公開した手順に沿って操作します。
Shadow DOM v0、カスタム要素 v0、または HTML インポートを使用している場合は、いくつかのポリフィルを読み込む必要があります。v0 ポリフィルを使用するをご覧ください。
何をお使いかわからない場合でも、ご安心ください。Help!使用している 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 など他のブラウザではエラーになります。
ブラウザのスニッフィングに基づいて条件付きでポリフィルを読み込みます。この場合、サイトは他のブラウザで動作します。ポリフィルを読み込むに進んでください。

これまで Polymer Project チームなどは、特徴検出に基づいて条件付きでポリフィルを読み込むことを推奨していました。このアプローチは、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 ポリフィルを読み込む

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

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

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

Web Components のポリフィルパッケージには、個別のポリフィルも含まれています。ここでは説明しませんが、個々のポリフィルを個別に使用する場合は高度なトピックです。

ポリフィルを無条件に読み込むには:

<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 がわからない場合

使用している 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、カスタム要素 v0、Shadow DOM v0 のメッセージを示しています。

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

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

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

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

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

まとめ

Web Components v0 ドラフト API はご利用いただけなくなります。この投稿から重要な点が 1 つある場合は、v0 API を無効にしてアプリをテストし、必要に応じてポリフィルを読み込むようにしてください。

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

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