この記事は Naina Raisinghani による The AMP Blog の記事 "amp-script: AMP ❤️ JS" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

今年の AMP Conf では、<amp-script> のデベロッパー プレビューを紹介しました。本日は、<amp-script> の一般公開についてお知らせします。カスタム JavaScript は、AMP コンポーネントによって別の Worker スレッドで実行されます。そのため、超高速な AMP ページはそのままに、カスタム JavaScript を追加できるようになります。
<amp-script> を使うと、既存の AMP コンポーネントでは実現できなかったユースケースに対応できます。また、AMP ページと非 AMP ページでコードを共有することもできます。JavaScript フレームワークを使うことも可能です。次にあげるのは、<amp-script> チームが構築してきたいくつかのサンプルです。


検証機能付き複数ページフォーム
セクション移動時に検証を行う複数ページフォームの例
上の例を見て興味を持った方は、<amp-script> を試してみてください。なお、AMP のパフォーマンスを保証するために、いくつか制約がある点に注意が必要です。
  • コンテンツのジャンプ: 通常の <amp-script> では、意図しないコンテンツのジャンプを回避するため、ユーザーのジェスチャーが発生しないとページのコンテンツを変更することはできません。 
  • ページ読み込み: <amp-script> はユーザーの操作なしにページのコンテンツを変更することはできないので、ページの読み込み時にコンテンツを変更することもできません。
  • スクリプトのサイズ: 1 つの <amp-script> で使うスクリプトは、150 kB 以下である必要があります。なお、お気に入りの JS フレームワークを使うことはできますが、150 K の制限内に収まっている必要があります。
  • API のサポート: Web Worker ですべての API がサポートされているとは限りません。WorkerDOM には、許可されている API のリストが掲載されています。また、いくつかの DOM のメソッドやプロパティはまだ実装されていません。リスト全体は、WorkerDOM の互換性で公開されています。追加してほしい API がある方は、問題として送信してください、
<amp-script> は、React、Preact、Angular、Vue.js、jQuery、D3.js など、皆さんが既に利用しているかもしれないフレームワークに対応しています。

この点は、AMP を使っているデベロッパーから寄せられた最も重要な要望でした。AMP Project は、スピードという AMP の価値提案を維持しつつ、この要望に対処できたことをうれしく思っています。<amp-script> の動作の詳細については、こちらをご覧ください。また、このガイドに従って <amp-script> を試してみてください。このすばらしい手法を使うと、これまでは不可能だったたくさんのユースケースを実現できるようになります。

<amp-script> の使用に関する問題や機能リクエストがありましたら、遠慮なくお知らせください。


投稿者: Naina Raisinghani（Google AMP Project、プロダクト マネージャー）
Reviewed by Chiko Shimizu - Developer Relations Team