---
title: "クライアントの初期化"
url: https://docs.catalyst.zoho.com/ja/tutorials/todo-list/python/initialize-client/
description: "Catalyst Advanced I/OファンクションとCatalyst Data Storeを使用して、タスクを記録し完了後に削除できるBasic、React、またはAngularのToDoリストWebアプリケーションを構築します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "クライアントディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/client-directory
  - name: "クライアントの初期化"
    url: /ja/cli/v1/initialize-resources/initialize-client/
---

# クライアントの初期化

次に、クライアントを初期化しましょう。

Catalystがサポートする3つのタイプのいずれかでクライアントを初期化できます：

1. **Basic web app**: Basicクライアントアプリケーションは、外部フレームワークやライブラリを使用せずに作成されるシンプルなCatalystクライアントです。

2. **Angular web app**: Angularフレームワークを使用してToDoリストアプリを作成する場合は、このクライアントタイプを選択できます。

3. **React web app**: Reactフレームワークを使用してToDoリストアプリを作成する場合は、このクライアントタイプを選択できます。

> **Note**: CatalystはReactおよびAngularアプリを作成するためのネイティブプラグインサポートを提供しています。これらのプラグインは、アプリケーションのセットアップ、テスト、デプロイに関連するさまざまな操作も処理します。

プロジェクトがすでに初期化された後にクライアントを初期化するため、プロジェクトディレクトリから以下のコマンドを実行して個別にセットアップできます：

```sh
catalyst client:setup
```

矢印キーを使用して、**Enter**を押してお好みを選択します。

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

選択に基づいて、Webアプリを初期化する手順の該当セクションに移動してください：

**Basic Webアプリ**

#### BasicウェブアプリとしてクライアントをI初期化する

Catalystコマンド`catalyst client:setup`を使用してクライアントをセットアップする際に**Basic web app**を選択した場合、Catalystはそれに応じてクライアントを初期化します。

クライアントパッケージの名前として「**ToDoApp**」と入力し、**Enter**を押します。
![catalyst_todo_basic_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_basic_init_complete.webp)

クライアントがBasicウェブアプリケーションとして正常に初期化されました。

[クライアントディレクトリ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory)がプロジェクトディレクトリ内に標準構造で作成されます。

これは、クライアントがBasicウェブアプリとして初期化された場合のToDoListプロジェクトのディレクトリ構造です。

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

**Angular Webアプリ**

#### AngularウェブアプリとしてクライアントをI初期化する

クライアントをAngularアプリとしてセットアップすることを選択した場合、Catalystは**Catalyst Angularプラグイン**（[`zcatalyst-cli-plugin-angular`](https://npm.io/package/zcatalyst-cli-plugin-angular)）を使用して初期化します。

1. Angularアプリの名前を「**app**」とし、「**Y**」と入力して**Enter**キーを押し、オートコンプリート機能を有効にします。これにより、Angularターミナルコマンドのオートコンプリートが提供されます。
 ![catalyst_todo_angular_autocomplete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_autocomplete.webp)
2. 「**Y**」を入力してアプリケーションデータをAngularと共有するか、「**N**」を入力してオプトアウトし、**Enter**を押します。このアプリケーションではAngularルーティングは不要なため、「**N**」と入力して**Enter**を押します。 ![catalyst_todo_angular_routing](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_routing.webp)
3. このアプリケーションではCSSスタイルシートを使用します。CSSを選択した後、**Enter**キーを押します。
 ![catalyst_todo_angular_stylesheet](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_stylesheet.webp)
4. Catalyst Angularプラグインを通じて、必要なすべてのAngularアプリケーションファイル、設定ファイル、および依存関係がインストールされます。 ![catalyst_todo_angular_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_init.webp)
5. クライアントがAngularウェブアプリケーションとして正常に初期化されました。
![catalyst_todo_angular_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_init_complete.webp)

[クライアントディレクトリ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory)がプロジェクトディレクトリ内に標準構造で作成されます。

これは、クライアントがAngularアプリとして初期化された場合のToDoListプロジェクトのディレクトリ構造です。

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

**React Webアプリ**

#### ReactウェブアプリとしてクライアントをI初期化する

クライアントをReactアプリとしてセットアップすることを選択した場合、CatalystはCatalyst Reactプラグイン（[`zcatalyst-cli-plugin-react`](https://www.npmjs.com/package/zcatalyst-cli-plugin-react)）を使用してReactアプリを初期化します。

1. 次に、Reactアプリケーションのタイプを選択するよう求められます。このチュートリアルでは「**JavaScript**」をタイプとして選択します。
![catalyst_todo_react_init_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_init_1.webp)
2. Reactアプリケーションの名前を「**app**」とし、**Enter**を押します。`react`、`react-dom`、`react-scripts`などの必要なReactパッケージがCatalyst Reactプラグインを通じてインストールされます。
 ![catalyst_todo_react_client_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_client_init.webp)
 クライアントがReactウェブアプリケーションとして正常に初期化されました。
 ![catalyst_todo_react_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_init_complete.webp)

[クライアントディレクトリ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory)がプロジェクトディレクトリ内に標準構造で作成されます。

これは、クライアントがReactアプリとして初期化された場合のToDoListプロジェクトのディレクトリ構造です。

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