はじめに
Amplify アドベントカレンダーの12日目の記事です。何を書くか悩んだのですが Amplify UI Components の GitHub と公式ドキュメントを読むことにしました。
Amplify
Amplify はかなりなんでもできるソリューションです。領域は大きく５つに分かれています。
AWS Amplify は、フロントエンドのウェブ/モバイルデベロッパーが AWS でフルスタックアプリケーションを簡単に構築、出荷、ホストできるようにする完全なソリューションであり、ユースケースの進化に合わせて幅広い AWS サービスを活用できる柔軟性を備えています。クラウドの専門知識は不要。
https://aws.amazon.com/jp/amplify/
- Amplify Studio (ビジュアルインターフェイス)
- Amplify CLI (コマンドラインインターフェイス)
- Amplify Libraries (オープンソースクライアントライブラリ)
- Amplify UI Components (オープンソースデザインシステム)
- Amplify Web Hosting (マネージド CI/CD とホスティング)
今回はこの中で UI Components に関して GitHub と公式ドキュメントを読んでいきたいと思います。以前、CLI や Studio に関する記事を書いたことがあるので良ければご覧になってください。
Amplify UI Components とは
AWS が提供するデザインコンポーネントのオープンソースです。React, Angular,Vue,Web Components,React Native, Flutter 等の主要なモダンフロントエンドを抑えています。
本記事執筆時点(2022/12)では ui-react は v4.2.0 です。以下ご参考。
React 用の UI Component / ui-react
ここからは GitHub を読んでいきます。以下のドキュメントでコンポーネントの見た目を確認出来ます。
packages/react/src/primitives
primitives 配下にあるものは UI 部品郡ですね。Grid, Button, Text Field 等の他のデザインツールにあるものは一通り入っていそうです。
components と hooks 配下にあるものは AWS の Cognito や S3 等の機能と繋ぐための部品郡ですね。
Component Matrix
| Connected Components | React | Angular | Vue |
|---|---|---|---|
| Authenticator | ✅ | ✅ | ✅ |
| Interactions | |||
| Storage |
| Primitives | React | Angular | Vue |
|---|---|---|---|
| Alert | ✅ | ||
| Badge | ✅ | ||
| Button | ✅ | ||
| Card | ✅ | ||
| CheckboxField | ✅ | ||
| Collection | ✅ | ||
| Divider | ✅ | ||
| Expander | ✅ | ||
| Flex | ✅ | ||
| Grid | ✅ | ||
| Heading | ✅ | ||
| Icon | ✅ | ||
| Image | ✅ | ||
| Link | ✅ | ||
| Loader | ✅ | ||
| Menu | ✅ | ||
| Pagination | ✅ | ||
| PasswordField | ✅ | ||
| PhoneNumberField | ✅ | ||
| Placeholder | ✅ | ||
| RadioGroupField | ✅ | ||
| Rating | ✅ | ||
| ScrollView | ✅ | ||
| SearchField | ✅ | ||
| SelectField | ✅ | ||
| SliderField | ✅ | ||
| StepperField | ✅ | ||
| SwitchField | ✅ | ||
| Table | ✅ | ||
| Tabs | ✅ | ||
| Text | ✅ | ||
| TextAreaField | ✅ | ||
| TextField | ✅ | ||
| ToggleButton | ✅ | ||
| View | ✅ | ||
| VisuallyHidden | ✅ |
packages/react/src/components/Authenticator
primitives だけだと読み応えが無いので、Cognito と接続する Authenticator を読みます。
Authenticator と withAuthenticator が準備されています。基本前者を使えば良いと思います。後者は HOC で利用するようですが最近は使うことはあまり無いかと思います。
(出典）https://ui.docs.amplify.aws/react/connected-components/authenticator
export default function App() {
return (
<Authenticator initialState="signIn" loginMechanisms={['email']} >
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
Authenticator コンポーネントを使うとテンプレートの UI を利用できます。
initialState: signIn/signUp/resetPassword や loginMechanisms: username/password/confirm_password のパラメータを設定します。
他にも socialProviders={['amazon', 'apple', 'facebook', 'google']} を設定することでソーシャルログインボタンを表示できるようです。便利ですね。
（出典）https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#social-providers
packages/react/src/components/hooks
Authenticator.Provider で囲うと useAuthenticator のフックを利用できるようになります。 Authenticator の認証状態へのアクセス、変更、更新を利用できます。これは重宝しそうですね。
user にはユーザー情報。route には認証状態 authState が返却されるのでログイン状態の管理に利用します。パラメータはこちら。
authStatus は認証されているか否かだけを確認できるのでより簡単に実装するならこちらでも良いと思います。
パラメータは次の３つです。 configuring, authenticated, unauthenticated
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';
export default () => (
<Authenticator.Provider>
<App />
</Authenticator.Provider>
);
const App = () => {
const { user, route } = useAuthenticator((context) => [context.user]);
return route === 'authenticated' ? <Home /> : <Authenticator />;
};
（出典）https://ui.docs.amplify.aws/react/connected-components/authenticator/headless
詳しくは公式ドキュメントを見てください。
packages/e2e
cypress でテストコードが書かれてました。cypress は E2E テストツールです。何ができるかは公式サイトの動画を見て頂くのが一番わかりやすいでしょう。Windows で cypress を使う場合は GitBash をインストール頂き node, npm, yarn, cypress などを入れるのがおすすめです。WSL2だとちょっと手間が増えます。
テストコードで何をテストしているのか、どうテストコードを書いているかを読むのは大変勉強になります。
おわりに
早いもので2022年も終わりが近づいて来ました。アドベントカレンダーはその年に学んだことや、学びたいと思っていたことを整理する良い機会と捉えています。今年も久しぶりに筆を取り書いてみたのですが技術記事を書くのは楽しいですね。
来年もまた、みなさまにとって実りある一年でありますように。それでは良いお年を。