Google I/O 2024 で発表された 10 の最新情報: すべてのウェブ デベロッパーのために AI の力を活用

8 月でウェブが 35 周年を迎えます。何世代にもわたるデベロッパーがこの素晴らしいテクノロジーを形成し、私たちの生活に無数のイノベーションをもたらしてきました。今こそ AI による 新世代の夜明けを迎えていますここでは、デベロッパー基調講演と I/O セッションで発表された 10 の優れた機能をご紹介します。よりパワフルなウェブを簡単に実現できる優れた開発の道しるべとなるでしょう。

1. Chrome デスクトップに Gemini Nano を統合し、新しいオンデバイス AI 機能を提供

Chrome 126 以降、Gemini Nano は Chrome デスクトップに組み込まれます。 このことが重要な理由は、これにより、プロンプト エンジニアリング、微調整、容量、コストを気にすることなく、強力な AI 機能を Chrome の数十億人のユーザーに提供できるようになります。Chrome のオンデバイス機能では「文書作成サポート」を使用して、短いコンテンツを作成できます。

今後のウェブ開発にご協力ください。アーリー プレビュー プログラムにご登録ください。

2. WebAssembly と WebGPU により、使用する AI モデルに関係なくオンデバイスの AI を実現

Google は、ウェブ上でオンデバイス AI を可能にするバックボーン テクノロジーである WebGPU と Wasm を使用して、AI モデルを迅速かつ効率的に実行するために多額の投資を行ってきました。WebGPU の 16 ビット浮動小数点値、Wasm の Memory64 と JavaScript Promise の統合などの新しい改善により、AI の実行はさらに高速化されています。Wasm と WebGPU を使用すると、AI ライブラリは膨大な種類のハードウェアでモデルを大規模に実行できます。

3. AI 搭載の Chrome DevTools でデバッグ プロセスを効率化

Chrome DevTools は、アプリのデバッグと調整に最もよく使われる方法の一つです。AI により、デバッグがはるかに簡単になります。Chrome DevTools コンソールに Gemini を組み込み、分析情報の生成、問題の把握、修正方法の把握をサポートします。

Chrome DevTools のコンソールの分析情報は、現在米国では試験運用版の機能として利用可能ですが、まもなくより多くの国に展開される予定です。

4. Speculation Rules API を使用してインスタント ブラウジング エクスペリエンスを実現

新しい Speculation Rules API を使用すると、ほぼ瞬時にナビゲーションできるようになり、ページをプリフェッチしてバックグラウンドで事前レンダリングすることで、ブラウジングが大幅に高速化されます。秒ではなくミリ秒で考える。そして何より数行のコードを使用するだけで、AI を使用してナビゲーション パターンをインテリジェントに予測できます。

Tokopedia の例: プリレンダリングの影響により、接続速度が遅い場合でも読み込み時間が大幅に短縮されます。

5. マルチページ サイト用の Transitions API の表示

Google は、ウェブ エクスペリエンスのあり方を再定義したいと考えています。開発者はウェブ向けの開発方法を 変えたいと考えていますView Transitions API を使用すると、ページの状態を簡単にアニメーション化できます。さらに、マルチページ アプリと連携するようになったため、サイトのアーキテクチャに関係なく、滑らかなナビゲーションを作成できます。投機ルールと AI を組み合わせると、ページ遷移は実にシームレスになります。

6. 複数のブラウザを一元的に把握できるウェブ プラットフォーム ダッシュボード

最新のプラットフォーム変更、API、フレームワークをさまざまなブラウザで常に更新し続けるのは、容易なことではありません。ベースライン は、すべてのブラウザでサポートされているウェブ機能を把握するのに役立ちます。今後は、ウェブ プラットフォーム ダッシュボードを使用して、ウェブ プラットフォーム全体を一連の機能としてマッピングし、開発状況を追跡して、相互運用性の状態をチェックできます。

7.ワークフローですぐに使用できるベースライン ツール

ベースラインは、ワークフローに統合すると最大限に機能します。本日より、RUM アーカイブ分析情報で、Akamai の RUM アーカイブにデベロッパー向けの新しいツールが追加されました。今回初めて、ベースラインのバージョンと、そのバージョンでロック解除された機能のグローバル ユーザーシェアを並べて表示できるようになりました。

8. Angular の部分的な水分補給によりパフォーマンスが向上

Google は、ウェブアプリの構築とデプロイに最適なプラットフォームの一つが Angular であると考えています。現在、部分ハイドレーションに取り組んでいます。これにより、JavaScript がアプリの一部を必要な場合にのみ読み込んでハイドレートし、パフォーマンス重視のアプリに関する Core Web Vitals を大幅に改善できます。数週間以内にデベロッパー プレビューで ぜひチェックしてみてください

9.シグナルを使用した、Angular でのきめ細かいリアクティビティをすぐに利用可能

Google では、アプリの変更の検出と管理をより細かく制御できるようにしたいと考えています。開始: シグナルによるきめ細かいリアクティビティ。Angular は、Signals によるファースト クラスのデベロッパー エクスペリエンスを可能にする、新しいリアクティブ API セットを提供します。また、シグナルを使用すると、コンポーネント ツリーの一部のみをチェックして状態変更を伝播する、きめ細かい変更検出が可能になるため、UI を手動で最適化する必要がなくなります。

シグナルベースのリアクティブ API は、すぐに利用できます。きめ細かい変更検出機能は、今年後半にリリースされる予定です。

10. Maps JavaScript API で没入型 3D エクスペリエンスを構築

Google Maps Platform の使い慣れた Maps JavaScript API に Photorealistic 3D マップを導入することで、没入感のあるウェブ エクスペリエンスをさらに構築できるようになりました。Google のレンダリング技術を活用して、ユーザーが期待するスピードで色鮮やかな 3D 地図を表示できるようになりました。素晴らしいのは たった 1 行のコードで 利用を開始できる点です

皆様が圧倒的な臨場感あふれるエクスペリエンスを構築するのを楽しみにしています。 詳細


日々、開発の複雑さを乗り越え、可能なことの限界を押し上げています。誰もが楽しめる新しい体験を作り出すお手伝いができることを楽しみにしています。developer.chrome.comweb.dev にアクセスして、このパワフルなウェブの詳細をご確認ください。 XYouTube、さらには LinkedIn で Google とつながることをおすすめします。

次回の I/O でお会いしましょう。