Amplify UI 4.x のざっくり解説

昨年、 “Amplify UI 2.0” リリースの記事を書いたのですが、気づくとすでに 4.x になっています。(React向け)

Amplify UI 2.0 のざっくり解説

ということで、今回も変化があったところをざっくりと解説してみたいと思います。

まず Amplify UI とは

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

トップにある説明です。簡単に翻訳すると「クラウドに直接接続可能な、アクセシブル(使いやすく)、テーマに対応し、React (や他のフレームワーク) で動作するコンポーネントのコレクション。」という感じになりそうです。

他のフレームワークとして “Angular” 、 “Flutter” 、 “React Native” 、 “Vue.js” のアイコンがあります。

ただ、現状フルでコンポーネントを使えるのは “React” のみ、となっています。

機能	Components	Connected components (Authenticator)	Theming
React	OK	OK	ThemeProvider
Angular	–	OK	CSS variables
Flutter (Mobile)	–	OK	Material widgets
Flutter (Web/Desktop)	–	OK (developer Preview)	Material widgets
React Native	–	OK	ThemeProvider
Vue 3	–	OK	CSS variables
Vue 2	–	OK (legacy library)	CSS variables

今回もトップページを見ながら、差分を確認していきたいと思います。

“Amplify UI” の大きなロゴは無くなっています。(残念)

ただ、先ほども書いた「どんなものなのか」が強く押し出されているので、コンセプトを強く打ち出す形になっていると言えそうです。

引き続き、実際にコーディング・操作可能なエリアが提供されています。

以前は CodeSandbox の埋め込みでしたが、現在はページ上に直接埋め込まれたものになっています。

以前の “Primitive Components” に相当するところですね。ここにも操作可能なサンプルが埋め込まれています。

以前の “Cloud-Connected Components” に相当するところです。

以前はこのコンポーネントの中に “Interactions” があったのですが、現在のバージョンでは無くなっているようです。

上記したように、”Authenticator” はどのフレームワークでも利用可能になっていますが、 React にのみ下記のコンポーネントもあります。

テーマ設定も引き続き使えます。実際にテーマを切り替えるサンプルが埋め込まれているので、雰囲気も掴みやすいですね。

こちらも React だけの機能です。

Amplify Studio を使うことで、 Figma で作成したコンポーネントを利用することができます。

この時、専用の Figma テンプレートを使い、その中にある Primitive Component を使っておくと、ライブラリにある Component を利用した React のコードを生成してくれます。

Amplify UI は AWS Amplify からは独立した UI ライブラリとして利用可能なので、あえて「AWS Amplify と親和性が高いよ」という項目を立てているのかな、と感じました。

ここに書かれているのは AWS Amplify 自体の特徴になります。

ここも変わらず、 WCAG と WAI-ARIA のベストプラクティスに沿ったコンポーネントである、と書かれてあります。

ここは新しい項目のようです。

互換性として、これらが記載されています。

Amplify UI のライブラリも一年でメジャーバージョンが二つもあがるほど、進化が大きいです。

Amplify Studio + Figma のように UI に関わるアップデートもあるので、このライブラリ自体の更新もまだまだ続くのではないでしょうか。