AWS Amplify Studioで独自のコードを実装

この記事は Write Your Own Code with AWS Amplify Studio を翻訳したものです。

AWS Amplify Studio により、開発者は Figma デザインから容易に React コンポーネントを生成することができます。そして、開発者向けに構築されているため、コードは最も重要な部分の 1 つです。この投稿では、Amplify Studio で生成されたコンポーネントと組み合わせて独自のコードを作成する方法について説明します。
Amplify Studioを初めて使用する場合は、まずこのチュートリアルを読んでください！

Overrides

初めに、Amplify Studio によって生成されたコンポーネントはオーバーライドによって変更できます。Amplify Studio がコンポーネントを生成するときに、 Amplify UI コンポーネントをサブコンポーネントとして使用します。これらのコンポーネントにはすべて、属性を変更するために多くの props があり、これらはドキュメントで確認することができます。これらのpropsのいずれかを変更するには、各コンポーネントで公開されている `overrides` props にオブジェクトを渡すことができます。そのオブジェクトのキーは、変更したいサブコンポーネントの名前になります。これらは Figma 内で設定され、どのコンポーネントの生成ファイルでも表示できます。また値は、変更するプロパティになります。

例えば、次のコンポーネントでは、`Image` コンポーネントをオーバーライドするキーは `timelineImage` です。Figma では、グループや要素を作成すると、それぞれに名前が付けられ、左側のナビゲーションに表示されます。そこでも名前を変更することができます！

function Ampligram () {
  return (
   <Flex>
     <Image
      width="65px"
      height="65px"
      shrink="0"
      position="relative"
      borderRadius="160px"
      padding="0px 0px 0px 0px"
      {...getOverrideProps(overrides, "timelineImage")}
      ></Image>
    </Flex>
  )
}

続いて、親コンポーネントでプロパティを Override する場合は、次の操作を行います

function App() {
return (
   <Ampligram
     overrides={{ timelineImage: { objectFit: 'cover' }}}
    />
 )
}

Collectionsをカスタマイズ

Amplify Studio 内では、データセット内のデータごとにコンポーネントのインスタンスを作成するコレクション、またはリストビューを作成することもできます。コレクション内のアイテムの属性をオーバーライドできます。また、コンポーネントが表すデータインスタンスに基づいて条件付きで行うこともできます。`OverrideItems` プロパティに関数を提供することができ、その関数は、map や reduce などJavaScriptの多くの高階関数と同様に、引数「item」と「index」を受け取ります。

ハイキング( Hikes )のコレクションがあり、ハイキングの難易度に合わせて各ハイキングのボタンを色分けしたい場合は、次のことができます

<Hikes overrideItems={(item, index) => {
  if (item.difficulty === 'easy') {
    return { overrides: { 'Button' : { backgroundColor: 'green' }}}
   } else if (item.difficulty === 'difficult') {
     return { overrides: { 'Button' : { backgroundColor: 'darkGrey' }}}
   }
 }}/>

ui-components ディレクトリからファイルを移動する

Amplify Studio は `ui-components` というフォルダーにコンポーネントを生成します。Figma で承認された変更または表示されるデータへの変更により、Amplify Studio でコンポーネントが変更されると、コンポーネントファイルが再生成され、ファイル内で開発者が作成した変更がすべて上書きされます。

通常、オーバーライドを使用してコンポーネント内で必要なものを変更しますが、何らかの理由でコンポーネントファイル内に直接コードを書きたい場合は、コンポーネントを `ui-components` ディレクトリの外に移動できます。コンポーネントは再生成されなくなり、コンポーネント内で直接コードを作成できます。

UI コンポーネントだけを使う

テーマや Studio で生成されたコンポーネントに一致する他の UI コンポーネントをアプリケーションに追加したいが、Studio を使用したくない場合は、他の React コンポーネントライブラリを使用するのと同じように、アプリケーション内で直接 Amplify UI コンポーネントを使用できます。

テーマ設定

Amplify Studio アプリには、Figma またはコードのいずれかでテーマを追加できます。Figma 拡張機能を使用するか、デザイントークンまたは CSS を持つ JS オブジェクトを使用して、コード内のアプリにテーマを追加できます。

まとめ

Amplify Studio は、開発者の作業を楽にし、デザイナーと開発者の引き継ぎをスムーズにするために作られました。コードの変更と拡張が簡単であることが重要です。開発者が Amplify Studio で生成したコンポーネントでこれを行うには複数の方法があります。Amplify コンソールから Amplify Studio アプリケーションを作成できます。ぜひアプリケーションを作ってみてください！

翻訳は、ISV/SaaS Solutions ArchitectのShohei Adachiが担当しました。

Amazon Web Services ブログ