---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/catly/nodejs/introduction/
description: "Catalyst の React プラグインとさまざまな Catalyst コンポーネントを使用して、シングルページ React アプリケーションとして URL 短縮サービス Cat.ly を構築します。"
last_updated: 2026-11-03T07:48:52Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Node.js SDK"
    url: /ja/sdk/nodejs/v2/overview/
  - name: " Catalyst React Plugin"
    url: /ja/cli/v1/initialize-resources/initialize-client/#react-applications
---

# Catly

### はじめに

このチュートリアルでは、長い URL を簡単に共有できる短い URL に即座に変換する、シンプルな URL 短縮アプリケーションを構築します。このアプリケーションは、[Catalyst の React プラグイン](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#react-applications)といくつかの Catalyst サービスを活用し、シングルページ React アプリケーションとして構築します。

クライアントアプリケーションの最終的な外観は以下のようになります：

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

動作するアプリケーションにアクセスして機能をテストできます：[アプリを試す！](https://catlynodejs-860829830.development.catalystserverless.com/app/index.html)

このアプリケーションを **Cat.ly** と名付け、以下の Catalyst コンポーネントを使用して構築します：

1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/):
    - **[Functions](https://docs.catalyst.zoho.com/ja/serverless/help/functions/introduction/)** : **Node.js** ファンクション（[Advanced I/O](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io/) タイプ）に、指定された URL を短縮するロジックを実装します。

2. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/getting-started/introduction/):
    - **[Data Store](https://docs.catalyst.zoho.com/ja/cloud-scale/help/data-store/introduction/)** : 元の URL とその短縮版を保存するために使用します。
    - **[ZCQL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction/)** : 短縮版がアクセスされた際に、クエリを通じて Data Store から元の URL を取得します。
    - **[Cache](https://docs.catalyst.zoho.com/ja/cloud-scale/help/cache/introduction/)** : 頻繁にアクセスされる URL とその短縮版を保存し、より高速な取得とレンダリングを実現します。
    - **[Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)** : アプリケーションのフロントエンドをホストします。クライアントは Catalyst の React プラグイン（`zcatalyst-cli-plugin-react`）を使用して React フレームワークで構築します。このプラグインには、React アプリの開発およびテストに関わるさまざまな操作を内部的に処理する Node モジュールやライブラリファイルが含まれています。これにより、より高速で効率的なアプリケーション構築プロセスが実現します。

アプリケーションのソースコードは[こちらの GitHub リポジトリ](https://github.com/catalystbyzoho/tutorial-cat.ly-node)で提供しています。

このリポジトリからコードをローカルシステムにダウンロードできます。次のセクション以降で、リポジトリ内のファイルを使用してコードを操作し、最終的なデプロイ可能なアプリケーションを構築する手順を段階的に説明します。

最終的な Cat.ly アプリケーションの[ディレクトリ構造](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/introduction)は以下のようになります：

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

コードの詳細に入る前に、まずアプリケーションの全体的なアーキテクチャと各 Catalyst コンポーネントの用途を確認しましょう。

### アプリケーションアーキテクチャ

Cat.ly アプリケーションのアーキテクチャは以下のように説明できます：

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

1. ユーザーがアプリケーションのクライアント画面のテキストボックスに短縮したい URL を入力します。
2. Advanced I/O ファンクションが入力された URL の有効性を確認します。URL が有効な場合、短縮版 URL の ID 部分となるショート ID が生成されます。
3. 元の URL と URL のショート ID は、簡単にアクセスできるよう Catalyst CloudScale の Cache セグメントに保存されます。また、Catalyst CloudScale の Data Store のテーブルにも保存されます。
4. 元の URL とその短縮版がクライアントアプリケーションに表示されます。カウント変数がインクリメントされ、アプリケーションで短縮された URL の数が表示されます。
5. ユーザーがクライアントから短縮 URL をクリックすると、ZCQL クエリが実行されて Cache セグメントから元の URL が取得されます。キャッシュアイテムが期限切れの場合は、代わりに Data Store のテーブルからデータが取得され、Cache に再保存されます。URL がアクセスされるたびにキャッシュアイテムは上書きされ、有効期限も毎回更新されます。
6. ブラウザにリダイレクトシグナルが送信され、新しいタブで元の URL が開かれます。