🔍

アニメ検索アプリをつくりました

2024/09/23に公開

概要

シーズンやタイトルでアニメを検索できる Web アプリを作成しました。
検索結果は Annict というサイトの人気順で表示されます。
アニメを見る方はぜひ使ってみてください!

作成した目的

  • 次のシーズンでは、何のアニメを放送するか知りたかったから
  • 特定のアニメが次いつ放送予定か知りたかったから
  • GraphQL を使用したかったから

使用技術

フロントエンド

  • Next.js 14.2.5
  • TypeScript
  • ChakraUI
  • apollo/client
  • GraphQL

外部 API

  • Annict API
    • アニメ情報の取得で使用

実行環境

  • Vercel

画面イメージ

トップページ

  • 現在放送中のアニメの一覧を Annict というサイトの人気順で表示

シーズンでアニメを検索

  1. シーズンを選択
  2. 検索ボタンをクリック
  3. 検索結果を表示

タイトルでアニメを検索

  1. 検索バーにタイトルを入力して Enter
  2. 検索結果を表示

システム構成図

システム構成図

ざっくり説明すると

  • フレームワークは Next.js
  • UI ライブラリは Chakra UI
  • ホスティングは Vercel
  • アニメデータは Annict API から

Discussion