---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/catly/nodejs/configure-client/
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/project-directory-structure/client-directory
---

# クライアントの設定

Catalyst React プラグインを使用して **"app"** という名前の React アプリをすでに作成しました。次に、ダウンロードしたリポジトリからアプリに必要なコードを追加します。

ダウンロードした GitHub リポジトリには、以下のクライアントディレクトリ構造が含まれています：

![client-dir](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/client-dir.webp)

それでは、Cat.ly のコードをクライアントディレクトリに追加しましょう。これを簡単に行うには、プロジェクトディレクトリの **"app"** ディレクトリを、ダウンロードしたリポジトリの Cat.ly のファイルで置き換えます。

以下のファイルとディレクトリが複製されていることを確認してください：

1. `package.json` ファイル。
2. 隠しファイルの `.gitignore` ファイル。
3. `public` フォルダ。
4. `src` フォルダ。

プロジェクトディレクトリに、ダウンロードしたリポジトリと同じ構造ですべてのクライアントファイルが含まれているはずです。

> **Note**: 以下のポイントを読みながら、提供されたファイル内のコードを確認してください。

それでは、クライアントディレクトリ内のファイルを詳しく見ていきましょう。

* クライアントのルートディレクトリには、[`client-package.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory) ファイルがあり、クライアントコンポーネントの名前、バージョン、デフォルトのホームページを定義する設定ファイルです。

* `app` フォルダには、React アプリのデフォルトプロジェクト構造に従って 2 つのサブフォルダが含まれています。

    - `public` フォルダは通常、Web アプリのアイコンファイルや `index.html` など、ブラウザからパブリック URL を通じて直接アクセスできるファイルを保持するために使用します。
    - `src` フォルダには、React アプリをコンパイルする際に `build` フォルダに含まれるアプリケーションのソースファイルが含まれています。

`app` フォルダには、[`package.json`](https://docs.npmjs.com/files/package.json) 依存関係ファイル、[`.gitignore`](https://git-scm.com/docs/gitignore) ファイル、[`yarn.lock`](https://legacy.yarnpkg.com/ja/docs/yarn-lock/) ファイルも含まれています。

- `public` フォルダには以下が含まれます：

    - `index.html`: Cat.ly のデフォルトエントリポイント
    - `manifest.json`: Web アプリケーションの情報が含まれ、`start_url` が "." に設定されています。これにより、ユーザーが入力した URL の短縮版がすべて、アプリがホストされた際のベース URL [*Catalyst_web_app_URL/app/*](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url) から始まるようになります。これについてはチュートリアルの最終ステップで説明します。
    - `error.html`: ユーザーが無効な URL を短縮しようとした場合に Cat.ly がリダイレクトするページ

- `src` フォルダには以下が含まれます：

    - クライアントコンポーネントの JavaScript および CSS ファイル。`App.js` はアプリケーションのフロントエンドの動作を制御します。変更イベントと短縮イベントを処理し、先に定義した 3 つのルートを使用してデータの送受信を行います。その他のファイルは DOM のレンダリングと Web ページの外観の定義に関与しています。

    - `input`: このサブフォルダには、ユーザーからの入力を処理するコードが含まれています。`Header.js` は、新しい URL が短縮されて Web ページに表示されるたびに URL カウントを 1 増やす機能を提供します。`InputForm.js` は入力テキストバーと送信ボタンを処理します。`List.js` は短縮された URL をリストとして表示する機能を提供します。

    - `utils`: このサブフォルダには、`App.js` で使用する 3 つのルートの定数値を保存する `constants.js` が含まれています。

ファンクションの設定プロセスを完了するには、以下の手順に従ってください：

ダウンロードしたリポジトリには、アプリケーションに必要な React プラグインの依存関係が含まれていません。そのため、app フォルダにプラグインをインストールする必要があります。

CLI で `/app` に移動し、以下のコマンドを実行します：

```sh
npm install zcatalyst-cli-plugin-react
```

これにより、アプリケーションに必要な Catalyst React プラグインがインストールされ、依存関係ファイルが更新されます。

それでは、React アプリをコンパイルしてテストしましょう。