---
title: "プロジェクトの初期化"
url: https://docs.catalyst.zoho.com/ja/tutorials/catly/nodejs/initialize-project/
description: "Catalyst の React プラグインとさまざまな Catalyst コンポーネントを使用して、シングルページ React アプリケーションとして URL 短縮サービス Cat.ly を構築します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "リソースの初期化"
    url: /ja/cli/v1/initialize-resources/introduction/
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
---

# CLI からプロジェクトを初期化する

これで CLI から Catalyst プロジェクトの作業を開始できます。最初のステップは、空のディレクトリでプロジェクトを初期化することです。これがプロジェクトのホームディレクトリとなり、すべてのプロジェクトファイルがここに保存されます。

プロジェクトのディレクトリ構造の詳細については、[こちらのヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/introduction)をご覧ください。プロジェクトの初期化の詳細については、[CLI ヘルプドキュメント](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/introduction)を参照してください。

このチュートリアルでは、プロジェクトに続いてファンクションとクライアントコンポーネントを初期化します：

1. ローカルマシンにプロジェクト用のフォルダを作成し、ターミナルからそのフォルダに移動します。そのディレクトリで以下のコマンドを実行してプロジェクトを初期化します：

```sh
catalyst init
```

2. CLI が、先ほどコンソールで作成した Catalyst プロジェクトが存在するオーガニゼーションを選択するよう求めます。オーガニゼーションを選択して **Enter** を押してください。
![select-portal](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-portal.webp) 

3. リストからオーガニゼーション内のプロジェクトを選択し、**Enter** を押してください。
![select-project](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-project.webp)

4. スペースバーを使って **Functions** と **Client** を選択します。**Enter** を押してコンポーネントを初期化します。
![select-components](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-components.webp)

5. CLI がまずファンクションのセットアップを開始します。ファンクションタイプとして AdvancedIO を選択します。
![advanced-io](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/advanced-io.webp)

6. ファンクションスタックとして **Node.js** の最新ランタイムを選択します。
![select-node](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-node.webp)

7. パッケージ名に **"catly"**、エントリポイントに **"index.js"**、作成者にメールアドレスを入力して **Enter** を押します。入力せずに Enter を押すとデフォルト値が設定されます。CLI が Node 依存関係のインストールを確認するプロンプトを表示します。**Y** を押してインストールを確認し、**Enter** を押して選択を確定してください。Node モジュールがインストールされます。
![function-setup](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/function-setup.webp)

8. 次に CLI がクライアントのセットアップを初期化します。**"React web app"** を選択すると、Catalyst React プラグイン（`zcatalyst-cli-plugin-react`）を使用してクライアントが React アプリケーションとして初期化されます。
![select-react](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-react.webp)

9. React アプリケーションのタイプとして **"TypeScript"** を選択します。
![select-typescript](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/select-typescript.webp)

10. React アプリケーションの名前に **"app"** と入力して **Enter** を押します。
ファンクションとクライアントコンポーネントを含むプロジェクトの初期化が完了し、プロジェクトの詳細を含む [`catalyst.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json) ファイルと `.catalystrc` 隠しファイルがプロジェクトディレクトリに作成されます。
![init-complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/init-complete.webp)