ステップ5：サンプルモバイルアプリでの動作確認 - Expo + React Nativeアプリとバックエンドの統合

今回のステップの概要

このステップでは、ステップ1〜4で構築したバックエンドシステム（API Gateway、Cognito、Lambda、DynamoDB、WebSocket API）を、実際のモバイルアプリケーションから利用して動作確認を行います。

用意されているExpo + React Nativeサンプルアプリケーションを使用して、以下の機能が正しく動作することを確認します：

• ユーザー認証機能（ステップ2で構築）：サインアップ、メール認証、ログイン
• 位置情報機能（ステップ3で構築）：チェックイン作成、履歴取得、近隣検索
• リアルタイム通信（ステップ4で構築）：WebSocketによる双方向通信

モバイルアプリを実際に動かすことで、これまで構築したバックエンドシステムが「生きたサービス」として機能することを体感できます。これは、レストランで作った料理を実際にお客様に提供して、味や見た目を確認するのと同じプロセスです。

このステップで学ぶこと

• Expo + React Nativeアプリとバックエンドの接続設定
• Expo Goアプリを使った実機での動作確認方法
• Cognitoを使った認証フローの実装確認
• API Gatewayを通したデータ通信の動作確認
• モバイルアプリケーション開発におけるエラーハンドリングとデバッグ手法

実際の手順

実際の手順では、サンプルアプリケーションのセットアップから、バックエンド接続設定、動作確認まで段階的に進めます。

1. 開発環境の準備

Expo + React Nativeアプリケーションを動作させるための開発環境を準備します。

1-1. Node.jsのインストール確認

Expoの開発にはNode.jsが必要です。以下のコマンドでバージョンを確認してください。

node --version
npm --version

1-2. Expo Goアプリのインストール（推奨）

最も簡単にExpoアプリをテストする方法は、スマートフォンにExpo Goアプリをインストールすることです。これは、レストランの新メニューを試食するために、お客様に試食用のサンプルを提供するようなものです。

iOS（iPhone）の場合:

1. App Storeを開きます
2. 「Expo Go」を検索してインストールします
3. App Store直リンク 

Androidの場合:

1. Google Playを開きます
2. 「Expo Go」を検索してインストールします
3. Google Play直リンク 

2. サンプルアプリケーションのセットアップ

GitHub上のサンプルコードをダウンロードし、依存関係をインストールします。

2-1. サンプルコードのダウンロード

1. サンプルコードをダウンロードします：

sample_app_downloadリンク

1. プロジェクト構成を確認します：

ls -la

2-2. 依存関係のインストール

1. Node.jsパッケージをインストールします：

npm install

このコマンドで、package.jsonに定義された以下のライブラリがインストールされます：

• expo: Expoの基本ライブラリ
• react、react-native: React Nativeの基本ライブラリ
• expo-location: 位置情報取得ライブラリ（Expo対応版）
• expo-router: ファイルベースルーティングライブラリ
• amazon-cognito-identity-js: Cognito認証ライブラリ
• axios: HTTP通信ライブラリ
• @react-native-async-storage/async-storage: ローカルストレージライブラリ

たったこれだけです。従来のReact Nativeでは、この後にcd ios && pod installを実行する必要がありましたが、Expoではその作業は不要です。

3. バックエンド接続設定

AWSで構築したバックエンドエンドポイントをExpoアプリに設定します。

3-1. 必要な情報の収集

以下の情報をAWSコンソールから取得します：

① Cognito User Pool ID

1. AWSマネジメントコンソールでCognitoサービスを開きます
2. ステップ2で作成したUser Pool（mobile-app-user-pool）を選択します
3. 「ユーザープールの概要」ページで「プールID」をコピーします
   • 形式例：us-east-1_xxxxxxxxx

② Cognito App Client ID

1. 同じUser Poolの画面で「アプリの統合」タブを開きます
2. 「アプリクライアント」セクションで作成したアプリクライアントを選択します
3. 「クライアントID」をコピーします
   • 形式例：1a2b3c4d5e6f7g8h9i0j1k2l3m

③ API Gateway URL（REST API）

1. API Gatewayコンソールを開きます
2. ステップ1で作成したAPI（mobile-app-api）を選択します
3. 「ステージ」を選択し、デプロイしたステージ（prodなど）をクリックします
4. 「URLを呼び出す」の値をコピーします
   • 形式例：https://abc123def4.execute-api.us-east-1.amazonaws.com/prod

④ WebSocket API URL（ステップ4を実施した場合のみ）

1. API Gatewayコンソールを開きます
2. ステップ4で作成したWebSocket API（mobile-app-websocket）を選択します
3. 「ステージ」を選択し、デプロイしたステージ（prodなど）をクリックします
4. 「WebSocket URL」の値をコピーします
   • 形式例：wss://xyz123abc4.execute-api.us-east-1.amazonaws.com/prod

3-2. 設定ファイルの編集

config/backend.jsファイルを開き、取得した情報を設定します。

1. テキストエディタでconfig/backend.jsを開きます：

# Visual Studio Codeの場合
code config/backend.js
 
# またはお好みのエディタで
nano config/backend.js

2. 最低限、以下の3箇所を編集してください：

const BACKEND_CONFIG = {
  cognito: {
    userPoolId: 'us-east-1_xxxxxxxxx', // ← AWSコンソールから取得した値
    clientId: 'xxxxxxxxxxxxxxxxxxxxxxxx', // ← AWSコンソールから取得した値
    region: 'us-east-1',
  },
 
  api: {
    baseUrl: 'https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/prod', // ← AWSコンソールから取得した値
    // ... その他の設定
  },
 
  // ステップ4を実施した場合のみ設定
  websocket: {
    url: 'wss://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/prod', // ← WebSocket URL
    // ... その他の設定
  },
};

3. ファイルを保存します

4. アプリケーションの起動と動作確認

設定が完了したら、実際にアプリを起動して動作を確認します。

4-1. Expo開発サーバーの起動

Expoの開発サーバーを起動します。

npm start

または、以下のコマンドでも起動できます：

npx expo start

このコマンドでExpo開発サーバーが起動し、ターミナルにQRコードが表示されます：

 › Metro waiting on exp://192.168.1.10:8081
 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

 › Press a │ open Android
 › Press i │ open iOS simulator
 › Press w │ open web

 › Press j │ open debugger
 › Press r │ reload app
 › Press m │ toggle menu
 › Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

このターミナルウィンドウは開いたままにしておいてください。

4-2. Expo Goアプリで実機テスト（推奨）

最も簡単で推奨される方法は、Expo Goアプリを使った実機テストです。

iOS（iPhone）の場合：

1. iPhoneのカメラアプリを開きます
2. ターミナルに表示されているQRコードをスキャンします
3. 通知が表示されたら「Expo Goで開く」をタップします
4. 自動的にExpo Goアプリが起動し、アプリが表示されます

Androidの場合：

1. Expo Goアプリを開きます
2. 「Scan QR Code」をタップします
3. ターミナルに表示されているQRコードをスキャンします
4. アプリが自動的に起動します

同じWi-Fiネットワークに接続していない場合：

1. Expo Goアプリで「Enter URL manually」を選択します
2. ターミナルに表示されているURL（例：exp://192.168.1.10:8081）を入力します

5. 認証機能の動作確認

アプリが起動したら、ステップ2で構築したCognito認証システムの動作を確認します。

5-1. ユーザー登録のテスト

1. アプリのログイン画面で「アカウントをお持ちでない方は こちら」をタップします
2. 以下の情報を入力します：
   • メールアドレス: test-user1@example.com（実際に受信可能なメールアドレス）
   • パスワード: Test1234!（8文字以上、大文字小文字数字記号を含む）
3. 「登録」ボタンをタップします
4. 「確認コード送信」のメッセージが表示されます

5-2. メール認証のテスト

1. 入力したメールアドレス宛に6桁の確認コードが送信されます
2. メールを確認し、6桁のコード（例：123456）をコピーします
3. アプリの「確認コード」欄にコードを入力します
4. 「確認」ボタンをタップします
5. 「登録完了」のメッセージが表示されたら、「OK」をタップします

メールが届かない場合のトラブルシューティング：

• 迷惑メールフォルダを確認してください
• Cognitoコンソールで「メール設定」が正しいか確認してください
• SESがサンドボックスモードの場合、検証済みメールアドレスのみに送信可能です

5-3. ログインのテスト

1. 登録が完了すると、ログイン画面に戻ります
2. 登録時に使用したメールアドレスとパスワードを入力します
3. 「ログイン」ボタンをタップします
4. ログインに成功すると、メイン画面に遷移します

ログインできない場合のトラブルシューティング：

• メールアドレスとパスワードが正しいか確認してください
• メール認証が完了しているか確認してください
• ネットワーク接続を確認してください
• 開発者ツールのコンソールでエラーメッセージを確認してください

5-4. AWSコンソールでユーザーの確認

1. AWSマネジメントコンソールでCognitoサービスを開きます
2. User Pool（mobile-app-user-pool）を選択します
3. 「ユーザー」タブをクリックします
4. 作成したユーザーが「確認済み」ステータスで表示されていることを確認します

ユーザーをクリックすると、以下の詳細情報が確認できます：

• ユーザー名（メールアドレス）
• メール認証ステータス
• 作成日時
• 最終更新日時

6. 位置情報機能の動作確認

ステップ3で構築した位置情報システムの動作を確認します。

6-1. 位置情報権限の許可

メイン画面が表示されると、位置情報の利用許可を求めるダイアログが表示されます。

iOSの場合：

• 「Appの使用中は許可」を選択します

Androidの場合：

• 「アプリの使用中のみ」を選択します

"plugins": [
  [
    "expo-location",
    {
      "locationAlwaysAndWhenInUsePermission": "チェックイン機能で現在地を使用します"
    }
  ]
]

6-2. 現在地の表示確認

位置情報権限を許可すると、アプリのメイン画面が表示されます。

画面上部に以下の情報が表示されます：

• 📍 チェックイン（タイトル）
• リアルタイム接続状態（緑のドット＝接続中、オレンジのドット＝接続中…）
• ログアウトボタン

「📍 現在地」カードに現在の緯度・経度が表示されます：

• 緯度: 35.787318（例）
• 経度: 139.469304（例）

6-3. チェックインの作成テスト

1. 青い「チェックイン」ボタンをタップします
2. 「成功」「チェックインしました！」のメッセージが表示されます
3. 画面下部の「📋 チェックイン履歴」セクションに新しいチェックインが追加されます

チェックイン履歴に表示される情報：

• 📍 チェックイン（ラベル）
• チェックイン日時（例：2025/11/16 21:00）
• ユーザーID: 3438f498-1061-70c6-826c-714380d8845a（例）
• 緯度・経度
• メモ: 📍 チェックイン
• ID: チェックインID（UUID）

このとき、バックエンドでは以下の処理が実行されています：

1. React Nativeアプリが現在の緯度・経度を取得
2. API Gateway経由でLambda関数にPOSTリクエストを送信
3. Lambda関数がDynamoDBにチェックインデータを保存
4. 成功レスポンスがアプリに返される
5. アプリが履歴リストに新しいチェックインを表示

6-4. リアルタイム通信の確認（WebSocket）

画面上部に「🟢 リアルタイム」のステータスが表示されている場合、WebSocket接続が有効です。

WebSocketの双方向通信テスト

WebSocketが正しく動作していることを、コマンドラインとExpoアプリの両方で確認します。

ステップ1: コマンドラインでWebSocket接続

# WebSocket URLを環境変数に設定（Step 4で取得したURL）
export WS_URL="wss://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/prod"
 
# 認証付きでWebSocket接続
wscat -c "${WS_URL}?token=${ID_TOKEN}"

接続成功すると、以下のように表示されます：

Connected (press CTRL+C to quit)
>

ステップ2: Expoアプリからメッセージ送信 → コマンドラインで受信確認

1. Expoアプリで緑の「👋 Say Hi!」ボタンをタップします
2. コマンドラインのwscat画面に即座にメッセージが表示されることを確認します：

< {
  "type": "message",
  "sender_id": "74a854b8-0091-70a8-9c1b-161f3130b0b0",
  "message": "Hi! みんな元気？",
  "timestamp": "2025-11-16T12:00:14.000000"
}

ステップ3: コマンドラインからメッセージ送信 → Expoアプリで受信確認

1. コマンドライン（wscat）で以下のメッセージを入力して送信します：

{"action": "send_message", "data": {"message": "Hello from command line!"}}

2. Expoアプリの「💬 受信メッセージ（最新3件）」セクションに即座に表示されることを確認します：
   • #1（最新）
   • 受信時刻（例：12:01:24）
   • User ID: 送信者のユーザーID
   • メッセージ: Hello from command line!

6-5. 複数のチェックインをテスト

1. 別の場所に移動してから「チェックイン」ボタンをもう一度タップします
2. 「📋 チェックイン履歴」セクションに新しいチェックインが追加されます
3. 最新のチェックインが先頭に表示されることを確認します
4. 履歴件数が増加することを確認します（例：7件 → 8件）

{
  "checkInId": "uuid-v4-string",
  "userId": "cognito-user-sub",
  "latitude": 35.6812,
  "longitude": 139.7671,
  "timestamp": "2025-10-31T10:30:00Z",
  "memo": "東京駅でチェックイン",
  "createdAt": "2025-10-31T10:30:00Z"
}

6-6. DynamoDBでのデータ確認

1. AWSマネジメントコンソールでDynamoDBサービスを開きます
2. 「テーブル」からcheckins-tableを選択します
3. 「項目を表示」をクリックします
4. アプリから作成したチェックインデータが保存されていることを確認します

確認できる項目：

• checkInId: 一意のチェックインID（UUID）
• userId: Cognitoユーザーのサブ（ユーザー識別子）
• latitude、longitude: 位置情報
• timestamp: チェックイン日時
• memo: メモ（オプション）

7. エラーハンドリングとデバッグ

実際の開発では、エラーが発生することがあります。適切なデバッグ手法を学びます。

7-1. よくあるエラーとその対処法

① 「バックエンド設定エラー」と表示される

原因:

• config/backend.jsの設定が不完全

対処法:

# 設定ファイルを確認
cat config/backend.js | grep -E "userPoolId|clientId|baseUrl"
 
# 以下が設定されているか確認：
# - userPoolId: us-east-1_xxxxxxxxx
# - clientId: 実際のクライアントID
# - baseUrl: https://xxxxx.execute-api...

② 「Network Error」が発生する

原因:

• API GatewayのURLが間違っている
• CORSが正しく設定されていない
• Lambda関数が実行されていない

対処法:

# API GatewayのURLを手動でテスト
curl -X GET "https://xxxxx.execute-api.us-east-1.amazonaws.com/prod/checkins" \
  -H "Authorization: Bearer YOUR_JWT_TOKEN"
 
# CORSヘッダーの確認
curl -X OPTIONS "https://xxxxx.execute-api.us-east-1.amazonaws.com/prod/checkins" \
  -H "Origin: http://localhost:8081" \
  -H "Access-Control-Request-Method: GET" \
  -v

③ 「Unauthorized」エラーが発生する

原因:

• JWTトークンが無効または期限切れ
• API Gatewayのオーソライザー設定が間違っている

対処法:

# 一度ログアウトして再ログインする
# アプリで「ログアウト」→「ログイン」を実行
 
# または、AsyncStorageをクリア（開発者モード）
# Expo開発サーバーで「m」キーを押してメニューを開き、
# 「Clear async storage」を選択

④ 位置情報が取得できない

原因:

• 位置情報権限が許可されていない
• Expo Goアプリの位置情報権限が無効

対処法:

# iOS: デバイス設定を確認
# 設定 > プライバシーとセキュリティ > 位置情報サービス > Expo Go > 常に許可
 
# Android: デバイス設定を確認
# 設定 > アプリ > Expo Go > 権限 > 位置情報 > 許可
 
# アプリを再起動して権限リクエストをやり直す

⑤ QRコードをスキャンしてもアプリが起動しない

原因:

• PCとスマホが異なるWi-Fiネットワークに接続されている
• ファイアウォールがポートをブロックしている

対処法:

# 1. 同じWi-Fiネットワークに接続されているか確認
# 2. Expo開発サーバーを再起動
# 3. トンネルモードを試す：
npx expo start --tunnel

7-2. ネットワークリクエストのデバッグ

API通信の内容を詳細に確認する方法を学びます。

Expo開発サーバーのログ確認:

Expo開発サーバーのターミナルには、すべてのAPIリクエストが自動的にログ出力されます：

LOG  [API] POST /checkin - 201 Created (234ms)
LOG  [API] GET /checkins - 200 OK (145ms)
ERROR [API] GET /checkins/nearby - 401 Unauthorized

これは、レストランで言えば、すべての注文（APIリクエスト）と配膳状況（レスポンス）を厨房のモニターで確認できるようなものです。

Chrome DevToolsでのデバッグ:

1. Expo開発サーバーで j キーを押します
2. Chromeブラウザが開きます
3. 「Console」タブでログを確認できます
4. 「Network」タブでAPIリクエストの詳細を確認できます

確認できる情報:

• リクエストURL
• リクエストヘッダー（Authorizationトークン含む）
• リクエストボディ
• レスポンスステータス
• レスポンスボディ
• リクエスト時間

7-3. Lambda関数のログ確認

バックエンド側でエラーが発生している場合、CloudWatch Logsを確認します。

1. AWSマネジメントコンソールでCloudWatchサービスを開きます
2. 「ログ」→「ロググループ」を選択します
3. Lambda関数のロググループを選択します（例：/aws/lambda/create-checkin）
4. 最新のログストリームを開きます
5. エラーメッセージやスタックトレースを確認します

よくあるLambdaエラー:

# エラー例1: DynamoDBへの書き込み権限がない
[ERROR] ClientError: An error occurred (AccessDeniedException) when calling the PutItem operation
 
# 対処法: Lambda実行ロールにDynamoDBのPutItem権限を追加
 
# エラー例2: 環境変数が設定されていない
[ERROR] KeyError: 'TABLE_NAME'
 
# 対処法: Lambda関数の環境変数にTABLE_NAMEを追加
 
# エラー例3: JWTトークンの検証に失敗
[ERROR] Unauthorized: Invalid token
 
# 対処法: API GatewayのオーソライザーでCognito User Poolを正しく設定

8. パフォーマンスとコスト最適化の確認

構築したシステムのパフォーマンスとコストを評価します。

8-1. APIレスポンス時間の測定

React Native Debuggerのネットワークタブで、各APIのレスポンス時間を確認します。

目標値:

• ログイン: 500ms以内
• チェックイン作成: 300ms以内
• チェックイン履歴取得: 500ms以内

レスポンス時間が遅い場合の改善策：

1. Lambda関数のメモリ増加: 128MB → 256MB
2. DynamoDBのプロビジョニングモード: オンデマンド → プロビジョニング
3. API Gatewayのキャッシュ有効化: 頻繁にアクセスされるエンドポイントでキャッシュを有効化

8-2. AWS利用料金の確認

1. AWSコンソールの「Billing」セクションを開きます
2. 「コストエクスプローラー」で各サービスの利用料金を確認します

想定される無料枠内の料金（月間）:

9. 追加テストシナリオ

より実践的なテストを実施して、システムの堅牢性を確認します。

9-1. 複数ユーザーでのテスト

異なるメールアドレスで複数のユーザーを登録し、以下を確認します：

1. ユーザーAのチェックインがユーザーBの履歴に表示されないこと
2. 各ユーザーが自分のデータのみにアクセスできること
3. 近隣検索で他のユーザーのチェックインが表示されること（プライバシー設定に応じて）

9-2. オフライン動作のテスト

ネットワークを切断した状態でアプリの動作を確認します：

1. デバイスを機内モードに設定します
2. チェックインを作成しようとするとエラーメッセージが表示されることを確認します
3. キャッシュされたデータ（履歴など）は表示されることを確認します
4. 機内モードを解除すると、自動的にデータが同期されることを確認します

まとめ

このステップでは、ステップ1〜4で構築したバックエンドシステムを、Expo + React Nativeサンプルアプリケーションを使って動作確認しました。

確認できた主な機能:

1. 認証システム - Cognitoによるユーザー登録、メール認証、ログイン
2. API通信 - API Gatewayを通じた安全なデータ通信
3. 位置情報処理 - expo-locationによるチェックインの作成、履歴取得、位置情報表示
4. リアルタイム通信 - WebSocketによる双方向通信（リアルタイムメッセージ受信）

Expoを使用することで得られたメリット:

• 環境構築が5分で完了（XcodeやAndroid Studioのインストール不要）
• QRコードをスキャンするだけで実機で動作確認
• コード変更が即座に実機に反映（Hot Reload）
• expo-locationなどの統一されたAPIによるシンプルな開発
• iOSとAndroid両対応の設定をapp.jsonで一元管理

学んだデバッグ手法:

• Expo開発サーバーのログ監視
• Chrome DevToolsを使ったネットワーク監視
• CloudWatch Logsでのバックエンドエラー確認
• Expo Goアプリでの実機デバッグ
• エラーケースのハンドリング

次のステップ

このカリキュラムで学んだ技術を応用して、以下のような機能拡張にチャレンジしてみましょう：

機能拡張のアイデア:

1. 写真アップロード機能: S3とCloudFrontを使用した画像配信
   • expo-image-pickerで簡単に実装可能
2. コメント機能: チェックインへのコメントとリアルタイム更新
3. いいね機能: DynamoDB Atomicカウンターを使用した集計
4. フレンド機能: ユーザー間のフォロー・フォロワー関係の管理
5. リアルタイム機能の拡張: ユーザーのオンライン状態表示、タイピングインジケーター
6. 検索機能: OpenSearch Serviceを使った全文検索
7. 分析機能: Amazon QuickSightでのダッシュボード作成

学習の深掘り:

• Expo Application Services (EAS): 本番ビルドとデプロイの自動化
• GraphQL APIの実装: AWS AppSyncを使用
• CI/CDパイプラインの構築: GitHub ActionsとEAS Build
• インフラのコード化: AWS CDKとExpo Config
• セキュリティベストプラクティス: WAF、Shield、Cognito Advanced Security

お疲れさまでした！これで、O2Oモバイルアプリのバックエンド構築カリキュラムのすべてのステップが完了しました。Expoを活用することで、従来よりも圧倒的に簡単に、プロフェッショナルなモバイルアプリを開発できることを体感できたはずです。学んだ知識を活かして、さらなるスキルアップを目指してください！