1. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
React + AWS Amplifyで
アプリ開発
虎の穴ラボ株式会社 西志村友基
1

2. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
自己紹介
西志村 友基
● 所属：虎の穴ラボ株式会社
● 担当：Fantiaなど
● 入社理由：
○ BtoCサービスに関わりたい
○ 一生に一度はオタク業界に関わりたい
● 趣味：アニメ鑑賞、ゲーム
競馬 ← New
2

3. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
3

4. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
4

5. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
開発の課題
● 本当はアプリケーションの本質的な開発だけに集中したいけど...
○ ユーザー認証
○ データ登録
○ セキュリティ
→ 結局バックエンドも書かないといけない
→ 覚えることいっぱいで辛い
5
誰かに丸投げしたい

6. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
それ、AWS Amplifyならできます
6

7. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
AWS Amplifyの魅力
1. 数分でバックエンドを構成
2. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可
能
3. 対話形式で各種設定を行うことができる
4. 数クリックでアプリを公開できる
5. Amplify Admin UIによる容易なコンテンツ管理
7

8. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
8

9. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
今回開発したアプリ
9
【仕様】
● 画面から
○ 名前
○ スキル
○ 説明
という値を受け取る
● DBに保存して表示
● 管理画面も作る

10. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Node.jsのインストール
Amplifyのインストール
Reactアプリの作成
Amplifyの初期設定を実施
フロー
10
React用のライブラリをインストール
APIの作成
Amplifyでデプロイ
ホスティング設定
アプリ公開！！！

11. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Node.jsのインストール ・・・コマンド打つだけ
Amplifyのインストール ・・・コマンド打つだけ
Reactアプリの作成 ・・・コマンド打つだけ
Amplifyの初期設定を実施 ・・・コマンド＋対話形式
フロー
11

12. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
React用のライブラリをインストール ・・・コマンド＋tsxの修正
APIの作成 ・・・コマンド＋対話形式
Amplifyでデプロイ ・・・コマンド＋対話形式
ホスティング設定 ・・・コマンド＋対話形式
アプリ公開 ・・・コマンド打つだけ
フロー
12

13. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
【APIの設定】
● GraphQLを使用
● スキーマテンプレートとしてToDoを使用
【デプロイの設定】
● TypeScript使用
● GraphQLのコード自動生成ON
今回作成したAPI、デプロイの設定
13

14. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Amplifyのインストール
（Node.jsがインストールされている前提です）
amplifyの設定（以下のコマンドを実行）
# リージョンの選択、IAMの作成（アクセスキー、シークレットキーの入力）などが求められ
ます
$ npm install -g @aws-amplify/cli
$ amplify configure
14

15. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
React アプリにAmplifyを設定①
$ cd uma_note
$ amplify init
$ npx create-react-app --template typescript uma_note
15
Reactアプリケーションを新規作成
Amplifyの初期設定を実施

16. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
16

17. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
React アプリにAmplifyを設定②
17
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
$ npm install aws-amplify @aws-amplify/ui-react
React用のライブラリをインストール
生成されたindex.tsxに以下を追記

18. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
APIの作成
$ amplify add api
18
対話形式で設定

19. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Amplifyでデプロイ
$ amplify push
19
Graphqlのソースを自動生成してくれます

20. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Amplify でアプリを公開
ホスティング設定
以下のコマンドでアプリが公開されます
$ amplify add hosting
$ amplify publish
20
たったこれだけ！！

21. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
スキーマを変更したい場合
type Todo @model @auth(rules: [{allow: public}]) {
id: ID!
name: String!
description: String
}
type Uma @model @auth(rules: [{allow: public}]) {
id: ID!
name: String!
skill: String
description: String
}
amplify/backend/api/umanote/
schema.graphql
を書き換える
$ amplify push
21

22. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
あとはアプリ開発に集中（TypeScript）
22
const umaData = await
API.graphql(graphqlOperation(listUmas))
await API.graphql(graphqlOperation(createUma,
{input: uma}))
リストの取得 データ登録
自動生成されたものを呼
び出すだけ

23. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ(Vueじゃないのかよ)
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
23

24. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Admin UIを有効にする
24

25. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
管理画面からデータ登録
25

26. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
画面に表示されています
26

27. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ユーザー画面から入力
27

28. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
管理画面で確認します
すこしタイムラグあります
28

29. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
29

30. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
まとめ
● APIが自動生成できたり管理画面の実装の手間を省ける
→フロントのロジックの開発に集中できる！
● AWSのサービスに馴染みがある人は特におすすめ
● GraphQLを使った気になれた
● 自分のトレーニングを記録して振り返れるアプリにしたい
30