---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/task-manager/nodejs/introduction/
description: "タスクの作成・管理が可能なReact製タスクマネージャーアプリを構築します。タスクに対してCRUD操作やフィルター機能を実行できます。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "NoSQL Table Keys"
    url: /ja/cloud-scale/help/nosql/components/#table-keys
  - name: "NoSQL SDK"
    url: /ja/sdk/nodejs/v2/cloud-scale/nosql/get-component-instance/
  - name: "NoSQL API"
    url: /ja/api/code-reference/cloud-scale/nosql/insert-item/#InsertNewItem
---

# Task Managerアプリ

### はじめに

このチュートリアルでは、**Task Manager**というReact Webアプリケーションの構築方法を解説します。このアプリケーションでは、以下の機能を実行できます：

* タスクの作成
* 作成した各タスクへのステータスの割り当て
* タスクのフィルタリング
* 作成済みタスクの更新
* 不要になったタスクの削除

アプリケーションのクライアント側は以下のようになります：

![catalyst_tutorials_nosql_taskmanager_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/task-manager/catalyst_tutorials_nosql_taskmanager_first_look.webp)

このアプリケーションのロジックは、以下のCatalystサービスおよびそのコンポーネントを使用してコーディングされています：

1. [Catalyst Serverless](https://docs.catalyst.zoho.com/ja/serverless/)：
    * [Advanced IO Function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io/)：Node.js環境でアプリケーションのバックエンドロジックをコーディングします。

2. [Catalyst CloudScale](https://docs.catalyst.zoho.com/ja/cloud-scale/)：
    * [NoSQL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/nosql/introduction/)：JSONまたはJSON配列として渡される非構造化データまたは半構造化データを格納します。
    * [Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)：アプリケーションのフロントエンドをReact Webアプリとしてホスティングします。

[Catalyst Webコンソール](https://console.catalyst.zoho.com/)と[Catalyst Command Line Interface](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用してアプリケーションを構築します。

> **Note:** このチュートリアルでは、ファンクションおよびクライアントコンポーネントに含めるファイルのコードが提供されます。提供されたコードをコピーし、指示に従って適切なファイルに貼り付けてください。

### 主要コンセプト

アプリケーションの構築に入る前に、以下のNoSQLテーブルキーについて理解しておくことが重要です：

* **Partition Key**：このキーは必須属性であり、分散NoSQLテーブル内でデータがどのように、どこに格納されるかを定義します。

* **Sort Key**：このキーは通常オプションの属性であり、同じPartition Keyを共有する必要なデータを参照する際に役立ちます。

たとえば、果物に関するデータを含むNoSQLテーブルがある場合、*果物*自体が**Partition Key**となり、その特定の*品種*が**Sort Key**となります。

<table class="content-table">
	<thead>
		<tr>
			<th class="w30p">Fruit (Partition Key)</th>
			<th class="w30p">Variety (Sort Key)</th>
      <th class="w30p">Color (Index)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>Royal Gala</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Apple</td>
			<td>Fuji</td>
      <td>Red</td>
    </tr>
    <tr>
			<td>Banana</td>
			<td>Cavendish</td>
      <td>Yellow</td>
		</tr>
    <tr>
			<td>Banana</td>
			<td>Red Dacca</td>
      <td>Red</td>
		</tr>
	</tbody>
</table>

> **Info:**: [NoSQLテーブルキーの詳細はこちら](https://docs.catalyst.zoho.com/ja/cloud-scale/help/nosql/components/#table-keys)。

### アプリケーションワークフロー

アプリケーションのワークフローは以下の通りです：

* クライアントに表示される入力フィールドに値を入力してタスクを作成します。`UserID`が**Partition Key**として、`Task Name`が**Sort Key**として機能します。

* タスクが作成されると、非構造化データがNoSQLストレージコンポーネントに格納されます。

* 作成済みタスクをフィルタリングでき、`UserID`（**Partition Key**）と`Task Name`（**Sort Key**）を使用して必要なタスクが参照されます。

* 作成済みタスクに対して**Edit**および**Delete**操作を実行することもできます。データの変更はNoSQLコンポーネントに反映されます。

* 最後に、ReactアプリケーションはWeb Client Hostingコンポーネントを使用してCatalyst上にホスティングされます。