Quickstarters
ReactJSでCRUDアプリを作成する方法は？

39min
はじめに
このチュートリアルでは、ReactJSを使用して包括的なCRUD（作成、読み取り、更新、削除）アプリケーションを構築します。
このガイドは、CRUDアプリを構築する方法を示すことで、ソフトウェアアプリケーションの基本操作を実行するように設計されています。これにより、データを効果的に管理および更新できます。
まず、Basic-CRUD-App-ReactJSという名前のBack4appプロジェクトを作成し、構成します。これは、ウェブアプリケーションのための堅牢なバックエンドシステムとして機能します。
次に、詳細なコレクションとフィールドを定義することで、スケーラブルなデータベーススキーマを設計します。これは手動で行うことも、Back4app AIエージェントの助けを借りることもできます。
その後、Back4app Admin Appを活用します。これは、ドラッグアンドドロップインターフェースを持つユーザーフレンドリーな管理ツールで、コレクションのデータ管理を簡単に行えます。
この管理インターフェースはユーザーエクスペリエンスを向上させ、ユーザーインターフェースを簡素化し、ユーザーが迅速にCRUD操作を実行できるようにします。
最後に、ReactJSフロントエンドをデプロイし、REST/GraphQL（または利用可能な場合はParse SDK）を使用してBack4appと統合します。その際、先進的なアクセス制御でバックエンドを保護します。
このガイドの終わりまでに、基本的なCRUD操作をサポートするだけでなく、ユーザー認証と堅牢なデータ更新機能を含む、プロダクション準備が整ったWebアプリケーションを構築できるようになります。
主なポイント
信頼性の高いデータベース管理システムを使用して、データを効率的に管理するCRUDアプリケーションの構築方法を学びます。
スケーラブルなバックエンドの設計と、それをReactJSフロントエンドと統合してユーザーエクスペリエンスを向上させるための実践的な洞察を得ます。
ドラッグアンドドロップ管理ツール（Back4app Admin App）を使用して、作成、読み取り、更新、削除操作を簡素化する方法を発見します。
Dockerコンテナ化を含むデプロイメント技術を理解し、Webアプリケーションを迅速に立ち上げる方法を学びます。
﻿
前提条件
始める前に、以下のものを用意してください:
Back4appアカウントと新しいプロジェクトの設定。
ヘルプが必要な場合は、 Back4appの始め方 を参照してください。
ReactJS開発環境。
 Create React App または同様のツールを使用してください。Node.js（バージョン14以上）がインストールされていることを確認してください。
JavaScript、ReactJS、およびREST APIの基本的な理解。
必要に応じて、ReactJSのドキュメントを確認してください。
﻿
ステップ1 – プロジェクトのセットアップ
新しいBack4appプロジェクトの作成
Back4appアカウントにログインします。
ダッシュボードの「新しいアプリ」ボタンをクリックします。
プロジェクト名を入力します： Basic-CRUD-App-ReactJS とプロンプトに従ってプロジェクトを作成します。
新しいプロジェクトを作成
﻿
作成が完了すると、新しいプロジェクトがBack4appダッシュボードに表示され、バックエンドの設定とプロジェクト管理のための堅固な基盤を提供します。
﻿
ステップ2 – データベーススキーマ設計
データモデルの設計
基本的なCRUDアプリのために、いくつかのコレクションを作成します。
以下は、データベーススキーマを効果的に設定するために必要なフィールドとデータ型を概説したコレクションのいくつかの例です。
これらのコレクションは、ユーザーがデータを作成、読み取り、更新、削除できる基本的なCRUD操作を実行するように設計されています。
1. アイテムコレクション
このコレクションは、各アイテムに関する情報を保存します。
フィールド
データ型
説明
_id
オブジェクトID
自動生成された主キー。
タイトル
文字列
アイテムのタイトル。
説明
文字列
アイテムの簡単な説明。
作成日時
日付
アイテムが作成されたタイムスタンプ。
更新日時
日付
アイテムが最後に更新されたタイムスタンプ。
2. ユーザーコレクション
このコレクションはユーザー情報と認証の詳細を保存します。
フィールド
データ型
説明
_id
オブジェクトID
自動生成された主キー。
ユーザー名
文字列
ユーザーのためのユニークなユーザー名。
メール
文字列
ユニークなメールアドレス。
パスワードハッシュ
文字列
認証のためのハッシュ化されたパスワード。
作成日時
日付
ユーザーアカウントが作成されたタイムスタンプ。
更新日時
日付
ユーザーアカウントが更新されたタイムスタンプ。
これらのコレクションは、Back4appダッシュボードで手動で設定できます。各コレクションの新しいクラスを作成し、フィールドを定義するための列を追加します。
新しいクラスを作成
﻿
データ型を選択し、フィールドに名前を付け、デフォルト値を設定し、必須かどうかを定義することで、データベースのフィールドを簡単に作成できます。
カラムを作成
﻿
﻿
Back4app AIエージェントを使用したスキーマ生成
Back4app AIエージェントは、あなたのBack4appダッシュボードから直接利用できる強力なツールです。
プロンプトに基づいて、希望するコレクションとフィールドを説明することで、データベーススキーマを自動的に生成することができます。
この機能はプロジェクト管理において大幅な時間の節約となり、データベース管理システムがウェブアプリケーションに必要な基本操作を実行できるように設定されていることを保証します。
AIエージェントの使い方:
AIエージェントを開く:
Back4appダッシュボードにログインし、メニューまたはプロジェクト設定内でAIエージェントを見つけます。
データモデルを説明する:
AIエージェントのインターフェースに、必要なコレクションとフィールドを概説する詳細なプロンプトを貼り付けます。
レビューと適用:
送信後、AIエージェントがコレクションとフィールド定義を生成します。これらの提案をレビューし、プロジェクトに適用します。
例のプロンプト
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
このようにAIエージェントを使用することで、時間を節約し、スキーマが一貫しており、アプリケーションのニーズに最適化されていることを保証します。
﻿
ステップ 3 – 管理アプリの有効化とCRUD操作
管理アプリの概要
Back4app管理アプリは、バックエンドデータを管理するための強力なノーコードインターフェースです。
この管理ツールは、ユーザーがレコードの作成、読み取り、更新、削除などのCRUD操作を簡単に実行できるドラッグアンドドロップのユーザーインターフェースを提供します。
管理アプリの有効化
「その他」メニューに移動 あなたのBack4appダッシュボードで。
「管理アプリ」をクリック そして次に 「管理アプリを有効にする」。
管理者の資格情報を設定 最初の管理者ユーザーを作成することで。このプロセスでは、役割（例：B4aAdminUser) とシステムコレクションも設定されます。
管理アプリを有効にする
﻿
有効化後、データを管理するために管理アプリにログインします。
管理アプリダッシュボード
﻿
管理アプリを使用したCRUD操作
管理アプリ内でできること:
レコードの作成: コレクション内の「レコードを追加」ボタンをクリックして、新しいエントリを作成します。
レコードの読み取り/更新: 任意のレコードを選択して、その詳細を表示したり、フィールドを編集して、スムーズなデータ更新を確保します。
レコードの削除: 削除オプションを使用して、もはや必要のないレコードを削除します。
この使いやすい管理ツールは、CRUD機能のためのシンプルなドラッグアンドドロップインターフェースを提供することで、全体的なユーザーエクスペリエンスを向上させます。
﻿
ステップ4 – ReactJSとBack4appの統合
バックエンドが設定され、管理アプリを通じて管理されているので、ReactJSフロントエンドをBack4appに接続する時が来ました。
オプションA: Parse SDKの使用
Parse SDKをインストールする:
Bash
npm install parse
npm install parse
﻿
ReactアプリでParseを初期化する:
ファイルを作成します（例: src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// 実際のBack4appの認証情報に置き換えてください
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// 実際のBack4appの認証情報に置き換えてください
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
ReactコンポーネントでParseを使用する:
例えば、アイテムを取得して表示するコンポーネントを作成します:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("アイテムの取得中にエラーが発生しました:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>アイテム</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("アイテムの取得中にエラーが発生しました:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>アイテム</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
オプションB: RESTまたはGraphQLの使用
環境がParse SDKをサポートしていない場合、RESTまたはGraphQLを使用してCRUD操作を実行できます。例えば、RESTを使用してアイテムを取得するには:
JS
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
必要に応じて、これらのAPI呼び出しをReactコンポーネントに統合してください。
﻿
ステップ 5 – バックエンドのセキュリティ
アクセス制御リスト (ACL)
オブジェクトにACLを割り当ててデータを保護します。たとえば、プライベートアイテムを作成するには:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
クラスレベルの権限 (CLP)
Back4appダッシュボードで、各コレクションのCLPを設定してデフォルトのアクセスルールを設定します。これにより、認証されたユーザーまたは権限のあるユーザーのみが機密データにアクセスできるようになります。
﻿
ステップ6 – ユーザー認証
ユーザーアカウントの設定
Back4appはParseのUserクラスを認証に利用します。あなたのReactアプリでは、ユーザー登録とログインを次のように処理します:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
ログインとセッション管理にも同様のアプローチを使用できます。ソーシャルログイン、メール確認、パスワードリセットなどの追加機能は、Back4appダッシュボードで設定できます。
﻿
ステップ7 – Webデプロイメントを使用したReactJSフロントエンドのデプロイ
Back4appのWebデプロイメント機能を使用すると、GitHubリポジトリからコードをデプロイすることで、ReactJSフロントエンドをシームレスにホストできます。
このセクションでは、プロダクションビルドの準備、ソースコードをGitHubにコミットする方法、リポジトリをWebデプロイメントに統合する方法、サイトをデプロイする方法を学びます。
7.1 プロダクションビルドの準備
ターミナルでプロジェクトフォルダを開きます。
ビルドコマンドを実行します:
Bash
npm run build
npm run build
﻿
このコマンドは、すべての最適化された静的ファイル（index.html, JavaScript, CSS, および画像を含む）を含む build フォルダを作成します。
ビルドを確認します:
 build フォルダに必要なアセットのサブディレクトリとともに index.html ファイルが含まれていることを確認してください。
﻿
7.2 ソースコードを整理してアップロードする
リポジトリには、ReactJSフロントエンドの完全なソースコードが含まれている必要があります。典型的なファイル構造は次のようになります:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
サンプルソースコードファイル
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
ソースファイルを追加します：
Bash
git add .
git add .
﻿
変更をコミットします：
Bash
git commit -m "ReactJSフロントエンドソースコードの初回コミット"
git commit -m "ReactJSフロントエンドソースコードの初回コミット"
﻿
GitHubリポジトリを作成します：
例えば、GitHubに Basic-CRUD-App-ReactJS-Frontend という名前のリポジトリを作成します。
コードをGitHubにプッシュします：
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHubリポジトリをWebデプロイメントに統合する
Webデプロイメントにアクセスする：
Back4appダッシュボードにログインし、プロジェクト（Basic-CRUD-App-ReactJS）に移動して、Webデプロイメント機能をクリックします。
GitHubに接続する：
まだ行っていない場合は、画面の指示に従ってGitHubアカウントを統合します。この接続により、Back4appがあなたのリポジトリにアクセスできるようになります。
リポジトリとブランチを選択する：
作成したリポジトリ（例：Basic-CRUD-App-ReactJS-Frontend）を選択し、ReactJSコードを含むブランチ（例：main）を選択します。
﻿
7.4 デプロイメントの設定
追加の設定詳細を提供してください:
ビルドコマンド:
リポジトリに事前にビルドされた build フォルダーが含まれていない場合は、ビルドコマンドを指定してください（例: npm run build)。Back4appはデプロイ中にこのコマンドを実行します。
出力ディレクトリ:
出力ディレクトリを build に設定して、Back4appが静的サイトファイルを含むフォルダーを認識できるようにします。
環境変数:
アプリケーションが環境変数（例: APIキー）に依存している場合は、設定で追加してください。
﻿
7.5 ReactJSアプリケーションプロジェクトのDocker化
デプロイメントにDockerを使用することを好む場合は、ReactJSアプリケーションをコンテナ化できます。次のような内容の Dockerfile をリポジトリに含めてください:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
この Dockerfile をリポジトリに含めてください。次に、Webデプロイメントの設定で、Dockerデプロイメントオプションを選択して、コンテナ化されたアプリケーションをビルドおよびデプロイします。
﻿
7.6 アプリケーションをデプロイする
デプロイボタンをクリックする:
デプロイ設定を構成したら、 デプロイ ボタンをクリックします。
ビルドプロセスを監視する:
Back4appはGitHubからコードを取得し、ビルドコマンドを実行し（設定されている場合）、コンテナ内にアプリをデプロイします。
URLを取得する:
デプロイが完了すると、Back4appはReactJSアプリケーションがホストされているURLを提供します。
﻿
7.7 デプロイを確認する
提供されたURLにアクセスする:
ウェブブラウザでURLを開いて、デプロイされたサイトを表示します。
アプリケーションをテストする:
アプリケーションが正しく読み込まれ、すべてのルートが期待通りに機能し、すべてのアセット（CSS、JavaScript、画像）が適切に提供されていることを確認します。
必要に応じてトラブルシューティングする:
ブラウザの開発者ツールを使用してエラーを確認します。問題が発生した場合は、Back4appのデプロイメントログを確認し、GitHubの統合とビルド設定を確認します。
﻿
ステップ8 – 結論と次のステップ
おめでとうございます！あなたはReactJSとBack4appを使用して完全な基本CRUDアプリを構築しました。
「Basic-CRUD-App-ReactJS」というプロジェクトを設定し、アイテムとユーザーのための詳細なデータベースコレクションを設計し、強力な管理アプリを通じてデータを管理しました。
また、ReactJSのフロントエンドをバックエンドと統合し、堅牢なアクセス制御でデータを保護しました。
次のステップ：
フロントエンドを強化する：
詳細なアイテムビュー、検索機能、リアルタイム通知などの機能を追加して、ReactJSアプリを拡張します。
追加機能を統合する：
より高度なバックエンドロジック（例：クラウドファンクション）、サードパーティAPI統合、または役割ベースのアクセス制御を追加することを検討してください。
さらなるリソースを探る：
「Back4appのドキュメント」や、パフォーマンス最適化やカスタム統合に関するより深いチュートリアルをレビューしてください。
このチュートリアルに従うことで、Back4appを使用してReactJSアプリケーションのための堅牢でスケーラブルなCRUDバックエンドを作成するスキルを身につけました。コーディングを楽しんでください！
フィールド	データ型	説明
_id	オブジェクトID	自動生成された主キー。
タイトル	文字列	アイテムのタイトル。
説明	文字列	アイテムの簡単な説明。
作成日時	日付	アイテムが作成されたタイムスタンプ。
更新日時	日付	アイテムが最後に更新されたタイムスタンプ。
フィールド	データ型	説明
_id	オブジェクトID	自動生成された主キー。
ユーザー名	文字列	ユーザーのためのユニークなユーザー名。
メール	文字列	ユニークなメールアドレス。
パスワードハッシュ	文字列	認証のためのハッシュ化されたパスワード。
作成日時	日付	ユーザーアカウントが作成されたタイムスタンプ。
更新日時	日付	ユーザーアカウントが更新されたタイムスタンプ。
更新日 12 Feb 2025
このページは役に立ちましたか？
Back4app チュートリアル
Blazorのバックエンドを構築する方法?