--- title: "プロジェクトの初期化" url: https://docs.catalyst.zoho.com/ja/tutorials/hosted-login-app/nodejs/init-project/ description: "Catalyst Hosted Authenticationの機能を使用して、ユーザーサインアップ、アプリケーションログイン、パスワードリセットを提供し、主要なフェデレーテッドIDプロバイダーを使用したサインインを実装する、シンプルなBasicまたはReactアプリケーションを作成します。" last_updated: 2026-08-17T12:16:04Z service: All Services type: tutorial related_links: - name: "CLIリソースの初期化" 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)をご参照ください。 このアプリケーションでは、[Custom User Validation](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)のロジックを含む[Basic I/O function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/basic-io/)と、クライアントコンポーネントとして[Basic web app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#basic-client-applications)を初期化します。 > **Note:** 関数のパッケージ名またはクラス名は、指示どおりに正確に入力してください。アプリケーションのコードに同じ名前が含まれています。 1. ローカルマシンにプロジェクト用のフォルダーを作成し、ターミナルからそのフォルダーに移動します。 2. そのディレクトリから以下のコマンドを実行してプロジェクトを初期化します： ```sh catalyst init ``` 3. **矢印キー**を使用して移動し、お好みのポータルを選択して**Enter**キーを押します。アカウントに関連付けられている他の組織がない場合、デフォルトの組織が自動的に選択されます。 ![catalyst_authorization_portal_multiorg_choice](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authorization_portal_multiorg_choice.webp) > **Note:** Catalystのマルチ組織ポータル機能の詳細については、この[ヘルプドキュメント](https://docs.catalyst.zoho.com/ja/getting-started/catalyst-projects/#access-the-multi-org-portal)をご参照ください。 4. CLIがCatalystプロジェクトをディレクトリに関連付けるよう求めます。先ほどコンソールから作成したプロジェクトに関連付けます。リストから**Authorization Portal**を選択して**Enter**を押します。 ![catalyst_authentication_hosted_project_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_project_select.webp) 5. 矢印キーを使用して移動し、スペースバーで**Functions**、**Client**を選択します。**Enter**を押して初期化します。 ![catalyst_authentication_hosted_func_client_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_func_client_select.webp) 6. CLIが関数のセットアップを開始します。*Custom User Validation*関数の関数タイプとして**Basic IO**を選択します。 ![catalyst_authentication_hosted_func_type_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_func_type_select.webp) 7. 関数スタックとして*Node.js*の最新ランタイムを選択します。 ![catalyst_authentication_hosted_func_runtime_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_func_runtime_select.webp) 8. パッケージ名として「`authorized_portal_function`」、エントリーポイントとして「`index.js`」、作成者としてメールアドレスを入力し、**Enter**を押します。または、入力せずに**Enter**を押すとデフォルト値が入力されます。CLIがNode依存関係の初期化を促します。**Y**を押してインストールを確認し、**Enter**を押して選択を確定します。Nodeモジュールがインストールされます。 ![catalyst_authentication_hosted_func_setup_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_func_setup_complete.webp) CLIがクライアントのセットアップを開始します。 **Basic Webアプリ** 9. **Basic web app**を選択して**Enter**を押し、クライアントを[Basic web app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#basic-client-applications)として初期化します。 ![catalyst_authentication_hosted_client_type_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_type_select.webp) 10. クライアントパッケージの名前を入力して**Enter**を押します。このチュートリアルでは、クライアントパッケージを「`ZylkerTechnologies`」と命名しています。同じ名前を使用するか、お好みの名前を指定できます。 ![catalyst_authentication_hosted_client_choice_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_choice_complete.webp) Catalystの初期化が完了しました。 プロジェクトディレクトリには、設定ファイルと依存関係とともに、クライアントディレクトリと関数ディレクトリがセットアップされました。プロジェクトディレクトリには、[`catalyst.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)設定ファイルと非表示の`.catalystrc`ファイルも含まれています。 プロジェクトディレクトリの構造は以下のようになります： ![catalyst_hosted_login_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_hosted_login_directory.webp) **React Webアプリ** 9. **React web app**を選択して**Enter**を押し、クライアントを[React web app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#react-applications)として初期化します。 ![catalyst_authentication_hosted_client_react_type_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_react_type_select.webp) 10. Reactアプリタイプとして**JavaScript**を選択して**Enter**を押します。 ![catalyst_authentication_hosted_client_react_type_javascript_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_react_type_javascript_select.webp) 11. クライアントパッケージの名前として「`zylkertechnologies`」と入力して**Enter**をクリックします。お好みの名前を指定することもできます。「`react`」、「`react-dom`」、「`react-scripts`」などの必要なReactパッケージは、Catalyst Reactプラグイン（[`zcatalyst-cli-plugin-react`](https://www.npmjs.com/package/zcatalyst-cli-plugin-react)）を通じてインストールされます。 ![catalyst_authentication_hosted_client_react_type_initing](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_react_type_initing.webp) クライアントがReact Webアプリケーションとして正常に初期化されました。 ![catalyst_authentication_hosted_client_react_type_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_react_type_init_complete.webp) [クライアントディレクトリ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory)がプロジェクトディレクトリ内に標準構造で作成されます。 クライアントをReactアプリとして初期化した場合の*Authorization Portal*プロジェクトのディレクトリ構造は以下のとおりです。 ![catalyst_hosted_login_react_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_hosted_login_react_directory.webp) Catalystの初期化が完了しました。 **Angular Webアプリ** 9. **Angular web app**を選択して**Enter**を押し、クライアントを[Angular web app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#angular-applications)として初期化します。 ![catalyst_authentication_hosted_client_angular_type_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_angular_type_select.webp) 10. Angularアプリに「`ZylkerTechnologies`」と名前を付けて、**Enter**キーを押します。このアプリケーションではAngular Routingが不要なため、プロンプトで「`N`」と入力します。最後に、スタイルシート形式として`CSS`を選択して**Enter**キーを押します。 ![catalyst_authentication_hosted_client_angular_type_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_angular_type_init.webp) Catalystが**Catalyst Angularプラグイン**（[`zcatalyst-cli-plugin-angular`](https://npm.io/package/zcatalyst-cli-plugin-angular)）を使用してクライアントを初期化します。 ![catalyst_authentication_hosted_client_angular_type_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_client_angular_type_init_complete.webp) クライアントがAngular Webアプリケーションとして正常に初期化されました。 プロジェクトディレクトリには、設定ファイルと依存関係とともに、クライアントディレクトリと関数ディレクトリがセットアップされました。プロジェクトディレクトリには、[`catalyst.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)設定ファイルと非表示の`.catalystrc`ファイルも含まれています。 プロジェクトディレクトリの構造は以下のようになります： ![catalyst_authentication_hosted_node_client_angular_type_first_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_node_client_angular_type_first_directory.webp)