刀剣乱舞のキャラの経験値を可視化するwebアプリを作った

# はじめに
刀剣乱舞というゲームに登場するキャラクターの累計経験値を可視化するwebアプリ「[とうらぶ練度チェッカー](https://tkrb-exp-checker.piyopanman.com/)」を作りました🎉🎉🎉
今回はこのことについて振り返ってみようと思います！

![ogp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671055/f6bdea8c-3f10-2f76-9a35-c59440e5252c.png)


[刀剣乱舞公式HP](https://www.dmm.com/netgame/feature/tohken_html/=/navi=none/?utm_content=200101&utm_source=AdWords&utm_medium=lis&utm_campaign=nml&gclid=Cj0KCQjw9YWDBhDyARIsADt6sGYA7PjVhWR-GjTpVkpSsj3l1dZORoxFQw5byUjnt7D_KiHMa_W4zKoaAtntEALw_wcB)

# 概要
## トップ画面
トップ画面はこんな感じです。
刀剣乱舞のキャラクターは刀剣男士と呼ぶのですが、刀剣男士1人の練度（レベル）を調べるモードと2人の練度を比べるモードがあります。
![スクリーンショット 2021-03-29 22.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671055/deb6f0b6-de93-3ca9-0ea5-bef3408e90db.png)

## 1口モード
![スクリーンショット 2021-03-29 22.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671055/b44310d8-4704-99ac-5e4e-02a90a3cd4e1.png)
![スクリーンショット 2021-03-29 22.33.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671055/54f71cf6-6391-5c96-d8c9-835f4a8eaf91.png)
ユーザー名、調べたい刀剣男士とその練度を入力して調べます。今回は「にっかり青江」という刀剣男士を１口モードで調査してみました。にっかりと笑った女の幽霊を切ったことが由来でこのような名前がついています。（[にっかり青江](https://wikiwiki.jp/toulove/%E3%81%AB%E3%81%A3%E3%81%8B%E3%82%8A%E9%9D%92%E6%B1%9F)）
累計経験値をレベル上げによく使われるマップ何周分か、レベル上げ用アイテムのこんぺいとう何個分かに換算しています。

## 2口モード
![スクリーンショット 2021-03-29 22.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671055/64df8080-5756-b670-7337-8b6de3250601.png)
「源清麿」「水心子正秀」という2人の刀剣男士を２口モードで調査してみました。推しの2人です。好き。（[源清麿](https://wikiwiki.jp/toulove/%E6%BA%90%E6%B8%85%E9%BA%BF)、[水心子正秀](https://wikiwiki.jp/toulove/%E6%B0%B4%E5%BF%83%E5%AD%90%E6%AD%A3%E7%A7%80)）
練度が低い刀剣男士がどれだけマップを周回したりどれだけこんぺいとうを食べれば高い方に追いつくかを調べられます。今回の場合だと水心子くんはこんぺいとうを467個食べたら清麿くんに追いつきますね:relaxed:🌸


# 作った動機
自分が育成してきた刀剣男士たちの成長を振り返りたいという思い、そしてあわよくば他の刀剣男士に追いつくために何百個ものこんぺいとうを頬張ったり歯を食いしばってマップ周回したりする刀剣男士の２次創作を見たいという下心から作りました。こんぺいとう食べる推し、絶対かわいいもの....。

# 使用した技術
サーバーサイドはGolangを使用しました。フレームワークはgin、ログ出力にzap、ORMにgormを使用し、デプロイ先はHerokuにしました。Herokuに[Goのアプリケーションをデプロイするためのチュートリアル](https://devcenter.heroku.com/ja/articles/getting-started-with-go?singlepage=true)が用意されていたので基本的にはそれを参考にしました。しかしgormを使用した場合のDB接続に関する情報がほぼ見つからず少し時間がかかりました。そのうちこれに関する短い記事を書こうかなと思います。
フロントはTypeScript + Reactです。ライブラリはreact-hook-formやreact-router-domを使用しました。Reactは以前自分用日報アプリの開発にも使ったので、少し慣れてきたかな？という感じです。デプロイ先はVercelです。相変わらず便利。

# 公開時ツイート

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">自己満webアプリ公開するね<br>ここのTLの方には全く需要がないものだと思うんですが、よかったら拡散してもらえると嬉しいです</p>&mdash; ぴよぱんまん (@hiyoko_coder) <a href="https://twitter.com/hiyoko_coder/status/1376017439796826116?ref_src=twsrc%5Etfw">March 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">刀剣乱舞に登場する刀剣男士たちの練度を可視化出来るWebアプリ「<a href="https://twitter.com/hashtag/%E3%81%A8%E3%81%86%E3%82%89%E3%81%B6%E7%B7%B4%E5%BA%A6%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#とうらぶ練度チェッカー</a>」を作りました🎉🎉<br><br>二振りの刀剣男士の情報を入力し、根兵糖を何個食べれば練度が追いつくかなども調べられます！！<br><br>良かったら遊んでみてください！！<a href="https://t.co/dA7Fn8dh5f">https://t.co/dA7Fn8dh5f</a><a href="https://twitter.com/hashtag/%E3%81%A8%E3%81%86%E3%82%89%E3%81%B6%E7%B7%B4%E5%BA%A6%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#とうらぶ練度チェッカー</a> <a href="https://t.co/VOIXCt0tw6">pic.twitter.com/VOIXCt0tw6</a></p>&mdash; ぴよぱんまん (@hiyoko_coder) <a href="https://twitter.com/hiyoko_coder/status/1376018043982114824?ref_src=twsrc%5Etfw">March 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

自分1人で作ったサービスは今回が初めてだったのでツイートする時めちゃくちゃ緊張しました.....。
私をフォローしてくれている方にはほとんど刀剣乱舞に興味がある方はいないと思うんですが、それでも拡散に協力していただいて本当にありがたかったです🙏

# 振り返って
アイディアを思いついてから開発している間は推しへの想いで正気を失っているので「推しの成長を可視化したい！！！！！！！絶対これみんなも見たいでしょいっぱい使ってもらえるわ〜〜〜〜私もしかして天才か？？？？？？」という感じでアドレナリン全開！！超楽しい！！！って感じでやっていたのですが、開発がひと段落すると正気に戻ってしまい、いざ公開しようとした時「え...これ需要ある？いやない....」というお気持ちになってしまいますね。何事も正気を取り戻さないうちに事を済ませるのが大事です。
また、刀剣乱舞は二次創作が活発なジャンルです。イラストや漫画、小説などの形で積極的に推しへの感情をアウトプットしている方がたくさんいます。一方で私はイラストも小説もかけない.....。そんな私が推しへの想いを昇華させる方法としてたどり着いたのがweb開発なのかなと思いました。

# お願い
前の項で「需要ある...?」と思ったという事を書いたのですが、実際に今のところあまり使われていません😭
まじで需要ない説ももちろんあるのですが、刀剣乱舞をプレイしている層に届いていないのも理由の１つだと思っています...！ (Twitterのフォロワーさん400人中刀剣乱舞プレイヤーは1人のみでした)
ありがたいことに何人かには利用していただいて、「かわいい想像ができていいね」とか「OOくん、こんなにレベル上げ頑張ったのか...感慨深い」など感想をいただいているので刺さる層には刺さる...はずなのです....！！
なので、上記の公開時ツイートをRTしていただけたり、もし皆様の周りに刀剣乱舞をプレイしているご友人がいたらこの[とうらぶ練度チェッカー](https://tkrb-exp-checker.piyopanman.com/)を紹介していただけたら非常に嬉しいです..！！🙇‍♂️🙇‍♂️🙇‍♂️

# 終わりに
ここまで読んでいただいてありがとうございました！
もし[刀剣乱舞](https://www.dmm.com/netgame/feature/tohken_html/=/navi=none/?utm_content=200101&utm_source=AdWords&utm_medium=lis&utm_campaign=nml&gclid=Cj0KCQjw9YWDBhDyARIsADt6sGYA7PjVhWR-GjTpVkpSsj3l1dZORoxFQw5byUjnt7D_KiHMa_W4zKoaAtntEALw_wcB)を始めたら、皆様もぜひ遊んでみてください☺️
よかったらツイッター([@hiyoko_coder](https://twitter.com/hiyoko_coder))もフォヨーしてね🐤

🌸[とうらぶ練度チェッカー](https://tkrb-exp-checker.piyopanman.com/)🌸