Geminiで四則演算アプリを簡単作成！【Narwhal × Jetpack Compose】 - AI副業の歩き方〜おやじと学ぶ最初の一歩〜

こんにちは、AI副業チャレンジ中の中年オヤジです。
今回は、Android Studio Narwhalに搭載されたGeminiエージェントモードを使って、四則演算アプリを作ってみました。

以前はChatGPTを使ってコードを書いていましたが、Narwhalに組み込まれたGeminiを使えば、エディタ内で直接プロンプトを入力してコードを生成できます。しかも、ビルドエラーなしで一発成功でした！

今回は、その手順とGeminiが作ったコード、そして実際の動作を紹介します。

Geminiの使い方

まず、Android Studio Narwhalを起動し、エディタ右側にある「Gemini」パネルをクリックします。

次に、プロンプト欄に以下を入力しました。

「Jetpack Composeで四則演算ができるアプリを作って」

数秒後、Geminiがコードを提案！そのまま「Insert」ボタンを押すと、MainActivity.ktにコードが自動挿入されます。

Geminiが生成したコード（完成版）

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.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

@Composable
fun SimpleArithmeticApp() {
    var number1 by remember { mutableStateOf("") }
    var number2 by remember { mutableStateOf("") }
    var result by remember { mutableStateOf<String?>(null) }
    var selectedOperation by remember { mutableStateOf<String?>(null) }

    val operations = listOf("+", "-", "*", "/")

    fun calculate() {
        val num1 = number1.toDoubleOrNull()
        val num2 = number2.toDoubleOrNull()

        if (num1 == null || num2 == null) {
            result = "無効な入力です"
            return
        }

        result = when (selectedOperation) {
            "+" -> (num1 + num2).toString()
            "-" -> (num1 - num2).toString()
            "*" -> (num1 * num2).toString()
            "/" -> if (num2 != 0.0) (num1 / num2).toString() else "0で割ることはできません"
            else -> "演算を選択してください"
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("簡単な四則演算アプリ", fontSize = 24.sp, modifier = Modifier.padding(bottom = 24.dp))

        OutlinedTextField(
            value = number1,
            onValueChange = { number1 = it },
            label = { Text("数値1") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true,
            modifier = Modifier.fillMaxWidth()
        )

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

        OutlinedTextField(
            value = number2,
            onValueChange = { number2 = it },
            label = { Text("数値2") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true,
            modifier = Modifier.fillMaxWidth()
        )

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

        Text("演算を選択してください:", modifier = Modifier.align(Alignment.Start))
        Row(
            modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            operations.forEach { operation ->
                Button(
                    onClick = { selectedOperation = operation },
                    colors = ButtonDefaults.buttonColors(
                        containerColor = if (selectedOperation == operation) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant
                    )
                ) {
                    Text(operation, fontSize = 20.sp)
                }
            }
        }

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

        Button(
            onClick = { calculate() },
            enabled = selectedOperation != null && number1.isNotEmpty() && number2.isNotEmpty(),
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("計算する", fontSize = 18.sp)
        }

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

        result?.let {
            Text(
                text = "結果: $it",
                fontSize = 20.sp,
                modifier = Modifier.padding(top = 16.dp)
            )
        }
    }
}

コードのポイント解説

Geminiが生成したコードの中で、特に注目したいのは以下の部分です。

✅ 状態管理（rememberとmutableStateOf）

remember と mutableStateOf を使って、UIの状態を保持。
number1, number2 が入力欄、result が計算結果、selectedOperation が選択された演算子。

✅ 演算ボタンの実装

operations リストで + - * / を管理。
クリックした演算子を selectedOperation に設定。

✅ 計算ロジック

fun calculate() {
    val num1 = number1.toDoubleOrNull()
    val num2 = number2.toDoubleOrNull()

    if (num1 == null || num2 == null) {
        result = "無効な入力です"
        return
    }

    result = when (selectedOperation) {
        "+" -> (num1 + num2).toString()
        "-" -> (num1 - num2).toString()
        "*" -> (num1 * num2).toString()
        "/" -> if (num2 != 0.0) (num1 / num2).toString() else "0で割ることはできません"
        else -> "演算を選択してください"
    }
}