【2025年版】Jetpack Composeで超簡単！テキスト変更アプリ

AIツール活用 androidアプリ製作 副業チャレンジ記録 小説製作

こんにちは。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で音楽作ってて。趣味ですけど」

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

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