> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React クイックスタート

> React プロジェクトに Base44 バックエンドを追加します

このクイックスタートに従って、React プロジェクトに Base44 を追加してください。Base44 バックエンドを作成し、エンティティを定義して、SDK をフロントエンドに統合します。

<Note>CLI には Node.js 20.19.0 以上が必要です。</Note>

## セットアップ

<Steps>
  <Step title="Base44 CLI をインストール">
    Base44 CLI をグローバルにインストールします:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Base44 バックエンドを作成">
    React プロジェクトディレクトリに移動して、次を実行します:

    ```bash theme={null}
    base44 create
    ```

    まだログインしていない場合、コマンドは認証を促します。

    プロンプトが表示されたら **Create a basic project** を選択してください。これにより、React プロジェクトディレクトリ内にバックエンドファイルが作成されます。その後、プロジェクトを構成するためのプロンプトに従ってください。

    プロジェクトを作成する際、[Base44 skills](/developers/backend/overview/base44-skills) が自動的に含まれ、AI エージェントに Base44 タスクの指示とコンテキストを提供します。
  </Step>

  <Step title="出力ディレクトリを構成">
    [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) を更新して React のビルド出力を指すように設定してください。`site.outputDirectory` フィールドを追加または変更します:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="エンティティを定義">
    データ構造を定義する[エンティティスキーマ](/developers/references/entities/introduction)を作成します。エンティティファイルは `base44/entities/` ディレクトリに配置する必要があります。

    例えば、`base44/entities/task.jsonc` を作成します:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="エンティティを Base44 にプッシュ">
    エンティティスキーマを Base44 にプッシュします:

    ```bash theme={null}
    base44 entities push
    ```

    このコマンドは、ローカルのエンティティ定義を Base44 バックエンドと同期し、アプリケーションで使用できるようにします。詳細は [`entities push`](/developers/references/cli/commands/entities-push) を参照してください。
  </Step>

  <Step title="Base44 SDK をインストール">
    Base44 JavaScript SDK をインストールします:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Base44 クライアントを作成">
    プロジェクトで Base44 SDK [クライアント](/developers/references/sdk/getting-started/client)を作成します。`appId` は `base44/.app.jsonc` ファイルで確認できます。

    例えば、`src/api/base44Client.js` を作成します:

    ```javascript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="フロントエンドで SDK を使用">
    タスクをリストして追加するシンプルなコンポーネントを作成します。例えば、`src/components/TaskList.jsx` を作成します:

    ```jsx theme={null}
    import { useState, useEffect } from 'react';
    import { base44 } from '../api/base44Client';

    export default function TaskList() {
      const [tasks, setTasks] = useState([]);
      const [newTaskTitle, setNewTaskTitle] = useState('');
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        loadTasks();
      }, []);

      const loadTasks = async () => {
        setIsLoading(true);
        try {
          // Get records
          const taskList = await base44.entities.Task.list();
          setTasks(taskList);
        } catch (error) {
          console.error('Error loading tasks:', error);
        }
        setIsLoading(false);
      };

      const addTask = async (e) => {
        e.preventDefault();
        if (!newTaskTitle.trim()) return;

        setIsLoading(true);
        try {
          // Create a record
          const newTask = await base44.entities.Task.create({
            title: newTaskTitle,
            completed: false
          });
          setTasks([...tasks, newTask]);
          setNewTaskTitle('');
        } catch (error) {
          console.error('Error creating task:', error);
        }
        setIsLoading(false);
      };

      return (
        <div>
          <h1>Tasks</h1>

          {isLoading && <p>Loading...</p>}

          <ul>
            {tasks.map((task) => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>

          <form onSubmit={addTask}>
            <input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="New task"
              disabled={isLoading}
            />
            <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
              Add Task
            </button>
          </form>
        </div>
      );
    }
    ```

    <Note>
      SDK を呼び出すときは、大文字小文字を含むスキーマの正確なエンティティ名を使用してください。慣例上、エンティティ名は大文字で始まります。例えば、スキーマに `"name": "Task"` がある場合、`base44.entities.Task.list()` としてアクセスします。
    </Note>
  </Step>

  <Step title="アプリをローカルで実行">
    Vite 開発サーバーを起動して、インテグレーションをテストします。プロジェクトルートから次を実行します:

    ```bash theme={null}
    npm run dev
    ```

    React プロジェクトは SDK クライアントを介して Base44 バックエンドに接続し、デプロイされたエンティティをリアルタイムで操作できます。
  </Step>

  <Step title="フロントエンドをビルド">
    ローカルですべてが意図通りに見えたら、React プロジェクトを本番用にビルドします:

    ```bash theme={null}
    npm run build
    ```

    これにより、出力ディレクトリ (通常は `dist`) に最適化された本番ファイルが作成されます。
  </Step>

  <Step title="フロントエンドをデプロイ">
    ビルドされたフロントエンドを Base44 にデプロイします:

    ```bash theme={null}
    base44 deploy
    ```

    `deploy` コマンドは、ビルドされたフロントエンドを Base44 ホスティングにデプロイします。前回のプッシュ以降にエンティティスキーマに変更があれば、それらの更新もプッシュします。完了すると、プロジェクト名、Base44 ダッシュボードへのリンク、ライブアプリケーション URL が表示されます。
  </Step>
</Steps>

## 次のステップ

これでプロジェクトに Base44 バックエンドが統合されたので、次のことができます:

* [SDK](/developers/references/sdk/getting-started/overview) を使用してフロントエンドにより多くの機能を追加します。
* [エンティティ](/developers/backend/resources/entities/overview)、[バックエンド関数](/developers/backend/resources/functions)、[エージェント](/developers/backend/resources/agents-config)を追加します。TypeScript で作業している場合は、オートコンプリートと型安全性を得るために[型を生成](/developers/references/sdk/getting-started/dynamic-types)してください。
* バックエンドの [`base44 dev`](/developers/references/cli/commands/dev) とフロントエンドの `npm run dev` を実行してローカルでテストします。セットアップ手順については、[ローカル開発](/developers/backend/overview/local-dev/local-development-overview)を参照してください。
* フロントエンドの構築を続け、[`base44 deploy`](/developers/references/cli/commands/deploy) で更新をデプロイします。
* [`base44 site open`](/developers/references/cli/commands/site-open) でデプロイされたサイトを開きます。

## 関連項目

* [CLI Command Reference](/developers/references/cli/commands/introduction): 利用可能なすべての CLI コマンド
* [Project Structure](/developers/backend/overview/project-structure): プロジェクトファイルの構成方法
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): アプリをバックエンドに接続
* [Base44 Skills](/developers/backend/overview/base44-skills): AI アシスタントに Base44 での作業を教える

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>