プロジェクトでReactが必要になったので勉強＆練習がてらアプリを作ってみました。
この記事の中身
- React初学者のポエム
- 他人のアプリ制作プロセスに興味ある人向け
- フレームワークやツールの詳細な使い方などはありません
完成品
使ったもの
React
Supabase(DB, StoredFucntion)
Firebase(Hosting)
経緯
今まで主にVueを使っていたけど、都合によりReactが必要になった。
習うより慣れろ！ということで簡単なアプリを作ってみることに。
個人的なプロジェクトで某社長にインタビューしたくて、人生グラフ（厚労省： ライフラインチャート）を依頼したかったのだが、手描きしてもらうのも面倒だなぁと思い、アプリ化することに。
「3日で作った。」とか言いたかったけど、1ヶ月くらいかかった（1人月ではない）。
今見たら最初のコミットが5/6だったのでちょうど1ヶ月だった。
仕事終わりや土日にちまちま作ったので、5〜6人日くらい？
技術選定のポイント
フロントエンド
プロジェクトの構成になるべく寄せて、Nextを使わずReactだけで。
TSは使用。
グラフはApex Chartsを使用。
意外にハマったところは数値の入力。
単純に-100から100が入力できればいいのに、それ以外の数値や文字列を除外しようとすると案外面倒なことを知った。
HTMLの仕様。
あまり時間かけたくないので諦めてReactWidgetsに頼った。
それでもまだちょっと挙動が微妙なので要改善。
バックエンド
サーバレスかつ無料で行きたかったけどFunctionが使いたかったのでSupabaseを選択。
ストアドファンクションが使えて、データの出し入れ程度のfunctionなら十分使える。
ただしSQL苦手なので簡単なfunctionで結構苦戦した。
PstgreSQLのストアドファンクションに関する情報、意外と少ない。
ストアドファンクションさえ書ければ、フロントから呼び出すのは超簡単。
現時点で使用しているのは1テーブルのみ。
当初からスモールなアプリを計画していたので、正規化もせずJSONのまま突っ込んだりしている。
ただ、実際に使ってもらったりする中で、機能追加の要望等もあるので、拡張を検討中。
インフラ
ホスティングにFirebaseを選んだのは単純に .web.app ドメインが使いたかったから。
初めに project-id.firebaseapp.com というドメインが割り当てられて、あとから ligraph.web.app を作成したら、表示されるまで1週間くらいかかって不安になった。
単にDNSの問題だと思うけど、https://www.whatsmydns.net/ 等で調べても正しいIPが出てくるし、表示されない理由がわからなくて困った。
あとはFirebaseHostingの仕様上、同じアプリがいくつものドメインに乗っかってしまっているので、リダイレクト設定しないとなぁと思っているけどまだできていない。
Auth
現時点ではアプリにアカウントは設けていない。
自分で作った人生グラフは編集用パスワードを使って編集するという仕様。
今後どこかのタイミングでログイン機能は必要になってきそう。
今後の展望
妻がこのアプリを使ったイベントを企画してくれたりしたこともあり、ユーザーが増えつつある。
生の声が直で聞けるので、その声を開発に反映していきたい。
印象的には好評。
「使い方がわかりやすい」「簡単」という声が多い。
UIにはこだわりがあるので嬉しい。
現時点で出ている要望は、
- グラフを複数軸にしたい（仕事とプライベートなど）
- 未来のグラフを作りたい
- 今作ったグラフを保存しておいて、あとから作るグラフと比較する機能が欲しい
- UIの改善
など。
収益化
せっかくアプリを作ったのだから収益化したい。
広告？売却？
色々やり方はあるだろうけど、まだ個人開発アプリの収益化経験はないので少しずつ開発を進める中で探っていきたい。
ひとつ面白いアイデアを頂いたのが、このアプリを使った研修で儲けるというもの。
人生グラフはすでに企業の研修や就活生の振り返りなど様々なシーンで活用されているので、そういうところにアプリを持っていって、研修で稼いではという話。
自分は引きこもり開発者なのでそういうのは得意ではないが、やり方としては面白そうだと思った。
まとめ
Vue大好きマンだけど、Reactも楽しかった。
多くのPJで使われているだけあって導入が簡単だし、学習コストもそれほど高くないのかなと感じた。
わからないところは vue computed react とかでよくググった。
今はコンポーネントの肥大化やパフォーマンス（メモ化など）、グローバルな状態管理に悩んでいるところ。
アプリを成長させる中でパフォーマンスを意識したリファクタとかもやっていきたい。
あと、関係ないけどsolidjsが気になっている。
終わり。