Bento AMPをGoogleが正式公開🍱AMP存続の救世主になるか？

[レベル: 上級]

Bento AMP を Google は正式公開しました。

コンポーネントとしての Bento AMP

Bento AMP とは、AMP をコンポーネントとして実装する技術です（「ベントー アンプ」と読みます。ベントーはあの弁当🍱です）。

AMP を利用するには、ページそのものが AMP 対応していなければなりません。
有効な AMP HTML で作成したウェブページが AMP です。

Bento AMP は、AMP のコンポーネントを単独で使えます。
通常のページで AMP の機能を利用できるのです。

AMP のコンポーネントとは、たとえば

• AMP で作成したアコーディオン
• AMP で作成したカルーセル
• AMP で作成したサイドバー
• AMP で作成したソーシャルシェア

などです。

これは Bento Accordion で作成したアコーディオン UI です。

これは Bento Carousel で作成したカルーセル UI です。

こうした各種 AMP コンポーネントを、普通の HTML ページで実装可能にしたのが Bento AMP です。

Bento AMP の利点

上で見せたアコーディオンやカルーセルは Bento AMP を使わなくても実装できます。
わざわざ Bento AMP を使う利点はどこにあるのでしょうか？

3 つの大きな利点が Bento AMP にはあります。

• 優れたユーザー体験
• フレームワークに依存しない
• コンポーネント分離

優れたユーザー体験

もともと AMP は、高速なページ表示をはじめ、優れたユーザー体験に焦点を当てて発展してきたフレームワークです。
Bento AMP もその特徴を引き継いでいます。

たとえば、コア ウェブ バイタルの指標である CLS を発生させないように設計されています。
デフォルトで、Lazy-loading（遅延読み込み）が有効です。

Bento AMP は専用の JavaScript と CSS を読み込みますが、一般的な JavaScript/CSS とは異なり、ページの表示を送らせないように作られています。

つまり同じ機能であってもユーザー体験という点においてほかの技術に Bento AMP は勝っています。

フレームワークに依存しない

どんな環境でも Bento AMP は動かせます。
この JavaScript フレームワークじゃなければダメとかこの CMS じゃなければダメということはありません。

一方で、Web Components と React/Preact コンポーネントとして Bento AMP はパッケージ化されています。
React や Preact とシームレスに統合できます。

WordPress あるいは Eleventy などどんな CMS であっても、Bento AMP のコードを埋め込みさえすれば稼働します。
自分で JavaScript を書いたりバンドルしたりする必要はありません。

コンポーネント分離

ほかのコンポーネントとは Bento AMP は分離しています。
たとえば、Twitter の投稿を埋め込むときの JavaScript によって予期せぬ影響を受けることはありません。
また、信頼できないサードパーティ製のスクリプトによって不正に操作される心配もありません。

パフォーマンスとセキュリティの観点からも Bento AMP は安心です。

徐々に AMP 化

もう 1 つ Bento AMP の利用シーンがあるとしたら、少しずつ AMP 対応を進めていく場合です。

これまでは、AMP vs. 非 AMP の対立軸でした。
Bento AMP を使えば両者が共存できます。
時間をかけて徐々にサイトを AMP に変えていけます。

たとえば、

1. まず Bento Sidebar だけを実装する
2. 次に Bento Selector を実装する
3. その次に Bento Fit Text を実装する

のようにして、段階的に AMP 対応していきます。
1 割 AMP、2 割 AMP……、5 割 AMP……、10 割 AMP のようなイメージです。

なにも問題がなければ、最終的にフル AMP として完成させます。
最初から完全な AMP 化が難しい状況でも Bento AMP は役立ちます。

Bento AMP は AMP の救世主になるか？

AMP の未来は明るいとは思えないという記事を今週はじめに書きました。

AMP の利用価値が残されているとしたら何があるか？という議論のなかで Bento AMP にも言及しました。
この時点では、Bento AMP はまだ試験提供中でした。
タイミングよく正式公開になってくれました。

消滅することはないとしても、単独のフレームワークとして今後 AMP が勢力を拡大することは、ド肝を抜くような革新的な改良がない限り、まずありえないでしょう。
しかしながら、必要な場面でのみ利用できる 1 つのコンポーネントとしてなら、AMP は存続できるのではないでしょうか。
「使いたいときだけ使う」であれば、抵抗感がずっと減る一方で利用場面は増えそうです。

公式ウェブサイトを新たに公開したことからも、Google は Bento AMP に活路を見出そうとしているのではないかと僕は想像します。
Bento AMP ブログもしっかりできあがっています。
なんとなく気合を感じます（笑）。

Bento AMP に興味を持った方は公式アナウンスと技術ドキュメントをぜひ自分の目でチェックしてください。

• Introducing Bento – The AMP Blog
• <bento-fit-text>Hello World!</bento-fit-text> | bentojs.dev
• bentojs.dev