Quickstarters
リミックスフロントエンドを構築し、それをバックエンドに接続する方法？

19min
このチュートリアルでは、Remixを使用してTo-Doリストアプリケーションを構築し、Back4appの管理されたバックエンドサービスに接続します。
このステップバイステップガイドは、基本的なCRUD操作を習得し、Remixを使用して動的なユーザーインターフェースを設計するのに役立つように設計されています。
フルスタックアプリケーションを構築するには、フロントエンドとバックエンドの両方を設定する必要があります。Back4appを使用することで、スケーラブルなバックエンドサービス（BaaS）を活用できるため、サーバーの設定に煩わされることなく、魅力的なユーザーエクスペリエンスの創造に集中できます。
Back4appは、シームレスな統合のための使い勝手の良いデータベース、認証、クラウド機能、SDKを提供します。これらの機能を活用することで、Remixアプリケーションを迅速にプロトタイプ、構築、展開できます。
主なポイント
このチュートリアルに従うことで、あなたは:
業界標準のツールを使用して、最新のRemixプロジェクトを初期化します。
Parse SDKを使用して、RemixフロントエンドをBack4appバックエンドに接続します。
CRUD操作を実装して、あなたの To-Doリスト を管理します。
Remixアプリをコンテナ化し、Back4app Web Deploymentを介して展開します。
前提条件
始める前に、次のものを用意してください:
Node.jsとnpmがシステムにインストールされていること。ターミナルで node -v と npm -v を実行して確認してください。
基本的なRemixの知識, ルーティング、ローダー、アクションを含む。RemixはReactに基づいているため、Reactの概念に慣れていると役立ちます。
Back4appアカウントを持っていること。バックエンドサービスを構成および管理するために必要です。まだ登録していない場合は、Back4appにサインアップしてください。
これらのツールを手に入れたら、Remixアプリケーションを作成し、堅牢なバックエンドと統合する準備が整いました。
プロジェクトのセットアップ
まず、ローカル開発環境をセットアップし、Remixプロジェクトを初期化します。これにより、アプリケーションのためのクリーンで効率的な基盤が確保されます。
次に、以下のコマンドを使用してRemixプロジェクトをインストールします。todo-appを希望のプロジェクト名に置き換えてください:
Bash
npx create-remix@latest todo-app
npx create-remix@latest todo-app
﻿
新しいプロジェクトディレクトリに移動します:
Bash
cd todo-app
cd todo-app
﻿
すべてが正常に動作していることを確認するために、開発サーバーを実行します:
Bash
npm run dev
npm run dev
﻿
ターミナルに表示されたURLを開いて、Remixアプリが正常に実行されていることを確認します。
Back4appでのTodoバックエンドの設定
Back4appは、Parseによって提供される強力な管理されたバックエンドを提供します。あなたは、To-Doリストアプリケーションの基盤となるタスクのデータモデルを作成します。
バックエンドアプリケーションの作成
あなたの Back4appダッシュボード にログインし、 "新しいアプリを作成"
アプリケーションに名前を付けます（例えば、 TodoRemixApp) そして NodeJS/Parse をバックエンドタイプとして選択します。
「データベース」 > 「ブラウザ」セクションで、 "クラスを作成"をクリックし、「カスタム」を選択します。クラスに タスクという名前を付け、クラスレベルの権限を設定して、公開の読み取りと書き込みを許可します（これらの設定は後で調整できます）。
次のフィールドを タスク クラスに追加します:
タイトル（文字列）– タスクの名前。
説明（文字列）– タスクの詳細。
完了（ブール値）– タスクが完了しているかどうかを示します。
期限日（日付）– タスクの締切。
スキーマを確定するには、 "保存"をクリックします。
Back4app クラス作成ページ
﻿
RemixとBack4appの統合
RemixアプリをBack4appに接続するために、Parse JavaScript SDKを使用します。SDKをインストールするには、次のコマンドを実行します:
Bash
npm install parse
npm install parse
﻿
次に、Remixアプリケーション内でParseを設定します。ファイルを開いて、app/root.tsxの先頭に次の初期化コードを追加します。'your-application-id'と'your-javascript-key'をBack4appダッシュボードからの資格情報に置き換えます（アプリ設定 > セキュリティとキー):
TypeScript
// app/root.tsx
import Parse from "parse";
import React from "react";
 
const PARSE_APP_ID = 'your-application-id';
const PARSE_JS_KEY = 'your-javascript-key';
const PARSE_SERVER_URL = 'https://parseapi.back4app.com/';
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
(Parse as any).serverURL = PARSE_SERVER_URL;
// app/root.tsx
import Parse from "parse";
import React from "react";
 
const PARSE_APP_ID = 'your-application-id';
const PARSE_JS_KEY = 'your-javascript-key';
const PARSE_SERVER_URL = 'https://parseapi.back4app.com/';
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
(Parse as any).serverURL = PARSE_SERVER_URL;
﻿
特にサーバー側でローダー関数が実行されるときに、Parseが完全に初期化されていることを確認します。
このコードをあなたの layout 関数に追加してください root.tsx ファイルに。
TypeScript
// app/root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
      (Parse as any).serverURL = "https://parseapi.back4app.com/";
    }
  }, []);
  
  // Rest of the layout function
}
// app/root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
      (Parse as any).serverURL = "https://parseapi.back4app.com/";
    }
  }, []);
  
  // Rest of the layout function
}
﻿
この設定により、あなたのRemixルートとアクションがBack4appバックエンドとシームレスに相互作用できるようになります。
Remixを使ったフロントエンドの構築
バックエンドが設定されたので、Remixを使用してTo-Doリストインターフェースを構築します。これには、データの取得と変更を処理するためのルート、ローダー、およびアクションの作成が含まれます。
ルートの構造化
Remixでは、すべてのルートは app/routes ディレクトリ内のファイルに対応しています。 app/routes/_index.tsx を開いて、ページの構造とデータ操作を定義するために次のコードを追加します:
TypeScript
// app/routes/_index.tsx
import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
import * as Parse from "parse";
 
export const loader = async () => {
  if (typeof window === "undefined") {
    try {
      const response = await fetch(
        "https://parseapi.back4app.com/classes/Task",
        {
          headers: {
            "X-Parse-Application-Id":
              "your-application-id",
            "X-Parse-JavaScript-Key":
              "your-javascript-key",
          },
        }
      );
      const data = await response.json();
      return json({
        tasks: data.results.map((task) => ({ id: task.objectId, ...task })),
      });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  } else {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      const tasks = results.map((task) => ({ id: task.id, ...task.toJSON() }));
      return json({ tasks });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  }
};
 
export const action = async ({ request }) => {
  const formData = await request.formData();
  const actionType = formData.get("actionType");
  // Parse server details
  const parseServerUrl = "https://parseapi.back4app.com";
  const headers = {
    "X-Parse-Application-Id": "your-application-id",
    "X-Parse-JavaScript-Key": "your-javascript-key",
    "Content-Type": "application/json",
  };
  try {
    if (actionType === "add") {
      const title = formData.get("title");
      const description = formData.get("description");
      // Create task using REST API
      const response = await fetch(`${parseServerUrl}/classes/Task`, {
        method: "POST",
        headers,
        body: JSON.stringify({
          title,
          description,
          completed: false,
        }),
      });
      if (!response.ok) {
        throw new Error(`Failed to add task: ${response.status}`);
      }
    } else if (actionType === "toggle") {
      const id = formData.get("id");
      // First get the current task to check its completed status
      const getResponse = await fetch(`${parseServerUrl}/classes/Task/${id}`, {
        headers,
      });
      if (!getResponse.ok) {
        throw new Error(`Failed to get task: ${getResponse.status}`);
      }
      const task = await getResponse.json();
      const updateResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "PUT",
          headers,
          body: JSON.stringify({
            completed: !task.completed,
          }),
        }
      );
      if (!updateResponse.ok) {
        throw new Error(`Failed to update task: ${updateResponse.status}`);
      }
    } else if (actionType === "delete") {
      const id = formData.get("id");

      const deleteResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "DELETE",
          headers,
        }
      );
      if (!deleteResponse.ok) {
        throw new Error(`Failed to delete task: ${deleteResponse.status}`);
      }
    }
    return redirect("/");
  } catch (error) {
    console.error("Error processing action:", error);
    return json({ error: error.message }, { status: 400 });
  }
};
 
export default function TodoRoute() {
  const { tasks } = useLoaderData();
  return (
    <div className="container">
      <h1>To-Do List</h1>
      <Form method="post" className="form">
        <input type="hidden" name="actionType" value="add" />
        <input type="text" name="title" placeholder="Task Title" required />
        <input type="text" name="description" placeholder="Description" required />
        <button type="submit">Add Task</button>
      </Form>
      <div className="tasks">
        {tasks.length === 0 ? (
          <p>No tasks available</p>
        ) : (
          tasks.map(task => (
            <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
              <h3>{task.title}</h3>
              <p>{task.description}</p>
              <Form method="post">
                <input type="hidden" name="actionType" value="toggle" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">{task.completed ? "Undo" : "Complete"}</button>
              </Form>
              <Form method="post">
                <input type="hidden" name="actionType" value="delete" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">Delete</button>
              </Form>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
// app/routes/_index.tsx
import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
import * as Parse from "parse";
 
export const loader = async () => {
  if (typeof window === "undefined") {
    try {
      const response = await fetch(
        "https://parseapi.back4app.com/classes/Task",
        {
          headers: {
            "X-Parse-Application-Id":
              "your-application-id",
            "X-Parse-JavaScript-Key":
              "your-javascript-key",
          },
        }
      );
      const data = await response.json();
      return json({
        tasks: data.results.map((task) => ({ id: task.objectId, ...task })),
      });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  } else {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      const tasks = results.map((task) => ({ id: task.id, ...task.toJSON() }));
      return json({ tasks });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  }
};
 
export const action = async ({ request }) => {
  const formData = await request.formData();
  const actionType = formData.get("actionType");
  // Parse server details
  const parseServerUrl = "https://parseapi.back4app.com";
  const headers = {
    "X-Parse-Application-Id": "your-application-id",
    "X-Parse-JavaScript-Key": "your-javascript-key",
    "Content-Type": "application/json",
  };
  try {
    if (actionType === "add") {
      const title = formData.get("title");
      const description = formData.get("description");
      // Create task using REST API
      const response = await fetch(`${parseServerUrl}/classes/Task`, {
        method: "POST",
        headers,
        body: JSON.stringify({
          title,
          description,
          completed: false,
        }),
      });
      if (!response.ok) {
        throw new Error(`Failed to add task: ${response.status}`);
      }
    } else if (actionType === "toggle") {
      const id = formData.get("id");
      // First get the current task to check its completed status
      const getResponse = await fetch(`${parseServerUrl}/classes/Task/${id}`, {
        headers,
      });
      if (!getResponse.ok) {
        throw new Error(`Failed to get task: ${getResponse.status}`);
      }
      const task = await getResponse.json();
      const updateResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "PUT",
          headers,
          body: JSON.stringify({
            completed: !task.completed,
          }),
        }
      );
      if (!updateResponse.ok) {
        throw new Error(`Failed to update task: ${updateResponse.status}`);
      }
    } else if (actionType === "delete") {
      const id = formData.get("id");

      const deleteResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "DELETE",
          headers,
        }
      );
      if (!deleteResponse.ok) {
        throw new Error(`Failed to delete task: ${deleteResponse.status}`);
      }
    }
    return redirect("/");
  } catch (error) {
    console.error("Error processing action:", error);
    return json({ error: error.message }, { status: 400 });
  }
};
 
export default function TodoRoute() {
  const { tasks } = useLoaderData();
  return (
    <div className="container">
      <h1>To-Do List</h1>
      <Form method="post" className="form">
        <input type="hidden" name="actionType" value="add" />
        <input type="text" name="title" placeholder="Task Title" required />
        <input type="text" name="description" placeholder="Description" required />
        <button type="submit">Add Task</button>
      </Form>
      <div className="tasks">
        {tasks.length === 0 ? (
          <p>No tasks available</p>
        ) : (
          tasks.map(task => (
            <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
              <h3>{task.title}</h3>
              <p>{task.description}</p>
              <Form method="post">
                <input type="hidden" name="actionType" value="toggle" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">{task.completed ? "Undo" : "Complete"}</button>
              </Form>
              <Form method="post">
                <input type="hidden" name="actionType" value="delete" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">Delete</button>
              </Form>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
﻿
このルートは、Remixのローダーとアクションを使用してBack4appからタスクを取得し、タスクの追加、切り替え、削除などのユーザーインタラクションを処理します。
リミックスアプリのスタイリング
アプリケーションの基本的な外観と感触を定義するために、app/global.cssにCSSファイルを作成します:
CSS
/* app/global.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
/* app/global.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
﻿
次に、app/root.tsxにCSSファイルをインポートします:
TypeScript
// app/root.tsx
import "./global.css";
// app/root.tsx
import "./global.css";
﻿
あなたのリミックスアプリは、Back4appのバックエンドと連携する機能的なTo-Doリストインターフェースを持っています。
Back4appでのリミックスアプリのコンテナ化とデプロイ
Back4appのWebデプロイメントは、アプリケーションのためのコンテナ化された環境を提供します。リミックスアプリをDockerコンテナにパッケージしてデプロイします。
本番用にリミックスを設定する
コンテナ化する前に、リミックスアプリを本番用のバンドルにビルドします:
Bash
npm run build
npm run build
﻿
Dockerfileの作成
プロジェクトのルートに次の内容で Dockerfile を作成します:
Dockerfile
# Stage 1: Build the Remix app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
 
# Stage 2: Serve the app using a lightweight Node server
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./
RUN npm install --production
EXPOSE 3000
CMD ["npm", "run", "start"]
# Stage 1: Build the Remix app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
 
# Stage 2: Serve the app using a lightweight Node server
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./
RUN npm install --production
EXPOSE 3000
CMD ["npm", "run", "start"]
﻿
このDockerfileは、あなたのRemixプロジェクトをビルドし、最小限のNode.jsランタイムを使用して本番環境用に準備します。
Dockerコンテナのビルドとテスト
ローカルでDockerイメージをビルドします:
Bash
docker build -t todo-remix-frontend .
docker build -t todo-remix-frontend .
﻿
デプロイメントをテストするためにコンテナを実行します:
Bash
docker run -p 8080:3000 todo-remix-frontend
docker run -p 8080:3000 todo-remix-frontend
﻿
ブラウザで http://localhost:8080 を訪れて、Remixアプリが正しく動作していることを確認してください。
Back4app Web Deploymentによるデプロイ
プロジェクトをGitHubにプッシュします:
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
次に、 Back4app Web Deployment にログインし、次の手順に従ってください:
"新しいアプリを作成"をクリックし、プロジェクトに名前を付けます。
"GitHubリポジトリ"を選択し、Back4appを認証します。
あなたの todo-remix リポジトリを選択します。
"Dockerfileデプロイ"を選択し、ビルド設定を確認します。
"デプロイ"をクリックして、ビルドを開始します。
デプロイ後は、Back4appダッシュボードを通じてコンテナを監視します。ログを表示したり、ビルドを管理したり、カスタムドメインを設定したりできます。
Back4app Web Deployment Dashboard
﻿
アプリケーションのテストとデバッグ
デプロイ後、アプリケーションが期待通りに機能することを確認してください。フロントエンドとバックエンドの統合を確認する方法は次のとおりです:
API 接続： ブラウザの開発者コンソール (F12) を開き、タスクを追加、切り替え、または削除する際のネットワークリクエストを確認します。
データの永続性： UI を通じてタスクを追加し、ページをリフレッシュして保存されていることを確認します。Back4app データベースブラウザでの変更を確認します。クラスの下で。
CRUD 操作： 完了ステータスの切り替えとタスクの削除をテストします。問題が発生した場合は、コンソールと API ログを確認します。
エッジケースの処理： 空の入力を送信して、バリデーションが効果的であることを確認します。
ベストプラクティスと最適化のヒント
セキュリティ、パフォーマンス、スケーラビリティを向上させるために、これらの推奨事項に従ってください：
API コールの最適化： バッチリクエストを使用し、クエリで必要なフィールドのみを選択します。
環境変数： 機密キー (アプリケーション ID と JavaScript キー) を .env ファイルに保存し、安全に参照します。
アクセス制御： 認証されたユーザーにデータの変更を制限する動的 ACL を実装します。
クラウドコード： パフォーマンスとセキュリティを向上させるために、複雑なロジックを Back4app クラウドコードにオフロードします。
結論
Remix を使用してフルスタックの To-Do リストアプリケーションを正常に構築し、Back4app バックエンドに接続しました。
このチュートリアルでは、Remix プロジェクトの初期化、バックエンドとのインタラクションのための管理サービスの統合、およびデプロイメントのためのアプリケーションのコンテナ化を案内しました。
アプリが稼働しているので、ユーザー管理の高度な機能、リアルタイム更新、またはサードパーティ統合を追加することを検討してください。
さらなるガイダンスについては、Back4app ドキュメント と Remix リソースを探ってください。
How to Build a Qwik Frontend and Connect It to a Backend?
Astroフロントエンドを構築し、バックエンドに接続する方法？