Narwhal × ChatGPTで足し算アプリを作ろうとしたら…まさかの結末【Geminiとの比較も】

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

前回は、ボタンを押すとテキストが変わるアプリをComposeで作りました。
今回はさらに一歩進んで、簡単な計算アプリ（足し算）を作る予定でした。

「Narwhal × Jetpack Compose」で、数字を入力して足し算して結果を表示するアプリです。
ChatGPTにお願いして、次のコードを作ってもらいました。

1. ChatGPTが作ったコード（失敗バージョン）

以下のコードをMainActivity.ktに貼り付ければOK…のはずでした。

package com.example.simplecalculatorapp

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.text.input.KeyboardType
import androidx.compose.ui.unit.dp

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

@Composable
fun SimpleCalculatorApp() {
    var number1 by remember { mutableStateOf("") }
    var number2 by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("簡単な足し算アプリ", style = MaterialTheme.typography.headlineMedium)

        Spacer(modifier = Modifier.height(24.dp))

        OutlinedTextField(
            value = number1,
            onValueChange = { number1 = it },
            label = { Text("1つ目の数字") },
            keyboardOptions = androidx.compose.ui.text.input.KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = number2,
            onValueChange = { number2 = it },
            label = { Text("2つ目の数字") },
            keyboardOptions = androidx.compose.ui.text.input.KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(24.dp))

        Button(onClick = {
            val num1 = number1.toDoubleOrNull() ?: 0.0
            val num2 = number2.toDoubleOrNull() ?: 0.0
            result = (num1 + num2).toString()
        }) {
            Text("足し算する")
        }

        Spacer(modifier = Modifier.height(24.dp))

        Text("結果: $result", style = MaterialTheme.typography.headlineSmall)
    }
}

結果は…まさかのエラーが！

ビルドエラーが発生してアプリが立ち上がらない
特に KeyboardOptions周りでエラーが出ました
正直、Kotlinのことを全く理解していないので、どこを直せばいいのか分からない

AIで思い通りにならないときは「プロンプトに問題がある」と言いますが、そもそもコードの意味が分からないので指摘できないという現実に直面しました。
ここは今後の課題ですね…。

2. Geminiを使ってみたら？

Android Studio Narwhalには、Gemini AIボタンがあるのをご存知ですか？
試しにそこに直接こうお願いしてみました。

「簡単な四則計算ができるアプリを作って」

すると、少しイメージとは違ったものの、ちゃんと計算できるアプリをGeminiが作ってくれました。
しかも、自動でエラーもなく動くコードを生成！
「これは便利かも」と実感しました。

ここで学んだこと

ChatGPTでコードを作るときは、正確なプロンプトが大事
でも、コードの意味が分からないと修正が難しい
NarwhalのGeminiなら、Android Studio内で完結できるので実装しやすい

3. まとめ

今回は、「Narwhal × ChatGPTで足し算アプリを作る」計画が失敗しました（笑）。
ただし、最終的にはGemini AIで動くアプリを作れたので、結果オーライです。

次回は、Geminiを使って四則演算アプリを強化していこうと思います。
（もしくは、ChatGPTとGeminiを比べる実験記事も面白そうですね。）

小説「AIとおやじ」

つながりが生まれる

その日から、田中と佐藤は昼休みに創作の話をするようになった。 AIの使い方、作品のテーマ、ブログの構成。年齢も立場も違うけれど、創ることへの情熱は同じだった。

田中は、少しずつ“自分の世界”を外に開いていった。ブログのプロフィールも更新した。「田中／40代／AIと創作を楽しむ会社員」

「隠すより、伝えた方がいい」「誰かとつながることで、もっと強くなれる」