Next.jsとGraphQLでモダンな開発を マスターしよう

Next.jsとGraphQLで モダンな開発を マスターしよう yui @yui_active

目次 自己紹介 Next.jsを使う理由 GraphQLの概要と利点 AppSyncについて TODOアプリの作り方 まとめ

経歴 自己紹介 大学卒業後、旅行会社に入社。ガイドマッチングサービスを 立ち上げて起業（現在クローズ済）。 その後エンジニアに転換し、オンラインオフィスやライブ配 信アプリ開発などを担当する。 現在は訪日外国人向けECサイト開発とリードエンジニアを務 める。 性格 熱しやすく冷めやすく、とりあえずやってみようをモットー に生きている。 よくどこでも生きていけそう、生命力が強いと言われる。

Next.js を使う理由 理由は色々ありますが、 メインどころをサクッと紹介します

ページ単位でのレンダリング SSR SSG ISR サーバサイドでレンダリングし、クラ イアントサイドでは描画のみを行うこ とで表示速度を向上させる。SEOに有 利であり、クライアントサイドの負担 を軽減できる。 サーバサイドであらかじめHTMLを構 築しておくことで、ページにアクセス した際に瞬時にHTMLを提供でき、読 み込み速度が速くなる。静的サイトで 更新頻度が低いページに適している。 SSGと同様に静的サイトを構築する が、バックグラウンドで定期的に HTMLを再構築する。更新頻度が高い ページでも高速化が可能であり、サイ トのスケーラビリティを保ちつつ動的 なデータを効果的に取り扱うことがで きる。 (Server Side Rendering) (Static Site Generation) (Incremental Static Regeneration)

Fast Refresh コンポーネントの状態を保持した ままコードの変更を反映させる機 能のこと。 これにより、開発中にページをリ ロードせずに変更を即時確認で き、迅速な開発プロセスが実現さ れる。

Fast Refresh 例えばここで文字を「Add」に変 更した場合、ページ全体をリロー ドすることなく、ボタンのテキス トが変更される。 また、countのstateもリセット されない。

その他・・ 自動ルーティング機能による簡単なページ構成 Vercelなどのプラットフォームとの統合による簡 単なデプロイ APIルートを介した簡単なサーバレス関数の構築 ドキュメントが豊富 などなど・・

GraphQLとは 概要と利点

概要 GraphQL 異なるリソースに対して別々のHTTPエンドポイントを割り当てる のではなく、「クエリ」をPOSTすることが特徴

開発速度の向上 最初にスキーマを決めるので、バックエ ンドとフロントエンドの並行開発が可能 になる。 スキーマが仕様書として機能し、仕様の 理解と開発が容易になる。 さらに、ツール（例：codegen）を使っ て自動的に型定義やドキュメントを生成 できる。

効率的なデータ取得 クライアントが必要なデータだけをリクエストできる。 データの過剰取得や不足取得を防ぎ、アプリケーションのパフォーマ ンスが向上する。 クライアントが必要なデータのみをリクエストすることで、データ通 信量が削減される

REST APIとの比較 GraphQL 効率的なデータ取得が可能 柔軟性が高い バックエンドとフロントエンドの 並行開発が可能 セルフドキュメント 学習コストが高い REST API シンプルなアーキテクチャ 既存のインフラとの互換性 HTTPプロトコルを利用して簡単 にキャッシュを実装できる 長い歴史 過剰取得/不足取得が発生する

AppSyncのすすめ 導入コストが高いGraphQL を簡単に利用できるAWSの フルマネージドサービス

AppSyncを使うメリット サーバーレスな開発が可能 柔軟な認証・認可 GUIベースで作成から検証まで AWSが管理するフルマネージドサービ スなので、インフラストラクチャの管 理や運用に関する手間を大幅に削減で きる AppSyncは複数の認証プロバイダー （AWS Cognito, OpenID Connect, API Keyなど）をサポートし、フィー ルドレベルでの認可設定が可能 GraphQL クエリを管理画面上で作 成、検証、およびテストまでできる GraphQLを使う障壁が下がる！

TODOアプリを 作ってみよう ※ネットワークエラー等を考慮して予め用意した動画を使いながら解説します

今回作ったサンプルアプリ https://youtu.be/6BrWnFj3iCk

• https://youtu.bhttps/youtu.be/6BrWnFj3iCke/xvM5sGTLyjg

AppSyncを使ってAPIを開発するまで https://youtu.be/xvM5sGTLyjg

• https://youtu.be/xvM5sGTLyjg

Schema type Mutation { createTodo(input: TodoInput!): Todo updateTodo(id: ID!, input: TodoInput!): Todo deleteTodo(id: ID!): Boolean } type Query { singleTodo(id: ID!): Todo allTodos: [Todo] } type Todo { id: ID! title: String! description: String } input TodoInput { title: String! description: String } schema { query: Query mutation: Mutation }

import * as graphql from "./graphql.mjs";
const { createTodo, updateTodo, deleteTodo, getAllTodos, getTodoById } = graphql;
export async function handler(event) {
try {
// クエリを判別
const query = event.info.fieldName;
switch (query) {
case "allTodos":
return await getAllTodos();
case "singleTodo":
return await getTodoById(event.arguments.id);
case "createTodo":
return await createTodo(event.arguments.input);
case "updateTodo":
return await updateTodo(event.arguments.id, event.arguments.input);
case "deleteTodo":
return await deleteTodo(event.arguments.id)
default:
// 不明なクエリは異常系と同等
console.log("Unknown Query is input.");
return null;
}
} catch (error) {
console.log(error);
// 異常系はnullを返す
return null;
}
}

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import {
DynamoDBDocumentClient,
ScanCommand,
PutCommand,
UpdateCommand,
GetCommand,
DeleteCommand,
} from "@aws-sdk/lib-dynamodb";
const client = new DynamoDBClient({});
const dynamo = DynamoDBDocumentClient.from(client);
const tableName = "dev-jsfes-todo-list-table";
export async function getAllTodos () {
const params = {
TableName: tableName,
};
try {
const command = new ScanCommand(params);
const result = await dynamo.send(command);
console.log("Fetched data: ", result.Items);
return result.Items;
} catch (error) {
console.error("DynamoDB error:", error);
return [];
}
};

スキーマから型を自動生成

amplifyを使うための初期設定 yarn add aws-amplify

Thank you! https://github.com/yuikoito/graphql-nextjs-todo-app @yui_active https://zenn.dev/yui

• https://github.com/yuikoito/graphql-nextjs-todo-app
• https://twitter.com/yui_active/