🔧
React + Amplify + AppSync(GraphQL) で作成するモダンなWebアプリ開発（のための備忘録）
はじめに
現在大学生をやりながらスタートアップ等でML・フロントエンドエンジニアをさせていただいているtkcelと申します。
- 今回Amplify + AppSync(GraphQL) + Next.jsを用いてモダンなWebアプリを作ろうと思い等、諸々勉強していく中で、参考になったサイトなどを自分用に備忘録を残しておこうと思いました。
（私自身Amplify、React等初学者であるため何かミスがあったらお教えください🙇♂️。また初投稿なので見にくい等ございましたらすみません...） - この記事自体の対象範囲がかなり狭い（かつ雑多）のですが、何かしらで参考になれば幸いです😌
- ここで勉強したことを使って僕自身も簡単なチュートリアル記事書けるように頑張ります！
対象の人
- Reactの基本がわかる人
- Amplifyは全然わからなくてもOK
- とりあえずモダンな感じでWebサービス作ってみたい人
Next.js + Amplify + AppSync(GraphQL) なチュートリアル
- そもそもこの備忘録残そうと思ったきっかけのZennの本です。
- 友人である@YutaUraの『Next.jsでAmplifyに入門する』が素晴らしいので是非購入して参考になさってください！
- 「AWSっていろいろありすぎてよくわからない...」「AmplifyとかGraphQL触ってみたいけどどこから手をつければいいんだ...」といった悩みに答えてくれるチュートリアルとなっています。
【@YutaUra】 『Next.jsでAmplifyに入門する』
Amplifyの基本的な使い方
- Amplify公式のドキュメントは一通り目を通しておいた方がいいと思います。
- @tooさんのQiita記事がとてもよくまとまっていた（大感謝🙇♂️）のでこれで内容を掴むのもいいと思います。
- 特にAmplify特有のディレクティブ(@ほにゃらら)の使い方はかなり分かり易かったです！
【@tooさん】Amplify 参考Qiita記事
AWS amplify フレームワークの使い方Part1〜Auth設定編〜
AWS Amplify フレームワークの使い方Part2〜Auth実践編〜
AWS Amplify フレームワークの使い方Part3〜API設定編〜
AWS Amplify フレームワークの使い方Part4〜API実践編〜
AWS Amplify フレームワークの使い方Part5〜GraphQL Transform @model編〜
AWS Amplify フレームワークの使い方Part6〜GraphQL Transform @auth編〜
AWS Amplify フレームワークの使い方Part7〜GraphQL Transform @key編〜
AWS Amplify フレームワークの使い方Part8〜GraphQL Transform @connection編〜
AWS Amplify フレームワークの使い方Part9〜Function 基礎編〜
AWS Amplify フレームワークの使い方Part10〜Storage編〜
AWS Amplify フレームワークの使い方Part11〜Function 権限管理編〜
AWS Amplify フレームワークの使い方Part12〜ENV編〜
AWS Amplify フレームワークの使い方Part13〜Auth 設定更新編〜
AWS Amplify フレームワークの使い方Part14〜Lambda レイヤー編〜
Amplify & GraphQLでのデータモデル設計事例集
- 一通りAmplifyのことをわかってきた段階でいざ自分なりのアプリを作ろうとした時「データモデル設計どうしよ？」ってなると思います（僕はなりました笑）。
- そんな時はまず真似してみましょう！ Amplify & GraphQLでのデータモデル設計事例集が簡潔にまとまっていて分かりやすかったです。
- 公式でもかなり豊富に例が紹介されていますので是非参考になってみてください。
「そもそもReactの書き方ってどれがいいの」...な方へ
- Reactを勉強し始めたころ「書き方色々ありすぎてフロント初心者はどれでやればいいのか見当もつかねー😭」「TypeScript、React Hooksなどをカッコ良さそう」となりました。
- 現段階(2020/12/28)では
- Typescript
- Hooks
- 関数コンポーネント
等で書いてます(書き方に正解などないのですが、ミーハーなのでカッコいいと思ったやり方をひたすらパクってます笑)。
- Udemyの講座で無料でTypeScript、React Hooks系の講座を公開されている方がいらっしゃったので参考として載せておきます。
- 『最速で学ぶTypeScript』
- 『最速で学ぶFirebase + React Hooks (TypeScript)』
- JSでの書き方になれてきた頃の方はこの2本を見ればTSでの書き方も理解できる下地はつくれるのではないかと思います。
【おまけ】 React Nativeについて
- 僕自身、React Native -> React(Next.js)と入ったため（特殊ですね💦）React Nativeのチュートリアルもかなり漁ってきました。
- @ゴロリとモーリーの秘密基地チャンネルの 『React NativeでTwitterアプリを作ってみよう!』 がかなりおすすめです！全17回のハンズオンでかなりボリュームがありますが必死に食らいつくとある程度のネイティブアプリは自分で実装できるようになります。
- React NativeでのTwitterの作り方を学べるだけでなく、現役のフロントエンジニアの方のコードを無料で見れるので「Reactでネイティブアプリ作ってみたい！」方は是非チェックしてみてください。
【@ゴロリとモーリーの秘密基地】『React NativeでTwitterアプリを作ってみよう!』
おわりに
- 現時点(2020/12/28)でまとめ量少なくて申し訳ないです...今後も関連するようなものはどんどん更新して貼って行こうと思います。
Discussion