【個人開発】釣りアプリを作製しました
本記事作成の目的
元々自分で使うためと勉強のために個人開発第一弾として釣りアプリを作製しました。本アプリは2023年1月ごろに釣行テストを行い、多少問題点はあったものの一通り動作することを確認しました。作りたいものがある程度完成したので、2023年3月中旬ごろアプリを停止しました。せめてもの供養のため記事にすることで誰かの参考になれば幸いです。
アプリ概要
本アプリは管理釣り場でのルアーによるトラウト釣りの記録アプリです。アプリの正式名称はTranazaです。SPA構成でフロントエンドはNext.jsとTypeScript、バックエンドはGolangで実装していて、それぞれVercelとAWSでインフラ構築を行いました。
アプリ作製の背景
管理釣り場でルアーによるトラウト釣りに近年ハマり、ちょうど個人アプリを作りたいと思っていたところでしたので、自分の釣りの腕を向上させるアプリを作れないかと思い、本アプリの作製を開始しました。管理釣り場におけるトラウト釣りが他と大きく異なるところは魚のいる場所を探す必要がないという点です。つまり適切なルアーを選択し、いい感じに動かせる技術が釣果への大きなウェイトを占めています。したがって、選択したルアーおよびルアーと相性のいい道具（竿、リール、ライン）、天候、釣果（釣れたのか、反応がないのかなど）を記録できて、各項目の相関がグラフで表示できれば、次の釣行への対策が練りやすいのではと考えました。
このアプリでできること
- ログイン、ログアウト、サインアップ、パスワード変更
- 釣り場、ルアー、ロッド、リール、ラインの情報が画像付きで、表示・登録・更新・削除
- ロッド、リール、ラインの組み合わせをタックルとして表示・登録・更新・削除
- 釣果記録の連続登録ができ、それぞれのデータに対して表示・更新・削除
- 釣果連続登録では、使用ルアー、使用タックル、ルアーの速度、深さ、天候と釣果（釣れた、ルアーに噛み付いた、追跡があった、反応なし）が記録できる
- 釣果記録の分析。2023年3月時点では、①ルアーの色と深さ、②ルアーの色とルアータイプ、③ルアーの色と天候の組み合わせに対して、釣果ごとのグラフが表示できる
実際の画面
ルアー登録画面
釣果連続登録
釣果分析画面
作製期間
2021年12月ごろから2022年12月ごろまでのおよそ1年間ほど。作業時間は平日の夜2時間ほどで、土日は少しだけ作業という形でした。
- フロントエンド（UI） 6ヶ月
サイドバーとかヘッダーとかを自分で書いたり、ディレクトリ構成やAPI実装にとても迷った分とても時間がかかりました。 - バックエンド 3ヶ月
Golangは初めて触ったにしてはとても触り心地が良く、動くものをなんとなく作れてしまいました。 - インフラ構築 3ヶ月
書籍やネット上の記述を見つつ実装を行いましたが、エラー解消の期間がとても長かったです。特にS3に画像を保存するところが権限関連で長いこと詰まっていました。
使用技術と選定理由について
- Golang 1.16
流行りの言語で、バイナリーなので軽量であることに加え、静的型付け言語を触ったことがないので勉強のため。 - React 17.0.2
流行りの言語で情報量が多いので詰まった時に検索しやすく、あと、ヌメヌメ動くUIを作ってみたかったため。 - Next.js 12.2.5
副業でReact.jsを触った際にルーティングの実装が少し面倒だったので、ディレクトリ構成でルーティングが簡単に実装できるフレームワークを選択しました。 - TypeScript 4.5.4
副業でReact.jsを触った際に参考記事がTypeScriptを導入していて、開発体験も良かったために、今回も導入しました。 - Chakra UI
デザインの丸みが好印象だったため。あと、CSSを描く時間が惜しかった。 - PWA
データ登録系はPC画面で操作するにしても、少なくとも実際に釣果を記録する際にはモバイルを想定しているので、アイコンをクリックしてページを開きたいため。 - Docker
開発にとても便利。今回はバックエンド側で使用。 - Tarraform 1.2.4
元々興味あった技術。AWSのコンソール画面では情報を調べても記事によって微妙に違って迷うことも多々あることに加え、自分の設定を記述を見直すことで調整しやすいため。
CI/CDとインフラ構築
- フロントエンドはVercelにバックエンドはAWS ECS上で動かしています。
- フロントエンドとバックエンドの両方でGithub Actionsで対応しています。
-
git pushを行うとテストが走り、テストが通ると自動デプロイされます。
導入して良かった技術
- Air
Golangの改修でとても便利でした。保存するたびにリロードしてくれます。難点は横着してコンテナ止めずに使い続けるとaddress already in useが出て改修が反映されないことが多々ありました。コンテナ立ち上げ直すとかkill -9 <プロセスID>で対処していました。 - AWS ECS Exec
AWS CLIでコマンドを打つことでコンテナ内のAWSの権限調べるとか、DBのマイグレーション実行するのに使用していました。エラー調査にとても役立ちました。 - MinIO
AWS S3と互換性のある開発環境用ストレージ・サーバーで、S3画像保存を実装するのに使用しました。実務では本番にそのまま保存している実装を見たのですが、自分はちゃんと開発環境で行おうと思いました。 - TypeScript
Golangでやり取りするデータ構造の比較がしやすかったです。ただライブラリの対応が大変でした。
反省点
-
フロントエンドとバックエンドを別々に開発した
フロントエンド(Next.js + TypeScript)を自分でAPIで使用するmockデータのjsonを書きながら作製したので、後からGolang開発を始めるとフロント側に渡すデータの調整がとても煩わしかったです。
フロントエンドとバックエンドは同時に開発した方が良かったと思いました。 -
最初から欲しい機能を全部揃えようとしてしまった
画面数が多すぎたのでインフラ構築までとても時間がかかってしまいました。今回は勉強の部分が大きかったので、最小画面数ですぐにフロントエンドとバックエンドのAPI通信を実装してからインフラ構築を行い、動作確認した後に機能を足しく形にしていれば良かったと思いました。小さく始めるのが良かったと思います。 -
想定ユーザーがマイノリティすぎる
トラウトの管理釣り場でルアー釣りをするユーザーしかご利益がない上にある程度実力のある人の釣りの解像度には迫っていなさそうです。もともと個人開発で自分が使いたいものにしようと思っていたわけですが、せっかくなら人に使ってもらってフィードバックを受けた方が良いのではと途中から思い始めました。
役立った書籍（インフラ関連）
- AWSコンテナ設計・構築[本格]入門
著者：株式会社野村総合研究所
AWSにおけるSPAをどう構成するのか、これ一冊読むと全体像がつかめました。 - TerraformでFargateを構築してGitHub Actionsでデプロイ！Laravel編
著者：山原 崇史
大方はこの書籍を元に構築を行いました。各モジュールごとに整理されているのでterraformディレクトリがとても綺麗におさまりました。 - 実践Terraform AWSにおけるシステム設計とベストプラクティス
著者：野村 友規
Terraformと言えば、これという書籍。実際には上記の書籍と見比べて自分の書いた記述が正しいか確認するのに用いました。
感想
- 普段は実務でフロントエンド（jQuery、Vue.js）とバックエンド（PHP、Python）の開発を行っていますが、このアプリ開発で初めてインフラ構築を行いました。AWSで0からインフラ構築を行ったことで実務においてもAWSに関する議論に参加できるようになりました。
- 流行りのReact.js、TypeScript、Golangをなんとなく書けるようになりました。静的解析に少しは慣れたのではないかと思います。まだまだ勉強は必要ですが。
- フロントエンド、バックエンド、インフラを一通り触って多少荒くても、アプリがリリースできる能力が身につきました。
- インフラは特にエラーに詰まることが多かったですが、その都度参考書籍を丁寧に見返したり、自分の書いたTerraformの記述を一つ一つチェックしたりして、逆に理解が深まったのではないかと思います。
- 釣りアプリとしてリアルタイムで釣果を記録できるという案は他に類を見ないのではと個人的に思っていますが、実際に使用してみてあまり実用的じゃないと思いました。
- 今回AWS上で構築したインフラでは月額100ドル近くかかりました。円高のあおりを受けて1万3千円ぐらいでした。アプリを停止して浮いたお金で釣りに行きます。
- 画面詳細やインフラ構成図や導入したライブラリや大変だった実装の話はZennにでも書こうと思います。
リポジトリ
フロントエンド
https://github.com/ksk-yoshiura/trout-analyzer-front
バックエンド
https://github.com/ksk-yoshiura/trout-analyzer-back
最後に
個人開発はとても楽しいのでオススメです！
最後まで読んでいただいてありがとうございます！