【Rails 7 + Hotwire】弓道の練習記録の管理・集計ができるアプリ「弓道練習記録帳」をリリースしました
はじめに
このたび、Rails 7とHotwireを使用した自作アプリ「弓道練習記録帳」をリリースしました。
Rails 7から導入されたHotwireというフレームワークを使うと、JavaScriptをあまり使わずにSPAのような動きをするWebアプリを作ることができます。今回、弓道練習記録帳を作るにあたりRails 7を使用することにしたため、こちらも使ってみようと思い導入しました。
ユーザー認証のGemとしてDeviseを使っていますが、作成時点では正式にRails 7の対応がなされていませんでした(※)。そのため、一部Devise関連でTurboを切って実装した部分がありますが、メインの機能はすべてHotwireを使用して実装しています。
（※作成時点では対応していませんでしたが、2023年2月17日にTurboに正式対応したDevise 4.9.0がリリースされています）
アプリURL kyudo-training-log.com
弓道練習記録帳の紹介
弓道練習記録帳は弓道の練習記録を管理・集計するためのアプリで、スマートフォンやPCで手軽に練習記録の入力をしたり、過去の練習メモや月間の練習量の確認ができます。
特徴
- 練習した射数、練習で気づいたことのメモを記録でき、カレンダーに射数を表示します。
- 入力した記録は一覧で表示されます。記録の際に「固定表示する」にチェックをすると一覧の1番上に表示されます。また、「大切な記録」にチェックを入れたものだけを一覧表示することができます。
- 今月どれだけ練習できるかの目標射数を入力でき、現在どれだけ練習したかの実績が表示されます。
- あえて的中率は記録しません。的中率にこだわらず練習量を積み重ねて自分がどれだけ練習したかを分かりやすくします。
使い方
1.今月の目標を入力します。今月の目標射数と実績射数、残り射数が表示されます。
2.練習記録を入力します。
3.カレンダーに練習した射数が表示されます。射数をタップ・クリックで記録の詳細が確認できます。
4.入力した記録は一覧で表示されます。固定表示の記録は1番上に、大切なメモと切り替えができます。
作った経緯
このブログのタイトルにもなっている通り、私は高校から弓道を始め現在まで続けています。
これまで練習で気づいたことや弓を引いた数（射数）等の記録を紙のノートに書いていました。ですが紙のノートだと書くのを忘れてしまったり、違うノートになった時に振り返るのが大変だったりします。
その点、スマホを使ってその場で手軽に練習記録を残せれば、記憶が鮮明なうちに記録でき、ノートが手元になくてもいつでも振り返ることができるな、と思ったのが始まりです。
スマホの弓道用のアプリとして、中った、外れたといった「的中をつけるアプリ」はいくつかありますが、自分の練習環境が変わったこともあり、的に向かわない練習（束ねた藁に向かって引く、ゴム製の弓を引く、何も持たずに型を確認する等）の比率が高くなり、自分に合わなくなってきました。的に向かって引かないので、的中をつけるアプリは逆に「こんなに練習が少ないのか…」とモチベーションを下げる要因ともなっていました。
また、的中については、高的中を維持できれば自信につながるかもしれませんが、自分のような的中に波がある人間には、的中率が低い状態が続いて練習のモチベーションが下がり、引くのが怖くなってしまうこともありました。
そのため、的中を記録するのではなく、練習量（射数）を記録し、積み上げた記録を可視化することで、練習へのモチベーションを高め、練習の習慣化の助けになると考え作成することにしました。
弓道は初めてから的に向かって引けるようになるまでに的に向かわない練習を一定期間する必要があります。そういった場合にもこのアプリで練習量や教わったことを記録できるため、上達やモチベーション維持の助けになると考えています。
このアプリが自分と同じ境遇の方や初心者の方などのプラスになれば幸いです。
技術スタック
- Ruby 3.1.2
- Ruby on Rails 7.0.4
- Hotwire
- PostgreSQL
- Bootstrap5
- RSpec
- Github Actions
- Fly.io
開発について
開発の流れとして、エレベーターピッチを作成、ペーパープロトタイプを作成、技術検証、リソース・DBを設計してからプロジェクトを作り始めました。
技術検証・技術選定については、Railsのバージョンについて悩みましたが、フィヨルドブートキャンプのメンターから、いずれ最新のものに変わっていくのだから、なるべく新しいものを使った方が良いとのアドバイスもあり、Rails 7に決定しました。その流れでHotwireを使うことになりました。
フロントエンドは初めはVue.jsで作成する予定でしたが、Hotwireを使って作成していくうちに自分のアプリはHotwireで足りるし、Vue.jsは必要ないかも…と思い、途中で仕様変更してVue.jsは使わないことにしました。
また、新しい技術を1つ入れようと思い、RSpecを選択しました。これまでフィヨルドブートキャンプのテストはminitestだったため1から勉強する必要はあったのですが、RSpecは広く使われているようなので、今のうちに使えるようになっておいて損はないと考えました。RSpecは選んで良かったなと思っています。
プラットフォームは初めはHerokuを使おうと考えていましたが、Heroku有料化が発表されたこともあり、別のプラットフォームを含め検討しました。結果として、Hotwireはリージョンの影響が大きいため、東京リージョンがあるFly.ioを選択しました。
やって良かったこと
カンバンにIssueを細かく作成する
自作サービスを作りにあたり、GitHubにカンバンを作成して、初めの段階で技術検証・リソースDB設計からプロジェクト作成、リリースするまでの大まかなIssueをざっと登録していきました。
その後、自分のサービスに必要なことをザッと洗い出してIssue登録し、あとは思いついたり必要だと思った時に随時追加するようにしました。
そのおかげで、やったこと、今やっていること、これからやることが明確になり、少しずつでも進んでいる感覚ができたのでモチベーションを維持することができました。
この「やることを細かくする」ということは、フィヨルドブートキャンプで1番大事だったことかなと思います。「lsコマンドを作る」というプラクティスでもチーム開発でも、課題を書いてその中で必要なこと、やることを細かく分けていくことで、初めは雲をつかむような課題だったものに道筋ができるようになります。これはプログラミングに限らず、どんなことでも使える考え方で、とても重要なことだと思います。
Hotwireの導入
このアプリの最大の特徴です。冒頭で述べたとおり、ユーザー認証以外のメインの機能には全てHotwireを使用しています。
プロジェクト作成の序盤でHotwireを使ってチュートリアルをやっているうちに、Vue.jsを使ってやろうとしていたことがほぼできてしまうことがわかりました。ここでVue.jsの導入をやめてHotwireに絞って実装することにしました。
Hotwireの動きに苦しめられることもありましたが、これからHotwireを使用していくことが増えるだろうという中で、先に経験が積めたのは良かったと思います。
今回、参考にさせていただいた中で大変助かったのは以下のページです。
RSpecの導入
上でも書きましたが、今回新しい技術に1つチャレンジしてみようということでRSpecを選択しました。（Hotwireも入れたら2つになったかも…？）
フィヨルドブートキャンプのプラクティスはminitestを使用しており、そちらはだいぶ慣れていたので広く使われているRSpecをやってみたくなりました。幸い、番外編のプラクティスにRSpecがあったのでそちらを参考にしたり、Everyday Railsを読みながら動かしてみたりして覚えていきました。minitestと表記は違えど、基本的な書き方や考え方はそれほど変わらないと感じたので、あまり詰まらずに今回のアプリに導入できました。
ちなみに、テストを書いていると、毎回「楽しい！」と思います。特にシステムテストで自動で検証されていき全てパスすると達成感を感じて楽しいです。こういうテストや検証することが好きなのかな〜と思ったりしました。
苦労したこと
Hotwireの動きとDevise
Hotwireについては、まず使用しないで機能を実装→少しずつTurbo Frames化していくという流れで進めました。カレンダー機能としてSimple CalendarというGemを導入しましたが公式でHotwireでの使い方が示されており、こちらは問題なく導入することができました。
一方、ユーザー認証にはDeviseを使用しており、こちらは作成時点ではユーザー間で対応方法が示されているだけで本家の対応はまだされておらず、情報を探して不具合を潰しながら進めました。こちらはフィヨルドブートキャンプのメンターの方の記事や、Everyday Railsのサンプルアプリなどを参考にさせていただき、対応することができました。
時間の確保
自作サービス作成に限らず、フィヨルドブートキャンプ全般に渡って苦労したのが学習時間の確保でした。
新型コロナウイルスの初期から感染症担当となったこともあり、仕事をしながらフィヨルドブートキャンプを進めるのはそれなりに負担がある状態で、家族が寝てから学習を開始することが普通になっていました。自作サービスに入ってからはIssueを細かく作成したこともあり、一定のペースでできるようになったので学習習慣が完全に身についたかなと思います。苦労したことでもあり、自分にとって最大のプラスとなったことでしょうか。
おわりに
2020年8月にフィヨルドブートキャンプに入会して2年半、時間はかかってしまいましたが、自作サービスのリリースまで来ることができました。諦めずにここまで来られたのは、駒形さんや町田さんをはじめ、メンターの皆様、また、卒業生や受講生の皆様のおかげだと深く感謝しております。
フィヨルドブートキャンプの各プラクティスは順番も含めて凄く考えられていて、初めてRailsのプラクティスでRails newをして立ち上げた時に、これまでのプラクティスが繋がって感動したのを覚えています。チーム開発や自作サービスでは、これまで学んだことをフルに活用する必要があったので、そういった総合力がついたのではないかなと感じています。
卒業まで辿り着いて考えてみると、フィヨルドブートキャンプで得られたものとして、プラクティスをクリアするためにどう課題に取り組み、どう乗り越えてきたというところが1番大きいのではないかと思います。何が課題になっているか、何をどう調べ理解すれば良いか、そういった経験や考え方が身につき、自作サービスを作りきることで自走力がついたと実感できました。
卒業はゴールではなく、ようやくスタートラインに立つ資格を持ったということです。これからフィヨルドブートキャンプで得たものを活かして新しい道に進んでいこうと思います。ありがとうございました。
