独自のJavaScriptをAMPで動かせる<amp-script>が公開。オリジントライアル参加募集中 #AMPConf

[レベル: 上級]

AMP では、JavaScript の利用が厳しく制限されています。
原則的に、独自の JavaScript の実行は許可されていません。

しかし、独自の JavaScript を AMP ドキュメントのなかで利用可能にするコンポーネントが公開されました。
それが、<amp-script> です。

東京の六本木で 4 月 17 〜 18 日に開催された AMP Conf 2019 の基調講演で初公開されました。

Worker DOM でパフォーマンスを低下させずに 独自 JS を AMP で実行

<amp-script> の技術ドキュメントはすでに AMP 公式サイトで提供されています（ちなみに、AMP 関連のサイトは、amp.dev というドメイン名の新しいサイトに AMP Conf 直前に統合されました）。

AMP が 独自 JavaScript を使わせない理由は、パフォーマンスを落とさないことがいちばんの理由です。
そこで、JavaScript をメインスレッドとは別のプロセスで可動させる Worked DOM の技術を利用しています。

技術的な詳しい内容に興味がある方は、AMP Conf での関連セッションをご覧ください。

AMP プロジェクトの Twitter 公式アカウントが投稿したこちらのアニメーションは <amp-script> を実装して作成したそうです。

トライアル開始

<amp-script> は正式に公開されたわけではなく、トライアルが始まったばかりです。

独自の JS が使えるようになったといっても通常のウェブページとまったく同じように無条件でどんな JS も許容するということではありません。
たとえば、次の制約があります。

• 150 KB 以内
• 5秒以上の Mutation が必要（例外あり）

それでも、自分が書いた JS が AMP で動かせるようになるのは自由度がぜんぜん違ってきます。
よりインタラクティブな機能を AMP ページに持たせることが可能です。

上で触れた制約も含めて最終的な仕様はトライアルを経て今後修正が加えられることもあるでしょう。

<amp-script> のオリジン トライアル参加者の募集を AMP プロジェクトが開始しています。
いち早く試してみたいという開発者の方は応募してみてください。
こちらのフォームから申し込みます。

Next.js が AMP をサポート

JavaScript 繋がりで、開発者が興奮しそうなニュースをもう 1 つお伝えします。

React の SSR（サーバーサイドレンダリング）として幅広く使われている Next.js がバージョン 8.1 で AMP をサポートするようになりました。

React/Next.js でサイトを構成していて、さらに AMP 対応しているサイトは利用可能かどうかを調べてみてください。
技術ドキュメントはこちらで入手できます。

ちなみに Next.js は、自分たちが見本となるべくサイト全体を AMP 化させました。

ウェブの 3 大コンポーネントである。HTML・CSS・JavaScript のうち JavaScript は特に自由度が低く抑えられていました。
AMP 採用の妨げの 1 つです。
<amp-script> が正式に使えるようになれば AMP がさらに利用しやすくなるでしょう。
今後の進展に要注目です。