---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/todo-list/java/introduction/
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、Basic、React、またはAngularのTo-Doリストウェブアプリケーションを構築します。タスクの記録と完了後の削除が可能です。"
last_updated: 2026-11-03T07:48:52Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Java SDK"
    url: /ja/sdk/java/v1/overview/
  - name: "Node.js SDK"
    url: /ja/sdk/nodejs/v2/overview/
  - name: "Python SDK"
    url: /ja/sdk/python/v1/overview/
---

# To-Do List アプリケーション

### はじめに

このチュートリアルでは、CatalystでシンプルなシングルページのTo-DoリストWebアプリケーションを構築する方法を説明します。このアプリケーションでは、ユーザーが実行すべきタスクを記録し、完了後に削除できます。

クライアントアプリケーションは以下のように表示されます：

![todolist_sample](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/todolist_sample.webp)

各タイプの動作アプリケーションにアクセスして、その機能をテストできます：
* **[Basic ウェブアプリ](https://to-do-basic.catalystserverlessapp.com/app/)**
* **[React ウェブアプリ](https://to-do-react.catalystserverlessapp.com/app/)**
* **[Angular ウェブアプリ](https://to-do-angular.catalystserverlessapp.com/app/)**

To-Doリストアプリケーションには、以下の基本的なCatalystコンポーネントが含まれています：

[**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/):

* **[**Advanced I/O Function**](https://docs.catalyst.zoho.com/ja/serverless/help/functions/introduction)**: Advanced I/O functionは、**Java**または**Node.js**のプログラミング環境でコーディングできます。リストアイテムの作成、表示、削除を可能にするAPIが含まれています。

[**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/getting-started/introduction/):
* **[Data Store](https://docs.catalyst.zoho.com/ja/cloud-scale/help/data-store/introduction):** To-Doリストのアイテムをテーブルに保存します。
* **[ZCQL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction):** クエリを通じてData Storeからデータを取得します。
* **[Client](https://docs.catalyst.zoho.com/ja/cli/v1/working-with-the-client/introduction/)**: [Webクライアントホスティング](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)を通じてCatalystでホストされるアプリケーションのフロントエンドです。WebクライアントはBasic Catalystウェブアプリ、Angularアプリ、またはReactアプリとして初期化できます。

このチュートリアルでは、3種類すべてのWebクライアントの手順を説明します。Catalystが提供するネイティブプラグインを使用して、AngularおよびReactアプリを簡単にビルド、テスト、デプロイします。

このアプリケーションの構築には、CatalystウェブコンソールとCatalyst Command Line Interface（CLI）を使用します。

このチュートリアルでは、functionおよびclientコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーし、指示に従って適切なファイルに貼り付けるだけです。

### アプリケーションアーキテクチャ

To-Doリストアプリケーションの動作は以下のとおりです：

* **ノートの追加**: ユーザーがクライアントアプリケーションにノートを入力し、To-Doリストアイテムとして追加します。クライアントコンポーネントがAdvanced I/O functionをトリガーします。functionはHTTP POSTリクエストを使用して、Catalyst Data Storeのテーブルにノートをレコードとして保存します。対応するレスポンス（ノート）が既存のTo-Doリストに追加されます。
* **ノートの表示**: ユーザーがアプリケーションを開くと、クライアントコンポーネントがAdvanced I/O functionをトリガーし、HTTP GETリクエストを使用してCatalyst Data Storeから既存のTo-Doリストアイテムを取得します。このリストがユーザーに表示されます。
* **ノートの削除**: ユーザーがクライアントアプリケーションでノートをクリックすると、HTTP DELETEリクエストがトリガーされます。Data Storeから対応するレコードが削除され、クライアントからもノートが削除されます。更新されたTo-Doリストがクライアントに表示されます。

![catalyst_todo_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_architecture.webp)