Amplify UI Components の ui-react の GitHub と公式ドキュメントを読む

# はじめに

Amplify アドベントカレンダーの12日目の記事です。何を書くか悩んだのですが Amplify UI Components の GitHub と公式ドキュメントを読むことにしました。

https://qiita.com/advent-calendar/2022/amplify

# 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 に関する記事を書いたことがあるので良ければご覧になってください。

https://qiita.com/t-kurasawa/items/3275d37053f4b0bea983

https://qiita.com/t-kurasawa/items/23ee71341df6b37ff7cc

# Amplify UI Components とは

AWS が提供するデザインコンポーネントのオープンソースです。`React, Angular,Vue,Web Components,React Native, Flutter` 等の主要なモダンフロントエンドを抑えています。

本記事執筆時点(2022/12)では `ui-react` は `v4.2.0` です。以下ご参考。

- [Amplify React UI (React)](https://ui.docs.amplify.aws/react)
- [Amplify Docs (React)](https://docs.amplify.aws/ui/q/framework/react/)
- [@aws-amplify/ui-react](https://www.npmjs.com/package/@aws-amplify/ui-react)
- [GitHub aws-amplify/amplify-ui](https://github.com/aws-amplify/amplify-ui)


# React 用の UI Component / ui-react
ここからは GitHub を読んでいきます。以下のドキュメントでコンポーネントの見た目を確認出来ます。

https://ui.docs.amplify.aws/react/components


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/dd6c4c31-8ca9-1afa-50d0-578e575306d7.png)

### packages/react/src/primitives

primitives 配下にあるものは UI 部品郡ですね。[Grid](https://ui.docs.amplify.aws/react/components/grid), [Button](https://ui.docs.amplify.aws/react/components/button), [Text Field](https://ui.docs.amplify.aws/react/components/textfield) 等の他のデザインツールにあるものは一通り入っていそうです。

components と hooks 配下にあるものは AWS の Cognito や S3 等の機能と繋ぐための部品郡ですね。


#### [Component Matrix](https://github.com/aws-amplify/amplify-ui#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 で利用するようですが最近は使うことはあまり無いかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/b7794d79-2f8e-cb88-d9cc-fe332da25072.png)
(出典）https://ui.docs.amplify.aws/react/connected-components/authenticator


```JavaScript
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']}` を設定することでソーシャルログインボタンを表示できるようです。便利ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/584b5ebd-3fba-5fc1-5a4e-d6d496771e99.png)
（出典）https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#social-providers


### packages/react/src/components/hooks

`Authenticator.Provider` で囲うと `useAuthenticator` のフックを利用できるようになります。 `Authenticator` の認証状態へのアクセス、変更、更新を利用できます。これは重宝しそうですね。

`user` にはユーザー情報。`route` には認証状態 `authState` が返却されるのでログイン状態の管理に利用します。[パラメータはこちら。](https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#access-auth-state)

`authStatus` は認証されているか否かだけを確認できるのでより簡単に実装するならこちらでも良いと思います。
パラメータは次の３つです。 `configuring, authenticated, unauthenticated` 

```JavaScript
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


詳しくは[公式ドキュメント](https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration
)を見てください。


### packages/e2e
cypress でテストコードが書かれてました。cypress は E2E テストツールです。何ができるかは[公式サイトの動画](https://www.cypress.io/)を見て頂くのが一番わかりやすいでしょう。Windows で cypress を使う場合は GitBash をインストール頂き `node, npm, yarn, cypress` などを入れるのがおすすめです。WSL2だとちょっと手間が増えます。

テストコードで何をテストしているのか、どうテストコードを書いているかを読むのは大変勉強になります。


# おわりに

早いもので2022年も終わりが近づいて来ました。アドベントカレンダーはその年に学んだことや、学びたいと思っていたことを整理する良い機会と捉えています。今年も久しぶりに筆を取り書いてみたのですが技術記事を書くのは楽しいですね。

来年もまた、みなさまにとって実りある一年でありますように。それでは良いお年を。