概要
https://vercel.com/blog/how-we-built-the-v0-ios-app
詳細内容
## Vercelがv0 iOSアプリをどのように構築したか
https://vercel.com/blog/how-we-built-the-v0-ios-app
**Original Title**: How we built the v0 iOS app
Vercelが、初のモバイルアプリv0 iOSをReact NativeとExpoで開発するにあたり、ネイティブアプリ同等の体験を実現するために直面した技術的課題と、それらを解決した具体的な実装アプローチを詳細に解説している。
**Content Type**: ⚙️ Tools
**Language**: en
**Scores**: Signal:5/5 | Depth:5/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 94/100 | **Annex Potential**: 90/100 | **Overall**: 92/100
**Topics**: [[React Native開発, モバイルAIチャットUI/UX, ネイティブパッチ, クロスプラットフォーム開発, パフォーマンス最適化]]
Vercelは、初のモバイルアプリであるv0 iOSをApple Design Awardレベルの品質を目指し、React NativeとExpoで構築した経緯を詳細に公開しました。同社はウェブに注力してきたため、ネイティブアプリ開発は新たな挑戦であり、最終的にReact NativeとExpoを採用した理由が、アプリの「ネイティブ感」に関する開発者からの問い合わせの多さにありました。
記事では、特にAIチャットの中核体験を実現するための技術的な課題と解決策に焦点を当てています。新着メッセージのスムーズなアニメーション、キーボード操作への自然な対応、コンテンツの上に浮かぶリキッドグラスコンポーザー、画像ペースト機能などが主要な要件でした。これらを実現するため、彼らは`LegendList`、`React Native Reanimated`、`React Native Keyboard Controller`といったオープンソースライブラリと独自のコンポーザブルなフックを組み合わせたアーキテクチャを構築しました。
具体的な実装として、新規チャットではメッセージのフェードイン/スライドアップ、アシスタントメッセージの段階的なフェードイン処理を詳述。既存チャットでのスクロールをトップに維持するための「ブランクサイズ」問題は、`ScrollView`のネイティブプロパティである`contentInset`を活用することで、パフォーマンスを損なわずに解決しました。また、iOSのアップデートごとに挙動が変化するキーボードの挙動には、`react-native-keyboard-controller`を基盤としつつ、約1000行にも及ぶカスタムフック`useKeyboardAwareMessageList`を開発して対応しました。これには、キーボードの開閉に応じたブランクサイズの調整、インタラクティブな解除、バックグラウンドからの復帰時のイベント重複排除など、多岐にわたる複雑なロジックが含まれます。
さらに、`TextInput`のネイティブ感を出すために`RCTUITextView`にパッチを適用し、スクロールインジケーターの無効化やインタラクティブなキーボード解除を可能にしました。ストリーミングコンテンツのスムーズなアニメーションには、カスタムの「プール」システムを導入し、一度にアニメーションする要素数を制限しています。ウェブとネイティブ間でのコード共有は、タイプやヘルパー関数にとどめ、ビジネスロジックは型安全なバックエンドAPIに移行することで、モバイルアプリをAPIの薄いラッパーとして機能させています。`Zod`によるランタイム型安全性と`OpenAPI`生成を利用し、`Hey API`と`Tanstack Query`でモバイルクライアントを構築しました。
Vercelは、これらの経験を通じてReact Nativeが高度なネイティブ体験を実現できると確信しており、その知見をオープンソース化する計画であると述べています。これは、React Nativeの可能性を広げ、複雑なモバイルAI UI開発における具体的な解決策を求めるウェブアプリケーションエンジニアにとって、実践的かつ深い洞察を提供するものです。