Web制作者はチェックしておきたい！モダンCSSやデベロッパーツールなど、これからの実装に役立つ新機能のまとめ

Post on:2025年6月5日

はじめに

Google I/O 2025では生産性を向上させ、よりパワフルで、よりシームレスで、そしてモダンなWebを構築するための新機能が発表されました。

Google I/O 2025

この記事では、それら最先端の機能を直接利用できる重要なイノベーションを10個紹介します。それらはあなたの次のプロジェクトにインスピレーションを与えること間違いなしです！

1. カルーセルは数行のCSSで簡単に実装できるようになりました

これまではJavaScriptを使用しないと実装できませんでしたが、数行のCSSでインタラクティブな美しいカルーセルを実装できるようになりました。Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。

使い慣れたCSSのコンセプトを使用して、リッチでインタラクティブ、スムーズでアクセシブルなカルーセルを簡単に実装できます。

CSSで実装するカルーセルについては、先日の記事をご覧ください。

カルーセルはもうCSSだけで実装できる！疑似要素::scroll-button()と::scroll-marker()の使い方を解説

2. 宣言型ポップオーバー: Interest Invoker API

Interest Invoker APIがオリジントライアルとして利用可能になりました。この機能を使用すると、ビジターの関心がアクティブになったときにポップオーバーを宣言的に切り替えることができます。

スタイルが設定できない[title]属性はもう不要、これからは[interesttarget]です。Anchor Positioning APIやPopover APIと組み合わせることで、JavaScriptを使用せずにツールチップやホバーカードのようなリッチでレスポンシブ、そしてインタラクティブなUI要素を実装できます。
モダンCSSの可能性は無限大です！

3. いくつかの組み込みAIは利用可能で、Prompt APIにはマルチモーダル機能が搭載

組み込みAIへの取り組みは継続されており、プライバシーの強化、待ち時間の短縮、コストの削減に加え、AIが生成した高品質なアウトプットにアクセスできるようになります。組み込みAIはエキスパートモデルとGemini Nanoをデバイス上のタスクに使用します。Chrome 138以降、Summarizer API、Language Detector API、Translator API、Chrome Extensions用のPrompt APIが安定版として利用可能になります。さらに、Writer APIとRewriter APIはオリジントライアルで利用可能です。

新しいProofreader APIとマルチモーダル機能を備えたPrompt APIは、すでにChrome Canaryで利用可能です。

最新情報については、早期プレビュープログラムに参加して、新しい組み込みAI APIを共同開発し、WebにおけるAIの未来を形成してください。

4. クライアントサイドAIにはハイブリッドAIソリューションを提供

FirebaseとGemini Developer APIとのコラボレーションにより、スマホとデスクトップでAIを活用したWebエクスペリエンスを構築できるようになりました。これらのアプリは可能な限りクライアントサイドAIを使用し、シームレスにサーバーサイドAIに拡張することで、すべてのデバイスとブラウザに対応します。

Firebase AI Logicは、Gemini Nanoを基盤とするChrome組み込みのPrompt API、およびGemini Developer APIを使用したサーバーサイドの同様の小規模モデルを提供します。

5. デベロッパーツールのAIアシスタントがさらに便利に

デベロッパーツールのAIアシスタントを使用すると、GeminiとチャットしながらElementsパネルでスタイルエラーのデバッグしたり、Performanceパネルでパフォーマンスの問題を解決したり、Networkパネルでネットワークの問題を特定したり、Sourcesパネルでソースファイルの検索をすることができます。さらに、AIアシスタントはElementsパネルでスタイル関連の変更をソースコードに直接適用できるようになりました。

デベロッパーツールのAIアシスタントの使い方は、下記をご覧ください。

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

6. デベロッパーツールのPerformanceパネルもAIにより便利になりました

デベロッパーツールの刷新されたPerformanceパネルでは、ローカルおよび実ユーザーのCore Web Vitalsデータにアクセスし、Geminiにパフォーマンスの問題の把握と修正をお願いできるようになりました。InsightsサイドバーではLighthouseのインサイトをトレース表示し、より迅速なデバッグが支援されます。ワークフローを中断したり、プロダクティビティを損なうことはありません。

7. ベースラインがVS CodeやESLintで利用可能に

ベースラインとの統合により、Web開発のワークフローをより正確で信頼性の高いものにします。使い慣れたツール（VS CodeやESLintなど）内で主要ブラウザにおけるWeb機能のサポートを明確に把握できます。

IDE: VS Codeではビルド時に機能のベースラインのステータスが表示されるようになりました（記事）。JetBrainsのWebStormやFirebase Studio、Windsurf、GitHub CodespacesなどのVS CodeベースのIDEも近日中にサポートされる予定です。
Linter: CSSやHTMLのリンターはベースラインのターゲットよりも新しい機能を使用している場合に事前に警告を表示します。ベースラインはESLint for CSS、HTML ESLint、Sytlelintでサポートされています。
Analytic: RUMvisionはベースラインのデータと実際のユーザーメトリクスを組み合わせて、ビジターに最適なベースラインのバージョンを戦略的に選択することができます。Google AnalyticsのユーザーはGoogle Analytics
Baseline Checkerでベースラインの推奨事項を取得できます。
Compiler: browserslist-config-baselineを使用して、BabelやPostCSSなどのコンパイラツールにベースラインのターゲットをプラグインすることで、ソースコードで最新の機能を使用し、本番環境でコンパイルすることができます。

8. Web Platformで新機能のサポート状況を把握

Webの新機能を探索する方法として、Web Platformをリリースしました。Webの新機能がすべてマッピングされたことで、AVIFからビュー遷移に至るまで、あらゆるブラウザにおけるあらゆる機能のサポート状況を確認することができます。常に最新情報を入手して、自信を持ってプロジェクトを進めることができます！

Web Platform

9. パスワードを簡単で安全に管理できる認証情報マネージャー

IDやパスワード、パスキーなど、複数の認証方法を使用することがユーザーに煩わしさを与えていることを認識しています。わたし達の目標は、ユーザーにとって統一された簡単にログインできることを提供することです。そのため、Androidの認証情報マネージャーの直感的な操作性をChromeに導入します。

これによりユーザーがログインをクリックすると、Googleパスワードマネージャーのパスキーやパスワードなど利用可能な方法がChromeに表示され、シームレスなログインが可能になります。そして今後、ID連携も可能になる予定です。Web版の認証情報マネージャーは現在開発中で、今年後半にリリースされる予定です。

10. Chrome拡張機能を申請中に修正する機能

Chrome拡張機能の申請は、シームレスで安全であるべきです。しかし、申請中の拡張機能にミスがあった場合にすぐに修正できないという課題がありました。そこで今年の初めに保留中の申請をキャンセルする機能を導入しました。これは以前に公開したバージョンをロールバックする機能をベースにしており、変更を加えてすぐに再申請できるようにするためのものです。