こんにちは。 アドベントカレンダー20日目です。終盤に差し掛かってきました。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。
↓最初から読み始めたい方はこちらか↓
おさらい
- Visual Studio Codeを使ったReactの開発環境の構築(第1回)
- CSSフレームワークの1つであるtailwindcssを使ったUI開発(第2回)
- コンポーネント化(第3回)
- フォーマッター(第4回)
- Linter(第5回)
- バージョン管理(第6回)
- 状態管理とReact hook form(第7回、第8回、第11回))
- Visual Studio Codeの設定(第9回、第10回、第16回、第17回)
- Reactルーティング(第12回)
- Playwright(第13回、第14回)
- GitHub CodespacesでAmplify
- 環境立ち上げとCLIツールの有効化(第15回)
- Amplifyで初期プロジェクト作成(第18回)
- Amplifyで認証機能作成(第19回)
今回のはなし
第18回からAmplifyシリーズでお送りしています。今回はAPI機能です。AmplifyはDBにDynamoDBを使ったアーキテクチャが標準となっています。 DynamoDBは、NoSQLと呼ばれるものでリレーショナルデータベース(RDB)とは使い勝手が異なります。普段からRDBに慣れている方からすると慣れるまで扱いにくさがあります。
GraphQLと組み合わせることでAPIサーバーを別に用意することなく、手軽に構築することができます。今回はそんなAPI機能について学んでいきます。
準備
AmplifyでAPI機能を追加するためには次のコマンドを実行します。
amplify add api
コマンド実行中にいくつか質問がされてますが、回答例としてご紹介します。
? Select from one of the below mentioned services: (Use arrow keys) ❯ GraphQL REST
今回はGraphQLを使用します。
Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys) Name: reactsample Authorization modes: API key (default, expiration time: 7 days from now) Conflict detection (required for DataStore): Disabled ❯ Continue
今回は何も変更せずにそのまま進みます。
? Choose a schema template: (Use arrow keys) ❯ Single object with fields (e.g., “Todo” with ID, name, description) One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) Blank Schema
オブジェクト同士のリレーション関係によって2パターンのサンプルが用意されています。シンプルなサンプルコードなので、あっても無くてもあまり変わらないくらいの内容です。今回は、デフォルトで選択されている内容のまま進みます。
? Do you want to edit the schema now?
スキーマを今から編集するかどうか聞かれていますが、そのまま進みます。
amplify statusを実行してからステータスを確認します。
┌──────────┬─────────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼─────────────────────┼───────────┼───────────────────┤ │ Api │ xxxxxxxxxxx │ Create │ awscloudformation │ ├──────────┼─────────────────────┼───────────┼───────────────────┤ │ Auth │ xxxxxxxxxxxxxxxxxxx │ No Change │ awscloudformation │ └──────────┴─────────────────────┴───────────┴───────────────────┘
このようにapiが新しく追加れて操作がCreateになっていれば順調です。
今回はamplify pushを実行する前にスキーマ定義について編集しましょう。
スキーマ定義
今回はGraphQLを使用しているため、スキーマの定義ファイルを編集します。ファイルの保管場所はamplify/backend/api/reactsample/schema.graphqlです。
このファイルを開くと以下のようなサンプルが表示されています。これはシンプルにToDoを保持するようになっています。他にも他のモデルとリレーション関係を持たせたり、ユーザーごとにアクセスルールを指定したりできます。
type Todo @model { id: ID! name: String! description: String }
何かテーマがあった方が進めやすいので「社内の書籍管理アプリ」というテーマでやってみようと思います。
type Book @model { id: !D! isbn: Int! name: String! auther: [String] publisher: String }
id: !D!は、primaryキーのようなものなので、お決まりのように必ずつけるようにしてください。
データ型の最後につけるビックリマーク(!)は、必須項目かどうかを示しています。
今回はこのような形にしてみました。ファイルの保存ができたらamplify pushコマンドを実行して変更内容を反映します。
? Are you sure you want to continue? (Y/n)
と聞かれますので、エンターを押して進めます。
? Do you want to generate code for your newly created GraphQL API (Y/n)
と表示されたらエンターを押して進めます。
? Choose the code generation language target javascript ❯ typescript flow
今回はTypeScriptで作っているため、typescriptを選択して進めてください。
? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.ts)
ディレクトリについては、表示されているデフォルトまま進めます。
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions (Y/n)
そのまま進めます。
? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)
デフォルトのまま進めます。この値は後からも変更できます。 GraphQLでは関連するモデルのデータを毎回一緒に取得してきてくれます。取得する際の階層の深さを定義できます。 階層が深い場合に処理が重くなったりしてしまうため、設定する値には注意が必要です。
? Enter the file name for the generated code (src/API.ts)
そのまま進めます。
デプロイが始まりますがそこそこ待ちますので、休憩がてらコーヒーでも1杯入れて一息きましょう。
実行完了を無事に見届けたらここで一区切りします。次回から書籍管理アプリを作っていくという設定が少しずつ使ってみたいと思います。
おわりに
前回の認証機能に引き続き、API機能編として学んできました。今回も、手軽にAPI機能を構築できることを実感できたのではないでしょうか。 次回から実際にAPIを使って書籍管理アプリを作りながら実践編としてお話しします。
