Google I/O 2025 注目のWebフロントエンド技術

こんにちは、Yahoo!知恵袋のWebフロントエンド開発担当をしている津村（@l1lhu1hu1）です。

LINEヤフー株式会社では、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端の技術に関する知見を会社に持ち帰ることで、全社的な技術力向上に努めています。今回私はこの制度を活用し、2025年5月20日と21日にアメリカ・カリフォルニア州マウンテンビューで実施されたGoogle I/O 2025に現地参加してきました。このブログでは、Google I/O 2025で発表されたWebフロントエンド技術の中で特に注目すべきと私が感じたものをいくつか紹介します。

Built-in AI

Built-in AIとはChromeに搭載されているAIモデルのことです。Chromeに組み込まれているため、モデルから結果を取得する通信を必要とせず、プライバシー・レイテンシー・利用コストの観点からも非常に有用です。従来であれば、サーバーを介してAIモデルを利用する必要がありましたが、Built-in AIを利用すれば、その必要がありません。

ただし、サーバー上で動作するような高性能で大規模なAIモデルと比べると、ブラウザに組み込む制約上、組み込まれているAIモデルには性能に制限があります。そのため、特定のユースケースに特化したfine tuningされたAIモデルがChromeには組み込まれており、そのモデルを利用するためのAPIがChromeから提供されています。

Chrome138から利用可能なものとしては、文章の要約を行うSummarizer API、文章の翻訳を行うTranslator API、言語の検出を行うLanguage Detector APIなどがあります。これら以外にも文章作成を行うWriter APIや文章の推敲を行うRewriter APIなどがOrigin Trialとして提供されています。詳しくはBuilt-in AI | AI on Chrome | Chrome for Developersをご確認ください。

今回のGoogle I/Oでは前述のAPI以外に新たにマルチモーダルなPrompt APIとProofreader APIが発表されました。それぞれについて以下にまとめます。

Prompt API

Prompt APIとはChromeにbuilt-inで入っているGemini Nanoに対して自然言語で指示を出せるAPIです。これまで発表されていたPrompt APIはテキスト入力にのみに対応していましたが、今回のGoogle I/Oでマルチモーダルな入力に対応したPrompt APIが発表され、テキスト以外にも画像や音声を入力として指定できるようになりました。

画像を入力として指定することで、画像の内容を説明する文章を生成したり(alt textの生成サポート等)、音声を入力として指定することで、音声の内容をテキストに変換することがこのAPIを利用することで実現できます。

Prompt APIはChrome138の検索窓からchrome://flags/ にアクセスし、 Prompt API for Gemini Nano with Multimodal Input flagを有効化できます。Prompt API with image input にアクセスし、以下のコードをDevToolsのConsole Panelにて実行することで、表示されている画像の説明を生成できるので、良かったら試してみてください。

const image = document.querySelector('img');
const session = await LanguageModel.create({
  expectedInputs: [
    { type: "image" }
  ],
});

const response = await session.prompt([{
  role: "user",
  content: [
    { type: "text", value: "Explain what is shown in the image" },
    { type: "image", value: image },
  ]
}])

console.log(response)

また、先述したflagを有効にした状態で、以下のページにアクセスすることで、マルチモーダルなPrompt APIのデモを体験できるので、こちらもぜひ試してみてください。

詳しい説明については以下のページからご確認ください。

Proofreader API

今回新たに発表されたProofreader APIは、ユーザーが入力した文章の文法や綴りの誤りを検出し、誤りを修正した文章を生成することができるAPIです。主に以下の機能があります。

エラー修正: ユーザー入力を正しい形に修正
エラー分類: 各修正箇所に「綴り」、「句読点」等の分類を付与
エラー説明: それぞれの誤りに対しての解説

Proofreader APIは以下のように利用できるようになる予定です。現在はまだ試すことはできません。Chrome 139 CanaryからEPP向けに利用が可能になる予定です。

const proofreader = await Proofreader.create({
  includeCorrectionTypes: true,
  includeCorrectionExplanations: true,
});

const result = await proofreader.proofread("I seen him yesterday at the store, and he bought two loafs of bread.");

proofreader.proofread は以下のような ProofreadResult をPromiseとして返却します。corrected には修正された文章が入り、correctionsには元の文章のどの位置(index)で修正が行われたかが含まれます。corrections を利用すれば、ユーザーにUI上で文章のどの位置がどういった理由で修正されたのかを示せます。詳しい内容についてはwebmachinelearning/proofreader-api: 🔎 An API to help web users perform real-time proofreading of freeform textをご確認ください。

dictionary ProofreadResult {
  DOMString corrected;
  sequence<ProofreadCorrection> corrections;
}

実際に、文章に含まれている文法や綴りの誤りを検出し、波線で間違っている箇所が表示されて、修正案が提示されるデモをデモブースで見せて頂きましたが、非常に便利だなと感じました。様々なアプリケーションでユーザーの入力を補助するために活用できそうなので、今後の活用が期待されます。Chrome 139 CanaryからEPP向けに利用が可能になる予定です。詳しくはBuilt-in AI APIs | AI on Chrome | Chrome for Developersをご確認ください。

Chrome DevToolsのAI Assistant機能

AI Assistant機能はChromeのDevTools上の様々なPanel上から利用でき、質問をすると回答を提供してくれたりコードの修正案を提示してくる便利な機能です。今回のGoogle I/O 2025では、AI Assistant機能のアップデートが発表され、更に便利に利用できるようになったので紹介します。

AI Assistantがスタイルに関する修正を行った時に、「Apply to workspace」ボタンを押すことで、実装ファイルに直接修正を保存できるようになりました。ただし、現在はCSSの修正のみ対応しています。これにより、DevTools上から離れることなく、スタイルの修正を行えるようになるので開発効率が向上しそうだと感じています。将来的にJavaScriptやHTMLの修正にも対応すれば、更に開発効率が向上しそうです。今後のアップデートに期待しています。
Performance Panel上のPerformance Insightsに対してAI Assistantが回答を提供してくれるようになりました。LCP by phase、LCP request discovery、Render blocking requests、Layout shift culprits、Document request latencyに対してAI Assistantに対して質問ができるようになりました。これにより、パフォーマンスの問題の特定がしやすくなり、パフォーマンスの最適化が前よりも手軽に行えます。

AI Assistant機能の強化が進めばより手軽に色々な改善ができるようになると思います。個人的にDevToolsは使うのは難しく感じていたので、今後のアップデートに非常に期待しています。

※ただし、これらの機能を利用する場合は、Google側で用意しているサーバーにコードの情報が送られてしまうので、ご注意ください。学習に利用されないようにするenterprise向けのフラグが用意されているので、企業で利用する場合はそちらを有効にすることをおすすめします。Chrome Enterprise Policy List & Management | Documentationに詳しくは記載されているのでご確認ください。

おわりに

Google I/O 2025ではBuilt-in AIやDevToolsのAI Assistantのアップデート、Google検索のAIモードなどAIを活用した新しい機能の発表が多くありました。また、これら以外にも様々な新しいWeb技術についての発表がありました。実際に会場に足を運んで、Googleの方々にお話を伺う中で、Googleが多くの企業と連携をしながら新しいWeb技術の標準化に地道に取り組んでいることを強く実感しました。こういった活動への感謝の気持ちを忘れずに、私にも協力できる部分があれば積極的に協力できたらなと考えています。最後に、この記事がGoogle I/O 2025の発表の理解の助けとなり、今後の技術選定の参考にして頂けたら幸いです。

Built-in AI

Prompt API

Proofreader API

Chrome DevToolsのAI Assistant機能

おわりに

Related Post