RetrofitとComposeでのAPI連携（データの取得と表示）【Jetpack Compose入門⑫】

API連携の概要
1. Retrofitとは？
2. Jetpack Composeとの連携
Retrofitのセットアップ
ViewModelでのデータ管理
1. ViewModelの作成
Jetpack Composeでのデータ表示
1. ViewModelの取得
2. 個別のアイテム表示
RetrofitとComposeを組み合わせるメリット
まとめ

API連携の概要

Retrofitとは？

Retrofitは、AndroidアプリでHTTP通信を簡単に行うためのライブラリです。APIからデータを取得し、アプリに反映する際に広く利用されます。シンプルな記述で、非同期処理やJSONのパースを簡単に扱えるのが特徴です。

Jetpack Composeとの連携

Jetpack Composeは、Androidの最新UIフレームワークであり、従来のXMLレイアウトを使用せずに直感的なUI設計が可能です。Retrofitと組み合わせることで、取得したデータをComposeのComposable関数内で簡単に表示できます。

本記事では、Retrofitを使ったAPI通信の基本と、Jetpack Composeでデータを表示する方法を解説します。

Retrofitのセットアップ

依存関係の追加

Retrofitを使用するには、build.gradle（Module: app）に以下の依存関係を追加します。

dependencies {
    implementation "com.squareup.retrofit2:retrofit:2.9.0"
    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.5.1"
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
    implementation "androidx.compose.runtime:runtime-livedata:1.3.0"
}

APIインターフェースの作成

APIリクエストを行うために、Retrofitのインターフェースを定義します。

import retrofit2.http.GET

interface ApiService {
    @GET("posts")
    suspend fun getPosts(): List<Post>
}

データモデルの定義

APIのレスポンスを受け取るためのデータクラスを作成します。

data class Post(
    val id: Int,
    val title: String,
    val body: String
)

Retrofitインスタンスの作成

Retrofitのインスタンスを作成し、APIの実装を提供します。

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object RetrofitInstance {
    private const val BASE_URL = "https://jsonplaceholder.typicode.com/"
    
    val api: ApiService by lazy {
        Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(ApiService::class.java)
    }
}

ViewModelでのデータ管理

ViewModelの作成

ViewModelを使用して、非同期でAPIデータを取得し、UIと連携します。

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.launch
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData

class PostViewModel : ViewModel() {
    private val _posts = MutableLiveData<List<Post>>()
    val posts: LiveData<List<Post>> = _posts

    init {
        fetchPosts()
    }

    private fun fetchPosts() {
        viewModelScope.launch {
            try {
                _posts.value = RetrofitInstance.api.getPosts()
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

Jetpack Composeでのデータ表示

ViewModelの取得

ComposeでViewModelを取得し、データを表示する準備を行います。

@Composable
fun PostScreen(viewModel: PostViewModel = viewModel()) {
    val posts by viewModel.posts.observeAsState(emptyList())
    
    LazyColumn {
        items(posts) { post ->
            PostItem(post)
        }
    }
}

個別のアイテム表示

各投稿のデータを表示するコンポーネントを作成します。

@Composable
fun PostItem(post: Post) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        elevation = 4.dp
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = post.title, fontSize = 20.sp, fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = post.body, fontSize = 16.sp)
        }
    }
}