公開日: 2025 年 3 月 31 日
前回のベースライン マンスリー ダイジェストから 1 か月が経ち、多くのことが起こりました。今回のエディションでは、web.dev で公開した投稿、ベースラインで新たに利用可能になった機能、コミュニティのツールの更新についてご紹介します。
ESLint 0.6.0 がリリースされました
最近、ESLint が CSS の linting のサポートを開始したことについて投稿しました。このリリースの一環として、プロジェクトで使用する CSS 機能と、それらが特定のベースラインしきい値に達しているかどうかを lint するための新しい ESLint ルール（require-baseline）が追加されました。
ESLint は最近、@eslint/css パッケージのバージョン 0.6.0 をリリースしました。このバージョンには、require-baseline ルールの名前を use-baseline に変更する重要な新機能が含まれています。この更新は小さな変更に見えますが、ルールの読みやすさが向上します。このリリースには、ネストされた CSS ブロックを lint する use-baseline ルールの機能の追加など、他にも重要な機能やバグ修正が含まれています。@eslint/css の以前のバージョンをご利用の場合は、こちらのアップデートをご覧ください。
ウェブ プラットフォーム ダッシュボードをクエリする方法
今月初めに、ウェブ プラットフォーム ダッシュボードのクエリに関する投稿を公開しました。このダッシュボードは、フロントエンドでクエリできるほか、HTTP API 経由でもクエリできます。API をクエリして特定のベースラインしきい値に達した特徴を見つけることができるため、ベースライン ツールに役立つ可能性があります。
この API は、特定の機能に関する情報をすばやく取得する必要があるツールに便利です。たとえば、このタイプのツールを使用して、最近ベースラインの新規利用可能または一般提供になった機能を一定の間隔で通知するスクリプトを作成できます。役に立つと思われた場合は、こちらの投稿をお読みください。
ベースラインとポリフィルの考え方
ベースラインの目的は、安全に使用できる機能を明確にすることですが、明確になったとしても、ウェブ アプリケーションに適した方法で機能を採用する方法を検討する必要があります。ポリフィルはそのプロセスの重要な部分です。ベースラインでは、機能が新規または広く利用可能かどうかにポリフィルは考慮されず、ポリフィルを使用するかどうかを判断することもできません。この決定はアプリケーションに固有のものですが、重要な考慮事項です。
先日、ベースラインとポリフィルについて考える方法に関する投稿を公開しました。この投稿は、ベースラインとポリフィルの使用方法について考える際に役立つフレームワークを提供します。新規または幅広く利用可能になるベースライン機能により、ポリフィルの必要性が軽減されることが期待されます。ポリフィルは開発ツールボックスの便利なツールであることは間違いありませんが、デメリットもあります。ウェブサイトのパフォーマンスに悪影響を及ぼす可能性があり、場合によってはユーザー補助に関する懸念事項が生じることもあります。このガイドが、この難しい質問に答える際に役立てば幸いです。
contenteditable="plaintext-only" がベースラインとして新たに利用可能になりました
HTML 要素の contenteditable 属性を使用すると、ユーザーはテキスト フィールドのようにその内容を変更できます。たとえば、この属性を <p> 要素に配置すると、ユーザーは <textarea> のように操作できます。ユースケースによっては、contenteditable を使用すると、一般的なフォーム要素よりも優れた点があります。
ただし、ユーザーが編集可能な要素に貼り付ける内容には、リッチテキストの書式設定が含まれている場合があります。書式設定されていないテキストをフィールドに貼り付けたいユーザーにとっては、不便な操作になる可能性があります。contenteditable="plaintext-only" 属性と値の組み合わせを使用すると、このような事態を防ぐことができます。この組み合わせは最近、ベースラインで新しく利用可能になりました。詳しくは、お知らせの投稿をご覧ください。また、余分な要素を一切含まないテキストを貼り付けたいユーザー向けに、より優れた編集エクスペリエンスを提供するための方法もご確認ください。
Intl.DurationFormat がベースラインとして新たに利用可能に
ウェブサイトにアクセスしたことがある人なら、イベントまでの時間やイベント後の時間を示すテキストを見たことがあるでしょう。多くの場合、そのテキストは「2 日、6 時間、3 分」のような文字列で表されます。このデータは、タイムリーな情報を数多く伝えるのに役立ちますが、多くの場合、ライブラリによって提供されます。さらに、この情報を複数の言語で出力することもできます。
Intl.DurationFormat を入力します。これは、最近ベースラインの新規利用可能になった国際化機能です。Intl.DurationFormat クラスを使用すると、文字列にフォーマットする時間単位を含むオブジェクトをコンストラクタに渡すことができます。この時間単位は、考えられるほとんどの言語で指定できます。
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
注目すべき点は、アプリでライブラリを使用してこのような文字列のフォーマットを行っている場合、まもなくライブラリなしで行えるようになるため、ユーザーの節約につながるということです。詳しくは、Intl.DurationFormat に関するお知らせの投稿で、この便利な新機能の使い方をご覧ください。
W3C 分科会 2025 年のベースライン
W3C は先日、2025 年版の Breakouts Day を開催し、メンバーがさまざまなトピックについてプレゼンテーションを行いました。3 月 26 日には、ベースラインに関する有益なセッションも開催されました。
ベースラインを初めて使用する場合は、このセッションで概要を簡単に把握できます。新規と幅広く利用可能のコンセプトなど、ベースラインの基本を説明するだけでなく、browser-compat-data から、どの機能がどのベースラインのしきい値にあるかを把握するのに役立つ web-features データまで、これらの定義がデータによってどのように決定されるかを説明します。
このセッションをご覧いただけなかった場合でも、セッションのスライドはすでに公開されていますので、興味のある方はぜひご覧ください。
これで終了です。
今回の月次ダイジェストは、月末だけでなく四半期の終わりでもあります。以前のバージョンのダイジェストを見逃した方は、1 月と2 月のダイジェストで、今年の第 1 四半期に Baseline で行われたすべての最新情報をご確認ください。いつものように、ベースラインに関連する内容が漏れている場合はお知らせください。今後の版で取り上げるようにいたします。1 か月後にまたお会いしましょう。