開発テーマは速い！安い！メンテナンス楽々！ ～漢検学習アプリをリリースしました～

1年間のフィヨルドブートキャンプでの学習の仕上げとして、漢検学習アプリ『漢検練習帳』を作成しました。

漢検練習帳 | クイズで漢検

目次

1. 仕様

  • ユーザー登録不要です。
  • 4択クイズ形式で漢検準1級/1級範囲の漢字の学習ができます。
  • 問題の級と分野を選択すると、問題がランダムで10問出題されます。
  • ☑復習するにチェックを入れた問題だけを繰り返し練習できます。

2. 開発環境

テスト

  • RSpec 3.12
  • Cypress 11.2.0
  • Vitest 0.25.8

3. 開発テーマ

趣味サイトとして作るという大前提のもと、

  1. 自分の実力の及ぶ範囲で
  2. 出来る限り新しいバージョンのフレームワーク/ライブラリを使いつつ
  3. 速い！安い！メンテナンス楽々！

を実現することをテーマにしました。

3.1 自分の実力の及ぶ範囲で

フィヨルドブートキャンプでこんなカリキュラムを学習しました。 bootcamp.fjord.jp

3.2 出来る限り新しいバージョンのフレームワーク/ライブラリを使いつつ

開発環境のとおり、だいたい最新のバージョンを使えていると思います

3.3 速い！安い！メンテナンス楽々！

3.3.1 速い

  • シングルページアプリケーション（SPA）で作成
    ユーザーが速く、次々とクイズを解いていけるように、SPAで作成しました。

  • ビルドツールとしてViteを採用
    初回起動とビルドの速さを実現するために、Viteを採用しました。

  • フロントエンドテストツールVitestを利用
    Vitestは、Viteのパイプラインとして実行される高速テストツールで、Jestと同じように使えるということなので使ってみることにしました。

3.3.2 安い

これで100円/月未満で運用できる見込みです。

(※) SQLite3にはレプリケーション機能が無いので、LitestreamでレプリケーションすることでSQLite3を本番環境で利用できるようにしています。
Why I Built Litestream - Litestream

3.3.3 メンテナンス楽々

  • csvファイルでコンテンツ管理
    クイズコンテンツのメンテナンス時に、都度RailsコンソールでSQL実行するのは面倒なので、csvファイルでコンテンツの追加、修正などを出来るようにしました。
    RailsのSQLite3テーブルをCSVでインポート/エクスポートする - ケイ太のDX備忘日記

  • モノレポでデプロイ先も1か所
    レポジトリをモノレポにして、データベースごとCloud Runにデプロイすることで、レポジトリやデプロイ先の管理が1か所で済むようにしました。
    ここは議論のあるところかもしれませんが、今回は一人で開発する小さなプロジェクトなので、管理物の数を少なくした方が楽だろうと判断しました。

  • Next.jsを使わない
    Next.jsは便利ですし、デプロイもVercelにすればワンストップで楽ちんです。
    しかし、productionモード、build、Docker、デプロイ等に関する知識があったうえでワンストップを利用するのとは違い、 何の知識もないままワンストップを頼ってしまえば、今後何か問題が出たときに、すぐに対処できる実力が自分に付いているとは限らなそうです。
    であれば、今の段階で基本的な知識を付けてしまうほうが、後々楽だろうと考え、Reactを使うことにしました。

4. 雑感

SQLite3+Litestream+Cloud Runという選択

同時に80リクエストまで耐えられるので、予算制約の厳しい、社内用の小さなアプリ等はこの構成で開発できるのではないでしょうか 。 ただしコンテナを複数にしたときにDB間の整合性が取れない気がするので、コンテナは増やせそうにありません（未検証）

完成が10日遅れた

2か月で完成させるつもりで始めましたが、10日遅れて、70日かかっての完成となりました。期日は刻々と近づいているのに、デプロイ時のエラーが全く解消されない絶望感を味わいつつ、+10日のリスケをして開発しました。
Next.jsを使えば、3週間は開発期間を短くできたと思いますし、さらにデータベースも使わずJSONを使えば、Railsも不要になって、もっと早く完成したと思うので、早くリリースすることを重視するなら、こちらの構成が良かっただろうと思いました。

苦労したこと

  1. ProductionのビルドにPollyfillが必要なことがなかなか分からなかった
    Vite.jsの本番環境用のbuildでError: 'fileURLToPath' is not exported by __vite-browser-external, imported by node_modules/local-pkg/dist/shared.mjsを解決したメモ - ケイ太のDX備忘日記

  2. Docker Composeを使わず、DockerfileだけでRails + Nodeイメージをビルドすること
    GCP にはDocker Composeを利用してサービスを立ち上げる方法は存在しないようで、 DockerfileだけでRails + Nodeイメージをビルドしなければなりませんでした。
    しかし、書籍やネットの情報を調べても、Docker Composeを使用した例しか見つからず、Dockerに関する書籍
    プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化（WINGSプロジェクト 阿佐 志保 山田 祥寛）｜翔泳社の本
    試して学ぶ Dockerコンテナ開発 | マイナビブックス
    を読み込んで、1行1行書き進めました。

デザイン

いかにも個人開発っぽい、もっさりしたデザインに仕上がりました。
デザインに関しても、もっと学習が必要そうです。

5. 今後の課題

画面表示が遅い

SPAなので、ある程度仕方がないのかもしれませんが、最初の画面表示が遅いので、改善できるところは改善したいです。

やっぱりコンテンツ管理が面倒

csvファイルを利用することでクイズコンテンツを管理する手間は減っていますが、まだコンテンツの追加や修正は面倒です。RubyMineとの連携でもっと楽にメンテナンスできそうなので、研究してみようと思います。

6. ソースコード

https://github.com/kei-kmj/kanken_practice_note