【実務編 第1回】ログイン機能を作ろう

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

シリーズ：Claude Codeで実務Androidアプリ開発

本シリーズでは「メモアプリ」を題材に、全8回かけて実務レベルのAndroidアプリを作り上げます。

第1回：ログイン機能を作ろう ← 今回

はじめに

前シリーズではカウンターアプリを通じて、画面作成・デザイン・データ保存・公開までの基本を学びました。
本シリーズではそこからステップアップして、実務でよく使われる機能をひとつずつ実装していきます。

題材アプリはメモアプリです。
シンプルなメモの作成・保存から始まり、毎回機能を追加して最終的には本格的なアプリに仕上げます。

今回は、多くのアプリに欠かせないログイン機能を実装します。

今回実装する機能

画面	内容
ログイン画面	メールアドレス・パスワードを入力してログイン
新規登録画面	新しいアカウントを作成する
バリデーション	入力内容のチェック（空欄・メール形式など）
画面遷移	ログイン成功後にメイン画面へ移動

事前準備

プロジェクトを新規作成する

今回から新しいプロジェクトを作ります。

項目	入力値
Name	MemoApp
Package name	com.example.memoapp
Language	Kotlin
Minimum SDK	API 26 (Android 8.0)

cd ~/AndroidStudioProjects/MemoApp
claude

Step 1：ログイン画面のレイアウトを作る

まずはログイン画面のUIから作っていきます。

✍️ Claude Codeへの指示例：

メモアプリのログイン画面を作ってください。

・アプリのロゴ（テキストで「MemoApp」と表示するだけでOK）
・メールアドレスの入力欄
・パスワードの入力欄（入力内容を●で隠す）
・「ログイン」ボタン
・「アカウントをお持ちでない方はこちら」というリンクテキスト

全体的にシンプルで清潔感のあるデザインにしてください。
余白を広めにとって見やすくしてほしいです。

Step 2：新規登録画面を作る

ログイン画面ができたら、新規登録画面も作ります。

✍️ Claude Codeへの指示例：

新規登録画面を作ってください。

・メールアドレスの入力欄
・パスワードの入力欄（●で隠す）
・パスワード確認用の入力欄（●で隠す）
・「登録する」ボタン
・「すでにアカウントをお持ちの方はこちら」というリンクテキスト

ログイン画面と同じデザインのトーンで統一してほしいです。

Step 3：入力バリデーションを追加する

ユーザーが誤った入力をした場合に、わかりやすいエラーメッセージを表示します。

✍️ Claude Codeへの指示例：

ログイン画面と新規登録画面に入力チェック（バリデーション）を追加してください。

ログイン画面：
・メールアドレスが空のとき →「メールアドレスを入力してください」
・メールアドレスの形式が正しくないとき →「正しいメールアドレスを入力してください」
・パスワードが空のとき →「パスワードを入力してください」

新規登録画面：
・上記に加えて、パスワードが6文字未満のとき →「パスワードは6文字以上で入力してください」
・パスワードと確認用パスワードが一致しないとき →「パスワードが一致しません」

エラーメッセージは入力欄の下に赤い文字で表示してください。

Step 4：ログイン成功後の画面遷移を実装する

今回はまだFirebase連携をしていないので、仮のログイン処理として「正しい形式で入力されたらメイン画面に進む」という動作を実装します。

✍️ Claude Codeへの指示例：

「ログイン」ボタンを押してバリデーションが通ったとき、
メイン画面（今はまだ「メイン画面」とテキストが表示されるだけのシンプルな画面でOK）
に遷移するようにしてください。

また、メイン画面に「ログアウト」ボタンを仮置きして、
押したらログイン画面に戻れるようにしてください。

Step 5：ローディング表示を追加する

ログインボタンを押してから処理が完了するまでの間、ユーザーに「処理中」であることを伝えましょう。

✍️ Claude Codeへの指示例：

「ログイン」ボタンを押した後、処理中はボタンをグレーアウトして
押せない状態にしてください。
ボタンの中に小さくくるくる回るインジケーターを表示してほしいです。
処理が完了したら元のボタンに戻してください。

動作確認チェックリスト

[ ] ログイン画面が表示される
[ ] 空欄でログインボタンを押すとエラーメッセージが出る
[ ] メール形式が正しくない場合にエラーが出る
[ ] 正しい形式で入力するとメイン画面に遷移する
[ ] 新規登録画面に遷移できる
[ ] パスワード不一致でエラーが出る
[ ] ログアウトボタンでログイン画面に戻れる

まとめ

学んだこと	ポイント
ログイン画面のUI	入力欄・ボタン・リンクテキストの配置
バリデーション	「〇〇が空のとき」「形式が違うとき」と条件を具体的に伝える
ローディング表示	処理中はボタンを押せなくする
画面遷移の設計	ログイン成功・失敗それぞれの遷移先を指示する