はじめに

はじめまして、@hinata_tashiroです！

現在23歳の男で、2年ほど前からエンジニア転職を目指し、独学で約1年半働きながら学習を続け、退職後にポートフォリオを作成いたしました。

私が独学で学習を進める中で、Qiitaに投稿されている皆様のポートフォリオに刺激をいただいておりましたので、今度は私が同じような境遇の方に刺激を与えられたらいいなと思い、僭越ながらポートフォリオを公開することにしました。

独学・未経験ということで、技術的な誤りなど多々あると思いますので、どしどし指摘コメントをいただきたいです。

ポートフォリオの紹介

概要

AnimeTierListは、視聴したアニメをTierで評価することで、自分だけのTierListを作成することができるサービスです。

ゲストログイン機能を搭載しておりますので、少しでも気になる方はぜひ触ってもらえたらなと思います。

▼ URL

▼ GitHub

開発の背景

私はアニメ鑑賞が趣味の一つで、日常的にアニメを視聴しているんですが、その中で下記の二つの不満がありました。

「今期はどんなアニメを放送しているんだろう」と気になり調べた際に、簡潔にまとめているサイトが少ない
アニメのTierListを自分で作りたいと思っても手間がかかる。TierListを作成できるサイトもあるにはあるが、海外サイトが多く、言語もUIも日本人向けではないため分かりにくい

上記の2つの不満があり、アニメの情報を簡潔にまとめたデータベース型サイトに、Tierで評価する機能を搭載し、プロフィールページでTierListを表示させれば、2つの不満を一気に解決できるんじゃないか、と考えたことから開発を始めました。

主な機能

トップページ	会員登録画面

今期や前期のアニメ一覧や直近でTierListに追加されたアニメのレビュー内容などを表示しています	メールアドレスを使用した会員登録のみ対応しています

ログイン画面	検索画面

ゲストログイン機能でお試しすることもできます	キーワード検索や絞り込み、並べ替え機能を実装しています

アニメ詳細画面	ブックマーク

アニメの詳細情報やTierListの追加履歴などを表示しています	ブックマークボタンを押すとブックマークに追加できます

TierListへ追加	TierListを編集

TierList追加ボタンを押すとTierListに追加できます	TierListに追加した後に編集することもできます

プロフィール画面	TierList一覧画面

ユーザー情報やTierList・レビュー・ブックマークの一覧をタブ切り替えで表示できます	期間を選択することで表示するTierListを変更できます

フォロー / フォロー解除	フォロー / フォロワー一覧

他のユーザーをフォローすることができます	プロフィールページからユーザーのフォロー/フォロワー一覧が閲覧できます

プロフィール編集画面	お知らせ画面

プロフィールの編集やアカウントの削除ができます	他のユーザーからフォローされるとヘッダーのベルマークに通知マークがつき、お知らせに表示されます

使用技術

フロントエンド

Tailwind CSS
daisyUI
Hotwire

バックエンド

Ruby（3.2.2）
Rails（7.0.6）
- Rubocop
- RSpec

インフラ

Heroku
Amazon S3

CI/CD

Github Actions

環境構築

Docker / Docker Compose

API

Annict
syobocal

使用技術の選定理由

フロントエンド：Tailwind CSS / daisyUI / Hotwire

SPAのような動きを、低コストで導入できるため
ユーティリティを組み合わせてデザインできるため、オリジナリティの高いデザインのWebサービスを作成可能なため

バックエンド：Ruby 3.2.2 / Rails 7.0.6

転職したい企業が採用しているケースが多かったため。

CI / CD：GitHub Actions

候補としてはCircleCIも上げていたが、普段使用しているGitHubと統合性の高いGitHub Actionsを選択したほうが、使いやすいと判断したため

環境構築：Docker / Docker Compose

WindowsとMacを併用して開発する可能性があり、環境で差異をなくすため

API：Annict / syobocal

アニメの情報を取得する候補として、データベースに手打ち、スクレイピング、APIを使用、の3つの候補があったが、手打ちは現実的でないため却下、スクレイピングは他サイトに負荷を与えるため却下、ということでAPIを採用した

ER図

工夫した点

1.アニメ情報の取得方法

サービスのコンセプトが「アニメをTierで評価するデータベース型サイト」ということで、莫大な量のアニメのデータをデータベースへ入力する必要がありました。

そこで、一番に候補に挙がったのがスクレイピングでしたが、歴代で放送されたアニメ作品の数が一万作品以上になることから、他サイトからスクレイピングで情報を抜いてくると多大な負荷をかけてしまうことになります。
他サイトに迷惑をかけてしまうようなことはしたくなかったため、スクレイピングは却下としました。

妥協策として、直近のアニメだけ手打ちでデータベースに入力していく手段も考えましたが、サービスを作るうえで妥協はしたくないし、何よりエンジニアっぽくありません。

解決策がでずに途方に暮れていたところ、下記の記事に出会いました。

記事内容を要約すると、私のようにアニメの必要な情報だけを記載したデータベース型サイトを作成した流れのような感じとなっています。

この記事の中で、アニメの情報をAnnictとしょぼいカレンダーというサービスが提供しているAPIを使用して、データベースに取り込むことをやっているのを拝見して、これだ！と思い、AnimeTierListにも採用しました。

APIの使用方法などは、上記記事内や下記に添付している各サイトに詳細に記載されていますので、気になる方はご覧ください。

2.TierList作成機能

TierListを作成できるサイトは海外サイトをメインに複数ありますが、よくある作成方法としては下記の二つとなります。

莫大な数のアニメの画像が一覧表示されており、その中からTierListに入れたいアニメ画像をドラッグ＆ドロップで持ってくる
自分でアニメ画像を用意してTierListを作成する

この二つの作成方法には、致命的な問題点がそれぞれあります。

アニメ画像が一覧表示されていることでTierListに入れたいアニメ画像を探すことに時間がかかる
アニメ画像を用意することが面倒

この二つの問題を解決する手段として、AnimeTierListでは、よくあるレビューサイトのように、アニメ単体をTierで評価する方式をとっています。

直接的にTierListを作成するわけではありませんが、視聴したアニメをTier方式で評価していくことによって、TierListが作成される、というわけです。

また、Tierを選択する際に、任意ではありますがレビューを追加することもできますので、TierListを作成できるサービスという側面や、アニメの情報を探せるデータベース型サイトの側面、レビューサイトとしての側面も持たせています。

今後の展望

今後の展望としましては、下記の機能の追加などを検討しています。

TierListの画像保存機能の追加
TierListのSNS共有機能
インフラをAWSを変更

また、インフラにHerokuを採用している都合で、過去3年間の2000作品ほどのアニメしか搭載しておりませんので、AWSに変更できましたら、AnnictのAPIで提供している一万作品のアニメを搭載したいと思っています。

最後に

拙い文章だったと思いますが、最後までご覧くださりありがとうございます。

独学で学習しポートフォリオを完成させた中で、多くの学びを得ることができましたし、エンジニアとしてのコードを書いてサービスを実装する楽しみというものを、未経験ながらに体験することができました。

今後も、転職活動を継続しながら、時間を作って機能の追加などに励みますので、AnimeTierListを使用していただけたら嬉しい限りです。

この記事が、未経験からエンジニア転職を目指す方に刺激を与えられたのならうれしいです。