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

現在使用できるベースライン機能

ベースラインに含まれる機能の一部をご紹介します。

Mariko Kosaka

公開日: 2023 年 5 月 10 日

ウェブは常に進化しており、ブラウザは絶え間なく更新され、デベロッパーがプラットフォームでイノベーションを起こすための新しいツールが提供されています。以前はヘルパーライブラリが必要だった機能がウェブプラットフォームの一部となり、すべてのブラウザでサポートされるようになりました。また、デザイン要素をより短く簡単にコーディングできる方法も提供されています。

このような絶え間ない進化と適応は有用ですが、混乱を招くこともあります。こうした更新情報をすべて把握するのは難しい場合があります。デベロッパーとしては、「すべてのブラウザエンジンがこの新機能をサポートするのはいつ頃ですか？」といった疑問が湧くことでしょう。「これらの機能を本番環境のコードで実際に使用できるようになるのはいつ頃ですか？」「古いブラウザをサポートする期間はどのくらいですか？」

正解は「状況次第」です。必要な機能と使用可能な機能は、ユーザーベース、技術スタック、チーム構造、サポートされているデバイスによって異なります。ただし、ウェブの現在の状況では、そうした判断を下すことが難しい場合があることは、全員が同意するところです。

Chrome チームは、他のブラウザエンジンやウェブコミュニティと連携して、より明確な基準を策定しています。これには、一連の主要機能の相互運用性を改善する Interop 2023 などのプロジェクトへの取り組みも含まれます。しかし、ここ数年でリリースされた機能はどうでしょうか。2 年前に学んだ試験運用版の機能は、使用できるようになりましたか？

この投稿では、過去 2 つのメジャーバージョンのすべての主要ブラウザエンジンで利用可能になった機能について説明します。これは、ほとんどのデベロッパーが機能を安全に使用できると判断する基準であり、ベースラインと呼ばれる機能セットです。詳しくは、ベースラインに関するお知らせをご覧ください。

ダイアログ要素

<dialog> 要素は、ポップアップやモーダルなどのダイアログプロンプトを作成するための新しい HTML 要素です。

モダルダイアログを使用するには、モダル要素を定義し、ダイアログ要素で showModal() メソッドを呼び出してダイアログを開きます。

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

組み込みの HTML 要素として、フォーカス管理、タブの追跡、スタッキングコンテキストの保持などの機能が組み込まれています。詳細については、ダイアログコンポーネントを作成するをご覧ください。

個々の CSS 変換プロパティ

CSS 変換を使用すると、サイトに動きを追加できます。3 つのプロパティを 1 行に記述する CSS 変換はよくご存じでしょう。個別の変換プロパティを使用すると、変換プロパティを個別に指定できます。これは、複雑なキーフレームアニメーションを作成する場合に便利です。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

この変更について詳しくは、個々の変換プロパティによる CSS 変換のきめ細かい制御をご覧ください。

新しいビューポートユニット

モバイルでは、ビューポートのサイズは動的ツールバーの有無によって影響を受けます。アドレスバーとナビゲーションツールバーが表示される場合もあれば、これらのツールバーが完全に非表示になっている場合もあります。ビューポートの実際のサイズは、ツールバーが表示されているかどうかによって異なります。svh や lvh などの新しいビューポート単位により、ウェブデベロッパーはモバイル向けのデザインをより細かく制御できます。詳しくは、大、小、動的ビューポートユニットに関する記事をご覧ください。

JavaScript での深いコピー

以前は、元のオブジェクトを参照せずにオブジェクトのディープコピーを作成するために、JSON.stringify と JSON.parse を組み合わせたハックがよく使用されていました。これは非常に一般的なハックだったため、V8（Chrome の JavaScript エンジン）はこのトリックのパフォーマンスを大幅に改善しました。ただし、structuredClone ではこのハックは必要ありません。

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

詳細については、structuredClone を使用した JavaScript での深いコピーをご覧ください。

`:focus-visible` 疑似クラス

ウェブデベロッパーなら誰でも、キーボードでページを移動したり、入力要素をクリックしたりしたときに表示される「フォーカスリング」をよくご存じでしょう。これはユーザー補助に必要な機能ですが、ユーザーによって視覚的なデザインの邪魔になることがあります。:focus-visible CSS 疑似クラスは、ブラウザがフォーカスを表示する必要があるかどうかを確認します。フォーカスが見える場合にのみスタイルを指定できるようになりました。

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

詳しくは、Learn CSS のフォーカスセクションをご覧ください。

`TransformStream` インターフェース

Streams API の TransformStream インターフェースを使用すると、ストリームを相互にパイプできます。

たとえば、ある場所からデータをストリーミングし、データが渡されるときにデータストリームを別の場所に圧縮できます。fetch API を使用したリクエストのストリーミングの記事では、このサンプルのユースケースについて説明しています。

まとめ

最近、相互運用性が向上し、ウェブプラットフォームで安定して使用できる機能がさらに増えています。今後、Google は WebDX コミュニティグループと連携して、これらのベースライン機能セットを明確にしていきます。最新情報については、ベースラインページをご覧ください。

最新情報を入手するには、機能が相互運用可能になったときに記事を公開し、試験運用版の機能から新たに相互運用可能になった機能まで、ウェブプラットフォームの最新情報を毎月更新しています。

弊社が行っている取り組みが皆様のお役に立てているか、または別のサポートが必要かどうか、ぜひ WebDX コミュニティグループまでお知らせください。