AWS AmplifyのAmplify UIの中身を軽くみてみる

AWS Amplify Advent Calendar 2021の記事です。

以前仕事がらみで、AWS AmplifyのUI Component (Amplify UIになる前のライブラリ)のコード読みをしたことがあったので、その時の話を軽くしたいと思います。

パッケージ構成

Amplify UIは以下のnpm Packageで構成されています。

• @aws-amplify/ui
• @aws-amplify/ui-components
• @aws-amplify/ui-react
• @aws-amplify/ui-vue
• @aws-amplify/ui-angular

他にも、@aws-amplify/ui-storybookがありますが、これはドキュメント生成などの用途なので省きます。

パッケージの使い方

ユーザーは基本的に、@aws-amplify/ui-{UI-Framework-Name}をnpm installして利用します。

しかしそれぞれのライブラリには、インポートして利用しているComponentの実装はほとんど書かれていません。

これは、@aws-amplify/ui-componentsで定義されたWeb Componentを、各UIフレームワークが呼び出す形で実装されているからです。

そのため、実施に利用するコードの実態は、@aws-amplify/ui-componentsを見る必要があります。

https://github.com/aws-amplify/amplify-js/tree/main/packages/amplify-ui-components

StencilでWeb Componentを定義し、各FW向けにラップして提供

AWS Amplify “Amplify UI”の設計を一言でいうと、こうなります。

Ionicで複数のUI FWに対応するなどの目的で作られたWeb Componentを作るFWであるStencilをAWSは利用しています。これですべてのUI要素を実装し、Ionic同様それぞれのFWユーザーが利用しやすい形に、ラッパーとしてFW向けのライブラリが提供されてるのです。

ここ数年、VueやAngularなどへの対応が急速に始まったのは、おそらくこの@aws-amplify/ui-componentsが登場したためだと思われます。

Web Componentの読み込み

import Amplify from 'aws-amplify';
 import awsconfig from './aws-exports';
 Amplify.configure(awsconfig);
 import {
     applyPolyfills,
     defineCustomElements,
 } from '@aws-amplify/ui-components/loader';
 applyPolyfills().then(() => {
     defineCustomElements(window);
 });

Angular

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
 import Amplify from 'aws-amplify';
 import awsconfig from './aws-exports';
 Amplify.configure(awsconfig);
 @NgModule({
     declarations: [AppComponent],
     imports: [AmplifyUIAngularModule, BrowserModule],
     providers: [],
     bootstrap: [AppComponent],
 })
 export class AppModule {}

React

import React from 'react';
import Amplify from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Vue

import Vue from 'vue';
 import App from './App.vue';
 import '@aws-amplify/ui-vue';
 import Amplify from 'aws-amplify';
 import awsconfig from './aws-exports';
 Amplify.configure(awsconfig);
 new Vue({
     render: h => h(App),
 }).$mount('#app');

実装を追いかける場合の注意点

この手のFWを使う時「まぁ、細かいことはコードを読めばわかるだろう」で若干の見切り発車をしたくなるときがあります。が、この手の複数FWに対応しているライブラリについては、少し注意が必要です。

それは、「実装の本体が、いま使っているFWの中やFWの文脈で書かれていない可能性がある」ことです。

IonicやAmplify UIの場合、onClickなどの各種イベントの実装はほとんどStencilの中で書かれています。そのため、実装の詳細をコードから把握するためには、Stencilの知識が必要になります。

もし実装の詳細に興味を持たれた方は、Stencilのイベントやメソッドについて一緒に調べてみることをお勧めします。