はじめに

ポケモン対戦をやってて次のような事はありませんか？

構築に入ってるポケモンの努力値ぶりを忘れる
紙やNotion等で構築を管理しているが実数値計算等が怠い
友達と構築をシェアしたいけど公式のレンパ画面だと振り方とかがわからない

そんな人のためのWebアプリを作りました。

背景

何か勉強のために1からWebアプリを作ってみたい
Notionで構築管理やってたけど怠くなってきた
システム化しちゃおう！

概要

Webアプリを作って1ヶ月ぐらい弄くり回してやっと最低限の形になった気がするので紹介記事を書いてみます。
今回作ったのはポケモンの構築を管理できるアプリです。
ポケモン対戦をそれなりにやる人であれば自分で構築をあれこれ考えて実際に組んでみる事があると思います。そんな時に構築をメモっておけるようなアプリとなっています。先に書いたように元はNotionで自分がやってた事である意味Notionでよくない？って感じはありますが勉強がてら作ってみました。

機能

構築を管理できます
育成済みポケモンを管理できます(育成済みポケモンだけ登録して後でその中からピックアップして構築作ったりできます)
S調整機能(任意の努力値で最速〇族まで抜けるっていうのが個体値性格考慮してリアルタイムで出てきます)
HP偶数警告(努力値振り画面でHPが偶数だと警告が出ます)
構築の共有機能

技術スタック

バックエンド：ktor+Exposed
フロントエンド：Next.js
インフラ：Cloud Run, Cloud SQL(PostgreSQL)
その他：Auth0

技術スタックについてはやってみたい優先で、そしてバックエンドについては軽めだったのでCloudFunction+Firestoreとかでも全然いい気がしましたが、ちゃんと一から作ってみたいためKotlinで一から作ることを選択しました。
インフラは最初はHerokuを使ってたけどお引っ越しして今に至ります。

ktor+Exposed

小さいシステム作るならこれで十分(というかSpringが大きすぎる)。ただExposedについてはまだまだこれからを期待って感じですかね(まあv1.0になってないのでしょうがないですかね)。個人的にはマイグレーション機能が欲しいところ。普段はJavaとか書いてるのでKotlin自体は微妙になれてる新しめの言語ということで自分の中で趣味の第一言語になっています。

Next.js

Reactが触ってみたかったので挑戦してみることに。触ってみた感じは大規模システムならVueより便利そうだなって印象。ただ小規模システムにはちょっと長大すぎるってところはあるかもしれません。あとこれはReact自体というかJavaScriptの話ですが、Decimalがないのはつらみがありました。まあそういうライブラリがあったので良かったんですけど。

Cloud Run, Cloud SQL, Cloud Build

Cloud SQLはRDSなのに意外と安く借りれてビックリ、ピンチケ開発者なので一つのインスタンスにこれからもどんどんデータベース詰め込む予定です。Cloud BuildとCloud Runについては最初は敷居が高かったですが慣れてみればなんてことないですね、一回覚えちゃえば他の言語でも応用が利くので嬉しい。

Auth0

ログイン機能をここまで簡単に実装できる事に驚くばかりです。これがなければこのサービスは完成しませんでした。

反省

React初心者

Reactが初めてだったので初期に書いたコードは今見たらどん引きするような内容に、たぶん数ヶ月経ったら今書いてるコードにもどん引きしそう。まあこれはしょうがないですね。具体的な反省を言うとReact QueryかSWR使えば良かったなってことです。

やっぱりMVC

バックエンドのController-Service-Repository(インターフェースあり)というアーキテクチャはちょっとこの複雑さなら重すぎたなってのを感じています。やっぱりこれぐらいだったらMVCがちょうど良いですね、APIなのでVはありませんが。

吹っ飛んだ！

本番環境のDBを吹っ飛ばした話です。スキーマ比較ツール使って本番環境から空っぽの検証環境DBにテーブルを作ってあげようとしたら向きが逆になってることに全てが終わってから気付く。結果、バックアップがあったのでなんとか復旧。DB操作は慎重に。

最後に

ここまでお読みくださりありがとうございます。
というわけでここまで説明してきたこのアプリですが現在利用者1人だけです。ちなみに自分です。
自分1人のためであってもしこしこ作るのは楽しいのですが、せっかく作ったんだから一人でも多くの人に使って欲しいです。
なので良かったら使ってくださると幸いです。