AWS Amplify の構成要素の一つである UI Components が、 “Amplify UI 2.0” としてリリースされました。

ドキュメントが独自のサブドメインに切り出されています。

Amplify UI - Build UI fast with Amplify on ReactAmplify UI simplifies building accessible, performant, and beautiful applications with cloud-connected capabilities, building blocks, theming, and utilities.

 ui.docs.amplify.aws

この記事では、どう変化したかというのをざっくりと書いてみたいと思います。

まず Amplify UI とは

もともとの UI Components は、 Amplify Libraries で提供されている一部の機能 ( Authentication, Interactions, Storage ) を利用するためのコンポーネントを提供するものでした。

今回は汎用的なコンポーネントを正式に使えるようにし(まだ Developer preview ですが)、カスタマイズ性やアクセシビリティも向上させたことで、汎用的な Web フロントエンド向けの UI コンポーネントライブラリに近づいたものと言えます。

ちなみに、前バージョンでも汎用コンポーネントはライブラリ内には存在していたのですが、オフィシャルのドキュメントには未記載でした。

そのあたりは、昨年私が書いた記事を参照してみてください。

対象のフロントエンドライブラリ

いわゆる対応フレームワークです。

現時点では、下記のようになっています。

• React (Developer preview ながら全コンポーネント利用可能)
• Vue.js 3 (Vue.js 2 は対象外、汎用コンポーネントも対象外)
• Angular (汎用コンポーネントは対象外)

個人的には Vue.js 2 が対象外なのは大きいですね。

日本の Amplify ユーザーだと Vue.js 2 を使っているケースが多そうなので、ここは国内ではクリティカルなポイントになりそうです。

Vue.js 2 を使っている人は Vue.js 3 に移行するか、他のフレームワークへ移行するか、という選択が迫られています。

サイトのトップページを確認

知りたいことの大筋は、サイトのトップページにあります。

こちらをざっと見ていきましょう。

ファーストビュー

“Amplify UI” の大きなロゴとともに、対象となるライブラリのアイコンも並んでいます。

すぐ使いたい人のために、必要な NPM パッケージをインストールするためののコマンド npm i @aws-amplify/ui-react aws-amplify (Reactの場合) もあるので、「とにかくやりたいんだ!」という方にもぴったりです。

Take it for a test drive

少し下にスクロールすると、埋め込みのプレビュー画面がありますね。

こちらは、 CodeSandbox を使った埋め込みコンテンツになっています。

実際にコンポーネントを試すことができますね。

Cloud-Connected Components

こちらは名前の通り、 Amplify Libraries を利用したコンポーネントです。

特に Authentication の見た目がスッキリして使いやすくなったと思います。(他はページ内で参考画像が出ていないので、別途確認したいと思います。)

Theming

色やブレークポイントを、手軽に設定することができるようになります。

以前だと CSS変数 を指定することはできましたが、そちらよりも全体の統一感を作りやすくなっていそうですね。

Primitive Components

汎用コンポーネントが、ギュッと載っています。

ボタン、ページャー、タブ、インプットフィールド、などなど、最低限は揃っているようです。

とはいえ、他の有名な CSS フレームワークからみると物足りないと感じそうですね。ここも機能追加に期待したいです。

Accessibility

コンポーネントが、 WCAG と WAI-ARIA のベストプラクティスとガイドラインに沿ったものになりましたよ、と書かれています。

この辺りはあまり詳しくないので、もっと調査が必要です。

まとめ

Amplify のフロントエンド部分が進化した、という内容でした。

見た目の良さだけでなく、カスタマイズしやすさ、アクセシビリティの向上、あたりも良い改善点です。

一方で、 Vue.js 2 がサポート外となるので、国内の AWS Amplify 利用者はこれを機に Vue.js 3 や React への移行(新規の時の採用候補)を検討した方が良さそうです。

汎用の CSS フレームワークに近づいた点も好印象です。ここは、今後もコンポーネントが増えることに期待したいです。

色々と書きましたが、どうやらこれは Admin UI の大幅なアップデートである Amplify Studio に対応するためのものだったようです。

Studio - JavaScript - AWS Amplify Gen 1 DocumentationAmplify Studio is a visual development environment for building a fullstack app. AWS Amplify Documentation

 docs.amplify.aws

これについては、先日おこなわれていた AWS re:Invent の中の 2021/12/03 (JST) に発表されたキーノートで取り扱われていました。

Amplify Studio については、別の記事として取り扱ってみたいと思います。