モダンな個人Webアプリ制作を始めている
何を以てモダンかという議論は尽きないが、「私が考えるモダンな開発はこれだ！」という方針で個人制作している。今のありったけを注ぎ込む感じ。
私自身が株式投資に興味があり実際に投資している関係で、当初は企業のファンダメンタル分析を行う認証無しのWebアプリを作ろうとしていた。
が、作るからには自分が一番使いそうな、一番使いたくなるようなアプリにしたいなーと考え直したので、保有資産を楽に登録できてアセットアロケーションなどの状況把握を良い感じにできるアプリを作ろうと考えている。
この変遷の名残で fundamental-charts というリポジトリになっているが、そのうちAwAs (Awesome Assets) の仮名に変わると思う。
方針
Webアプリの個人制作なので以下の方針になっている
個人で作って楽な実装を心がける
ノンコンフィグ志向
「必要になってから考えれば良いのよ」という精神を忘れない
とはいえ大枠の責務などはある程度考慮しつつ作っていく
リポジトリはモノレポで管理
フロントエンドは Next.js (React) を使う
Svelte とか (フロントエンドというラベリングは不適切だが) Vite も興味ありありだけど、慣れているし資産も多い
CSSフレームワークを採用してCSSはできるだけ書かない
TailwindCSS を採用する
UIコンポーネントは React 依存のものではなく CSS 依存のものを使う
見た目の責務はできるだけCSS側に寄せたい
daisyuUI がぴったりで、これをゴリゴリ使いたいからこの思想になっている節はある
バックエンドは Nest.js を採用しているが引き続き検討を進める
業務で軽く使って思ったが、DI や Module の思想はできるだけ各コードを少なくしたい個人制作とは親和性が低そう
とはいえコードを自動生成するCLIやライブラリも多数揃えられているので、ここは慣れの問題な気もしている
その他の候補として、Firebase, Supabase, Next.js API などが挙げられる。Express を挙げていないのは、それなら Next.js API でいいんじゃな？という短絡的な思考から。
ベンダーロックインなサービスは、楽で良いけどできる限り安価に済ませたい今回の要件には不適合と判断。
コード管理できるかは割と重要で、その要件で Supabase は無しとした (一応テーブルマイグレーションがあるらしいが、SQL かそれに近い何かを書かされたので、Prisma のそれと比較して大変そうと考えた)
認証は自分で作らない
日本人向けのサービスであり、通知系もやりたかったのでLINEログインを実装したかった
この点で、ちょい工夫が必要な Firebase は無しとなった
小さい規模なら Auth0 が最強。大きくなったら価格面で不利になりそう
DBはRDBを採用
NoSQL も検討したが、株式の価格管理などでRDBは必須だよなーと考えていて、ビジネス寄りのデータと株式のデータを異なるDBで管理するのは時期尚早と判断
必要になってから考えれば良いのよ
レスポンシブデザイン & ダークテーマ
サイドバーとボトムナビゲーションはどちらも描画されており、CSSで表示を切り替えている形。できればDOMごと消したいなーと思っていたけど、Tailwind や daisyUI の公式もこの方式だったので一旦これで行っている
認証 Auth0
LINEログインが30分かからずに実装できた。間違いなく最強。
とはいえこのままだとフロントエンドでログインできたかどうかを判断できるだけので、バックエンドの認証・認可は今作っている。
ユーザーが持つ情報が軽いものだけなら、users テーブル的な情報は Auth0 に依存するのもありじゃないかなーと考えながら実装していた。
バックエンド
Nest.js で認証を準備中。それができたら Prisma でDBを用意する。
バックエンドの認証周りには Passport を使用している。基本はJWT認証なのでトークンの持ち方とかはよく検討する必要があるが、そこら辺を良い感じにしてくれるのが Auth0 なんですよ。
(アクセストークンは揮発 && 不可視 iframe で Auth0 から取得して、メモリに保存するとのこと。要検証)
まとめ
個人制作はとても楽しい。
やっていることは「便利なものを如何に組み合わせるか」という感じだが、少なくとも今の制作は技術志向というよりビジネス志向なのでこれで良い。
いずれ便利なものを作る側に回る日も来るかなー
この記事が気に入ったらサポートをしてみませんか？