AI解析を使った画像シェアWEBアプリを超簡単に作る【React/フロントエンド編】#reinvent

*このエントリはシリーズ3番目の記事です。

  1. 設定編
  2. Cognito編
  3. React編

前章でCognitoのAWSリソース設定をしたので、これからReactと withAuthenticator higher-order React component from AWS Amplify を使ってフロントエンドの実装を進めましょう。はじめにログイン機能から作ります。

この章で作るもの

ユーザーログインフォームを作ります。

作成するフォームは4つです。

  • ユーザーサインアップフォーム
  • 確認コード入力フォーム
  • サインインフォーム
  • パスワードリセットフォーム

新規プロジェクトの作成

Reactプロジェクトの雛形を作成します。

npx create-react-app photo-albums

ディレクトリをプロジェクトRootに移動します。

cd photo-albums

Semantic UI React モジュールの追加

React用のSemaitic UIを追加します。

npm install --save semantic-ui-react

public/index.htmlにモジュールを追加します。

<head>
<!-- ... --> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>
<!-- ... --> 
</head>

ブラウザ上で確認してみる

development serverを起動してみましょう。

npm start

サーバーが立ち上がったらPreviewドロップダウンメニューからPreview Running Applicationを選択します。

サーバーを立てたままにするため、別窓でターミナルを開いてこれからの作業は新しく開いた方で行いましょう。

Hello Worldを表示させてみよう

App.jsを以下のコードに置き換えて’Hello World’を表示させてみましょう。

import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

class App extends Component { 
    render() { 
        return (
            <div>
                <Header as='h1'>Hello World!</Header>
            </div>
        );
    }
}

export default App;

正しくブラウザが立ち上がっていればリフレッシュしなくても変更が自動的に反映されます。(ちょっと時間差があります。10秒程)

Amplify NPM dependeicyを追加

AWS Amplify Reactフレームワークをインストールし、src/App.jsに加えます。

npm install --save aws-amplify aws-amplify-react
import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(aws_exports);


class App extends Component { 
    render() { 
        return (
            <div>
                <Header as='h1'>Hello World!</Header>
            </div>
        );
    }
}

export default withAuthenticator(App, {includeGreetings: true});

6行目と20行目のコードを足すだけでサインイン、サインアップ、パスワードリセット、ログインの四つのフォームを作成できたことになります。

早速ブラウザで確認してみましょう。 このようなフォームが表示されれば成功です。

何をしたか

  • AWS Amplify JSライブラリをインポート&設定
  • withAuthenticator higher-orderコンポーネントをaws-amplify-reactモジュールからインポート
  • withAuthenticatorでAppコンポーネントを上書き

アカウントを作ってみよう

作成したフォームのCreate Accountリンクから新規にユーザーを作成してみましょう。

Create Userをクリックすると入力したメールアドレス宛にナンバーが送信されるのでそれを入力します。

作成したアカウントでログインしてみましょう。

ログインできれば成功です。

マネジメントコンソールからCognitoを開くとCognito User PoolとUserが作成されているのが確認できます。

次のAppSync編ではGraphQL APIとDynamoDBをAmplify CLIから設定します。

参考リンク

Amplify JS Authentication