個人開発を行った背景
業務で新しい技術を使うことが決まり、急いでキャッチアップすることになったのがキッカケです。
当時の私のスキルレベルは、Rails と React であれば簡単なタスクをこなせる程度で、今回新たに使うことになった Inertia.js については全く知識がなく、ゼロからのスタートでした。
Inertia.js はRails界隈では比較的マイナーな技術であり、教材や解説記事も少ない状況です。公式ドキュメントを読もうにも、基礎力が不足していて理解が追いつかない。そんな壁に直面しました。
「一体どこから学習を始めればいいのか…？」と迷った末に、この機会を活かして Webアプリの個人開発 に挑戦することを決めました。
ちょうど資格勉強（基本情報技術者試験）のモチベーションを維持する仕組みを作りたいと考えていたため、題材は悩むこともなく自然に決まりました。
この記事では、個人開発を通して０から技術をキャッチアップした流れについてまとめていきます。
制作したアプリの概要
サービス内容
資格学習アプリを制作しました。
生成AIを用いたオリジナル問題で学習するサービスです。
（β版につき基本情報技術者試験のみ対応）
技術スタック
- バックエンド：Rails
- フロントエンド：React, Typescript
- DB：postgreSQL
- ライブラリ：Inertia.js, class transformer, react hot toast
- インフラ：heroku
- テスト：Rspec
なぜこの技術を選んだか
業務で使うから（安直）
Inertia.js の概要
技術紹介
Inertia.jsとは、フロントエンドとバックエンドをAPIを利用せずに接続することができるライブラリです。APIの作成、取得のロジックが不要になるメリットがあります。erbにデータを受け渡す要領でReactへデータを受け渡し出来るので開発体験が良いとされています。
メリット
- ページ遷移やデータ受け渡しが容易でSPAの開発体験が良い
- モノレポでRailsとReactの共存が可能
- APIを書かなくていいので開発が楽
デメリット
- APIを利用しないためモバイル開発には不向き
- Laravelではよく使われるライブラリであるが、Railsでの知見（記事）が少ない
・学習の流れ
1. AIに教材を作らせながら学習
公式ドキュメントを食べさせて、「学習のための教材を作って」と依頼してみました。
Inertia.jsの基本部分について理解することができたのでAI教材を最初の選択にしてよかったです。プロンプトをしっかり組み込めば、より質の高い教材が作れると思います。
AIが作るサンプルコードが動かなかったりしたので、その点注意です。
2. アプリの個人開発開発
なるべく業務で使用する環境と併せることを優先しました。
具体的には以下のものを揃えています。
- ディレクトリ構成
- 技術選定
- 使用プラグイン
あとは作るのみです！
まとめ / 振り返り
・よかったこと
【学習】
- 使用技術などを業務と揃えていたことで、個人開発で詰まった点について、同僚がどのように実装したかを確認することで解決できました。
- 似たような実装を個人開発と業務で２回取り組むことになったため、いい感じに予習/復習となったため、理解が深まりました。
【アウトプット】
- ただのキャッチアップで終わらず成果物として人に見せられるものを作れたことが大きいです。現時点での自分のノウハウを詰め込んでいるので、ポートフォリオが自然と出来上がりました。
・大変だったこと
【技術的な制約】
アプリ要件に技術選定がマッチしていないことがありました。
例えば今回はInertia.jsを採用していますが、API利用が必須のモバイルアプリ開発を行う際には大幅な機能改修が必要となるため足枷になります。
これが原因で私はこのアプリのモバイル開発を見送ることにしました。
【モチベーションの管理】
技術キャッチアップが目的になっていたこともあり、ある程度キャッチアップに満足してくると、開発する意欲が薄れてしまいました。
事前にアプリ要件を落とし込む段階では絶対に成功する面白いプロダクトを思いついた！と思っていましたが、制作していると徐々にこのアプリ作ったところで誰が使うんだろう？という気持ちが出てきます。
少しでもモチベーションを維持するために、リリース日を設定し締め切り駆動開発することによって開発を進めることができました。
・工夫したこと
【生成AIの活用】
AIに技術的な質問や解説を聞くことは理解の促進に繋がるのでどんどんやるべきだと考えていますが、今回の開発ではClaudeCodeのような生成AIによる機能開発は禁止しておりました。
理由は勉強にならないからです。
どれだけ時間がかかろうが、理解して自分でコードを作ることを優先しました。
一方で、デザインに関しては自分で作る意味はあまりないので、AIツール（V0）を大いに活用しました。
また、AIコードレビューツール（CodeRabbit）を導入することで、アプリの品質を高めつつ学習促進につなげられました。
現場においてもコードレビューでの指摘というのは自分が気付けなかったことを理解する機会になっており、個人開発においてもこの学習機会を作りたいと思って導入してみましたが、
結果としては、学習になるだけでなくセキュリティリスクの低減や、軽微なミスを防ぐことが出来ました。
【リリースタイミング】
このShikakuMateは、βリリース時点では１問１答を解くだけのアプリとなっております。
本当は、カレンダーによる学習管理機能や、コミュニティ機能などを付けた状態でリリースしたかったのですが、それらを実装してからリリースすると、いつリリースできるか分からなくなってしまいます。
それこそ開発意欲の低下につながるため、目標日と最小限のリリース機能を決めてのβリリースという判断に至りました。
【フィードバック依頼】
何名かの方に実際にアプリを触ってもらい、頂いたコメントを元に改修する作業を行いました。
自分が開発したアプリに関しては視野が狭くなるので、第三者の意見は非常に参考になりました。
あとがき
今も新しい技術のキャッチアップをするために、別のアプリケーションの開発を行っておりますが、今回の知見を踏まえてよりよい学習体験にしていけたらと思います。
また、今回開発したアプリもまだまだ改善すべき点は多いので、正式リリースに向けて成長させていきたいです！