はじめてのモバイルアプリを作り始めて

人生で一回は自分のプロダクトを作ってリリースしてみたい！ということで、React Native（Expo） を触ってみています。

モバイル周り以外も色々触ってみたので、その内容をざっくりメモしてみます。

初めて触りました。

元々 Swift で軽くアプリを作ってみたことはあったのですが、もう3年くらい前のことでほぼ覚えていなかった（Swift UI がリリースされた初期だったので、その辺の学習し直しも必要）ので、普段の Web とそんなに変わらない React Native で実装に挑んでみています。

今は iOS のリリースのみを視野に入れていたり、WebViewなどデバッグが大変そうな部分をあまり触っていないこともあり、大きくつまづくことなく進められています。

普段 tailwind css を利用していることもあり、バリアントに基づいたコンポーネント設計がしたいなと思い、その辺の util を実装したりしてました。

実機デバッグしようと、Expo Go 経由でインストールしてみたのですが、この辺の証明書まわりが大変でした。Apple の証明書まわりの仕様をざっくり読み込んで、p12ファイルなどを作成しました。

この辺は自分の整理のためにも、今後記事に残していこうと思います。

Hono は最近よく使っていますが、モバイルのAPIとして今回の利用しています。

Hono RPC を利用して型を共有できるので、モバイルからAPIを叩くときも型安全にできていい感じです。Wrangler のおかげでデプロイや D1 などのリソースへのバインディングも簡単にできて本当に助かっています。

D1 は使ってみると制約が厳しく、

など、今後乗り換え必須な感じはしています。ですが、費用面でも無料枠があるDBで、割とポンポン建てられるので、使う範囲が狭い & そんなに複雑じゃない個人開発をする時には助かっています。

一部のAPIで、Nodejs の API を利用する必要があり、Worker 上では対応できないため CloudRun にデプロイしています。

今回はモノレポで各サービスを繋いでいるのですが、Docker Image のサイズが 1GB 近くになってしまったので、どうしようか色々調べてました。

というのも、先ほど言及した Hono RPC で型を共有しており、この型をビルドするには API 全部をビルド対象として含める必要があるため、必要なのは型だけなのに、APIの実態として必要なモジュールは全てインストールする必要がありました。

マルチステージビルドでビルドした型だけ node_modules 配下に配置、その後再ビルドみたいなことができるのかも？と思いましたが、うまくいかず一旦保留。

叩いているエンドポイントが少ないこともあり、一旦はビルドした型を手動でプロジェクト内に配置しています。

OpenAPI に乗り換えたり、はたまた Dockerfile をいい感じに描き直すか改善が必要です。

あとは CloudRun にカスタムドメインを当てようと思ったのですが、レイテンシが少し気になるような指摘（少し前なので今は改善しているのかも）があったので、その辺も考慮が必要そうです。

今はモバイルなので、Cookie のポリシーまわり（WebView は別ですが）をがっつり考えなくてもいいのですが、Web 版をリリースする際は Cross-Origin 周りで認証用のトークンがうまく送れないことが懸念されます。

その場合は、Cloudflare Worker 等でプロキシすることで Cookie のトークンを Authorization に付与するような実装をしようかなと考えています。

プッシュ通知周りの実装や、ビルドしたアプリの配布元を変えてみたり 、色々やってみたいことがあるので、今後も細々と実装していきます。