---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/todo-list/python/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 web app](https://to-do-basic.catalystserverlessapp.com/app/)**
* **[React web app](https://to-do-react.catalystserverlessapp.com/app/)**
* **[Angular web app](https://to-do-angular.catalystserverlessapp.com/app/)**

To-Doリストアプリケーションは、以下のCatalystコンポーネントを利用しています：

1. [**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/advanced-io/): Advanced I/Oファンクションは、[Java](https://docs.catalyst.zoho.com/ja/sdk/java/v1/overview/)、[Node.js](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/overview/)、または[Python](https://docs.catalyst.zoho.com/ja/sdk/python/v1/overview/)プログラミング環境でコーディングできます。ユーザーがリストアイテムを作成、表示、削除するためのAPIが含まれています。

2. [**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/cloud-scale/help/web-client-hosting/introduction/)を通じてCatalystでホストされるアプリケーションのフロントエンドです。ウェブクライアントは、基本的なCatalystウェブアプリ、Angularアプリ、またはReactアプリとして初期化できます。

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

このアプリケーションの構築には、[Catalystウェブコンソール](https://console.catalyst.zoho.com/)と[Catalystコマンドラインインターフェース](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用します。

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

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

To-Doリストアプリケーションの動作は以下のように説明できます：

* **ノートの追加**: ユーザーがクライアントアプリケーションでノートを入力し、To-Doリストアイテムとして追加します。クライアントコンポーネントがServerless Advanced I/Oファンクションをトリガーします。ファンクションは、HTTP POSTリクエストを使用して、CloudScale Data Storeのテーブルにレコードとしてノートを保存します。対応するレスポンス（ノート）が既存のTo-Doリストに追加されます。 

* **ノートの表示**: ユーザーがアプリケーションを開くと、クライアントコンポーネントがAdvanced I/Oファンクションをトリガーし、HTTP GETリクエストを使用して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)