Amazon Web Services ブログ

AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現

この記事は AWS Amplify Studio – Figma to Fullstack React App With Minimal Programming を翻訳したものです。

AWS Amplifyにおいて、Amplifyの強力なバックエンドとの統合・管理機能を持ち、最小限のコーディングでUI開発を加速する新機能（パブリックプレビュー）をフロントエンド開発者に提供するGUI開発環境「AWS Amplify Studio」を発表しました。

Amplify Studioは、Figmaで作成されたデザインを人間が読めるReactのコンポーネントコードに自動的に変換します。また、Amplify Studioでは、開発者が生成されたコンポーネントをアプリのバックエンドデータに視覚的に接続することができます。

これまでAmplify Admin UIが持っていたバックエンドの設定と管理機能（「データ」、「認証」、「ストレージ」など）は、今後Amplify Studioの一部となり、統一されたインターフェイスを提供することで、開発者がフルスタックのアプリをより高速に構築できるようになります。

記事全体の作業イメージバナー

では、新く追加されたUI開発の機能を紹介するために、最近追加された住宅を表示する「住宅リスト」アプリケーションを作ってみましょう。

バックエンドとフロントエンドを1つのGUI開発環境でビルドする

はじめに、GraphQL APIバックエンドとReactフロントエンドを持つ、サンプルReactアプリケーションをデプロイしましょう。いくつかの必要なライブラリもサンプル内に含まれています。
注：この手順ではGitHubアカウントが必要となります

下記のボタンをクリックすることサンプルプロジェクトをデプロイできます


Deploy with Amplify Hosting

このワークフローは、GitHubのサンプルリポジトリをフォークして、構成済みのバックエンドが含まれた新しいAmplifyアプリケーションをデプロイします。

デプロイが完了したら、Backend environmentのタブからStudioを起動するをクリックして、Amplifyアプリの設定を確認します。

Amplify Studio起動ボタン

Amplify StudioサイドメニューのDataからデータモデルを確認します。今回は、“Home”という家のデータモデルを作成しており、いくつかのデータフィールドが表示されていることがわかります。

Amplify Studio上のデータモデルスクリーンショット

次に、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を使ってみましょう）

Contentメニュー内は下のようになっているはずです

生成されたデータのスクリーンショット

フロントエンドを構築する時が来ました。さぁ、新しいUI Library(パブリックプレビュー)を試してみましょう。

デザイナーから開発者へのシームレスな引き継ぎ

注: このステップでは無料のFigmaアカウントが必要となります

Amplify Studioの新しいUI Library(パブリックプレビュー)では、FigmaとAmplify Studioの間でコンポーネントを同期することができます。さらに、AmplifyはFigma形式のファイルを提供しています。
Amplify FigmaファイルはプリミティブなUIと、プリビルドされたコンポーネントが両方含まれています。そして、Amplify Studioはこれらに加えて、Figmaで作成した新しいコンポーネントも同じように同期することができます！

では、Amplify Studioの提供するFigmaファイルをクローンしてみましょう。

Figma file スクリーンショット

Figmaのページで、AWS Amplify UI Kit を探し、Pageから “Primitive“ を選択します。プリビルドされたコンポーネントを探す場合は、”My Components“を選択します。

その他に、通常のデザインを行うのと同様にオリジナルの新しいFigmaコンポーネントを作成することもできます。
今回は、このステップをスキップして、プリビルドされた “CardB” を代わりに利用します。上部に画像が、下部にいくつかのテキスト要素を配置した自動レイアウトをサポートしたコンポーネントを利用します。

Figmaコンポーネント作成のスクリーンレコードGIF

Amplify Studioに戻り、Figmaファイルのリンクを貼りつけて、Figmaファイル内の全てのFigmaコンポーネントをインポートします。
個別のコンポーネントを選択してインポートするか、右上のAccept Allボタンを使い、全てのコンポーネントをインポートします。

Figmaをコードにするスクリーンショット

UIコンポーネントをデータと紐付ける

UIライブラリが完成したので、コンポーネントをデータと紐付けてみましょう。

コンポーネントを選択し、Configureをクリックします。このUIコンポーネントエディターでは、コンポーネントのプロパティとそれに紐づくコンポーネントのUI要素を紐づけることができます。このアプリケーションでは、“home“プロパティを新しく追加して、Typeを”Home“とします。ここでは、定義しておいたデータモデルが選択できるようになっています。

データモデルとコンポーネントの画像を紐付けるために、Elements treeからimageを選択し、子要素からsrcを選択し、‘home.image_url’を紐付けます。
次に、テキストを変更するために子要素のラベルにリストから紐づけていきます。テキストを住所に紐づけたり、金額に関してはデータモデルをテキストを組み合わせる構文を使うこともできます。サンプルgif画像では、“Price: $” + “home.price” + “/night” と1つのデータフィールドと2つのテキストを組み合わせています。

データを紐づけるスクリーンレコードGIF

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

データをシャッフルするサンプルGIF

コレクションを作成する

個々のコンポーネントは優れていますが、たいていはコンポーネントの「コレクション」を表示したいと思うでしょう。Amplify Studioでは、右上隅にある「Create collection」ボタンをクリックして、任意のコンポーネントのコレクションを作成できます。左側ですべてのレイアウトオプションを設定し、右側でデータソースを構成します。

新しくコレクションを作成するダイアログ画像

このコレクションにグリッドレイアウトを使用して、列数を 3 に設定します。さらに、要素のすべての辺に 10px のパディングを追加して、スペースを追加してみましょう。

コレクションレイアウトの例

次に、コレクションの作成に使用したデータセットを変更し、新しいソート条件を追加して、新しい家から古い家へとソートします。「ソートを追加」を選択し、ソート条件として「createdAT」と「降順」を選択します。

コレクションソートの例

React App にPullする

コンポーネントコードを React アプリに取り込みましょう！ スターターの React コードを取得するには、GitHub リポジトリのフォークをクローンするだけなので、コマンドは次のようになります。

git clone git@github.com:<GITHUB_USERNAME>/amplify-homes.git
Bash

GitHubからリポジトリをクローンする

次に、「amplify-homes」ディレクトリに移動します。

cd amplify-homes
Bash

Amplify プロジェクトを初めてローカルでセットアップする場合は、次のコマンドを実行して Amplify CLI をインストールする必要があります

npm install -g @aws-amplify/cli
Bash

次に、「コンポーネントコードを取得」をクリックしてコンポーネントコードを取得します。このサンプルリポジトリでは、正しい依存関係の追加やデフォルトの CSS スタイルのインポートを含む「初期プロジェクト設定」は、ほぼ完了しています。すべての npm 依存関係をローカルにインストールするだけで済むようになります。

npm install
Bash

次に、「コンポーネントコードの取得」モーダルの指示に従います。UI コンポーネントをアプリのコードベースにプルします。

amplify pull --appId <YOUR_APP_ID> --envName <YOUR_ENV>
Bash

amplify pullの後、React のコードベースにいくつかの重要なファイルが追加されました。

  • 「ui-components/」には、Figma ファイルのすべての UI コンポーネントが React コードとして含まれています
  • 「models/」にはデータモデルのローカル表現操作を行える処理が含まれており、DataStore で使用してアプリデータのフェッチ、更新、サブスクライブを行うことができます。
  • 「aws-exports.js」は、API エンドポイント、API キー、Amazon Cognito ユーザープール ID など、バックエンド接続の詳細をすべて定義します。

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

import './App.css';
import { NewHomes, NavBar, MarketingFooter } from './ui-components'

function App() {
return (
<div className="App">
<NavBar />
<NewHomes />
<MarketingFooter />
</div>
);
}

export default App;
JavaScript

また、アプリをより速く楽しくするために、「navBar」要素と「MarketingFooter」もインポートしました。アプリをテストするには、以下を実行します。

yarn start
Bash

ブラウザに次のような内容が表示されるはずです。

アプリ実行時のブラウザイメージ

コード内拡張

生成された UI コンポーネントは、「Flex」コンポーネントで使用できるプロパティ、または「Collection」コンポーネントで使用可能なプロパティを受け入れます。

たとえば、コンポーネントを全幅にするには、Amplify UI の「Flex」コンポーネントで使用できるすべてのプロパティを使用できます。この場合、navBarとMarketingFooterにwidth= {「100vw」} を設定しているので、ブラウザのウィンドウサイズに合わせて拡大縮小されます。また、isPaginated プロパティと itemsPerPage プロパティを設定して、Newhomes のページネーションを有効にすることもできます。

import './App.css';
import { NewHomes, NavBar, MarketingFooter } from './ui-components'

function App() {
  return (
    <div className="App">
      <NavBar width={"100vw"}/>
      <NewHomes isPaginated itemsPerPage={3}/>
      <MarketingFooter width={"100vw"}/>
    </div>
  );
}

export default App;
JavaScript

これで、ウィンドウサイズを変更したり、コレクションをページ分割したりできるようになりました。

レスポンシブコンポーネントのGIF

子要素へのオーバーライドの適用、コレクションアイテムの onClick ハンドラーの設定、アイコンへのホバー状態の設定など、コードに適用できるカスタマイズは他にもたくさんあります。Amplify Studio ドキュメントの「Extend via Code 」を参照してください。

Amplify UI ライブラリ — プレビューから一般提供まで

Amplify Studio の UI ライブラリ機能は、現在もディベロッパー プレビュー中です。一般提供を開始する前に、下記のような、さまざまな改善が行われています。

  • Studio 内でイベントベースのアクションを定義する機能 (コンポーネントのクリック、特定のページへの移動など)
  • コレクションに検索、ページネーション、フィルタリングを追加する
  • S3 ストレージバインディングを定義する機能（アバターをユーザーのプロフィール写真にリンクするなど）
  • その他の UI コンポーネント (カラーピッカー、マップ、アバター、ファイルアップローダー)

🥳 成功

成功！ アプリがビルドされました！ 新しいアプリを使い始める準備はできましたか？ Amplify スタジオで始めましょう。
Amplify Studio の新しいUIライブラリ機能に関するフィードバックを、GitHubまたはDiscordコミュニティ経由で送ってください。

翻訳は、Greenfield Solutions ArchitectのGen TakashibaとISV/SaaS Solutions ArchitectのShohei Adachiが担当し、Developer Relations Engineer（Mobile/Web）のDaijiro Wachiが監訳しました。