Frontend Weekly 2024-06-14

Gemini nano は不明#

Google I/O で Chrome 126 から、Gemini Nano は Chrome デスクトップクライアントに組み込まれるという発表がありましたが、残念ながら組み込まれていないようです。リリースノートに延期という記載もないため不明です。Chrome 127 Beta で利用可能です。

1
const canCreate = await window.ai.canCreateTextSession();
2

3
if (canCreate !== "no") {
4
  const session = await window.ai.createTextSession();
5

6
  const result = await session.prompt("日本の一番高い山は何ですか？");
7
  console.log(result);
8

9
  const stream = session.promptStreaming(
10
    "次のキーワードを使って短い物語を書いてください：海、鳥"
11
  );
12
  for await (const chunk of stream) {
13
    console.log(chunk);
14
  }
15
}

CSS のみで View Transitions を MPA で行えるようになった#

以前から SPA では、View Transitions API を利用することでスムーズな遷移を実現できましたが、MPA でも View Transitions API を利用できるようになりました。

今まで MPA でスムーズな遷移を実現するには、Astro などのように遷移先のページを取得しておくなど JavaScript による処理が必要でした。

View Transition API によるスムーズな遷移  |  View Transitions  |  Chrome for Developers

次の指定を遷移元・遷移先に行うことで、SPA の場合と同じように View Transitions API を利用できます。ただし同一ドメインである制約はあります。

1
@view-transition {
2
  navigation: auto;
3
}

import assertion ‘assert’ 構文の使用中止と削除#

他の環境と同様に import assertion が削除され、SyntaxError を吐くようになりました。with syntax に置き換える必要があります。

1
import m from 'foo' assert { type: 'json' }
2
import m from 'foo' with { type: 'json' }

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

CPU のスロットルを 20 倍にする - DevTools#

パフォーマンスタブの CPU で 20x slowdown を選択できるようになりました。M3 MacBook Pro では、CLS の問題を確実に測定および診断することができない問題があったため、より強力な CPU スロットルが必要になったようです。

https://issues.chromium.org/issues/324978881

その他#

Chrome 以外の環境で利用できないものやニッチなものなど。

• URL.parse()
  • リリースノートに書かれていないが出荷されている。
  • このようなコードを書くと二重でパースされてしまう。これを避けるために生えた。

  1
  if (URL.canParse(str)) {
  2
    return new URL(str);
  3
  }
  

  • https://developer.mozilla.org/en-US/docs/Web/API/URL/parse_static
• CloseWatcher API の再有効化
  • dialog 要素や popover 要素を閉じるキー操作や Android の操作を簡単に扱うための API。
  • Chrome 120 で導入されたが、バグがあったため無効化された。
• Gamepad API のトリガーランブル拡張機能
  • ブラウザで Gamepad を使うための API
  • https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
  • トリガーを振動させることが出来るようになった（？）
• GeolocationCoordinates、GeolocationPosition の toJSON メソッド

  1
  navigator.geolocation.getCurrentPosition((position) => {
  2
    console.log(position.toJSON());
  3
  });