ReactアプリでのParseによる基本的なクエリ処理方法

10min
Parseを使用したReactでのクエリ
はじめに
このガイドでは、Parseで基本的なクエリを実行し、これらのクエリを使用してReactコンポーネントを実装します。Back4AppとReactを使用して、現実的なデータを設定し、クエリを実行する方法を学びます。
前提条件
このチュートリアルを完了するには、以下が必要です：
作成されたReactアプリと Back4Appに接続された.
このガイドのサンプルプロジェクトを実行したい場合は、﻿Ant Designライブラリを設定する必要があります。.
目標
ReactアプリケーションからBack4Appに保存されたデータをクエリします。
- Parse.Queryクラスの理解
すべてのParseクエリ操作は、Parse.Queryオブジェクトタイプを使用し、アプリ全体でデータベースから特定のデータを取得するのに役立ちます。Parse.Queryは、リトリーブメソッド（例えば、Parse.Query.find またはParse.Query.get）を呼び出した後にのみ解決されるため、クエリは設定され、実際に呼び出される前にいくつかの修飾子をチェーンすることができます。
新しい Parse.Query を作成するには、クエリ結果を含むサブクラスとして希望する Parse.Object をパラメータとして渡す必要があります。以下に例として、架空の Profile  サブクラスがクエリされています。
JS
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
﻿
 Parse.Query クラスについての詳細は、公式ドキュメントでこちらをご覧ください。
- Back4Appにデータを保存する
このガイドのクエリのターゲットとなる Profile  クラスを作成しましょう。Parse JS Consoleでは、JavaScriptコードを直接実行し、JS SDKコマンドを使用してアプリケーションデータベースの内容をクエリおよび更新することができます。以下のコードをJS Consoleから実行し、Back4Appにデータを挿入してください。
ダッシュボードのJSコンソールはこのように見えます:
﻿
ユーザー プロフィール クラスを以下の例の内容で作成してください:
JS
 // Add Profile objects and create table
 // Adam Sandler
 let Profile = new Parse.Object('Profile');
 Profile.set('name', 'Adam Sandler');
 Profile.set('birthDay', new Date('09/09/1966'));
 Profile.set('friendCount', 2);
 Profile.set('favoriteFoods', ['Lobster', 'Bread']);
 await Profile.save();
9
// Adam Levine
Profile = new Parse.Object('Profile');
Profile.set('name', 'Adam Levine');
Profile.set('birthDay', new Date('03/18/1979'));
Profile.set('friendCount', 52);
Profile.set('favoriteFoods', ['Cake', 'Bread']);
await Profile.save();
17
// Carson Kressley
Profile = new Parse.Object('Profile');
Profile.set('name', 'Carson Kressley');
Profile.set('birthDay', new Date('11/11/1969'));
Profile.set('friendCount', 12);
Profile.set('favoriteFoods', ['Fish', 'Cookies']);
await Profile.save();
25
// Dan Aykroyd
Profile = new Parse.Object('Profile');
Profile.set('name', 'Dan Aykroyd');
Profile.set('birthDay', new Date('07/01/1952'));
Profile.set('friendCount', 66);
Profile.set('favoriteFoods', ['Jam', 'Peanut Butter']);
await Profile.save();
33
// Eddie Murphy
Profile = new Parse.Object('Profile');
Profile.set('name', 'Eddie Murphy');
Profile.set('birthDay', new Date('04/03/1961'));
Profile.set('friendCount', 49);
Profile.set('favoriteFoods', ['Lettuce', 'Pepper']);
await Profile.save();
41
// Fergie
Profile = new Parse.Object('Profile');
Profile.set('name', 'Fergie');
Profile.set('birthDay', new Date('03/27/1975'));
Profile.set('friendCount', 55);
Profile.set('favoriteFoods', ['Lobster', 'Shrimp']);
await Profile.save();
49
console.log('Success!');
 // Add Profile objects and create table
 // Adam Sandler
 let Profile = new Parse.Object('Profile');
 Profile.set('name', 'Adam Sandler');
 Profile.set('birthDay', new Date('09/09/1966'));
 Profile.set('friendCount', 2);
 Profile.set('favoriteFoods', ['Lobster', 'Bread']);
 await Profile.save();
9
// Adam Levine
Profile = new Parse.Object('Profile');
Profile.set('name', 'Adam Levine');
Profile.set('birthDay', new Date('03/18/1979'));
Profile.set('friendCount', 52);
Profile.set('favoriteFoods', ['Cake', 'Bread']);
await Profile.save();
17
// Carson Kressley
Profile = new Parse.Object('Profile');
Profile.set('name', 'Carson Kressley');
Profile.set('birthDay', new Date('11/11/1969'));
Profile.set('friendCount', 12);
Profile.set('favoriteFoods', ['Fish', 'Cookies']);
await Profile.save();
25
// Dan Aykroyd
Profile = new Parse.Object('Profile');
Profile.set('name', 'Dan Aykroyd');
Profile.set('birthDay', new Date('07/01/1952'));
Profile.set('friendCount', 66);
Profile.set('favoriteFoods', ['Jam', 'Peanut Butter']);
await Profile.save();
33
// Eddie Murphy
Profile = new Parse.Object('Profile');
Profile.set('name', 'Eddie Murphy');
Profile.set('birthDay', new Date('04/03/1961'));
Profile.set('friendCount', 49);
Profile.set('favoriteFoods', ['Lettuce', 'Pepper']);
await Profile.save();
41
// Fergie
Profile = new Parse.Object('Profile');
Profile.set('name', 'Fergie');
Profile.set('birthDay', new Date('03/27/1975'));
Profile.set('friendCount', 55);
Profile.set('favoriteFoods', ['Lobster', 'Shrimp']);
await Profile.save();
49
console.log('Success!');
﻿
- データのクエリ
クラスが populated されたので、基本的なクエリを実行できます。まず、Profile の名前で結果をフィルタリングします。これは文字列型のフィールドで、名前 Adam を含む値を検索します。 Parse.Query.contains メソッドを使用します:
JS
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `contains` is a basic query method that checks if string field
 // contains a specific substring
 parseQuery.contains('name', 'Adam');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(result.get('name'));
};
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `contains` is a basic query method that checks if string field
 // contains a specific substring
 parseQuery.contains('name', 'Adam');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(result.get('name'));
};
﻿
次に、数値型フィールド friendCount でクエリを実行します。別の一般的なクエリメソッド Parse.Query.greaterThan を使用します。この場合、友達の数が20より大きいユーザー Profiles を取得したいと思います。
JS
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `greaterThan` is a basic query method that does what it
 // says on the tin
 parseQuery.greaterThan('friendCount', 20);
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}`);
};
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `greaterThan` is a basic query method that does what it
 // says on the tin
 parseQuery.greaterThan('friendCount', 20);
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}`);
};
﻿
他の繰り返しクエリメソッドは Parse.Query.ascending と Parse.Query.descending, クエリの順序を決定します。この順序付けはほとんどのデータ型で行うことができるので、日付フィールド birthDay を最も若い順に並べてみましょう。
JS
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `descending` and `ascending` can and should be chained
 // with other query methods to improve your queries
 parseQuery.descending('birthDay');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, birthday: ${result.get('birthDay')}`);
};
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 // `descending` and `ascending` can and should be chained
 // with other query methods to improve your queries
 parseQuery.descending('birthDay');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, birthday: ${result.get('birthDay')}`);
};
﻿
ここで以前に述べたように、クエリメソッドを連結して、より洗練された結果を得ることができます。それでは、前の例を単一のクエリリクエストに組み合わせてみましょう:
JS
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 parseQuery.contains('name', 'Adam');
 parseQuery.greaterThan('friendCount', 20);
 parseQuery.descending('birthDay');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}, birthday: ${result.get('birthDay')}`);
};
 // Create your query
 let parseQuery = new Parse.Query('Profile');
3
 parseQuery.contains('name', 'Adam');
 parseQuery.greaterThan('friendCount', 20);
 parseQuery.descending('birthDay');
7
 // The query will resolve only after calling this method, retrieving
 // an array of `Parse.Objects`
let queryResults = await parseQuery.find();
11
// Let's show the results
for (let result of queryResults) {
  // You access `Parse.Objects` attributes by using `.get`
  console.log(`name: ${result.get('name')}, friend count: ${result.get('friendCount')}, birthday: ${result.get('birthDay')}`);
};
﻿
- Reactコンポーネントからのクエリ
では、結果を表示するリストとクエリを呼び出すための4つのボタンを持つシンプルなインターフェースを持つコンポーネント内で、例のクエリを使用してみましょう。コンポーネントコードのレイアウトは次のようになります。doQuery 関数は、以前の例のコード形式を含んでいます。
JavaScript
TypeScript
import React, { useState } from 'react';
import Parse from 'parse/dist/parse.min.js';
import './App.css';
import { Button, Divider } from 'antd';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';

export const QueryBasic = () => {
 // State variable
 const [queryResults, setQueryResults] = useState();

 const doQueryByName = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `contains` is a basic query method that checks if string field
   // contains a specific substring
   parseQuery.contains('name', 'Adam');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByFriendCount = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `greaterThan` is a basic query method that does what it
   // says on the tin
   parseQuery.greaterThan('friendCount', 20);

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByOrdering = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `descending` and `ascending` can and should be chained
   // with other query methods to improve your queries
   parseQuery.descending('birthDay');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByAll = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   parseQuery.contains('name', 'Adam');
   parseQuery.greaterThan('friendCount', 20);
   parseQuery.descending('birthDay');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const clearQueryResults = async function () {
   setQueryResults(undefined);
   return true;
 };

 return (
   <div>
     <div className="header">
       <img
         className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'Basic Queries'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="heading">{'Query List'}</h2>
         <div className="flex">
           <Button
             onClick={() => doQueryByName()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY NAME
           </Button>
           <Button
             onClick={() => doQueryByFriendCount()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY FRIEND COUNT
           </Button>
           <Button
             onClick={() => doQueryByOrdering()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY ORDERING
           </Button>
           <Button
             onClick={() => doQueryByAll()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY ALL
           </Button>
           <Button
             onClick={() => clearQueryResults()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<CloseOutlined />}
           >
             CLEAR
           </Button>
         </div>
       </div>
       <Divider />
       <div className="flex_between">
         <div className="flex_child">
           {/* Query list */}
           {queryResults !== undefined &&
             queryResults.map((profile, index) => (
               <div className="list_item" key={`${index}`}>
                 <p className="list_item_title">{`${profile.get('name')}`}</p>
                 <p className="list_item_description">{`Friend count: ${profile.get(
                   'friendCount'
                 )}, Birthday: ${profile.get('birthDay')}`}</p>
               </div>
             ))}
           {queryResults !== undefined && queryResults.length <= 0 ? (
             <p>{'No results here!'}</p>
           ) : null}
         </div>
       </div>
     </div>
   </div>
 );
};
import React, { useState } from 'react';
import Parse from 'parse/dist/parse.min.js';
import './App.css';
import { Button, Divider } from 'antd';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';

export const QueryBasic = () => {
 // State variable
 const [queryResults, setQueryResults] = useState();

 const doQueryByName = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `contains` is a basic query method that checks if string field
   // contains a specific substring
   parseQuery.contains('name', 'Adam');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByFriendCount = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `greaterThan` is a basic query method that does what it
   // says on the tin
   parseQuery.greaterThan('friendCount', 20);

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByOrdering = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   // `descending` and `ascending` can and should be chained
   // with other query methods to improve your queries
   parseQuery.descending('birthDay');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryByAll = async function () {
   // Create our Parse.Query instance so methods can be chained
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Profile');

   parseQuery.contains('name', 'Adam');
   parseQuery.greaterThan('friendCount', 20);
   parseQuery.descending('birthDay');

   try {
     let profiles = await parseQuery.find();
     setQueryResults(profiles);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const clearQueryResults = async function () {
   setQueryResults(undefined);
   return true;
 };

 return (
   <div>
     <div className="header">
       <img
         className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'Basic Queries'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="heading">{'Query List'}</h2>
         <div className="flex">
           <Button
             onClick={() => doQueryByName()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY NAME
           </Button>
           <Button
             onClick={() => doQueryByFriendCount()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY FRIEND COUNT
           </Button>
           <Button
             onClick={() => doQueryByOrdering()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY ORDERING
           </Button>
           <Button
             onClick={() => doQueryByAll()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             BY ALL
           </Button>
           <Button
             onClick={() => clearQueryResults()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<CloseOutlined />}
           >
             CLEAR
           </Button>
         </div>
       </div>
       <Divider />
       <div className="flex_between">
         <div className="flex_child">
           {/* Query list */}
           {queryResults !== undefined &&
             queryResults.map((profile, index) => (
               <div className="list_item" key={`${index}`}>
                 <p className="list_item_title">{`${profile.get('name')}`}</p>
                 <p className="list_item_description">{`Friend count: ${profile.get(
                   'friendCount'
                 )}, Birthday: ${profile.get('birthDay')}`}</p>
               </div>
             ))}
           {queryResults !== undefined && queryResults.length <= 0 ? (
             <p>{'No results here!'}</p>
           ) : null}
         </div>
       </div>
     </div>
   </div>
 );
};
﻿
これらのクラスをあなたの App.css ファイルに追加して、すべてのインターフェース要素を正しくレンダリングします:
CSS
 html {
   box-sizing: border-box;
   outline: none;
   overflow: auto;
 }
6
 *,
 *:before,
 *:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
14
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
}
24
p {
 margin: 0;
}
28
body {
  margin: 0;
  background-color: #fff;
}
33
.container {
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 20px 0;
  text-align: left;
}
41
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
47
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
53
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
60
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
65
.heading {
  font-size: 22px;
}
69
.flex {
  display: flex;
}
73
.flex_between {
  display: flex;
  justify-content: space-between;
}
78
.flex_child {
  flex: 0 0 45%;
}
82
.heading_button {
  margin-left: 12px;
}
86
.list_item {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}
93
.list_item_title {
  color: rgba(0,0,0,0.87);
  font-size: 17px;
}
98
.list_item_description {
 color: rgba(0,0,0,0.5);
 font-size: 15px;
}
 html {
   box-sizing: border-box;
   outline: none;
   overflow: auto;
 }
6
 *,
 *:before,
 *:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
14
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
}
24
p {
 margin: 0;
}
28
body {
  margin: 0;
  background-color: #fff;
}
33
.container {
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 20px 0;
  text-align: left;
}
41
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
47
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
53
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
60
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
65
.heading {
  font-size: 22px;
}
69
.flex {
  display: flex;
}
73
.flex_between {
  display: flex;
  justify-content: space-between;
}
78
.flex_child {
  flex: 0 0 45%;
}
82
.heading_button {
  margin-left: 12px;
}
86
.list_item {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}
93
.list_item_title {
  color: rgba(0,0,0,0.87);
  font-size: 17px;
}
98
.list_item_description {
 color: rgba(0,0,0,0.5);
 font-size: 15px;
}
﻿
これは、すべてのクエリ関数によってレンダリングおよびクエリされた後のコンポーネントの見た目です:
﻿
結論
このガイドの最後に、Parseでの基本的なデータクエリの動作と、ReactアプリからBack4Appでそれらを実行する方法を学びました。次のガイドでは、Parse.Query このクラスで利用可能なすべてのメソッドを使用して、その完全な可能性を探ります。
ReactでのParseデータオブジェクト関係の設定とクエリ方法
Parseクエリガイド: Reactアプリでのデータ取得方法
ReactアプリでのParseによる基本的なクエリ処理方法

Parseを使用したReactでのクエリ

はじめに

前提条件

目標

1 - Parse.Queryクラスの理解

2 - Back4Appにデータを保存する

3 - データのクエリ

4 - Reactコンポーネントからのクエリ

結論
