詳細を読む
Vercelが初のモバイルアプリ「v0 for iOS」をリリースしました。React NativeとExpoを駆使し、Apple純正アプリに匹敵するネイティブ品質を実現しています。本記事では、AIチャット特有の複雑なUI課題をどう解決し、Web主体の企業が高品質なモバイルアプリを構築したのか、その技術的裏側を解説します。
開発の目標は、Apple Design Awardに値する最高品質のアプリ構築でした。Web技術に精通した同社は、数週間の実験を経てReact NativeとExpoを選定。Appleの標準アプリのような自然な操作感を目指し、iMessageなどを参考にしながら、細部に至るまでネイティブらしい挙動を追求しました。
チャット体験の核となるのは、メッセージ表示の滑らかさです。React Native Reanimatedを駆使し、送信時のフェードインやAI回答のストリーミング表示を実装。動的に高さが変わるメッセージ要素に対しても、計算されたアニメーションを適用することで、心地よい対話フローを作り上げました。
モバイルチャット開発で最も困難なのがキーボード制御です。iOSの更新による挙動変化に対応するため、独自のフックuseKeyboardAwareMessageListを開発しました。メッセージの高さやキーボードの位置関係を精密に計算し、コンテンツが隠れることなくスムーズにスクロールされる仕組みを構築しています。
Web版とのコード共有においては、UIや状態管理を分離し、型定義やヘルパー関数のみを共有する戦略を採りました。ZodとOpenAPIを活用してバックエンドAPIの型安全性を確保し、モバイル側でクライアントコードを自動生成することで、開発効率と堅牢性を両立させています。
開発過程で直面したReact NativeやiOSのバグに対しては、単にパッチを当てるだけでなく、本家リポジトリへの修正提供も行いました。CallstackやMetaのエンジニアと連携し、エコシステム全体の改善に貢献する姿勢は、技術リーダーとして参考になるアプローチです。