AWS Amplify Studioが変えるフロントエンド開発の未来とは

# 概要
こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、[KDDI Engineer&Designer Advent Calendar 2021](https://qiita.com/advent-calendar/2021/engineer-designer)の11日目の記事です。

先日(2021/12/3)、re:Invent2021で[AWS Amplify Studio](https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-amplify-studio/)が発表されました。
今回は、そのAWS Amplify Studioについてまとめ、検証していこうと思います。

# AWS Amplify Studio
* AWS Amplify Studioの機能を要約すると、フロントエンド開発者に最小限のコーディングでフロントの開発ができる
* Amplifyのバックエンド構成およびそれらを管理する機能を統合した開発環境

ちなみに、**amplify admin ui**との違いは？？

昨年のアップデートでamplify admin uiというものが出ています。
**実は今回のAWS Amplify Studioは、これがかなり拡張された形になります。**


**※適切にいうならば、amplify studioの中に、amplify admin uiが統合されているといえる**

## figmaと連携
Amplify Studioは、Figmaで作成されたデザインをReactUIコンポーネントのコードに自動的に変換してくれます。

* ちなみに・・**figma**とは、webブラウザでフロントエンドの画面を作っていくサービスです。

=> これをデザインとしてamplify studioに読み込ませると、ReactUIコンポーネントのコードが出力されます。
なので、既存のamplify admin uiの機能と今回発表されたamplify studioの機能によりフロントエンド開発者は、Amplify Studioを使用して、バックエンドをセットアップし、UIコンポーネントを作成し、AmplifyStudio内で接続できるようになりました。

Amplify Studioには、管理UIの既存のバックエンド作成および管理機能がすべて含まれており、クラウドの専門知識を必要とせずに、データベーステーブル、ユーザー認証、ファイルストレージなどのアプリバックエンドインフラストラクチャのセットアップと管理を簡素化します。


**現在(2021/12/03 時点)パブリックプレビュー扱いで利用可能となっています。**

# やってみた
## FigmaのデザインをImportする
* Amplify Studioの環境を作っていきます。
![スクリーンショット 2021-12-08 22.58.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/970819fb-4c95-00e6-8565-b177717e2286.png)

アプリケーションの名前を入力し、「confirm deployment」をクリックします。
![スクリーンショット 2021-12-08 23.03.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/f885c493-9e46-4c04-5350-0279d003febe.png)

作成が始まりました。ぐるぐる・・・
![スクリーンショット 2021-12-08 23.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/5b0e9081-8d46-241d-d5d9-c3db9aed7459.png)

だいたい5分ほどで完了しました！。
「Studioを起動する」を押してみましょう。
![スクリーンショット 2021-12-08 23.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/960399dc-1a94-943f-f939-098cf8dec549.png)

Amplify Studioが表示されました！！
(既にテンションは100%超え)
![スクリーンショット 2021-12-10 23.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/e5bc9220-f538-c225-d057-7f1abb88ab15.png)

**今回は、左メニューにある「UI Library」を使っていきます！**
![スクリーンショット 2021-12-10 23.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/6c76e7d9-0a6a-b71b-7884-41de71ed04eb.png)

* 「Get started」を押すとSync With Figmaというモーダルが表示されます。
* ①には、amplify側で用意してあるサンプルを使って始めることができます。
* ②には、Figmaのファイルリンクがあれば貼り付けることができそうです。
![スクリーンショット 2021-12-10 23.31.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/33c4e5ad-f1fe-dbe4-6a40-04cdf5c00c3f.png)

今回は、検証なのでFigmaで０からデザインを作らずにamplifyのサンプルを使用していきます。
リンクの共有は、右上の「Share」をクリックするとリンクを取得できるので、そのリンクをコピーします。
![スクリーンショット 2021-12-10 23.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/ec7bbfe5-7235-1f57-fbc8-0c6198c5329f.png)

サンプルのリンクを②に入れて「Continue」してみます。
Amplifyへの権限の許可が求められるので、「Allow access」します。
![スクリーンショット 2021-12-10 23.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/8694ce08-c276-9973-f9eb-9e21d8ac70ee.png)

上手くSyncされると下記のような画面が表示されます。
次に、Figma上のデザインしたコンポーネントを一つ一つ選択して取り込むか選びます。
Accept Allで一気に取り込むこともできます。
今回は、「Accept All」で一気に取り込みます。

![スクリーンショット 2021-12-11 0.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/86b4b59c-4456-2afa-67f1-ea7e036f9e30.png)

* 取り込みができると、左メニューに取り込んだコンポーネント一覧が表示されます。
左上の「Configure」を押すと、コンポーネントのプロパティを設定することができます。

![スクリーンショット 2021-12-11 0.04.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/e6be0a90-e875-ab8c-c865-ef6e99a3f565.png)

![スクリーンショット 2021-12-11 0.53.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/7de2cc0b-fa3b-3d9c-e65b-557a21801581.png)


**さてさてFigmaからimportしたUIコンポーネントに対してデータをバインドしてみましょう**

## importしたデザインのUIコンポーネントに対してデータをバインドする
* UIコンポーネントとデータをバインドするために、**Amplify上でデータのモデルを作成。**

![スクリーンショット 2021-12-11 1.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/175f032e-14be-83fa-836a-3b339c3efb62.png)

作ったデータモデルを一旦Deployしちゃいましょう。
![スクリーンショット 2021-12-11 1.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/6e4504f6-57cd-53b9-cab9-999dc91f4695.png)

Deolyが完了しました。
![スクリーンショット 2021-12-11 1.36.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/0b3d3a79-5748-d9ca-7e7e-79dc020a3f9f.png)


### [content]タブより、アプリのランダムシードデータを自動生成します。

「content」をクリックし、「Actions」メニューの下の「Auto-generate data」を選択して、データベースにサンプルデータをシードします。(5つくらいにしましょう)

![スクリーンショット 2021-12-11 1.38.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/9ceef4f1-ec07-86c9-d238-cf3f0f6dde7b.png)

データモデルに対して、5つ自動生成されたデータがシードされました。
![スクリーンショット 2021-12-11 1.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/d2f4cc50-2e30-7a6f-a249-5c9916e989e9.png)

### ここから、UIコンポーネントにデータをバインドしていきます。
ImportしたuiコンポーネントのElementに先ほどシードしたデータを右のメニューで割り当てていきます。

![スクリーンショット 2021-12-11 5.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/308d2631-eb4e-b585-d8ce-0332198919ae.png)

* その後、「Shuffle preview data」を押すと、先程シードしたデータがランダムでUIコンポーネントに渡されるようになり、画面表示もそれに伴い表示が変わります。
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/c4dea0d4-5b8b-2d1f-23fe-2be65f742772.gif)

### 最後に、「Collection」を作成しましょう

* コンポーネントを作成したら、コンポーネントの「Collection」を作成します。
* これをやると、先程シードしたデータで作ったUIコンポーネントの一覧を1つのreact コンポーネントとしてpullすることができます。
![スクリーンショット 2021-12-11 6.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/845dbd37-fa4b-d7a9-618b-f391f9f8ca90.png)

![スクリーンショット 2021-12-11 6.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/e729efd5-2325-a95b-f3f6-f2625e21e6aa.png)



### Reactアプリに上記で作成したコンポーネントを落としましょう！(amplify pullコマンドを実行)

* cardのコンポーネントをamplify pullコマンドでpullしましょう！

![スクリーンショット 2021-12-11 6.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/fc656a78-5b4a-e335-e2fd-7197ddded74f.png)

そうすると・・・
ui-components/」配下に、FigmaのすべてのUIコンポーネントがReactコードとして出力されました。
さてさて精度はどうでしょうか。。？

![スクリーンショット 2021-12-11 6.11.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/a4d8a8a2-5f37-13b1-3957-15302275f03c.png)

ふむふむ。

propsにoverridesPropを渡して、それをそれぞれのelementに食わせてますね。

```sample.js
  const { home, overrides: overridesProp, ...rest } = props;
  const overrides = { ...overridesProp };
```

そうしましたら、今度は出力したUIコンポーネントをアプリにimportしてみましょう。
App.jsに移動し、UIコンポーネントをimportします。

![スクリーンショット 2021-12-11 6.32.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/d13d39d3-6761-119a-edf3-ea8dff03d09b.png)

そうしましたら、npm startでアプリを起動してみましょう！
おおおおおすげえええ

![スクリーンショット 2021-12-11 6.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/0ae37d5b-470f-3c3b-8995-0dbe6c6052df.png)


* コードに戻ります。
* ui-components/」配下に、FigmaのすべてのUIコンポーネントがReactコードが出力されているのは、先程確認しましたが、modelsというのも出力されていますね。
* なんだこれは
![スクリーンショット 2021-12-11 6.37.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/6180b734-1710-f739-399d-86e171aae6ec.png)


* お、models配下のindex.jsに何やら面白いコードが出てますね。
* @aws-amplify/datastoreから、initSchemaをimportしてますね。
* 次に、initSchemaに、const { Home } = initSchema(schema);　で生成されているスキーマを流し込んでいます！

![スクリーンショット 2021-12-11 6.39.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/93c8a447-f4d8-cab0-a432-073e88d85767.png)

* そしたら、importしているschemaを見てみましょう。
* おおすげえ、先程定義したデータセットのスキーマが自動生成されていやがる。。
* ガチやべえ！！！
![スクリーンショット 2021-12-11 6.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/2940c72d-3893-5c1d-0e44-03d9647e2550.png)

* さ~らに、型定義ファイル(index.d.ts)も生成されています。
* はぁぁすげえなぁ。。
![スクリーンショット 2021-12-11 10.57.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/25f60c27-7fff-99a7-29de-da31499eb080.png)

# amplify Studioをまとめる

* Amplify Studioにより、ちょっとしたデザインのcomponentをfigmaで作りreactアプリにamplify pullしてくれば爆速で使える
* amplify admin uiが元々持っていたバックエンドを意識することなく、データモデルやデータのシードをする機能と組み合わせられる=> フロント開発者で簡単にサービスを作れる
* ただ、Figmaの知識があること前提なので、Figmaを使えるデザイナーもしくは、Figmaを使える人を生み出さないといけない


# Amplify Studioが変えるフロントエンド開発の未来

## 今までは・・・
* デザイナーがデザインを作成
* それを基に開発者がUIに関わる確認事項や不確定要素について認識合わせ
* モブでデザイナー、開発者でUI実装

## これからは・・・
* figmaでデザインを作成 (webサービスとして提供されているので、リンクの共有で誰でもデザインコンポーネントを追加/修正が可能)
* Amplify Studioでfigmaとsync
* デザイナーと開発者でI/F(データバインドのための)だけ決めればOK
* フロントエンド開発者は、バックエンドを意識することなく(Baasのような世界)、データバインドと生成されたreact Componentの組み立てに専念できる


## その先
* Amplify Studioを利用してのreact uiのcomponent生成までが簡単なので、デザイナーがreact uiのcomponent生成まで行い、フロントエンド開発者にコードでデザインcomponentを共有



**開発プロセス全体の中でデザイナーと開発者との距離が一気に縮まる！**




# Amplify Studioの欠点(2021/12/13時点)
* 出力されるreact componentに型情報が付与されない。まだ、TypeScriptサポートしていないかも
* Webフォント指定ができない

=> GitHub上にissue tracker があるので、気になる箇所があればイシューをあげてみて 
 も(https://github.com/aws-amplify/amplify-adminui)

# まとめ
* Amplify Studioは、激アツサービス
* これにより、フロントエンド開発の未来が変わるのではないか


# 参考文献

https://aws.amazon.com/jp/amplify/studio/

https://github.com/aws-amplify/amplify-adminui

https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-amplify-studio/

https://aws.amazon.com/jp/blogs/mobile/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/

https://dev.classmethod.jp/articles/aws-amplify-studio-public-preview/