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

こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2022” の 21日目の記事、および、
AWS AmplifyとAWS×フロントエンド Advent Calendar 2022” の 21日目の記事です。

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

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.
Amplify UI - Build UI fast with Amplify on React ui.docs.amplify.aws
Amplify UI - Build UI fast with Amplify on React

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

まず 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” のみ、となっています。

機能ComponentsConnected components
(Authenticator)
Theming
ReactOKOKThemeProvider
AngularOKCSS variables
Flutter (Mobile)OKMaterial widgets
Flutter (Web/Desktop)OK (developer Preview)Material widgets
React NativeOKThemeProvider
Vue 3OKCSS variables
Vue 2OK (legacy library)CSS variables

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

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

ファーストビュー

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

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

Take it for a test drive

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

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

Speed up development with over 40 production-ready components

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

Authentication made easy

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

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

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

  • Account Settings
  • Geo
  • Storage
  • In-App Messaging

Theming controls to match your brand

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

Build UI visually in Figma

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

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

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

Better together with AWS Amplify

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

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

  • Amplify Studio でアプリケーションを視覚的に構築
  • UI とバックエンドを Amplify libraries で接続
  • Amplify Hosting でフロントエンドを(短時間で)デプロイ

Accessibility built-in

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

Compatible with your front-end

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

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

  • 脱出口 (認証機能を別のUIに繋ぎ込める)
  • スタイリングの選択肢
  • TypeScript と インテリセンス

まとめ

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

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

tacck
  • tacck
  • 北の大地の普通のソフトウェアエンジニア。
    インフラ・バックエンド・フロントエンドと、色々やります。

    初心者・若手向けのメンターも希望あればお受けします。

    勉強会運営中
    * ゆるWeb勉強会@札幌
    * スマートスピーカーで遊ぼう会@札幌

コメントする

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください