Zenn
Closed7

100日チャレンジ day10 (GraphQL API を使った映画・書籍情報アプリ)

llmバックエンド100日チャレンジ
riddle_tecriddle_tec

昨日
https://zenn.dev/gin_nazo/scraps/eb18c10ff3cd4d

https://blog.framinal.life/entry/2025/04/14/154104

100日チャレンジに感化されたので、アレンジして自分でもやってみます。

やりたいこと

  • 世の中のさまざまなドメインの簡易実装をつくり、バックエンドの実装に慣れる(dbスキーマ設計や、関数の分割、使いやすいインターフェイスの切り方に慣れる
  • 設計力(これはシステムのオーバービューを先に自分で作ってaiに依頼できるようにする
  • 生成aiをつかったバイブコーティングになれる
  • 実際にやったことはzennのスクラップにまとめ、成果はzennのブログにまとめる(アプリ自体の公開は必須ではないかコードはgithubにおく)

できたもの

https://github.com/lirlia/100day_challenge_backend/tree/main/day10_graphql_media_app

riddle_tecriddle_tec

承知いたしました。新しいチャレンジ「GraphQL API を使った映画・書籍情報アプリ (day10_graphql_media_app)」を開始します。

まず、アプリケーションの仕様と開発の進め方について提案します。

アプリケーション仕様:

  1. 目的: GraphQLのスキーマ設計、リゾルバーの実装、Next.js Route Handler での GraphQL サーバー構築を通じて、GraphQL API の基本的な仕組みと利点を学習します。映画と書籍の情報を関連付けて取得・表示するシンプルなフロントエンドも作成します。
  2. コア機能:
    • 映画情報（タイトル, 監督, 公開年）と書籍情報（タイトル, 著者, 出版年）を管理します。
    • 映画と書籍を関連付ける機能（例: 原作書籍がある映画）を提供します。
    • GraphQL API を通じて、これらの情報を取得、追加、更新、削除できるようにします。
    • 特定の映画に関連する書籍、または特定の書籍に関連する映画を取得できるようにします。
  3. データモデル (Prisma):
    • Movie: id, title, director, releaseYear
    • Book: id, title, author, publicationYear
    • 両モデル間に多対多のリレーションを設定します (Prisma の Implicit Many-to-Many)。
  4. GraphQL API (/api/graphql):
    • スキーマ (typeDefs): Movie と Book タイプ、および関連するクエリ (movies, movie, books, book) とミューテーション (addMovie, updateMovie, deleteMovie, addBook, updateBook, deleteBook, relateMovieBook, unrelateMovieBook) を定義します。
    • リゾルバー (resolvers): 各クエリとミューテーションに対応する Prisma Client を利用したデータ操作ロジックを実装します。
    • サーバー: @apollo/server と graphql ライブラリを使用し、Next.js の Route Handler (app/api/graphql/route.ts) で GraphQL エンドポイントを構築します。
  5. フロントエンド (Next.js + Tailwind CSS):
    • ページ:
      • 映画一覧・追加ページ (/movies)
      • 映画詳細・編集・関連書籍表示ページ (/movies/[id])
      • 書籍一覧・追加ページ (/books)
      • 書籍詳細・編集・関連映画表示ページ (/books/[id])
    • データ連携: Client Components から fetch API を使用して GraphQL エンドポイントにリクエストを送信します。
  6. ユーザー識別: 今回は実装しません。

開発の進め方:

  1. プロジェクト初期化:
    • template をコピーして day10_graphql_media_app ディレクトリを作成します。
    • package.json の name を更新します。
    • README.md に今回の仕様概要を記載します。
    • GraphQL 関連ライブラリ (@apollo/server, graphql) をインストールします。
  2. データモデリングとDB設定:
    • prisma/schema.prisma に Movie, Book モデルとリレーションを定義します。
    • npx prisma migrate deploy でマイグレーションを実行します。
  3. GraphQL API 実装:
    • GraphQL スキーマ (typeDefs) を定義します。
    • リゾルバー (resolvers) を実装し、Prisma Client で DB 操作を行います。
    • app/api/graphql/route.ts で Apollo Server をセットアップし、Route Handler として公開します。
    • curl などで基本的な GraphQL クエリ/ミューテーションの動作を確認します。
  4. フロントエンド実装 (一覧表示):
    • 映画一覧 (/movies) と書籍一覧 (/books) ページを作成し、GraphQL クエリでデータを取得して表示します。
    • 基本的なレイアウトとナビゲーションを app/layout.tsx に実装します。
  5. フロントエンド実装 (追加/詳細/編集):
    • 追加フォーム、詳細表示、編集フォームを持つコンポーネントを作成します。
    • 対応するページ (/movies, /movies/[id], /books, /books/[id]) を実装し、GraphQL クエリ/ミューテーションと連携させます。
  6. フロントエンド実装 (関連付け):
    • 詳細ページで関連する映画/書籍を表示する機能を追加します。
    • 映画と書籍を関連付ける/解除する UI と GraphQL ミューテーション呼び出しを実装します。
  7. テストと調整:
    • Playwright などを使用して、一連の機能（表示、追加、更新、削除、関連付け）が正しく動作するか確認します。
    • 必要に応じてスタイリングを調整します。

上記仕様と手順で進めてよろしいでしょうか？ もし修正点や追加のご要望があればお申し付けください。なければ、この計画に沿って開発を開始します。

このスクラップは4ヶ月前にクローズされました