Amplify Studioでつまづいたところ。

# Introduction

## きっかけ
2021年12月のre:Invent2021で公開されたAmplifyの新しい機能を使ってみました！

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

この記事では、公式の資料をもとに実際に試してみて、自分が困った点を三つ紹介します。

自分が試していた時は、英語のドキュメントのみ[^1]だったので、翻訳しながら使いました。
しかし記事執筆時には、日本語版が出ていたため、本記事では日本語版を元に実装時の注意点などを解説いたします。


https://docs.amplify.aws/console/


## 自己紹介
![smile.jpg](https://qiita-image-store.s3.amazonaws.com/0/262742/38a82ae5-98e6-8d78-b461-3d14024af15d.jpeg)

[自己紹介ページ](https://qiita.com/Senple/items/b47374e68e4d8d26d0cb)


# Let's Start

基本的には、公式の資料をもとに進めれば、問題なくWebアプリが開発できます。

自分自身FigmaやReactを使ったことがなかったのですが、すべてAmplify側でフォーマットが用意されているため、知識ゼロでも一通りの体験ができます。
細かな手順は下記の公式資料に載っています。

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



## ランダムデータの生成

公式資料で初期の方にランダムデータを作成する部分があります。
ここの自動生成でも注意が必要です。

> 次に、Contentメニューを使ってランダムなシードデータを生成します。

>サイドメニューのContentをクリックして開いた後、Auto-generate seed dataボタンをクリックして、データベースにランダムなサンプルデータを生成するためのダイアログを開きます。（もしくは、ActionsメニューからAuto-generate data をクリックします）
この時、自動生成するデータの意味を正しく反映させるため、住所であることを制約として設定します。
ダイアログ内では、生成数を5に設定し、Add constraintをクリックして、Field Nameでaddress, Range/settingでStreet addressを選択し、最後にGenerate Dataをクリックしてランダムデータを生成します。

>次は、image_urlフィールドに画像のURLを挿入します。（画像を用意していない場合は、Unsplash’s random photo generatorを使ってみましょう）

ここで、image_urlをそのままAuto-generate dataのまま先に進めてしまいました。
その結果、image_urlがURLではなく、ただの文字列となってしまいました。日本語版だと間違えませんが、雰囲気で英語を読んでいた結果見落としていました。
**UIコンポーネントをデータと紐付ける** の部分で、Figmaの設定やAmplify Studioの設定を見直すことになり時間を食ったので、お気をつけください。

ミスに気がついたのは、`Suffle preview data`をクリックした時です。画像が表示されなかったからです。

> コンポーネントのスケールが様々なデータに対応しているかどうか確認するためには、Suffle preview dataをクリックしてください。Amplify Studioが表示に利用するデータをシャッフルした上で、コンポーネントにライブデータを入力します。

対処法としてはサイドメニューのDataからデータモデルを新たに作成いたしました。
元々の`Home`に加えて`Sample`というデータモデルに改めて`image_url`を追加しました。理由としては`Home`の`image_url`を`Auto-generate data`で作成した値からURLに変更しましたが、`Suffle preview data`を押しても反映されなかったからです。

![amplify_datamodel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262742/77c129ab-8b50-f966-fc0f-ebf8e147e19a.png)


### Figmaで設定するのは、CSSの箱ものだけ。

Figmaを使ったことない自分としては、Figmaの使いやすいUIでなんらかのコンポーネントを作ることができるのかと思いましたが、そんなことはなく画像やテキストの容れ物を作るだけのようです。
実際にWebサイトで使いたい画像やテキストを作成するのはAmplify Studio内で作成するようです。
いくつかのサービスを横断的に触るので、それぞれの役割を意識することが大切です。


### Reactの立ち上げ
Reactを立ち上げたときには、何も表示されません。
画面が真っ白なのは、決して何かが間違ってエラーが発生しているわけではなくて、単純にあなたの`index.html`には何も書かれていないだけです。 
コンソールに表示された下記の文言に`このアプリを実行するにはJavaScriptを有効にする必要があります。`には、大変苦しめられました。

```index.html
 <noscript>You need to enable JavaScript to run this app.</noscript>
```

こちらの文言は初めから`index.html`に記述されています。何かのエラーが発生しているわけではありません。落ち着いてください。悲観しないで大丈夫です。
Amplify Studioで作成したコンポーネントをReactJSに書き込むことで、公式資料のような画面を作成することができます。公式でも下記のように記述されています。

>
次に、UI コンポーネントをアプリに追加しましょう。App.js に移動し、UI コンポーネントをインポートします。次に、それらを render 関数に配置します。App.js ファイルは次のようになります。



### 一通り経験してみて
フロントのデザインを作るのに、CSSを一度も触ることなく、それなりの画面が作成されたことに驚きました。上記のようなエラーを重ねながらでも、１日でサンプルアプリを立ち上げることが可能です。
フロントの知識が皆無でFigmaもReactもわからない身分でも、簡単にWebアプリを作成することができますので、今後のWeb開発がどんどんやりやすくなりますね。

# To be Continued
## 終わりに
今後もTwitterでこのようなデータの可視化を発信しています。興味があったらご覧ください。 ~~大抵はくだらないことです。~~

[Sempleのツイッター](https://twitter.com/Semple_smile)


## 参考記事
[^1]: 公開日を見るに、もしかしたら当時から既に日本語版もあったのかもしれません。