1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【あべ塾 - 課題4 -】AWSAmplifyのチュートリアルでSNSアプリを作ってみた

Last updated at Posted at 2021-09-23

作成したアプリについて

今回は、AWSAmplifyのチュートリアルを通して、SNSアプリを作ってみました。

AWSAmplifyを通して使用したサービスについて(SNSアプリ:2つ以上)

AWS Lambda

AWS Lambdaは、AWSが提供するサーバレスコンピューティングサービスの1つです。活用することで、利用者はインフラ管理を気にすることなく、コード開発に集中できます。オペレーティングシステムなどのインフラストラクチャの管理が不要で、利用者はプログラムコードを準備し、Lambdaにアップロードするだけで実行できます。
サーバレスという言葉になっていますが、実際に稼働するサーバがないというわけではなく、AWS側で実行基盤が管理されるため利用者の管理するサーバが無いということになります。利用者はインフラ部分の管理をAWS側に任せられるため、ビジネスロジックに関わるコード開発に集中できます。

AWS DynamoDB

どんな規模にも対応する高速で柔軟なNoSQLデータベースサービス
Amazon DynamoDBは、規模に関係なく数ミリ秒台のパフォーマンスを実現する、key-valueおよびドキュメントデータベースです。
Lyft, Airbnb, Redfinなどの世界で最も急速に成長しているビジネスや、Samsung, トヨタ、Capital Oneといった企業の多くは、ミッションクリティカルなワークロードをサポートするために、DynamoDBのスケールやパフォーマンスを重要視しています。
数十万ものAWSのお客様が、あらゆる規模で低レイテンシーなデータアクセスが必要なモバイル、ウェブ、ゲーム、広告技術mIoT、及びその他のアプリケーションのキー値とドキュメントのデータベースとして、DynamoDBを使用しています。アプリケーション用に新しいテーブルを作成すると、残りの処理はDynamoDBが行います。

自身が今回の課題をこなす上で苦労した点

1. ファイルの分離

前回のTodoアプリでは、一つのslice内でstateロジックを管理していましたが、今回はまずGraphQLデータをgetするApi用のファイルを別に作成しました。

どのファイルにどのようにロジックを切り出せばいいのかが、最初はわかりませんでした。

2. GraphQL

GraphQLのmutation, query, subscriptionや、amplify mock apiで起動するGraphiQlの使い方などが、最初はどのように仕組みで動いているのか「?」でした。

3. stateをReduxに置き換え

チュートリアル時に作成されているstateを、ひとつずつReduxでのグローバルなstate管理に置き換えていく部分で、思うようにデータを取得できず困惑しました。

苦労した点をどのように克服したか

  1. 一つのファイルやロジック単位で、いろいろな作業をさせないように意識して、ロジックを組み立てていきました。

  2. GraphiQl内で、querymutationの各コマンドの挙動を確認しました。queryはREST APIでいうところのGETmutationPOST, PUT, DELETEだと認識しています。

  3. なんだかんだここが一番苦労した箇所だと思います。TypeScript型エラーや、データが上手く渡せていなかったりしました。
    基本的には、一箇所(HOMEに関するコンポーネントなど)のロジックを作ることができたら、別コンポーネントにもその応用でロジックを組み立てて行くことができるので、まずは1つ完成させました。
    あとは、どうしても分からない場合はあべさんのリポジトリを参考にロジックの意味を考えながら、とりあえず前に進みました。

また、エラーが発生した際にやみくもにエラーを検索するのではなく、まず**「エラー文の内容を理解する」ように努めました。
そして、そこから
「何が原因でエラーが起きているのか」などの仮説**を立て、検証に移るようにしました。
やはり、解決できないエラーがある場合は、そもそもエラー文を理解できておらず、問題の内容を把握しきれていません。
どの課題でも言えることですが、やはりconsole.log()やReduxのDev Toolsを使って、stateの中身の確認などをひとつずつ行い、原因を特定する力が重要な気がします。

参考サイト

まとめ

SNSチュートリアルの課題は、Amplify SNS Workshopの内容に沿って進めていくのですが、一回通しただけでは全く理解出来ず、かつエラーに見舞われて全く進めない、という状況に何度も追い込まれました。

何度かお手上げ状態になり、最初からやり直す羽目になったのですが、その過程で、チュートリアルをしっかり読んでいく(読み飛ばさない)ことで少しずつ理解を深めていくことが出来ました(最初からしっかり読みなさい)。

一応課題を終えたのですが、正直理解できているとは言えない状態なので、引き続き勉強していきます。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?