【2025年版】Jetpack Composeで超簡単！テキスト変更アプリ - AI副業の歩き方〜おやじと学ぶ最初の一歩〜

こんにちは。AI副業チャレンジ中の中年オヤジです。

前回は、Narwhal（Android Studio 2025.1.2.12）でJetpack Composeを使い、
「Hello World」アプリを作りました。

今回はもう一歩進めて、ボタンを押すとテキストが変わるアプリを作ります。
これで「動きのあるUI」を体験できますよ。

1. 新しいプロジェクトを作る

前回の続きでもOKですが、今回は改めて新規プロジェクトを作ります。

Android Studioを起動
「New Project」 → 「Empty Activity (Compose)」 を選択
プロジェクト名：ChangeTextApp
Language：Kotlin
Minimum SDK：API 21

Finishをクリックして、プロジェクトを作成します。

2. ComposeでUIを定義する

NarwhalではXMLは不要。
すべてComposeでUIを記述します。

MainActivity.kt を開いて、次のコードを書きます。

✅ MainActivity.kt（完成版）

package com.example.changetextapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ChangeTextApp()
        }
    }
}

@Composable
fun ChangeTextApp() {
    // 状態を保持するための変数
    var text by remember { mutableStateOf("Hello World") }

    // UIレイアウト
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = text, style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(24.dp))
        Button(onClick = { text = "テキストが変わった！" }) {
            Text("Change Text")
        }
    }
}

ポイント解説

var text by remember { mutableStateOf("Hello World") }
→ UIの状態（文字列）を保持するためのComposeの仕組み
Button(onClick = { text = "テキストが変わった！" })
→ クリック時にテキストを変更
Column と Spacer でレイアウト調整

Narwhal + Composeなら、この数行で動的なUIが作れます。

3. エミュレーターで実行

右上の Run ▶ をクリックして実行します。
画面中央に「Hello World」、下に「Change Text」ボタンが表示されます。
ボタンを押すと…

「テキストが変わった！」に更新！

4. Gemini AIでさらに時短！

Narwhalでは Geminiエージェントモード が使えます。
「ボタンを追加して、押すと文字色を変えて」なんて自然言語で指示すれば、AIがコードを提案してくれます。
人力＋AIのハイブリッド開発で、作業効率が一気に上がります。

ここまでのポイントまとめ

ComposeでUIと状態管理をシンプルに記述
mutableStateOf + rememberで状態を管理
AI支援を使うとUI改修が爆速になる

次回予告

次回は、
「簡単な計算アプリ」 に進みます。
ユーザーが数字を入力して「足し算」できるようにします！

ここまでの感想

「たった数行のコードで、アプリに動きをつけられる！」
正直、これだけでもかなり楽しいです。

小説「AIとおやじ」

佐藤との会話

翌週、昼休みに佐藤がふと話しかけてきた。

「田中さんって、ブログとかやってます？」「なんか、文章うまそうだなって思って」

田中は、一瞬迷ったあと、静かに答えた。

「…実は、やってるよ。趣味でね」「AIと一緒に、イラストとかも描いてる」

佐藤は目を輝かせた。

「え、マジっすか！見てみたいです！」「僕も最近、AIで音楽作ってて。趣味ですけど」

田中は、驚きと嬉しさが入り混じった気持ちで笑った。

「こんなふうに話せる日が来るとはな…」