ReactでのCRUD操作入門: Parseを使用したデータ管理

10min
React CRUD チュートリアル
はじめに
Parse にデータを保存することは、Parse.Object クラスを中心に構築されています。各 Parse.Object には、JSON 互換のデータのキーと値のペアが含まれています。このデータはスキーマレスであり、各 Parse.Object にどのキーが存在するかを事前に指定する必要はありません。必要なキーと値のペアを設定するだけで、バックエンドがそれを保存します。
アプリケーションのニーズに応じてデータ型を指定し、次のようなタイプを永続化することもできます。数値, ブール値, 文字列, 日付時刻, リスト, GeoPointers, そして オブジェクトとして、保存する前に JSON にエンコードします。Parse はまた、ポインタ と リレーション を使用して、リレーショナルデータを保存およびクエリすることをサポートしています。
このガイドでは、CRUD の例アプリを通じて基本的なデータ操作を実行する方法を学びます。これにより、React で Parse サーバーデータベースからデータを作成、読み取り、更新、削除する方法が示されます。最初に、各 CRUD 操作のためのコンポーネント関数を作成し、後で完全な画面レイアウトで使用し、最終的に To-Do リストアプリを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です：
作成されたReactアプリと Back4Appに接続された﻿
このガイドで提供される画面レイアウトをテスト/使用したい場合は、次のものを設定する必要があります：Ant Design ライブラリ.
目標
Parseを使用してReactで基本的なCRUDアプリケーションを構築すること。
- データオブジェクトの作成
Parseデータベースでデータを管理する最初のステップは、データを持つことです。では、次に新しいインスタンスを作成する createTodo 関数を作成しましょう。この関数は “Todo” サブクラスを持つ Parse.Objectの新しいインスタンスを作成します。To-doには、タスクを説明するタイトル（string）と、タスクが完了しているかどうかを示すdone（boolean）フィールドがあります。
JavaScript
TypeScript
 const createTodo = async function () {
   // This value comes from a state variable
   const newTodoTitleValue = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the to-do values, save it on the server
   try {
    await Todo.save();
    // Success
    alert('Success! To-do created!');
    // Refresh to-dos list to show the new one (you will create this function later)
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const createTodo = async function () {
   // This value comes from a state variable
   const newTodoTitleValue = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the to-do values, save it on the server
   try {
    await Todo.save();
    // Success
    alert('Success! To-do created!');
    // Refresh to-dos list to show the new one (you will create this function later)
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
データベースに Todo テーブル（またはサブクラス）がまだ存在しない場合、Parseは自動的にそれを作成し、また Parse.Object インスタンス内で設定された任意の列を追加します。これは Parse.Object.set() メソッドを使用し、2つの引数を取ります：フィールド名と設定する値です。
- データオブジェクトの読み取り
データベースにいくつかのデータを作成した後、アプリケーションはサーバーからそれを読み取り、ユーザーに表示できるようになります。続けて、readTodos関数を作成してください。この関数は、Parse.Queryを実行し、結果を状態変数に格納します。
JavaScript
TypeScript
 const readTodos = async function () {
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Todo');
   try {
     let todos = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const readTodos = async function () {
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Todo');
   try {
     let todos = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
多くの制約と順序を使用してクエリに適用できますが、Parse.Queryクラスを使用して、今のところはこのシンプルなクエリに留まります。これは保存されたすべてのTodoオブジェクトを取得します。
- データオブジェクトの更新
インスタンスを更新することは、新しいインスタンスを作成することに非常に似ていますが、この場合、以前に作成した Parse.Object を割り当ててから、新しい値を設定した後に保存する必要があります。
JavaScript
TypeScript
 const updateTodo = async function (todoId, done) {
   // Create a new Todo parse object instance and set todo id
   let Todo = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
    alert('Success! To-do updated!');
    // Refresh to-dos list
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const updateTodo = async function (todoId, done) {
   // Create a new Todo parse object instance and set todo id
   let Todo = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
    alert('Success! To-do updated!');
    // Refresh to-dos list
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
この例のアプリはタスクリストを表しているので、あなたの更新関数は追加の引数、すなわち 完了 値を取ります。これは特定のタスクが完了しているかどうかを表します。
- データオブジェクトの削除
データオブジェクトを削除するには、 .destroy() メソッドをそのオブジェクトを表す Parse.Object インスタンスで呼び出す必要があります。この操作は元に戻せないので注意してください。
JavaScript
TypeScript
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new Todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   alert('Success! To-do deleted!');
   // Refresh to-dos list to remove this one
   readTodos();
   return true;
 } catch (error: any) {
   // Error can be caused by lack of Internet connection
   alert(`Error! ${error.message}`);
   return false;
 };
};
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new Todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   alert('Success! To-do deleted!');
   // Refresh to-dos list to remove this one
   readTodos();
   return true;
 } catch (error: any) {
   // Error can be caused by lack of Internet connection
   alert(`Error! ${error.message}`);
   return false;
 };
};
﻿
これで、これらの4つの関数を完全なコンポーネントで使用して、テストし、すべてのCRUD操作が正しく機能していることを確認できます。
- ReactコンポーネントでのCRUDの使用
ここに、スタイル付きユーザーインターフェース要素（Ant Designを使用）、状態変数、およびCRUD関数への呼び出しを含む完全なコンポーネントコードがあります。 TodoList.js/TodoList.tsxというファイルに別のコンポーネントを作成する必要があります。あなたの src ディレクトリに次のコードを含めるか、直接メインアプリケーションファイル（App.js/App.tsx）に追加してください。
TodoList.js
TodoList.tsx
 import React, { useState, FC, ReactElement } from 'react';
 import './App.css';
 import { Button, Input, List } from 'antd';
 import {
   CheckOutlined,
   CloseOutlined,
   PlusOutlined,
   RedoOutlined,
 } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');
11
export const TodoList: FC<{}> = (): ReactElement => {
  // State variables
  const initialReadResults: Parse.Object[] = [];
  const [readResults, setReadResults] = useState(initialReadResults);
  const [newTodoTitle, setNewTodoTitle] = useState('');
17
  // Functions used by the screen components
  const createTodo = async function (): Promise<boolean> {
    // This value comes from a state variable
    const newTodoTitleValue: string = newTodoTitle;
    // Creates a new Todo parse object instance
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('title', newTodoTitleValue);
    Todo.set('done', false);
    // After setting the to-do values, save it on the server
    try {
      await Todo.save();
      // Success
      alert('Success! To-do created!');
      // Refresh to-dos list to show the new one (you will create this function later)
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
40
  const readTodos = async function (): Promise<boolean> {
    // Reading parse objects is done by using Parse.Query
    const parseQuery: Parse.Query = new Parse.Query('Todo');
    try {
      let todos: Parse.Object[] = await parseQuery.find();
      // Be aware that empty or invalid queries return as an empty array
      // Set results to state variable
      setReadResults(todos);
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
56
  const updateTodo = async function (todoId: string, done: boolean): Promise<boolean> {
    // Create a new to-do parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // Set new done value and save Parse Object changes
    Todo.set('done', done);
    try {
      await Todo.save();
      // Success
      alert('Success! To-do updated!');
      // Refresh todos list
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
76
  const deleteTodo = async function (todoId: string): Promise<boolean> {
    // Create a new Todo parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // .destroy should be called to delete a parse object
    try {
      await Todo.destroy();
      alert('Success! To-do deleted!');
      // Refresh to-dos list to remove this one
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
94
  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">{'To-do List'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="list_heading">Todo List</h2>
         {/* To-do read (refresh) button */}
         <Button
           type="primary"
           shape="circle"
           color={'#208AEC'}
           onClick={readTodos}
           icon={<RedoOutlined />}
         ></Button>
       </div>
       <div className="new_todo_wrapper flex_between">
         {/* Todo create text input */}
         <Input
           value={newTodoTitle}
           onChange={(event: {target: {value: string}}) => setNewTodoTitle(event.target.value)}
           placeholder="New Todo"
           size="large"
         />
         {/* Todo create button */}
         <Button
           type="primary"
           className="create_todo_button"
           color={'#208AEC'}
           size={'large'}
           onClick={createTodo}
           icon={<PlusOutlined />}
         >
           Add
         </Button>
       </div>
       <div>
         {/* Todo read results list */}
         {readResults !== null &&
           readResults !== undefined &&
           readResults.length > 0 && (
             <List
               dataSource={readResults}
               renderItem={(item: Parse.Object) => (
                 <List.Item className="todo_item">
                   <p
                     className={
                       item.get('done') === true
                         ? 'todo_text_done'
                         : 'todo_text'
                     }
                   >
                     {item.get('title')}
                   </p>
                   <div className="flex_row">
                     {/* Todo update button */}
                     {item.get('done') !== true && (
                       <Button
                         type="primary"
                         shape="circle"
                         className="todo_button"
                         onClick={() => updateTodo(item.id, true)}
                         icon={
                           <CheckOutlined className="todo_button_icon_done" />
                         }
                       ></Button>
                     )}
                     {/* Todo delete button */}
                     <Button
                       type="primary"
                       shape="circle"
                       className="todo_button"
                       onClick={() => deleteTodo(item.id)}
                       icon={
                         <CloseOutlined className="todo_button_icon_remove" />
                       }
                     ></Button>
                   </div>
                 </List.Item>
               )}
             />
           )}
       </div>
     </div>
   </div>
 );
};
 import React, { useState, FC, ReactElement } from 'react';
 import './App.css';
 import { Button, Input, List } from 'antd';
 import {
   CheckOutlined,
   CloseOutlined,
   PlusOutlined,
   RedoOutlined,
 } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');
11
export const TodoList: FC<{}> = (): ReactElement => {
  // State variables
  const initialReadResults: Parse.Object[] = [];
  const [readResults, setReadResults] = useState(initialReadResults);
  const [newTodoTitle, setNewTodoTitle] = useState('');
17
  // Functions used by the screen components
  const createTodo = async function (): Promise<boolean> {
    // This value comes from a state variable
    const newTodoTitleValue: string = newTodoTitle;
    // Creates a new Todo parse object instance
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('title', newTodoTitleValue);
    Todo.set('done', false);
    // After setting the to-do values, save it on the server
    try {
      await Todo.save();
      // Success
      alert('Success! To-do created!');
      // Refresh to-dos list to show the new one (you will create this function later)
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
40
  const readTodos = async function (): Promise<boolean> {
    // Reading parse objects is done by using Parse.Query
    const parseQuery: Parse.Query = new Parse.Query('Todo');
    try {
      let todos: Parse.Object[] = await parseQuery.find();
      // Be aware that empty or invalid queries return as an empty array
      // Set results to state variable
      setReadResults(todos);
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
56
  const updateTodo = async function (todoId: string, done: boolean): Promise<boolean> {
    // Create a new to-do parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // Set new done value and save Parse Object changes
    Todo.set('done', done);
    try {
      await Todo.save();
      // Success
      alert('Success! To-do updated!');
      // Refresh todos list
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
76
  const deleteTodo = async function (todoId: string): Promise<boolean> {
    // Create a new Todo parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // .destroy should be called to delete a parse object
    try {
      await Todo.destroy();
      alert('Success! To-do deleted!');
      // Refresh to-dos list to remove this one
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
94
  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">{'To-do List'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="list_heading">Todo List</h2>
         {/* To-do read (refresh) button */}
         <Button
           type="primary"
           shape="circle"
           color={'#208AEC'}
           onClick={readTodos}
           icon={<RedoOutlined />}
         ></Button>
       </div>
       <div className="new_todo_wrapper flex_between">
         {/* Todo create text input */}
         <Input
           value={newTodoTitle}
           onChange={(event: {target: {value: string}}) => setNewTodoTitle(event.target.value)}
           placeholder="New Todo"
           size="large"
         />
         {/* Todo create button */}
         <Button
           type="primary"
           className="create_todo_button"
           color={'#208AEC'}
           size={'large'}
           onClick={createTodo}
           icon={<PlusOutlined />}
         >
           Add
         </Button>
       </div>
       <div>
         {/* Todo read results list */}
         {readResults !== null &&
           readResults !== undefined &&
           readResults.length > 0 && (
             <List
               dataSource={readResults}
               renderItem={(item: Parse.Object) => (
                 <List.Item className="todo_item">
                   <p
                     className={
                       item.get('done') === true
                         ? 'todo_text_done'
                         : 'todo_text'
                     }
                   >
                     {item.get('title')}
                   </p>
                   <div className="flex_row">
                     {/* Todo update button */}
                     {item.get('done') !== true && (
                       <Button
                         type="primary"
                         shape="circle"
                         className="todo_button"
                         onClick={() => updateTodo(item.id, true)}
                         icon={
                           <CheckOutlined className="todo_button_icon_done" />
                         }
                       ></Button>
                     )}
                     {/* Todo delete button */}
                     <Button
                       type="primary"
                       shape="circle"
                       className="todo_button"
                       onClick={() => deleteTodo(item.id)}
                       icon={
                         <CloseOutlined className="todo_button_icon_remove" />
                       }
                     ></Button>
                   </div>
                 </List.Item>
               )}
             />
           )}
       </div>
     </div>
   </div>
 );
};
﻿
また、これらのCSSスタイルをあなたの App.css ファイルの最後に追加してください:
CSS
 /* ... */
 /* Your other styles */
3
 /* Back4App Guide Styles */
5
 html {
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
11
*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}
19
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
28
p {
  margin: 0;
}
32
body {
 margin: 0;
 background-color: #fff;
}
37
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}
44
.wrapper {
  width: '90%';
  align-self: 'center';
}
49
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
61
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
68
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}
77
.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.list_heading {
  font-weight: bold;
}
87
.new_todo_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
92
.new_todo_wrapper > input {
  margin-right: 20px;
}
96
.todo_item {
  border-bottom-width: 1;
  border-bottom-color: 'rgba(0, 0, 0, 0.12)';
}
101
.todo_text {
  font-size: 15px;
}
105
.todo_text_done {
  color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
  text-decoration-line: line-through;
}
111
.todo_button {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  background-color: transparent;
  border-radius: 50px;
  border: none;
  cursor: pointer;
}
121
.todo_button:hover,
.todo_button:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
126
.todo_button_icon_done {
  color: #52c41a;
  font-size: 16px;
}
131
.todo_button_icon_remove {
  color: #f5222d;
  font-size: 16px;
}
 /* ... */
 /* Your other styles */
3
 /* Back4App Guide Styles */
5
 html {
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
11
*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}
19
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
28
p {
  margin: 0;
}
32
body {
 margin: 0;
 background-color: #fff;
}
37
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}
44
.wrapper {
  width: '90%';
  align-self: 'center';
}
49
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
61
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
68
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}
77
.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.list_heading {
  font-weight: bold;
}
87
.new_todo_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
92
.new_todo_wrapper > input {
  margin-right: 20px;
}
96
.todo_item {
  border-bottom-width: 1;
  border-bottom-color: 'rgba(0, 0, 0, 0.12)';
}
101
.todo_text {
  font-size: 15px;
}
105
.todo_text_done {
  color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
  text-decoration-line: line-through;
}
111
.todo_button {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  background-color: transparent;
  border-radius: 50px;
  border: none;
  cursor: pointer;
}
121
.todo_button:hover,
.todo_button:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
126
.todo_button_icon_done {
  color: #52c41a;
  font-size: 16px;
}
131
.todo_button_icon_remove {
  color: #f5222d;
  font-size: 16px;
}
﻿
コンポーネントが正しく設定されていれば、アプリを実行した後にこのようなものが表示されるはずです:
﻿
さあ、入力ボックスにタイトルを1つずつ入力して「追加 」ボタンを押して、いくつかのタスクを追加しましょう。すべての作成が成功した後、createTodo 関数がreadTodos 関数をトリガーし、タスクリストが自動的に更新されます。これで、次のような大きなタスクリストができているはずです:
﻿
タスクの横にあるチェックマークをクリックすることで、タスクを完了としてマークできます。これにより、タスクの完了 値がtrueに更新され、左側のアイコンの状態が変更されます。
﻿
残るデータ操作は削除のみで、これはタスクリストオブジェクトの最右にあるゴミ箱アイコンを押すことで行えます。オブジェクトを正常に削除した後、次のようなアラートメッセージが表示されるはずです:
﻿
結論
このガイドの最後に、ReactでParseの基本的なデータ操作（CRUD）を実行する方法を学びました。次のガイドでは、Parseでサポートされているデータ型とその使用方法を示します。
ReactでのParse Server SDK統合とAPIコールガイド
React におけるデータ型とデータ変換の実践ガイド
ReactでのCRUD操作入門: Parseを使用したデータ管理

React CRUD チュートリアル

はじめに

前提条件

目標

1 - データオブジェクトの作成

2 - データオブジェクトの読み取り

3 - データオブジェクトの更新

4 - データオブジェクトの削除

5 - ReactコンポーネントでのCRUDの使用

結論
