--- title: "Clientの初期化" url: https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/ description: "CLIからCatalystプロジェクトおよびFunctions、Client、AppSailなどのプロジェクトリソースを初期化できます" last_updated: 2026-08-17T12:16:04Z service: All Services type: general --- # Clientの初期化 ### はじめに Catalystでは、[Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)でホストできる3種類のネイティブクライアントアプリケーションを開発できます： * Angularアプリケーション * Reactアプリケーション * Basic Clientアプリケーション CatalystはAngularおよびReactクライアントアプリ用のすぐに使えるテンプレートを提供しています。これらのアプリを初期化すると、Catalystはセットアップ手順全体を処理し、必要な依存関係のインストールを求めます。AngularおよびReactアプリケーションは、ボイラープレート構造でプロジェクトディレクトリに作成されます。 Basic Clientアプリは、独自の標準構造で作成されるCatalystクライアントのシンプルなバージョンです。3種類のクライアントアプリすべてでインストール手順が異なります。 > **注意:** * クライアントのディレクトリには、HTMLファイル、JavaScriptファイル、ロゴ画像など、任意の数のサブフォルダとファイルを追加できます。ただし、設定ファイルと依存関係はクライアントディレクトリのルートに配置する必要があります。 * ` [catalyst pull](https://docs.catalyst.zoho.com/ja/cli/v1/pull-resources/introduction/) `コマンドを使用して、コンソールからローカルシステムにホストされたWebクライアントをプルすることもできます。 * Webクライアントホスティングは、基本的でシンプルなWebアプリケーションに適しています。Next.js、Angular、React、Vueなど、さまざまな人気のJavaScriptフレームワークでWebアプリケーションをシームレスにデプロイできる堅牢なフロントエンド開発サービス**[Slate](https://docs.catalyst.zoho.com/ja/slate/)**をご利用いただけます。SlateはGitHub、GitLab、またはBitbucketからの自動デプロイメントも提供し、その他多くの高度な機能を備えています。 プロジェクトのクライアントディレクトリを初期化すると、CatalystはFunctionsの初期化後にセットアッププロセスを開始します。 オプションからプロジェクトに初期化するクライアントタイプを1つ選択し、**Enter**を押します。 ![Initialize Client- Setup](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_setup.webp) ### Angularアプリケーション Angularは、効率的で洗練されたシングルページアプリを作成するためのフロントエンドアプリケーション設計フレームワークおよび開発プラットフォームです。Angularはコンポーネントベースのアーキテクチャに従い、アプリは個々の再利用可能な機能的・論理的エンティティに分離されます。コンポーネント、テンプレート、ディレクティブ、依存性注入などのAngularの構成要素はモジュールに統合され、Angularアプリケーションを形成します。詳しくは[Angular公式ドキュメント](https://angular.io/docs)をご覧ください。 Angularクライアントアプリケーションの開発には、ローカルマシンにAngular CLIをインストールすることを推奨します。このCLIは必要な依存関係のインストールと設定を自動的に処理し、クライアントアプリケーションの開発とテストを容易にします。Catalystはクライアントの初期化プロセス中にインストールを自動的に開始します。 Catalystは、Angularアプリ用のプラグイン` **zcatalyst-cli-plugin-angular** `も提供しており、Angularアプリの初期化時にインストールされます。このプラグインは最新のAngular LTSバージョンと互換性があり、Angularアプリの開発とテストに関わるいくつかの操作を内部的に処理します。これによりアプリケーション構築タスクが簡素化・高速化され、セットアップとメンテナンスではなくアプリの機能に集中できます。 > **注意:** Catalystプラグインは、特定のアプリケーションのディレクトリにインストールする必要があります。[ `catalyst.json` ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)設定ファイルにプラグインのパスが指定されます。CatalystはAngularプラグインのグローバルインストールのサポートを廃止しました。既存のAngularアプリのコードを適宜更新してください。 クライアントの初期化時にオプションから**Angular Web App**を選択すると、CatalystはAngularアプリケーションの標準セットアップ手順を開始します。アプリは最新のLTSバージョンで作成されます。 > **注意:** Catalystが現在サポートしているAngular LTSバージョンはv12です。 1. CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力して**Enter**を押します。 ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_1.webp) 2. Angular CLIがシステムにまだインストールされていない場合、CatalystはそのLTSバージョンの一時的なインストールを自動的に開始します。また、Angularアプリを生成するために必要なCatalyst固有のスキーマティクスパッケージもインストールされます。 プロンプトが表示されたら「Y」を入力して必要なパッケージのインストールを確認し、**Enter**を押します。 ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_2.webp) 必要なパッケージがローカルシステムに既に存在する場合、セットアップは次のステップにスキップします。 > **注意:** システムにインストールされているAngularのバージョンが古いか、サポートされていない場合、Catalystは最新のサポートバージョンに更新するよう求めます。 3. Angularルーティングを有効にして、作成するさまざまなビュー間のナビゲーションを処理できます。プロンプトが表示されたら「Y」を入力し、**Enter**を押します。 ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_3.webp) 4. 以下に示すサポートされているスタイルシート形式のいずれかでAngularコンポーネントをスタイリングできます。アプリのスタイルシート形式を選択し、**Enter**を押します。 ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_4.webp) ルーティングとスタイルシートのプロンプトは、Angularアプリケーションのデフォルトセットアップ手順に含まれます。 その後、CatalystはAngularアプリケーションファイル、設定ファイル、および依存関係のボイラープレート構造でのインストールを開始します。アプリの開発に必要なノードモジュールもNPMを通じてインストールされます。 ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_5.webp) 以下に示すように、Angularクライアントのディレクトリは、標準アプリケーションファイル、環境ファイル、プラグインファイル、スタイルシート、`index.html`、およびTypeScriptクラスでセットアップされます。必要なノードモジュール、JSON設定ファイル、およびCatalyst固有の`client-package.json`を含む依存関係もディレクトリに存在します。 ![Initialize Client- Angular Directory](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_angular_dir.webp) これらのパッケージがインストールされると、`catalyst.json`設定ファイルは、前述のプラグインファイルへのパスを含むクライアントパッケージの詳細で更新されます。Catalyst設定ファイルとクライアントディレクトリの詳細については、[プロジェクトディレクトリ構造のヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory/)をご覧ください。 Catalyst CLIからAngularアプリのテストとデプロイについては、[リソースの配信](https://docs.catalyst.zoho.com/ja/cli/v1/serve-resources/serve-all-resources/#serve-angular-applications)と[リソースのデプロイ](https://docs.catalyst.zoho.com/ja/cli/v1/deploy-resources/deploy-client/#deploy-angular-applications)のヘルプページをご覧ください。 ### Reactアプリケーション Reactは、インタラクティブなアプリケーションとユーザーインターフェースを構築できるフロントエンドJavaScriptライブラリです。コンポーネントベースのアーキテクチャにより、ビルド時にアプリケーションの状態を効率的に管理およびレンダリングします。Reactはシングルページクライアントアプリケーションの開発における容易さと柔軟性を提供し、コンポーネントの再利用性を提供します。詳しくは[React公式ドキュメント](https://reactjs.org/docs/getting-started.html)をご覧ください。 Catalystは、Reactアプリ用のプラグイン`zcatalyst-cli-plugin-react`を提供しており、Reactアプリの初期化時にインストールされます。このプラグインには、Reactアプリの開発とテストに関わるいくつかの操作を内部的に処理する特定のノードモジュールとライブラリファイルが含まれています。これにより、より高速で効率的なアプリケーション構築プロセスが可能になります。 > **注意:** Catalystプラグインは、特定のアプリケーションのディレクトリにインストールする必要があります。[ `catalyst.json` ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)設定ファイルにプラグインのパスが指定されます。CatalystはReactプラグインのグローバルインストールのサポートを廃止しました。既存のReactアプリのコードを適宜更新してください。 Reactアプリを初期化すると、Catalystはデフォルトでyarnパッケージマネージャーを通じてアプリの作成と設定を自動的に行います。ローカルマシンにyarnがインストールされていない場合、ReactアプリはNPMを使用してセットアップされます。Catalystは、パッケージのリンクと解決、依存関係のインストールなど、すべての設定タスクをパッケージマネージャーを通じて自動的に処理します。 クライアントの初期化時にオプションから**React Web App**を選択すると、CatalystはReactアプリケーションの標準セットアップ手順を開始します。 1. 標準のJavaScriptテンプレートまたはTypeScriptテンプレートでReactアプリを作成できます。TypeScriptはJavaScriptの型付きスーパーセットで、コンパイル時にプレーンなJavaScriptにトランスパイルされます。Catalystは、セットアップ手順をより簡単で迅速にするために、初期化時にこれらのオプションを提供します。 オプションから**JavaScript**または**TypeScript**を選択します。 ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_1.webp) 2. CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力して**Enter**を押します。 ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_2.webp) > **注意:** AngularおよびBasic Webクライアントアプリケーションの場合、プロジェクト内のクライアントディレクトリはclientという名前になります。ただし、Reactアプリケーションの場合、クライアントディレクトリの名前は、初期化またはセットアップ時にここでWebクライアントに割り当てた名前と同じになります。たとえば、Webクライアントの名前を「vendorApp」とした場合、クライアントディレクトリも`vendorApp`という名前になります。この値は`catalyst.json`設定ファイルで適宜更新されます。 これにより、Catalyst固有の[CRAテンプレート](https://www.npmjs.com/package/cra-template)を通じて、`react`、`react-dom`、`react-scripts`などの必要なReactパッケージのインストールが開始されます。このベーステンプレートは` [create-react-app](https://github.com/facebook/create-react-app) `コマンドを実行します。 ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_2.webp) その後、パッケージマネージャーはReactアプリのgitリポジトリを初期化し、テンプレートの依存関係をインストールします。 ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_3.webp) 初期化が完了すると、プロジェクトディレクトリにボイラープレート構造でReactアプリケーションファイルが作成されます。 ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_4.webp) 以下に示すように、Reactアプリのディレクトリ構造には、アプリケーションソースファイル、パブリックファイル、設定ファイル、ノードモジュール、およびCatalyst固有の`client-package.json`を含むその他の依存関係が含まれます。 ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_react_dir.webp) これらのパッケージがインストールされると、`catalyst.json`設定ファイルは、前述のプラグインファイルへのパスを含むクライアントパッケージの詳細で更新されます。Catalyst設定ファイルとクライアントディレクトリの詳細については、[プロジェクトディレクトリ構造のヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory/)をご覧ください。 Reactアプリを[配信](https://docs.catalyst.zoho.com/ja/cli/v1/serve-resources/serve-all-resources/#serve-react-applications)または[デプロイ](https://docs.catalyst.zoho.com/ja/cli/v1/deploy-resources/deploy-client/#deploy-react-applications)すると、このディレクトリにReact.jsの標準に従ったコンパイル済みファイルを含む`build`フォルダが作成されます。 ### Basic Clientアプリケーション Basic Clientアプリケーションは、外部フレームワークやライブラリなしで作成されるCatalystクライアントのシンプルなバージョンです。クライアントの初期化時に**Basic Web App**オプションを選択して、シンプルで機能的なWebクライアントアプリケーションを作成できます。 CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力して**Enter**を押します。 ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_setup_client_name.webp) クライアントディレクトリがプロジェクトのディレクトリに作成され、[ `catalyst.json` ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)ファイルがその情報で更新されます。 ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_completed.webp) Basic Clientのディレクトリは、メインの`index.html`ファイル、`main.css`、`main.js`、および`client-package.json`設定でセットアップされます。クライアントディレクトリ構造の詳細については、[プロジェクトディレクトリ構造のヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory/)をご覧ください。 ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_dir.webp) localhostを通じてクライアントを[配信](https://docs.catalyst.zoho.com/ja/cli/v1/serve-resources/serve-all-resources/#serve-functions-and-basic-web-applications)してテストし、その後クラウドに[デプロイ](https://docs.catalyst.zoho.com/ja/cli/v1/deploy-resources/deploy-client/)するか、コンソールから直接[ホスト](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)できます。