---
title: "テーブルの作成"
url: https://docs.catalyst.zoho.com/ja/tutorials/catly/nodejs/create-table/
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/cloud-scale/help/data-store/introduction
---

# Data Store にテーブルを作成する

Catly プロジェクトの Data Store にテーブルを作成し、ユーザーが送信した元の URL と、アプリケーションが生成した対応するショート ID を保持します。このテーブルは、必要なデータが Cache に見つからない場合にのみクエリされます。

テーブルを作成するには、以下の手順に従ってください：

1. **Catalyst CloudScale** サービスに移動し、**Start Exploring** をクリックします。
![cloudscale](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/cloudscale.webp) 

2. **Storage** 配下の **Data Store** コンポーネントを選択し、**Create a new Table** をクリックします。
![create-new-table](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/create-new-table.webp) 

3. テーブル名に「**UrlShorten**」と入力し、**Create** をクリックします。
![table-name](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/table-name.webp) 

> **Note**: GitHub リポジトリからダウンロードするアプリケーションのコードに同じ名前が含まれているため、指示どおりに正確に名前を入力してください。

以下のスクリーンショットのようにテーブルが作成されます。

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

### テーブルのカラムを作成する

次に、元の URL とそのショート ID 用に 2 つのカラムをテーブルに作成しましょう。

> **Note**: 指示どおりに正確に名前を入力してください。

1. テーブルの *Schema View* セクションで **New Column** をクリックします。
![create-new-column](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/create-new-column.webp) 

2. カラム名に「**originalUrl**」と入力します。データ型として **Var Char** を選択し、最大長に「100」と入力します。*Is Unique* と *Is Mandatory* のトグルスイッチを有効にして、**Create** をクリックします。
![url-column](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/url-column.webp) 

Catalyst がサポートするさまざまなデータ型やカラムのその他のプロパティについては、[Data Store のヘルプページ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/data-store/introduction)で確認できます。

同様に、**"urlCode"** という名前の 2 つ目のカラムを作成します。データ型として **Var Char** を選択し、最大長に **"100"** と入力します。**Is Unique** と **Is Mandatory** のトグルスイッチを有効にします。

両方のカラムが以下のスクリーンショットのように **Schema View** セクションに表示されます。

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

ユーザーが URL を短縮するたびに、データがこのテーブルに自動的に格納されます。URL を短縮した後、**Data View** セクションからレコードを確認できます。