クイックスターターズ
React Nativeのバックエンドを構築する方法は？

34min
はじめに
このチュートリアルでは、 React Nativeのバックエンドを構築する方法を学びます。
私たちはクロスプラットフォームの互換性に焦点を当て、データ管理、ユーザー認証、リアルタイムデータのための重要なBack4App機能を統合する方法を示します。
RESTおよびGraphQL APIを活用することで、iOSおよびAndroidプラットフォームの両方で動作するReact Nativeプロジェクトを開発し、ネイティブコンポーネントとモバイルアプリケーション全体でシームレスな体験を確保できます。
安全なユーザーログインの実装、タスクのスケジューリング、リアルタイムアプリケーションの使用により、フルスタック開発者の旅が容易になります。
また、Back4Appの環境がホスティング、データベース、セキュリティレイヤーを含むサービスのセットアップに必要な時間を短縮できることもわかります。
最後には、React Nativeアプリをサポートし、大規模なモバイルソリューションの構築への道を開く堅牢なバックエンド構造を持つことになります。
このガイドを完了すると、アプリを高度な機能で拡張したり、サードパーティサービスを統合したり、プロジェクトを生産準備が整ったプラットフォームに変換したりする準備が整います。
Back4AppとReact Nativeを使って、現代のモバイルアプリ開発に飛び込んでみましょう！
前提条件
このチュートリアルを完了するには、以下が必要です:
Back4appアカウントと新しいBack4Appプロジェクト
Back4appの始め方。
アカウントがない場合は、無料でサインアップしてください。その後、ガイドに従ってプロジェクトを準備します。
基本的なReact Native開発環境
「React Native CLIクイックスタート」または「Expo CLI」を使用できます。Node.jsがインストールされていることを確認してください。
Node.js（バージョン14以上）がインストールされていること
npmパッケージをインストールし、ローカル開発サーバーを実行するためにNode.jsが必要です。Node.jsのインストール﻿
JavaScriptと基本的なReact Nativeの概念に慣れていること
React Native公式ドキュメント。
React Native開発が初めての場合は、まずドキュメントや初心者向けのチュートリアルを確認してください。
始める前に、これらの前提条件が整っていることを確認してください。Back4Appプロジェクトを作成し、ローカルのReact Native環境を設定しておくことで、スムーズなプロセスが確保されます。
ステップ1 – Back4Appで新しいプロジェクトを作成し、接続する
新しいプロジェクトを作成する
React Nativeアプリのモバイルバックエンドを構築する最初のステップは、Back4Appで新しいプロジェクトを作成することです。以下の手順に従ってください:
Back4Appアカウントにログインする。
Back4Appダッシュボードで「新しいアプリ」ボタンをクリックする。
アプリに名前を付ける（例：「ReactNative-Backend-Tutorial」）。
﻿
プロジェクトが作成されると、Back4Appダッシュボードに表示されます。この新しいプロジェクトを使用して、React Nativeアプリのデータを管理し、セキュリティを構成します。
アプリケーションキーの取得
ウェブベースのReactアプリとは異なり、React Native開発ではデータの取得と操作のために直接HTTPリクエストが必要になることがよくあります。私たちはREST API（またはGraphQL API）に焦点を当てているため、認証されたリクエストを送信するにはBack4Appキーが必要です。
Parseキーを取得する:
Back4Appダッシュボードで、アプリのアプリ設定またはセキュリティとキーセクションを開いて、アプリケーションID, REST APIキー, およびGraphQLエンドポイント（通常はhttps://parseapi.back4app.com/graphql)を見つけます。
REST APIキーをメモする:
React Nativeのfetchまたはaxiosヘッダーに含めて、各リクエストを認証します。
﻿
このステップは、モバイルアプリケーションがBack4Appと安全に通信できることを保証します。
ステップ2 – データベースの設定
Back4Appは、堅牢なデータ管理機能を含むReact Nativeアプリのための幅広いバックエンドオプションを提供します。ダッシュボードを通じてクラスを作成し、フィールドを追加し、関係を定義できます。リアルタイムアプリケーションを構築する場合でも、よりシンプルなCRUDアプリを作成する場合でも、Back4Appのダッシュボードはデータを簡単に保存し、整理するのに役立ちます。
データモデルの作成
「データベース」セクションに移動し、Back4Appダッシュボードで。
新しいクラスを作成（例：「Todo」）し、次のような関連するカラムを追加します。title（文字列）とisCompleted（ブール値）。
新しいクラスを作成
﻿
Back4Appはさまざまなデータ型をサポートしています: 文字列, 数値, ブール値, オブジェクト, 日付, ファイル, ポインタ, 配列, 関係, ジオポイント, およびポリゴン. 新しいデータを送信するときに、Parseにフィールドを自動作成させることもできます。
AIエージェントを使用したデータモデルの作成
希望する場合は、Back4App AIエージェントを使用できます:
AIエージェントを開く あなたのアプリダッシュボードから。
データモデルを説明する 簡単な言葉で（例：「タイトルとisCompletedフィールドを持つTodoクラスを作成します。」）。
AIエージェントにスキーマを作成させる あなたのために。
﻿
これは、React Nativeプロジェクトの初期段階で時間を節約できます。
REST APIを使用したデータの読み書き
一般的なReact Native開発では、ネイティブの fetch APIや、 axios のようなサードパーティライブラリを使用してREST APIを処理できます。以下はcURLを使用した例で、 fetch に適応できます。
POST（Todoを作成）：
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
GET（Todosを取得）：
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
あなたのReact Nativeアプリでは、fetchを使って同じことができます:
JS
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
GraphQL APIを使用したデータの読み取りと書き込み
GraphQLを好む場合、Back4AppはGraphQLエンドポイントを提供します。以下は新しいレコードを作成するためのミューテーションの例です:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
GraphQLクエリは、apollo-clientのようなライブラリや、単純なfetch呼び出しを使用して実行できます:
JS
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
﻿
ライブクエリを使用する（オプション）
リアルタイムデータのために、Back4Appにはライブクエリがありますが、通常はParse SDKが必要です。このチュートリアルではREST呼び出しに焦点を当てているため、後で使用する予定がある場合は、アプリのサーバー設定でライブクエリを有効にできます。リアルタイムデータは、React Nativeアプリでユーザーを即座に更新するのに役立ちます。より簡単なアプローチとして、自分の間隔でサーバーをポーリングするか、サードパーティのツールに依存することができます。
ステップ3 – ACLとCLPによるセキュリティの適用
簡単な概要
Back4Appは、ACL（アクセス制御リスト）とCLP（クラスレベルの権限）でバックエンドを保護します。これにより、オブジェクトとクラスの両方のレベルでデータを保護できます。これは、商用グレードのモバイルアプリ開発における安全なユーザー権限を実装するために重要です。
ステップバイステップ
クラスレベルの権限（CLP）:
アプリのデータベースセクションに移動し、任意のクラスを開いて「セキュリティと権限」に切り替えます。さまざまなユーザーロールや公開アクセスのために読み取り/書き込み権限を調整します。
ACL:
RESTリクエストに_ACLフィールドを含めることで、オブジェクトごとのアクセス制御を適用できます。例えば:
詳細については、次を確認してください アプリのセキュリティガイドライン.
ステップ 4 – クラウドコード関数の作成
クラウドコードの理由
クラウドコードを使用すると、Back4App上でサーバーサイドスクリプトを実行して、バリデーション、トリガー、外部API呼び出しの処理などのタスクを行うことができます。クライアントから隠しておくべきロジックを制御できるため、React Nativeプロジェクトのセキュリティが向上します。
例の関数
以下は、サーバーサイドの main.js に書く例です。RESTを通じてReact Nativeアプリから呼び出すことができます:
JS
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
﻿
デプロイメント
Back4app CLI:
CLIをインストールし、アカウントキーを設定して、b4a deployを実行します。
ダッシュボード:
また、Cloud Code > Functionsに移動し、main.jsにコードを貼り付けて、デプロイをクリックします。
﻿
関数の呼び出し（REST経由）
React NativeアプリからREST APIを直接使用します:
JS
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
﻿
この柔軟性により、クライアントに機密情報を公開することなくビジネスロジックを統合できるため、より効率的なフルスタック開発者になります。
ステップ5 – 認証の設定
ユーザー認証を有効にするまたは設定する
Back4Appは、Parse Userクラスを使用してユーザー認証を管理します。React NativeでParse SDKを使用していなくても、直接HTTPリクエストを使用して登録、ログイン、またはログアウトできます。
ユーザーをサインアップする（REST）：
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "[email protected]"
     }' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "alice@example.com"
     }' \
  https://parseapi.back4app.com/users
﻿
ログインする（REST）：
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
﻿
これらのリクエストは、ユーザーセッションを管理するためにReact Nativeアプリに保存できるセッショントークンを返します。これにより、行う各リクエストが認証され、セキュアなモバイル体験を構築できます。
ソーシャルログイン
Back4Appは、特化したフローを通じてソーシャルログイン（Google、Facebook、Apple）をサポートしています。OAuthアプリを構成するには、ソーシャルログインのドキュメントを参照し、適切なトークンをBack4Appに送信する必要があります。
ステップ6 – ファイルストレージの取り扱い
ファイルストレージの設定
Back4Appは、React Nativeアプリのファイルを保存できます。オブジェクトに添付するか、直接アップロードできます。RESTを使用しているため、以下はファイルをアップロードする例です（Base64エンコード）：
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
﻿
レスポンスは、データベースに保存できるURLを返します。React Nativeアプリからは、fetchを使用して、ファイルをblobまたはフォームデータとして送信できます。
セキュリティに関する考慮事項
不正なアップロードを防ぐために、fileUploadオプションをParse Server Settingsで構成してください。たとえば、認証されたユーザーからのみアップロードを許可することができます。これにより、ファイルストレージを含むサービスが保護されます。
ステップ7 – メール確認とパスワードリセット
概要
メールの所有権を確認することは、安全なユーザーフローを実装するための鍵です。Back4Appは、メール確認とパスワードリセットのための組み込みツールを提供しています。
Back4Appダッシュボードの設定
アプリ設定を開く。
メール設定の下でメール確認を有効にします。
パスワードリセットと確認メッセージのためのテンプレートをカスタマイズします。
コード/実装
パスワードを忘れたユーザーは、リセットリクエストをトリガーできます：
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "[email protected]"}' \
  https://parseapi.back4app.com/requestPasswordReset
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "alice@example.com"}' \
  https://parseapi.back4app.com/requestPasswordReset
﻿
Back4Appはユーザーにパスワードリセットのメールを送信します。この便利さは、React Nativeアプリで別のメールサーバーを設定する手間を省いてくれます。
ステップ8 – クラウドジョブを使ったタスクのスケジューリング
クラウドジョブの役割
クラウドジョブは、データのクリーンアップや日次レポートの送信など、定期的なタスクを自動化するのに役立ちます。以下は、main.jsの例です。
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
このコードをデプロイしたら、サーバー設定 > バックグラウンドジョブに移動してスケジュールします。これにより、手動での介入なしに、iOSおよびAndroidプラットフォーム全体でデータが新鮮に保たれます。
クラウドジョブのスケジューリング
﻿
ステップ 9 – Webhookの統合
定義
Webhookは、イベントが発生するたびにバックエンドが外部サービスに通知することを可能にします。たとえば、新しいTodoを作成した際にSlackや決済ゲートウェイに通知することができます。
設定
Back4Appダッシュボードの More > WebHooks に移動します。
希望する外部エンドポイントを指す新しいWebhookを追加します。
React Nativeアプリのデータ変更がWebhookをトリガーするタイミングを定義するためのトリガーを設定します。
Webhookの追加
﻿
Cloud Codeトリガー内でWebhookをコーディングすることもでき、HTTPリクエストを投稿したり、サードパーティAPIと統合したりできます。これにより、バックエンドの機能が幅広い外部サービスに拡張されます。
BeforeSave WebHook
﻿
ステップ10 – Back4App管理パネルの探索
どこで見つけるか
「Back4App管理パネル」は、非技術者がデータを管理するためのユーザーフレンドリーなインターフェースです。特に、データモデルに直接アクセスする必要がある製品オーナー、クライアント代表、またはサポートスタッフにとって便利です。
機能
管理アプリを有効にするには、アプリダッシュボード > その他 > 管理アプリを選択します。
管理ユーザーを作成する（ユーザー名/パスワード）。
サブドメインを選択することで、迅速かつコードなしでデータベースにアクセスできます。
管理アプリを有効にする
﻿
ログインすると、ユーザーやチームはコードを書くことなく、レコードを表示、編集、または削除できます。このアプローチは、データ管理とコラボレーションを迅速にサポートします。
結論
このガイドでは、React NativeアプリケーションのバックエンドをBack4Appを使用して構築する方法を学びました。これには次の内容が含まれます:
React Nativeアプリのために、安全なバックエンドを作成し、クロスプラットフォームの互換性を実装すること。
RESTおよびGraphQL APIを使用したデータ管理の設定。
機密データを保護するためのACLとCLPの設定。
サーバーサイドロジックのためのCloud Codeの記述。
ユーザー認証とメール確認の処理。
直接アップロードによるファイルストレージの管理。
Cloud Jobsを使用したバックグラウンドタスクのスケジューリング。
外部サービスを統合するためのWebhooksの使用。
簡単なデータベース管理のためのBack4App管理パネルの探索。
これらのツールと機能を使用することで、あなたのReact Nativeプロジェクトは信頼性が高くスケーラブルなフルスタックソリューションに成長できます。リアルタイムデータ、ユーザーセキュリティ、モバイルアプリケーションの他の重要な側面を扱う準備が整いました。スキルを磨き、iOSおよびAndroidプラットフォーム全体で強力なモバイル体験を作成するために、Back4Appドキュメントを引き続き探索してください。
次のステップ
React Nativeアプリを強化する 高度なセキュリティと役割ベースのアクセス制御を使用して。
リアルタイム更新を試す リアルタイムアプリケーションのためのライブクエリを使用して（必要に応じて）。
外部APIを統合する 支払いゲートウェイやソーシャルログインを含むサービス。
パフォーマンスを向上させる キャッシングやクラウド機能の最適化を通じて。
さらに深く掘り下げる Back4Appの公式ドキュメント を参照して追加機能をアンロックする。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
Xamarinのバックエンドを構築する方法は？
Objective-Cのためのバックエンドの構築方法は？