---
title: "クライアントの初期化"
url: https://docs.catalyst.zoho.com/ja/tutorials/todo-list/java/initialize-client/
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、Basic、React、またはAngularのTo-Doリストウェブアプリケーションを構築します。タスクの記録と完了後の削除が可能です。"
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フレームワークを使用してTo-Do Listアプリを作成する場合は、このクライアントタイプを選択できます。

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

> **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) </br>

選択に応じて、該当するセクションに移動してウェブアプリの初期化手順を確認してください：

**Basic Webアプリ**

#### クライアントをBasic web appとして初期化する

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 webアプリケーションとして正常に初期化されました。

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

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

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

**Angular Webアプリ**

#### クライアントをAngular web appとして初期化する

クライアントを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. 必要なすべてのAngularアプリケーションファイル、設定ファイル、依存関係がCatalyst Angularプラグインを通じてインストールされます。![catalyst_todo_angular_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_init.webp) 

5. クライアントがAngular webアプリケーションとして正常に初期化されました。
![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_angular_java_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_java_directory.webp)

**React Webアプリ**

#### クライアントをReact web appとして初期化する

クライアントを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 webアプリケーションとして正常に初期化されました。
 ![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_react_client_java_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_client_java_directory.webp)