---
title: "Advanced I/O ファンクションの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/catly/nodejs/configure-advancedio/
description: "Catalyst の React プラグインとさまざまな Catalyst コンポーネントを使用して、シングルページ React アプリケーションとして URL 短縮サービス Cat.ly を構築します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Advanced I/O Functions"
    url: /ja/serverless/help/functions/advanced-io/
  - name: "Functionsディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/functions-directory
---

# Advanced I/O ファンクションの設定

Advanced I/O ファンクションには、ユーザーが提供した URL を短縮し、アプリケーション内のルーティングを処理するロジックが含まれています。このファンクションタイプの詳細については、[こちらのヘルプページ](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io)をご覧ください。

このアプリケーションの完全なコードは、チュートリアルのはじめにセクションで紹介した GitHub リポジトリでホストされています。見逃した場合は、[こちらのリンク](https://github.com/catalystbyzoho/tutorial-cat.ly-node)からコードをダウンロードできます。

このダウンロードしたリポジトリからプロジェクトディレクトリにファイルを追加します。

まず、ファンクションコンポーネントの詳細を確認しましょう。

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

* `/catly/routers` 内の `urlshorten.js` は、主要なルーティングおよび短縮処理を実行します。
  このファイルには、必要なタスクを実行するための 2 つの npm パッケージが含まれています：
     - `valid-url`: [valid URL モジュール](https://www.npmjs.com/package/valid-url)は、ユーザーが入力した元の URL の有効性を確認するために使用します。URL が無効と判定された場合、短縮は行われません。
     - `shortid`: [shortid モジュール](https://www.npmjs.com/package/shortid)は、ユーザーが入力した元の URL に対してブラウザフレンドリーな短い一意の ID を生成するために使用します。

  このファイルには、クライアントコンポーネントが使用する 3 つのルートが定義されています：
     - `/item/all`: Data Store からすべてのデータを取得します。
     - `/:code`: 特定の短縮 URL に対応する元の URL にリダイレクトします。
     - `/item`: 元の URL を挿入し、そのショート ID を生成します。
  `/:code` と `/item` を使用する際にキャッシュにアクセスしてデータを取得することで、より高速な処理を実現します。ただし、ユーザーが入力した新しい URL は、まず Data Store に永続化されます。

* `/catly/utils` 内の `helper.js` ファイルは、Data Store と Cache にアクセスしてデータを取得したり、データを永続化したりする手順を定義しています。Data Store のテーブルからデータを取得するために [ZCQL クエリ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction)を実行します。

* `/catly/utils` 内の `constants.js` ファイルは、キャッシュセグメントの ID や元の URL とそのショート ID を保存するテーブル名など、他のファイルで使用される定数値を保存するために使用します。また、クライアントディレクトリから読み込む、URL が無効と判定された場合のエラーページも定義しています。

* `index.js` はサーバーのメインファイルで、リクエストとレスポンスのパラメータを定義し、[Node.js express フレームワーク](https://expressjs.com/)と [npm body-parser ミドルウェア](https://www.npmjs.com/package/body-parser)をインポートします。

* これらのファイルに加えて、functions ディレクトリには `catly` フォルダ内に [`package.json`](https://docs.npmjs.com/files/package.json) と [`package-lock.json`](https://docs.npmjs.com/configuring-npm/package-lock-json.html) が含まれています。ファンクションのルートにある `catalyst-config.json` ファイルには、ファンクションの設定が含まれています。これらのファイルの詳細については、[プロジェクトディレクトリ構造のヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/introduction)をご覧ください。

次に、プロジェクトディレクトリのルートにある functions フォルダを、ダウンロードしたリポジトリの functions フォルダで置き換えます。

プロジェクトディレクトリは以下の構造になるはずです：

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

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

ダウンロードしたリポジトリには、アプリケーションに必要な Node モジュールが含まれていません。そのため、`catly` フォルダに NPM をインストールする必要があります。

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

```sh
npm install express body-parser valid-url shortid
```

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

2. 任意の IDE で `package.json` ファイルを開き、author の値（emma@zylker.com）をご自身のメールアドレスに置き換えます。

> **Note**: これはオプションの手順です。author 情報は Cat.ly アプリケーションの実行に影響しません。

3. `utils/constants.js` を開き、`short_url_segment` の値を *Catly* プロジェクトで作成したキャッシュセグメントの **Segment ID** に置き換えます。

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

キャッシュセグメントの Segment ID は、Catalyst コンソールの Cache コンポーネントに移動して Segments ページから確認できます。

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

Cat.ly アプリケーションから受信した元の URL とショート ID は、有効なキャッシュセグメントに保存またはそこから取得される必要があるため、この設定は不可欠です。

これで functions ディレクトリの設定が完了しました。