第2回：Claude Codeで初めてのAndroidアプリを作る（ハンズオン）

社員ブログ

※Claude Codeを使用して記事を作成しています。

はじめに

前回はClaude CodeのインストールとAndroid Studioとの連携方法を解説しました。
今回はいよいよ実践編！Claude Codeと会話しながら、「シンプルなカウンターアプリ」 を一緒に作っていきます。

「コードが書けなくても大丈夫？」という不安は一切不要です。
Claude Codeへの指示の出し方さえ覚えれば、初心者でも動くアプリが完成します。

今回作るアプリ

機能内容
➕ カウントアップボタンを押すと数字が1増える
➖ カウントダウンボタンを押すと数字が1減る
🔄 リセットカウントを0に戻す

シンプルですが、Androidアプリの基本的な仕組み（画面の見た目・ボタンの動作） がすべて詰まっています。
プログラミングの知識がなくても、Claude Codeに「こんなアプリを作りたい」と伝えるだけで完成します。

事前準備

  • Android Studio がインストール済みであること
  • Claude Code がインストール・セットアップ済みであること
  • （参照）第1回の記事でセットアップを完了させておいてください

Step 1：プロジェクトを作成する

1-1. Android Studioで新規プロジェクトを作成

Android Studioを起動し、新しいプロジェクトを作成します。

  1. 「New Project」 をクリック
  2. テンプレートは 「Empty Activity」 を選択
  3. プロジェクトの設定を入力する
項目入力値
NameMyCounterApp
Package namecom.example.mycounterapp
Save location任意のフォルダ
LanguageKotlin
Minimum SDKAPI 24 (Android 7.0)
  1. 「Finish」 をクリックしてプロジェクトを作成

💡 ポイント

各項目は上の表の通りに入力すればOKです。
意味がわからなくても、そのままコピーして入力するだけで問題ありません。

Step 2：Claude Codeをプロジェクトに接続する

プロジェクトが作成できたら、Android Studioの下部にある 「Terminal」タブ をクリックしてターミナルを開き、Claude Codeを起動します。

💡 ターミナルとは？

文字を入力してパソコンに命令を出す画面のことです。黒い画面が出てきても焦らず、以下のコマンドをそのまま入力してください。

# プロジェクトフォルダに移動
cd ~/AndroidStudioProjects/MyCounterApp

# Claude Codeを起動
claude

起動すると、Claude Codeのチャット画面が表示されます。
認証が必要な場合は、#1の記事を参考に認証してください。

ここからは 日本語でClaude Codeに話しかけるだけ でアプリを作れます。

Step 3：Claude Codeに画面を作ってもらう

3-1. まず全体像を伝える

Claude Codeへの最初のメッセージで、何を作りたいかを自分の言葉で伝える だけでOKです。
プログラミングの専門用語は一切不要です。

✍️ Claude Codeへの指示（プロンプト）例：

カウンターアプリを作りたいです。

画面の真ん中に大きな数字を表示して、
「+1」というボタンを押すと数字が1増えて、
「-1」というボタンを押すと数字が1減るようにしてください。
「リセット」ボタンも付けて、押したら数字が0に戻るようにしてください。
数字はマイナスにはならないようにしてください。

Androidアプリ開発は初めてなので、わかりやすく実装してください。

💡 指示のコツ

スマホのアプリを説明するときのように、「〇〇を押したら〜になる」 という形で伝えるのがポイントです。
専門用語を知らなくても、「こんな見た目にしたい」「こう動かしたい」を素直に書けばClaude Codeが理解してくれます。

3-2. Claude Codeが自動でコードを書いてくれる

指示を送ると、Claude Codeが自動的にアプリのコード（プログラム）を書いて、ファイルを更新してくれます。

どんなコードが書かれるの？

気になる方のために一例を載せますが、内容を理解する必要はありません。
Claude Codeが全部やってくれるので、眺めるだけでOKです。

（参考）Claude Codeが生成するコードのイメージ

package com.example.mycounterapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.mycounterapp.ui.theme.MyCounterAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyCounterAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CounterScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun CounterScreen(modifier: Modifier = Modifier) {
    // カウンターの値を保持する変数
    // remember を使うことで、画面が再描画されても値が保持される
    var count by remember { mutableIntStateOf(0) }

    // 画面全体を縦方向に並べる
    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally, // 横方向は中央
        verticalArrangement = Arrangement.Center            // 縦方向も中央
    ) {
        // カウンターの数字を大きく表示する
        Text(
            text = count.toString(),
            fontSize = 120.sp,
            color = MaterialTheme.colorScheme.primary
        )

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

        // +1 と -1 ボタンを横に並べる
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            // -1 ボタン（カウントが0のときは押せないようにする）
            Button(
                onClick = {
                    if (count > 0) {
                        count -= 1
                    }
                },
                enabled = count > 0, // 0のときはボタンをグレーアウト
                modifier = Modifier.width(100.dp).height(56.dp)
            ) {
                Text(text = "-1", fontSize = 20.sp)
            }

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

            // +1 ボタン
            Button(
                onClick = { count += 1 },
                modifier = Modifier.width(100.dp).height(56.dp)
            ) {
                Text(text = "+1", fontSize = 20.sp)
            }
        }

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

        // リセットボタン（カウントが0のときは押せないようにする）
        Button(
            onClick = { count = 0 },
            enabled = count > 0, // 0のときはボタンをグレーアウト
            colors = ButtonDefaults.buttonColors(
                containerColor = MaterialTheme.colorScheme.error // 赤系の色で目立たせる
            ),
            modifier = Modifier.width(224.dp).height(56.dp)
        ) {
            Text(text = "リセット", fontSize = 20.sp)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CounterScreenPreview() {
    MyCounterAppTheme {
        CounterScreen()
    }
}

Claude Codeはターミナル上で「このファイルをこう変更します」と表示しながら、自動でコードを書いてくれます。
難しそうに見えますが、読む必要はありません。次のステップで実際に動かして確認しましょう。

Step 4：アプリを実行して確認する

4-1. エミュレーターまたは実機で実行

Android Studioに戻り、画面上部の ▶（Runボタン） をクリックしてアプリを起動します。

エミュレーターが起動し、カウンターアプリが表示されれば成功です🎉

4-2. 動作確認チェックリスト

  • [ ] 画面中央に「0」が表示されている
  • [ ] 「+1」を押すと数字が増える
  • [ ] 「-1」を押すと数字が減る
  • [ ] カウントが「0」のとき「-1」ボタンがグレーアウトして押せない
  • [ ] 「リセット」を押すと「0」に戻る

Step 5：Claude Codeで機能を追加してみよう

動くアプリができたら、Claude Codeに追加の指示を出してカスタマイズしてみましょう。
専門知識は不要です。
「こうしたい」をそのまま伝えればOKです。

例①：見た目を変える

数字が10以上になったら、数字の色を赤にしてください。

例②：機能を追加する

カウントの上限を決められるようにしたいです。
最初は100が上限で、画面上で自分で数字を入力して変えられるようにしてください。

例③：デザインを整える

アプリ全体の色を青っぽいデザインにしてください。
数字の部分をカードみたいな四角い枠で囲みたいです。

このように、思ったことをそのまま日本語で書くだけ で、Claude Codeが修正してくれます。
一度で完璧でなくても「もう少し大きく」「色が気に入らないので変えて」と追加で伝えればOKです。

よくあるエラーと対処法

Claude Codeとのやり取りで詰まったときは、エラーメッセージ（赤い文字で表示される英語のエラー）をそのままClaude Codeに貼り付けてみましょう。
英語でも問題ありません。

✍️ エラー時のプロンプト例：

エラーが出てアプリが動きません。
どうすればいいか教えてください。

↓エラーの内容↓
[赤い文字のエラーメッセージをここにコピー&ペースト]

💡 ポイント

エラーメッセージは英語でも、そのままコピーして貼り付けるだけでOKです。
Claude Codeが原因を日本語で説明して、自動で直してくれます。

まとめ

今回のハンズオンで学んだことを振り返りましょう。

学んだことポイント
プロジェクト作成Android Studioで表の通りに設定するだけ
Claude Codeへの指示専門用語不要。「〇〇を押したら〜」を日本語で伝えるだけ
カスタマイズ方法動くものを作ってから、追加で「こうしたい」と伝えて改善する
エラーが出たときエラー文をそのままコピーして貼り付けるだけで解決できる

Claude Codeの最大の強みは「プログラミングの知識がなくても動くアプリを作れること」 です。
完璧な指示でなくても、会話しながら少しずつ改善できるので、初めてでも諦めずに開発を進められます。

タイトルとURLをコピーしました