はじめに
本記事は、筆者が個人開発したWebアプリ「AniTier」の紹介記事です。アプリの概要や、開発時の工夫点・苦労した点などを記載しております。
筆者について（アプリ開発時点）
・年 齢：24歳→25歳
・職務経歴：某SES企業で3年勤務→某SIer企業に転職
・担当業務：基本設計・詳細設計・コーディング・テスト
・取得資格：JavaSilver・基本情報技術者・応用情報技術者
アプリ概要
アプリ名 ： 「AniTier」
URL：https://anitier-q8mr.vercel.app/
GitHub：https://github.com/UdukiRenge/anitier
アニメ(Anime)の視聴履歴を管理し、自分だけの(Tier表)を作成するアプリという意味で名付けました。
アプリ作成の背景
今回のアプリを作成するにあたり、私が最も重視したのは前回に作成したメモアプリよりもレベルの高いモノであることでした。何か良い題材はないかAIに投げてみたところ、読書管理が候補として挙がりました。なんでも、本の情報を取得できるAPIがあり、それを基にアプリを制作できるとのことでした。
私はアニメを観ることが好きなので、「本の情報を取得できるAPIがあるなら、アニメの情報を取得できるAPIもあるのではないか？」と思い調べてみたところ、案の定幾つかヒットしました。
そうして、今回個人開発の題材は「アニメの視聴履歴管理」に決まりました。
主なアプリの機能
➀アニメ検索
タイトルによる通常の検索と、ジャンル・放送時期による条件検索があります。
検索したアニメは、カードとして表示されるようになっており、「お気に入り/気になる/視聴済み」のリアクションをつけることで、後述の機能に関与します。
また、初回開設時に検索欄だけ表示するのは味気なかったので、今期放送中のアニメが表示されるようにしました。
➁マイページ
「お気に入り/気になる/視聴済み」でリアクションしたアニメが一覧として表示される画面です。タブによって切り替えられます。
③ティア表作成画面
本アプリの肝と言える、ティア表を作成する画面です。ドラッグで直感的に操作できるようにしております。
作成に用いるアニメの候補は「お気に入り/視聴済み」のうちいずれかのリアクションをつけたモノのみ挙がるようにしております。これは、視聴したアニメのみを評価するようにしたかったためです。
主な使用技術
➀フロントエンド
- React 19.1.1
- TypeScript 5.9.3
- jotai 2.16.0
- tailwindcss 4.1.17
➁バックエンド・DB
- Supabase
③アニメ情報取得
- AnilistAPI
④コード管理・デプロイ
- VSCode
- GitHub
- Vercel
➄その他
- Figma
技術選定の意図
当初参画していた現場の技術スタックに合わせて採用しました。転職を機に現場が変わり、今はVueを使用しているのですが、思想が似通っている部分もあり、無駄にはなっておりません。
ライブラリを用いたCSSで開発してみたかったため、代表的なものを採用しました。
これまでRDBを用いた開発の経験がなかったため採用しました。
アニメの情報を取得できるAPIは複数あったのですが、その中で最も安定してキービジュアルが取得できたので、採用しました。
デザインツールを使用してみたかったことと、カード表示やティア表など、製造前にどのようなものを作成すれば良いか考えておきたい要素が幾つか存在していたため。
工夫した点
➀読書管理から発想を広げ、アニメの視聴管理+ティア表作成という仕様に行きついた。
これまでに経験した開発は、職場で作るべきものが決まっているか、メモアプリのような基礎的なものだけだったのですが、今回初めてオリジナリティを出すことができました。特にティア表部分は、どのように進めればいいか全くイメージがついていない状態からのスタートだったのですが、なんとかリリースまで漕ぎ着けることができました。
➁アニメデータの参照方法
本アプリにおけるデータは、Supabase由来のものとAnilistAPI由来のものに大別されます。
仮にマイページでユーザーがリアクションをつけたアニメをカードとして表示しようとした場合、ユーザーがどのアニメにリアクションをつけたのかという情報と、アニメ自体の情報が必要となります。このようなケースでは、SupabaseとAnilistAPIの両方から情報を取得するため、処理性能の低下が予想されました。
そこで、アニメの情報は予めSupabaseにマスタとして登録しておくことで、ユーザーの操作でAnilistAPIを実行する必要のない方式としました。
苦労した点・反省点
➀学習期間が空いた時に次やるべき作業を忘れてしまった
転職活動をしていた多忙な時期が重なってしまい、学習期間が空いてしまったことがありました。作業内容やデザイン以外の仕様面は全て頭の中だけでやっていたため、そこから復帰した時に何から始めたら良いのか分からなくなってしまいました。
➁ Tailwind CSSの活用
今回、Tailwind CSSを使用してみたはいいものの、画面における構成要素の部品化をボタンやラベルといった一要素単位で実施していなかったので、類似した要素全てにスタイルを定義することになってしまい、却ってJSXが読みづらくなってしまいました。
今後の課題
➀タスク管理
実務でも、複数ある仕事に優先順位をつけて期限を遵守する動きは当然必要ですので、個人開発でもそこは取り組むべきだと思いました。
個人開発で設計書まで厳密に作成しようとすると却って学習効率が落ちてしまうような気がしますが、せめてタスクくらいは何かしらで纏めておくようにしたいです。
➁Tailwindライブラリの活用法
Figmaなどのデザインツールを使用したのであれば、その段階でどういった要素が共通部品化できるか考えるべきだと思いました。また、それが難しいのであれば、バニラCSSとの併用も視野に入れるべきだと感じました。
さいごに
ここまで閲覧いただき、ありがとうございました。
今回で個人開発が2度目でしたが、題材のレベルを上げたうえでやり遂げることができて良かったです。他に勉強したいことがあるということと、次の開発の題材も思いついていないことから、個人開発する予定は現状ないのですが、次もしやる時がくれば、今回挙がった課題に取り組みより良い開発ができればと思います。