Claude Media
Claude CodeでJetpack Compose開発を進める手順 — 環境構築から実装フローまで
Claude Codeチュートリアル

Claude CodeでJetpack Compose開発を進める手順 — 環境構築から実装フローまで

Jetpack ComposeのAndroidアプリをClaude Codeで開発する手順です。環境構築、CLAUDE.mdの書き方、JetBrainsプラグインとフックの使い方をまとめます。

読了目安 約11分

Jetpack ComposeはUIをコードで宣言する仕組み

Jetpack Composeは、AndroidアプリのUIをKotlinの関数で宣言的に組み立てるツールキットです。画面の見た目と状態を@Composable関数として書き、状態が変わるとComposeが再描画すべき範囲を判断します。XMLレイアウトを差分更新する従来のView方式とは、UIを表現する単位そのものが違います。

Claude CodeはこのCompose特有の仕組みを内蔵しているわけではありません。ファイルの読み書きとコマンド実行を担う汎用のコーディングエージェントで、Kotlinのコードも他言語と同じ経路で編集します。公式ドキュメントは状態管理・ライフサイクル・Modifier・副作用・パフォーマンスをFoundationセクションに、レイアウトやMaterial Design 3への対応をDesignセクションにまとめています。Claude Codeにとって重要なのはこの構造で、どのファイルがどの層に属するかをCLAUDE.mdで示しておくと、修正の的が外れにくくなります。

View方式のコードベースをComposeへ移行する作業も対象に含まれます。公式ドキュメントのAdopting Composeセクションには、View-based UIとの相互運用APIや移行戦略がまとまっており、既存アプリに部分的にComposeを組み込む場合はこちらが起点になります。

開発環境の作り方 — Android StudioとAndroid CLIの2つの入り口

Compose開発の入り口は2つあります。Android Studioを使うか、コマンドラインのAndroid CLIを使うかです。どちらもプロジェクトの作成自体はGoogle側のツールが担い、Claude Codeはその後のコード編集を引き受けます。

Android StudioはCompose向けの新規プロジェクトテンプレートと、UIやアニメーションをその場でプレビューできる編集機能を備えます。新規プロジェクトを作る際、言語の選択肢はKotlinのみです。Jetpack ComposeはKotlinで書かれたクラスでしか動かないため、この制約は変わりません。最小APIレベルは21以上を選びます。

Android Studioを開かず端末だけで完結させたい場合は、Android CLIで空のCompose対応プロジェクトを作れます。

android create empty-activity --name=MyApp

このコマンドで生成したプロジェクトに対して、Claude Code CLIをそのまま起動すれば編集を始められます。CI環境や共有マシンのようにIDEを開けない場所でComposeプロジェクトに触る運用は、Claude Code CodespacesでDevContainer開発を始める手順にある考え方がそのまま当てはまります。

CLAUDE.mdでComposeプロジェクトの前提を共有する

CLAUDE.mdは、コードから読み取れない前提をClaudeに渡すためのファイルです。毎回のセッション開始時に読み込まれ、/initを実行するとビルドシステムを検出した雛形が生成されます。Composeプロジェクトでは、ビルド・テストのコマンドに加えて、状態の持ち方の方針を書いておくと効きます。

# ビルドとテスト
- ビルドは `./gradlew build` で確認する
- 単体テストは `./gradlew testDebugUnitTest` で走らせる
 
# Compose規約
- 状態はComposable関数の外(呼び出し元かViewModel)に持たせる(state hoisting)
- 新規のComposable関数はstatelessを優先し、プレビュー用に@Previewを添える
- Material Design 2ではなくMaterial Design 3のコンポーネントを使う

CLAUDE.mdはあくまで会話の文脈として渡る指示で、強制設定ではありません。書いた規約を毎回必ず守らせたい場合は、後述するフックで機械的に確認する形に移します。

宣言型UIの実装フローをClaude Codeでどう回すか

基本のループは3段階です。Claudeが@Composable関数を編集し、./gradlew経由でビルドとテストを走らせ、結果を読んで直す。ここまではファイルの種類を問わず共通です。

Compose固有なのは、見た目の確認だけAndroid Studio側に残る点です。Composeプレビューはエディタ内蔵の機能で、Claude Code単体では画面のレンダリング結果を見られません。実機やエミュレータでの確認、またはスクリーンショットを撮って差分を指示する運用を挟む必要があります。テストの合否を軸にしてターンを閉じる進め方の細部は、Claude Codeでテスト駆動開発(TDD)を回す手順にまとめています。

複数のComposable関数を並行して直す場面では、サブエージェントで作業を分担すると本流の文脈が汚れません。画面ごとに担当を分けて実装させ、結果だけをメインセッションで受け取る形です。使い分けの具体パターンはClaude Codeのサブエージェント完全活用で扱っています。

gradlewコマンドは既定ではシステムを変更しうる操作として扱われ、実行のたびに承認を求められます。ビルドとテストを何十回も回す進め方では、/permissionsで許可リストに入れておくと、無人で回せる時間が伸びます。

Android StudioとClaude Codeを直結するJetBrainsプラグイン

Claude CodeはJetBrainsのプラグインを通じて主要IDEと連携でき、対応にはAndroid Studioも含まれています。IntelliJ IDEA・PyCharm・WebStorm・PhpStorm・GoLandと並ぶ対応IDEの一つです。

プラグインが提供する機能は4つあります。差分をIDEのビューアで確認できるdiff viewing、エディタで選択中のコードや開いているタブが自動で共有されるselection context。Cmd+Option+K(Mac)やAlt+Ctrl+K(Linux/Windows)でファイル参照を挿入できるショートカット、そしてIDEのインスペクション結果(lintやシンタックスエラー)をClaudeが読み取れるdiagnostic sharingもあります。

導入は2段階です。まずClaude Code CLI本体をインストールし、次にJetBrains Marketplaceから公式プラグインを追加してIDEを再起動します。Android Studioの統合ターミナルでclaudeを起動すれば、これらの機能はすべて有効になります。外部ターミナルから接続する場合は/ideコマンドを使います。

診断共有には注意点があります。Claude Codeは編集のたびに自動でIDEの診断結果を取りに行くわけではなく、getDiagnosticsツールの呼び出しが必要です。IDEが出しているCompose関連のlint警告を見てほしい場合は、確認を明示的に指示したほうが確実です。

プラグインの利用に追加の契約は不要です。Pro・Max・Team・EnterpriseいずれかのClaude有料サブスクリプションか、Claude Consoleアカウントがあれば動きます。

PostToolUseフックでフォーマッタやlintを自動化する

CLAUDE.mdの規約は会話の文脈にとどまり、毎回守られる保証はありません。ファイル編集のたびに必ず実行したい処理は、フックに移します。フックはClaude Codeのライフサイクル上の特定タイミングで動くシェルコマンドで、判断をモデルに委ねずに済みます。

Edit・Writeツールが走った直後に発火するPostToolUseを使うと、Kotlinファイルを保存するたびにフォーマッタやlintを走らせられます。

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "${CLAUDE_PROJECT_DIR}/.claude/hooks/kotlin-format.sh"
          }
        ]
      }
    ]
  }
}

kotlin-format.shの中身は、ktlintなど手元で使っているコマンドに置き換えます。設定は.claude/settings.jsonに書き、プロジェクトルートに置いたものはチーム全体に共有されます。

よくあるつまずき

CLAUDE.mdに規約を書いていないとView方式寄りのコードが出る

Composeの規約を明示しないまま「画面を実装して」とだけ頼むと、Claudeは既存コードのパターンをそのまま踏襲します。View方式のコードが多いリポジトリでは、命令的な更新処理が紛れ込むことがあります。state hoistingや@Previewの付け方をCLAUDE.mdに書いておくと、新規コードの傾向が揃います。

View方式との相互運用を無視して丸ごと書き換えてしまう

既存のView方式アプリに部分的にComposeを導入する場面で、「この画面をComposeにして」とだけ頼むと、周辺の呼び出し元まで巻き込んで書き換えてしまうことがあります。公式ドキュメントのAdopting Composeセクションが示す相互運用APIの範囲を守るなら、対象のファイルと変更してよい境界をプロンプトで先に区切っておきます。

gradlewの承認待ちで作業が止まる

ビルドとテストのたびに承認ダイアログが出ると、離席中の作業はそこで止まります。許可リストへの追加を後回しにしていると気づきにくいので、長いタスクを渡す前に/permissionsの設定を確認します。

診断共有が最新化されていない

JetBrainsプラグインの診断共有は、編集のたびに自動更新されるわけではありません。Composeコンパイラの警告を踏まえて直してほしいときは、「IDEの診断を確認してから直してください」のように明示的に頼みます。

Claude CodeでのCompose開発、向いている場面・向かない場面

用途おすすめ度理由
既存Composable関数の修正・リファクタリングおすすめ度◎理由型シグネチャと呼び出し元を読んで一貫した修正ができる
CLAUDE.mdの規約に沿った新規Composable関数の生成おすすめ度◎理由state hoistingなどの方針を渡しておけば踏襲しやすい
レイアウトの見た目を見ながらの微調整おすすめ度△理由プレビューはAndroid Studio側の機能で単体では見えない
Material Design 2から3への移行作業おすすめ度○理由対応表を作りながら機械的に進めやすい
アニメーションやジェスチャーの触感調整おすすめ度△理由実機での確認が要り自動化しにくい

まとめ

Claude CodeでのJetpack Compose開発は、プロジェクト作成まではAndroid StudioかAndroid CLIの通常どおりの手順です。そこから先の編集をClaude Codeに任せます。CLAUDE.mdにビルド・テストコマンドとCompose規約を書き、JetBrainsプラグインでAndroid Studioと直結し、必要ならPostToolUseフックでフォーマッタを固定する。この3つを揃えると、承認待ちや規約のぶれで止まる場面はかなり減ります。

向き不向きの早見表を出発点に、既存コードの規約をCLAUDE.mdへ落とし込むところから始めるのが手堅い進め方です。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →