React,Amplify,AppSyncでの掲示板アプリについて
以下の記事を参考にアプリを作成してみました。 qiita.com
結果
うまく行きました。 ただし、うまく表示させるには、コメント欄を参考に書き方を変える必要があります。 以下は作成した際に分からなかったところのまとめです。
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.
【5分でなんとなく理解!】Webpack入門 - Qiita
Yarnについて
Yarnはnode.jsのパッケージマネージャーです。
npmもnode.jsのパッケージマネージャーで互換性もありますが、インストールが速いようです。
Amplifyについて
AmplifyはAWSの各種サービスを使ったアプリ作成を容易にするJavaScriptフレームワーク、 および、開発者用サービスで構成されています。
amplify apiはHTTPリクエストでRESTあるいはGraphQLのエンドポイントとの通信を提供します。
graphQLはAWS AppSync(その他のサービスも可),RESTはAmazon API Gatewayを使用します。
今回はAppSyncを使用するので、graphQLを選択しています。
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
「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub|若手Webエンジニアのキャリアを考える!
AWS AppSyncで始めるGraphQL - Qiita
最後に
確認しながらだったので、15分では終わりませんでしたが、 掲示板アプリを作ることができました。
調べた結果として用語をまとめましたが、作成してから時間がたってしまったので、 以下を参考に、今度はTypeScriptでやってみたいです。