---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/todo-list/nodejs/introduction/
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アプリケーションを構築する方法を説明します。このアプリケーションにより、ユーザーはやるべきタスクを記録し、完了後に削除することができます。

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



各タイプの動作するアプリケーションにアクセスし、その機能をテストできます：
* Basic web app
* React web app
* Angular web app

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

**Catalyst Serverless**:

* **Advanced I/O Function**: Advanced I/Oファンクションは、JavaまたはNode.jsプログラミング環境でコーディングできます。ユーザーがリストアイテムを作成、表示、削除するためのAPIが含まれています。

**Catalyst Cloud Scale**:
* Data Store: To-Doリストアイテムをテーブルに保存します。
* ZCQL: クエリを通じてData Storeからデータを取得します。
* Client: ウェブクライアントホスティングを通じてCatalystでホストされるアプリケーションのフロントエンドです。ウェブクライアントは、基本的なCatalystウェブアプリ、Angularアプリ、またはReactアプリとして初期化できます。

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

このアプリケーションの構築には、CatalystウェブコンソールとCatalystコマンドラインインターフェース（CLI）を使用します。

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

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

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

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