Claude CodeでiOS・Android・Rails APIのinfinite scrollを一気に実装した話
Photo by William Hook on Unsplash
はじめに
NativeAppTemplate は、RailsバックエンドとネイティブiOS（Swift/SwiftUI）・Android（Kotlin/Jetpack Compose）アプリをセットで提供するボイラープレートです。
今回、フリー版にinfinite scrollを追加しました。Rails API・iOS・Androidの3つを同時に実装する必要があったのですが、Claude Codeを使ったらスムーズに進んだので、その流れを紹介します。
実装の全体像
対象はItem Tags（商品タグ）の一覧画面。もともとページネーションなしで全件取得していたものを、infinite scroll対応に変更しました。
変更が必要だったのは3箇所です：
- Rails API：Pagy gemでpaginationエンドポイントを追加
- iOS (Swift/SwiftUI)：scroll-to-bottomで次ページを自動ロード
- Android (Kotlin/Jetpack Compose)：LazyColumnでinfinite scroll実装
工夫したポイント：後方互換性
iOSとAndroidのクライアントは既存のAPIを使っています。いきなりAPIの仕様を変えると既存クライアントが壊れるので、段階的に移行できるよう設計しました。
limit: params[:page].present? ? Pagy::DEFAULT[:limit] : 1000page パラメータがない場合は最大1000件を返すことで、既存クライアントはそのまま動き続けます。クライアントの更新が完了したら、このフォールバックを削除する予定です。
Claude Codeの使い方
事前にmarkdownで仕様書を書き、Claude Codeに渡しました。
# Pagination for ItemTags Index API
- Rails API: Pagy gemでページネーション追加
- iOS: PaginationMeta struct, ItemTagListViewModelにloadMore()追加
- Android: LazyColumnでinfinite scroll実装
...
# Pagination for ItemTags Index API
- Rails API: Pagy gemでページネーション追加
- iOS: PaginationMeta struct, ItemTagListViewModelにloadMore()追加
- Android: LazyColumnでinfinite scroll実装
...
仕様書があると、Claude Codeが迷わず実装を進めてくれます。3プラットフォーム分のファイル変更（コントローラー、シリアライザー、ViewModel、View…）を一気に対応してくれたのは素直に助かりました。
おわりに
NativeAppTemplateは「RailsエンジニアがネイティブiOS・Androidアプリを最速で作れる」をコンセプトにしたボイラープレートです。今回のinfinite scrollのような実装パターンも含め、実際のプロダクトで使えるコードをそのまま提供しています。
フリー版はGitHubで公開中です：
- 🍎 iOS: https://github.com/nativeapptemplate/NativeAppTemplate-Free-iOS/pull/36
- 🤖 Android: https://github.com/nativeapptemplate/NativeAppTemplate-Free-Android/pull/24
有料版はこちら👉 https://nativeapptemplate.com
