こんにちは。最近家の近くにあるバッティングセンターに行ってストレスを発散している前山です。
昨年12月に AWS の re:Invent カンファレンスで発表された、Amplify Studio が個人的に気になっていたので、その Amplify Studio を触ってみて感じたことを書いていきます。
Amplify Studio とは
Amplify Studio は、Figma で作成されたデザインを人間が読める React UI コンポーネントコードに自動的に変換します。
引用: AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 | Amazon Web Services ブログ
また、Amplify Studio 内で UI コンポーネントをアプリケーションのバックエンドに視覚的に接続でき、Web アプリケーションやモバイルアプリケーションを高速に構築できます。
やったこと・内容
私たちの運用しているトクバイというサービスでは、チラシの他に商品を単品で投稿してそれを一覧として掲載する機能があります。その商品一覧のサンプルを AWS Amplify UI Kit に用意されている Figma データを使って、コンポーネント化して Web アプリケーションにしてみるというのを試してみたいと思います。
データモデルを作成
まずアプリケーションを作成し、Amplify Studio を起動します。
次にデータモデルを作成し、データを UI コンポーネントにリンクできるようにします。このデータモデルを設定することで、動的なコンポーネントを生成することができます。今回は商品一覧ページを作成します。商品には画像と商品名と価格があるとします。
AWS Amplify UI Kit に用意されている Figma データを使って Figma と連携
次に Figma と連携します。AWS が提供している AWS Amplify UI Kit から Figma データのリンクをコピーして、AWS Amplify と連携します。
すると、Figma ファイルのすべてのコンポーネントがインポートされるので、それらを受け入れるか拒否することができます。今回は全てのコンポーネントを Accept します。
コンポーネントの設定
作成したデータモデルとインポートしたコンポーネントの紐付けをおこないます。コンポーネントを選択して、各プロパティに作成したデータモデルをリンクさせます。画像は現時点ではランダムな画像が表示されます。
テストデータの作成
次にテストデータを作成します。テストデータは Content タブで作成できます。
作成したデータモデルに沿ったデータを作成します。
作成したら、設定したコンポーネントのページで Create collection すると、以下の画像のように、テストデータが表示されます。
コレクションの設定
Amplify Studio では、個々のコンポーネントを繰り返して表示するコレクションという機能があります。今回は、下記 gif 画像のように、グリットレイアウトにして、カード間の間隔を設定します。
React アプリケーションにコンポーネントを取り込む
最後に React アプリケーションに Amplify Studio で設定したコンポーネントを取り込みます。
まず、React プロジェクトを作成します。
$ npx create-react-app studio-demo
次に Amplify UI Components のパッケージをインストールします。
$ yarn add aws-amplify @aws-amplify/ui-react
次に「amplify pull」というコマンドでコンポーネントをインポートします。コマンドは、Amplify Studio 上に記載されています。
$ amplify pull --appId 'appId' --envName staging
インポートが終わると、ui-components ディレクトリの中に React コンポーネントコードがあります。ファイルを見ると、型定義ファイルも作成されていますね。
最後に Amplify Studio で設定したコンポーネントをローカル環境に表示します。
src/index.js
に以下のコードを追加します。
import config from './aws-exports' import Amplify from 'aws-amplify' Amplify.configure(config)
次に src/App.js
ファイルを以下のように編集します。
import './App.css'; import { AmplifyProvider } from '@aws-amplify/ui-react' import { ProductCollection } from './ui-components' import '@aws-amplify/ui-react/styles.css' function App() { return ( <AmplifyProvider> <ProductCollection /> </AmplifyProvider> ); } export default App;
<AmplifyProvider>
でコンポーネントをラップすることで、コンポーネントを表示できます。
yarn start
で起動して動作確認をします。
$ yarn start
下記画像のように、Amplify Studio で設定したコンポーネントが表示されたら成功です。
感想
Figma データを元に爆速で React コンポーネントコードを生成できるのはすごいなと感じました。現時点でロコガイドでは利用はしていませんが、新規事業や仮説検証においてプロトタイプを作る際は、非常に便利なサービスだと思いました。
ただ生成される React コンポーネントのコードが jsx
でまだ TypeScript には対応していなさそうなので、今後のアップデートを Watch していきたいなと思います。