思い込みで突破

インフラエンジニアぽい人の雑記

React,Amplify,AppSyncでの掲示板アプリについて

以下の記事を参考にアプリを作成してみました。 qiita.com

結果

f:id:tosyan_samoarinan:20191104230328p:plain

うまく行きました。 ただし、うまく表示させるには、コメント欄を参考に書き方を変える必要があります。 以下は作成した際に分からなかったところのまとめです。

create-react-appについて

ビルドツールの知識が不要でReactアプリを素早く作成するコマンドラインツール。 内部ではBabelとwebpack等を利用していますが、その知識は必要ありません。 Babelはコンパイラで古いバージョンに変換するときに使用するもので、 webpackは複数のモジュールを1つにまとめたファイルを出力するツールです。

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita

Create React App · Set up a modern web app by running one command.

新しい React アプリを作る – React

【5分でなんとなく理解!】Webpack入門 - Qiita

【5分でなんとなく理解!】Babel入門 - Qiita

Yarnについて

Yarnはnode.jsのパッケージマネージャーです。

npmもnode.jsのパッケージマネージャーで互換性もありますが、インストールが速いようです。

Yarn

yarnとは - Qiita

Amplifyについて

AmplifyはAWSの各種サービスを使ったアプリ作成を容易にするJavaScriptフレームワーク、 および、開発者用サービスで構成されています。

amplify apiはHTTPリクエストでRESTあるいはGraphQLのエンドポイントとの通信を提供します。

graphQLはAWS AppSync(その他のサービスも可),RESTはAmazon API Gatewayを使用します。

今回はAppSyncを使用するので、graphQLを選択しています。

API

AppSync,GraphQLについて

AppSyncはGraphQLをベースとしたアプリケーションのバックエンドを提供するAWSのフルマネージドサービスです。

GraphQLはWeb APIの規格の一つ。Restful Web API(REST)の持つ問題を解決するために開発された規格。Facebookが開発しています。

クエリ言語とスキーマ言語で構成されています。

  • クエリ言語・・GraphQLのAPIをリクエストするための言語。
    • データ取得 query
    • データ更新 mutation
    • サーバサイドからのイベント通知 subscription
  • スキーマ言語・・GraphQLのAPIの仕様を記述するための言語

リクエストされたクエリはスキーマ言語で記述したスキーマに従ってGraphQL処理系により実行されてレスポンス生成されます。

【速報】マネージドGraphQLサービス「AWS AppSync」が一般公開(GA)されました! | Developers.IO

Web API初心者と学ぶGraphQL - Qiita

「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub|若手Webエンジニアのキャリアを考える!

AWS AppSyncで始めるGraphQL - Qiita

最後に

確認しながらだったので、15分では終わりませんでしたが、 掲示板アプリを作ることができました。

調べた結果として用語をまとめましたが、作成してから時間がたってしまったので、 以下を参考に、今度はTypeScriptでやってみたいです。

React+Amplify+AppSync+TypeScriptでリアルタイム掲示板アプリを作る - Qiita