AWS Amplify Studioを使ってFigmaからReactアプリを作ってみる

FigmaからReactアプリが作れる、そう、AWSならね。

ということで下記のAWSブログを参考にAWS Amplify Studioを試してみました。
https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/

※本記事の作業を行うにはFigmaのアカウントが必要です。

# 完成図

Card一覧を表示するだけのなにか。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/28d91e45-de26-5312-8347-6322df189880.png)

# Figmaファイルの準備

最初にFigmaファイルを準備しておきます。
といっても、[AWS Amplify UI Kit](https://www.figma.com/community/file/1047600760128127424) なるものが用意されているので、こちらを自分のFigmaアカウントにコピーするだけです。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/c2abd0b8-6687-1d29-daa4-e69ad01d4eb1.png)
MyComponentsのページを見てみると、プリビルドされたコンポーネントがありますね。今回はこれらの中から適当なコンポーネントを使おうと思います。
本記事では行いませんが、もちろん自分でイチからFigmaコンポーネントを作ることも可能です。

# AWS Amplify Studioの起動

AWS Amplifyのページにいきましょう。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/bdb80f12-aff3-31e6-68fd-920493e37934.png)
`新しいアプリケーション　>　アプリケーションをビルド`を選択します。
次にアプリケーションの名前を求められるので、任意の名前をつけてください。
名前を入力してデプロイボタンをクリックすると、アプリのデプロイが始まります。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/96bd7e7e-6700-826c-8eb7-2bbacf5a069f.png)
少し待つとデプロイが完了し、`すべてのアプリ`から、上記のような画面に飛べるようになります。
私は「SampleProject」となっていますが、各々で入力したアプリケーションの名前が表示されます。

`Backend environments`のタブから`Stuidoを起動する`をクリックしてください。そうするとAmplify Studioを起動できます。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/6799f76c-8f83-7b6f-9bc2-561634ab7b95.png)


## モデルの作成

次にデータモデルを作っていきます。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/3baecb2f-73a3-ae55-7548-0bed77ce3318.png)
今回は、AWS Amplify UI Kitから上記のコンポーネント(TallCard)を一覧に並べたアプリケーションを作ろうと思うので、`Card`というモデルを作成し、`Name`、`Img`、`Price`というフィールドを作ります。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/b8f88596-954d-b6fa-aab0-a86040950aed.png)
`Data`から`Add model`をクリックして上記のようなモデルを作ります。
モデルを定義したら右上の`Save and Deoloy`をクリックして、デプロイを行います。モデルのデプロイには少し時間がかかるので気長に待ちましょう。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/33765d9f-d024-e961-f09e-425c358e59b0.png)
モデルのデプロイが完了したらシードデータを作成します。
`Content`に移動し`Action`から`Auto-generate data`を選択します。

データをいくつ作成されるか聞かれるので、本記事では5つにします。
`Img`に関しては画像のパスを指定する必要があるので、各々で修正してください。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/d66e7c5f-0ea6-110c-a9ee-8b1360ab831d.png)
画像のパスを修正後は上記のようになりました。

## Figmaを同期する

`UI Library`からFigmaの同期を行います。
Figmaのリンクは自分のFigmaファイルの`Share`から取得できます。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/dbd1dd47-507a-d231-92a4-a7c4056ce35b.png)
リンクを入力できたら`Continue`をクリックして、`Sync width Figma`を行います。
途中でAcceptするかどうかを聞かれますが、今回はすべてAcceptします。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/4952aecd-6a08-0cd6-baac-120eaf07ea0c.png)
すべてAcceptしているので、すべてのFigmaコンポーネントを同期できました。

`Components`から`TallCard`を選択し、データと紐付けを行います。
`TallCard`を選択したら、`Configure`をクリックしてください。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/076e6048-58da-13e8-6b54-06aed10e154e.png)
`Element Tree`から任意の要素を選択します。
`Component properties`に任意の`Name`と`Card`の`Type`を入力します。
`Child properties`は要素ごとに対応する値を紐付けてください。

紐付けが完了したら、`Create Collection`をクリックし、`Cards`という名前をで作成します。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/d6bb7caf-28eb-39c4-54c8-7ec4007375d3.png)
すると`Componetns`に`Cards`が追加されているので、`Configure`から設定を行います。

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/66d67e80-80a7-f9e4-06b6-7326130b04a2.png)
ここは自由に設定してください。
本記事では3行のグリッドで、`Price`の値でソートする設定にしています。

## Reactアプリの作成

コンポーネントを作れたので、今度はReactプロジェクトの作成を行います。
create-react-app を使います。

```shell
$ npx create-react-app sample-app
$ cd sample-app
```

次にコンポーネントをReactプロジェクトにするまでの設定を行います。
先ほど作った`Cards`コンポーネントから`</> Get component code`をクリックしてください。
以下の手順が表示されるので、この手順に従って作業を行います。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/7ed037c5-9378-7d48-b8d8-555df4e33307.png)

```shell:shell
$ npm install -g @aws-amplify/cli
$ npm install aws-amplify @aws-amplify/ui-react
```

インストールを終えたら src/index.js を以下のように修正します。
CSSは適宜修正してください。

```jsx:src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import { AmplifyProvider } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AmplifyProvider>
      <App />
    </AmplifyProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```
ここまで対応したら、`Use this component`のタブを選択します。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/7b3e5b99-84e1-b5de-94bd-8f77480059cb.png)
ここでも手順に沿って、作業を続けます。

```shell:shell
$ amplify pull --appId [appId] --envName staging
```

pullが終わったら実際にコンポーネントを使ってみます。

```jsx:src/App.js
import { Cards } from './ui-components';

function App() {
  return (
    <div className="App">
      <h1 style={{ textAlign: 'center' }}>Card一覧</h1>
      <Cards />
    </div>
  );
}

export default App;
```
src/App.js を上記のように書き換えたら`npm run start`で開発サーバーを立ち上げでみましょう。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/28d91e45-de26-5312-8347-6322df189880.png)
Amplify Studioで作成したコンポーネント(`Cards`)が反映されています！

# デプロイしてみる

Reactアプリをビルドしておきます。

```shell:shell
$ npm run build
```

AWS Amplifyのページに戻りましょう。

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/a376f253-e8f9-1145-8ee3-74d6c6b3c61f.png)
`Hosting environments`から任意の選択肢を選んでください。
本来ならGitプロバイダーを選ぶべきだと思いますが、本記事ではホスティングを試したいだけなので、`Gitプロバイダーなしでデプロイ`を選択します。

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/10c05134-3434-c564-6e24-68551ee4efc1.png)
先ほどのビルド成果物をドラッグアンドドロップでアップロードします。保存してデプロイをクリックすれば、デプロイが開始されます。

デプロイが完了したら`Domain`にアクセスしてみましょう。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1027861/28d91e45-de26-5312-8347-6322df189880.png)
ローカルで立ち上げた画面と同じ画面になっていれば完成です！

# おわりに

FigmaからReactアプリを作ってみるということでした。
デザインデータを作る技術は必要なものの、驚くほど簡単にReactアプリを作ることができました。
どこまで複雑なものに対応できるのかはわかりませんが、うまく活用することでシームレスで迅速な開発が可能になりそうですね。
ぜひ、試してみてください!

# 参考
https://docs.amplify.aws/console/
https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/