---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/introduction/
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Java SDK"
    url: /ja/sdk/java/v1/overview/
  - name: "Node.js SDK"
    url: /ja/sdk/nodejs/v2/overview/
  - name: "Python SDK"
    url: /ja/sdk/python/v1/overview/
---

# Alien City

### はじめに

このチュートリアルでは、都市でのエイリアン遭遇を報告・検索できる**Alien City**というシンプルなWebアプリケーションを構築します。Alien Cityは、Catalystを使用したシングルページサーバーレスアプリケーションです。

クライアントアプリケーションは以下のように表示されます：

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

以下のリンクから、実際に動作するアプリケーションにアクセスして機能を確認できます：
[アプリを試す](https://alien-city.catalystserverlessapp.com/app/)

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

[**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/):

* [**Advanced I/O Function**](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io/): Advanced I/O functionは、[Java](https://docs.catalyst.zoho.com/ja/sdk/java/v1/overview/)、[Node.js](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/overview/)、または[Python](https://docs.catalyst.zoho.com/ja/sdk/python/v1/overview/)プラットフォームでビジネスロジックをコーディングできるコンポーネントです。都市でのエイリアン遭遇を報告または確認するためのAPIが含まれています。

[**Catalyst Cloud Scale**](https://docs.catalyst.zoho.com/ja/cloud-scale/getting-started/introduction/):

* **Web Client**: [Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)を通じてCatalyst上にホストされるアプリケーションのフロントエンドです。

* [**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 Command Line Interface](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用します。

このチュートリアルでは、functionおよびclientコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーし、指示に従って適切なファイルに貼り付けるだけで完了します。

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

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

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

* **エイリアン遭遇の確認**
ユーザーが都市名を入力して、その都市でのエイリアン遭遇の記録を確認します。Data Storeにその都市の記録が存在する場合、クライアントは肯定的なレスポンスを表示します。存在しない場合は、否定的なレスポンスを表示します。

![alien-city-client](https://catalyst-docs-development.zohostratus.in/images/tutorials/alcity/catalyst_alcity_architecture.webp)