※Claude Codeを使用して記事を作成しています。
はじめに
これまで作ってきたカウンターアプリは、画面が1つだけでした。
でも実際のスマホアプリは、複数の画面を行き来していますよね。
たとえば：
- 📋 メイン画面 → 設定ボタンをタップ → ⚙️ 設定画面
- 🏠 ホーム画面 → 項目をタップ → 📄 詳細画面
この「画面から画面へ移動する」仕組みを画面遷移と呼びます。
今回はカウンターアプリに「設定画面」を追加して、2つの画面を行き来できるアプリに育てましょう！
今回追加する機能
| 機能 | 内容 |
|---|---|
| ⚙️ 設定ボタン | メイン画面の右上に設定ボタンを追加 |
| 📄 設定画面 | カウントの上限値を設定できる画面 |
| ◀ 戻るボタン | 設定画面からメイン画面に戻れる |
| 🔗 設定の反映 | 設定した上限値がカウンターに適用される |
今回作るアプリのイメージ
事前準備
第3回でデザインを整えたカウンターアプリを使います。 Claude Codeを起動しておきましょう。
cd ~/AndroidStudioProjects/MyCounterApp
claude
Step 1：設定ボタンを追加してもらう
まずはメイン画面に、設定画面へ移動するためのボタンを追加しましょう。
✍️ Claude Codeへの指示（プロンプト）例：
メイン画面の右上に「設定」と書かれたボタンを追加してください。
まだ設定画面は作らなくて大丈夫です。
ボタンを押しても何も起きなくていいので、まずボタンだけ置いてください。💡 ポイント：
一度に全部お願いしようとせず、小さく分けて少しずつ進めるのがコツです。
まずボタンを置いて動作確認してから、次のステップに進みましょう。
Step 2：設定画面を作ってもらう
ボタンが追加されたら、次は設定画面を作ります。
✍️ Claude Codeへの指示（プロンプト）例：
設定画面を新しく作ってください。
設定画面には以下のものを置いてほしいです。
・「設定」というタイトル
・「カウントの上限」という説明文と、数字を入力できる入力欄
・入力欄には最初から「100」と入れておいてください
・「保存」ボタン
・画面左上に「← 戻る」ボタン（タップするとメイン画面に戻る）💡 画面を新しく作るときのコツ：
「新しく作ってください」と伝えると、Claude Codeが必要なファイルを自動で追加してくれます。
どのファイルに書けばいいかは気にしなくて大丈夫です。
Step 3：ボタンタップで画面を移動させる
設定画面ができたら、メイン画面の「設定」ボタンを押したときに画面が切り替わるように連携させます。
✍️ Claude Codeへの指示（プロンプト）例：
さっきメイン画面に追加した「設定」ボタンを押したら、
設定画面に移動するようにしてください。これで「メイン画面 → 設定画面」の移動ができるようになります。
Step 4：設定した値をカウンターに反映させる
設定画面で入力した「カウントの上限値」を、メイン画面のカウンターに反映させましょう。
✍️ Claude Codeへの指示（プロンプト）例：
設定画面で「保存」を押したら、入力した数字がカウントの上限値として
メイン画面に反映されるようにしてください。
上限値に達したら「+1」ボタンをグレーアウトして押せなくしてほしいです。
動作を確認してみよう
ここでAndroid Studioの ▶（Runボタン） でアプリを起動して確認しましょう。
確認チェックリスト
- [ ] メイン画面の右上に「設定」ボタンが表示される
- [ ] 「設定」ボタンをタップすると設定画面に移動する
- [ ] 設定画面に「カウントの上限」の入力欄がある
- [ ] 設定画面の「← 戻る」をタップするとメイン画面に戻る
- [ ] 上限値を変えて「保存」→ カウントが上限に達したら「+1」が押せなくなる
Step 5：応用！もっといろんな画面遷移を試してみよう
「画面を行き来する」感覚がつかめたら、他のパターンも試してみましょう。
パターン①：カウント履歴画面を作る
「履歴」ボタンをメイン画面に追加して、
「+1」を押した日時の記録を一覧で見られる画面を作ってください。パターン②：確認ダイアログを出す
「リセット」ボタンを押したときに「本当にリセットしますか？」という
確認メッセージを表示して、「はい」か「いいえ」を選べるようにしてください。パターン③：アプリ説明画面を作る
初めてアプリを起動したときだけ、
「このアプリの使い方」を説明する画面を表示してください。
「わかった！」ボタンを押したらメイン画面に移動するようにしてください。
よくある質問
Q. 画面を追加したらアプリが落ちるようになった
画面を追加したらアプリが起動しなくなりました。
何が原因か調べて修正してください。Q. 設定した値がうまく反映されない
設定画面で数字を変えて「保存」しても、メイン画面に反映されません。
なぜか調べて直してください。Q. 戻るボタンを押したら画面が真っ白になった
設定画面の「戻る」ボタンを押すと、メイン画面が真っ白になります。
元の状態で戻れるように修正してください。
まとめ
| 学んだこと | ポイント |
|---|---|
| 画面遷移の基本 | 「〇〇ボタンを押したら△△画面に移動」と伝えるだけ |
| 新しい画面の追加 | 「新しく〇〇画面を作って」で自動的に必要ファイルを作成してくれる |
| 画面間のデータ受け渡し | 「設定した値をメイン画面に反映して」と伝えればOK |
| 少しずつ進める | 一度に全部お願いせず、ボタン→画面→連携と段階的に進める |
画面が複数になると、一気に「アプリらしいアプリ」になりますよね。
今回の画面遷移をマスターすれば、アイデア次第でどんどん機能を追加できます！
