---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/alien-city-appsail/express/introduction/
description: "Catalyst AppSailサービスとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告・検索できるアプリケーションを作成し、Catalystでホストします。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "AppSail用Catalyst SDK"
    url: /ja/serverless/help/appsail/key-concepts/catalyst-configurations/#implementing-catalyst-sdk-in-appsail/
---

# AppSailを使用したAlien City

### はじめに

このチュートリアルでは、Node.js ExpressベースのWebアプリケーション「Alien City」を構築し、Catalystのサーバーレスサービスである AppSail を使用してホストする方法を説明します。AppSailは高度にスケーラブルなPaaSコンポーネントであり、Catalyst固有のコーディング構造に依存せず、お好みのプログラミングフレームワークでアプリケーションを開発し、Catalystに簡単にホストできます。

Alien Cityは、都市でのエイリアン遭遇を検索・報告できる楽しいアプリケーションです。

Webアプリケーションは以下のように表示されます：
![catalyst_appsail_tut_showcase_app](https://catalyst-docs-development.zohostratus.in/images/tutorials/alien-city-appsail-express/catalyst_appsail_tut_showcase_app.webp)
動作するアプリケーションにアクセスして機能をテストできます：[アプリを試す！](https://alien-city.catalystserverlessapp.com/app/)

Alien Cityアプリケーションは、以下のCatalystサービスのコンポーネントを利用します：

1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/)：
    - [AppSail](https://docs.catalyst.zoho.com/ja/serverless/help/appsail/introduction/)：独立したNode.js Expressアプリケーションをホストします。アプリのフロントエンドとバックエンドロジックを構築し、それらをまとめてAppSailにデプロイします。

2. [**Catalyst Cloud Scale**](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/)：エイリアン遭遇が報告された都市のデータベースを保存します。
    - [ZCQL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction/)：クエリを通じてData Storeからデータを取得します。

このアプリケーションの構築には、[Catalyst Webコンソール](https://console.catalyst.zoho.com/)と[Catalystコマンドラインインターフェース](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用します。

このチュートリアルでは、アプリケーションに含めるファイルのコードが提供されます。指示に従って、コードをコピーし、適切なファイルに貼り付けるだけです。

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

Alien Cityアプリケーションの動作は以下のとおりです：

* **エイリアン遭遇の報告**
ユーザーがエイリアンに遭遇した都市名を入力します。その都市が以前に報告済みの場合、アプリはユーザーにその旨を通知するメッセージを表示します。その都市が未報告の場合、データはData Storeのテーブルに都市を識別するデータとして追加されます。

* **エイリアン遭遇の確認**
ユーザーが都市名を入力して、特定の都市でのエイリアン遭遇の記録を確認します。Data Storeにその都市の記録が存在する場合、アプリは肯定的なレスポンスを表示します。存在しない場合は、否定的なレスポンスを表示します。
![catalyst_alcity_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/alien-city-appsail-express/catalyst_alcity_architecture.webp)