クイックスターターズ
Denoのバックエンドを構築する方法は？

30min
はじめに
このチュートリアルでは、Back4Appを使用してDenoのバックエンドを構築する方法を学びます。
Back4Appの主要機能—データベース、REST API、ユーザー認証、ファイルストレージ、ライブクエリ—をDeno環境に統合するためのすべてのステップを説明します。
RESTエンドポイントを通じてBack4Appと通信し、自分でサーバーを管理することなく完全なインフラを構築する方法を見ていきます。
Back4Appを使用すると、Denoでサーバーを手動で設定する必要がなくなり、時間と労力を節約できます。
Denoの標準ライブラリと現代的なアプローチのおかげで、よりシンプルなコードを書くことに集中できます。
このDenoのバックエンドを構築する方法ガイドの終わりまでに、高度なセキュリティ、クラウドコード、スケジュールされたタスクをDenoアプリケーションに統合するための明確な道筋を持つことができるでしょう。
このチュートリアルを完了すると、サーバーを実行し、REST APIを処理し、ユーザー認証を統合し、ファイルを保存し、タスクを簡単にスケジュールできるようになります。
また、Back4App REST APIを使用してDenoのfetchアプローチでデータを管理する方法も理解できるようになります。
前提条件
Back4appアカウントと新しいBack4appプロジェクト
Back4appの始め方。
アカウントを持っていない場合は、無料で作成できます。上記のリンクを使用してプロジェクトを準備してください。
Denoをインストールする
Denoは https://deno.land から入手できます。オペレーティングシステムにDenoをインストールし、deno --version で確認してください。
基本的なDenoの概念に慣れていること
モジュール、ファイルシステム、deno run --allow-net, または標準ライブラリからアプリケーションモジュールをインポートする方法など。
REST APIの基本的な知識
データ処理のためにfetch呼び出しとヘッダーのコンテンツタイプを使用するので、RESTとJSONの基本を理解していることを確認してください。
始める前に、これらの前提条件を確認してください。Back4Appプロジェクトが設定され、ローカルのDeno環境が稼働していることで、このチュートリアルをスムーズに進めることができます。
ステップ1 – Back4Appで新しいプロジェクトを作成し、接続する
新しいプロジェクトを作成する
あなたのDenoバックエンドの基盤はBack4Appプロジェクトです。まだ作成していない場合は:
Back4Appアカウントにログイン.
「新しいアプリ」ボタンをクリック Back4Appダッシュボードで。
アプリに名前を付ける（例：「Deno-Backend-Tutorial」）。
﻿
プロジェクトが準備できると、Back4Appダッシュボードに表示されます。このプロジェクトでは、データベース、セキュリティ、およびAPIを設定します。
REST経由でBack4Appに接続
Deno用のParse SDKがないため、Back4AppのREST APIエンドポイントを使用します。アプリのアプリ設定またはセキュリティとキーセクションで、アプリケーションID, REST APIキー, およびサーバーURLを見つけることができます。
﻿
このチュートリアル全体を通して、fetchを使用してDenoからBack4Appにリクエストを送信します。各呼び出しにAPIキーとヘッダーのコンテンツタイプを含めることを忘れないでください。
ステップ2 – データベースの設定
このステップでは、Back4Appでデータモデルを作成し、DenoからREST APIを使用してそれと対話します。
データモデルの作成
「データベース」セクションに移動し、Back4Appダッシュボードで。
「新しいクラスを作成」をクリックし、例えば「Todo」と名付けます。
関連するカラムを追加（例：title（String）、isCompleted（Boolean））。
新しいクラスを作成
﻿
データが保存されるときに、Parseがこれらのカラムを自動的に作成することも許可できます。
AIエージェントを使ったデータモデルの作成
Back4AppのAIエージェントがスキーマを設計します:
AIエージェントを開く あなたのBack4Appダッシュボードで。
データモデルを説明する（例：“タイトル、説明、isCompletedフィールドを持つTodoクラスを作成する。”）。
エージェントに自動的に スキーマを生成させる。
﻿
これにより、より複雑なスキーマを迅速に管理できます。
REST APIを使用したデータの読み書き
Denoから、fetchを使ってRESTエンドポイントを呼び出すことでサーバーを実行できます。例えば、Todoを作成するには:
Text
// file called createTodo.ts
export async function createTodoItem(title: string, isCompleted: boolean) {
  const url = "https://parseapi.back4app.com/classes/Todo";
  const body = JSON.stringify({ title, isCompleted });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body,
  });

  if (!response.ok) {
    throw new Error(`Error saving Todo: ${response.statusText}`);
  }
  const result = await response.json();
  return result;
}
// file called createTodo.ts
export async function createTodoItem(title: string, isCompleted: boolean) {
  const url = "https://parseapi.back4app.com/classes/Todo";
  const body = JSON.stringify({ title, isCompleted });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body,
  });

  if (!response.ok) {
    throw new Error(`Error saving Todo: ${response.statusText}`);
  }
  const result = await response.json();
  return result;
}
﻿
Todoを取得するには:
Text
// file called fetchTodos.ts
export async function fetchTodos() {
  const url = "https://parseapi.back4app.com/classes/Todo";

  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });

  if (!response.ok) {
    throw new Error(`Error fetching Todos: ${response.statusText}`);
  }
  const result = await response.json();
  return result;
}
// file called fetchTodos.ts
export async function fetchTodos() {
  const url = "https://parseapi.back4app.com/classes/Todo";

  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });

  if (!response.ok) {
    throw new Error(`Error fetching Todos: ${response.statusText}`);
  }
  const result = await response.json();
  return result;
}
﻿
これを実行できます:
Bash
deno run --allow-net createTodo.ts
deno run --allow-net createTodo.ts
﻿
GraphQL APIを使用したデータの読み取りと書き込み
Back4AppはGraphQLエンドポイントも提供しています: https://parseapi.back4app.com/graphql
Text
// file called createTodoGraphQL.ts
export async function createTodoGraphQL(title: string) {
  const mutation = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${title}"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch("https://parseapi.back4app.com/graphql", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query: mutation }),
  });

  const result = await response.json();
  return result;
}
// file called createTodoGraphQL.ts
export async function createTodoGraphQL(title: string) {
  const mutation = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${title}"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch("https://parseapi.back4app.com/graphql", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query: mutation }),
  });

  const result = await response.json();
  return result;
}
﻿
ライブクエリの操作（オプション）
ライブクエリはリアルタイムで更新されますが、DenoにはネイティブのParse LiveQueryライブラリがありません。それでも、Back4Appダッシュボードで他のクライアント用にライブクエリ機能を設定するか、DenoでWebSocketを使用して手動で購読できます。詳細については、公式の ライブクエリのドキュメントをご覧ください。
ステップ3 – ACLとCLPによるセキュリティの適用
概要
Back4AppのACL（アクセス制御リスト）とCLP（クラスレベルの権限）は、データを保護します。CLPを使用して、クラス全体のデフォルトルールを設定します。その後、ACLを使用してオブジェクトレベルの制限を行います。
クラスレベルの権限の設定
データベースを開く セクションをあなたのBack4Appダッシュボードで。
クラスを選択 （例えば、「Todo」）。
クラスレベルの権限 タブに移動します。
必要に応じて、一般公開または認証されたユーザーのために 読み取り/書き込みアクセスを有効または無効にします。
﻿
ACLの設定
REST経由でオブジェクトを作成または更新する際に、リクエストボディにACL属性を含めることができます。例えば:
Text
const body = JSON.stringify({
  title: "Private Task",
  ACL: {
    "*": { "read": false, "write": false },
    "ROLE:Admins": { "read": true, "write": true },
  }
});
const body = JSON.stringify({
  title: "Private Task",
  ACL: {
    "*": { "read": false, "write": false },
    "ROLE:Admins": { "read": true, "write": true },
  }
});
﻿
この例では、「Admins」ロールのみが読み取りまたは書き込みを許可されています。一般公開アクセスはオフです。
ステップ 4 – クラウドコード関数の作成
なぜクラウドコードなのか
クラウドコードは、安全なサーバーサイドのロジックを保存する場所です。サーバーを自分で管理する必要はありません。特定のクラスに対してバリデーションやトリガーを追加できます。
クラウドコード関数の例
クラウド関数（JavaScriptで）を定義し、アプリにデプロイできます。例えば、テキストの長さをチェックする関数は次のようになります:
Text
Parse.Cloud.define("calculateTextLength", async (request) => {
  const { text } = request.params;
  if (!text) {
    throw "Text parameter is required";
  }
  return { length: text.length };
});
Parse.Cloud.define("calculateTextLength", async (request) => {
  const { text } = request.params;
  if (!text) {
    throw "Text parameter is required";
  }
  return { length: text.length };
});
﻿
デプロイメント
コードは、Back4App CLIまたは、Back4Appダッシュボードのクラウドコードパネルを通じてデプロイできます。
クラウドコードでのNPM
外部ライブラリをインポートすることができます。require(). デプロイ後、サーバー環境がそれらを実行します。これは高度なタスクに役立ちますが、Denoから実行することは、Back4Appのクラウドコード環境とは別であることを忘れないでください。
ステップ 5 – 認証の設定
認証を有効にする
Back4Appは、認証のためにParse Userクラスを使用します。Denoを使用している間、ユーザーを管理するためにRESTエンドポイントを呼び出すことができます。
RESTを使用したサインアップとログイン
Text
async function signUpUser(username: string, password: string, email: string) {
  const url = "https://parseapi.back4app.com/users";
  const body = JSON.stringify({ username, password, email });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body,
  });

  return await response.json();
}

async function logInUser(username: string, password: string) {
  const url = `https://parseapi.back4app.com/login?username=${username}&password=${password}`;

  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  return await response.json();
}
async function signUpUser(username: string, password: string, email: string) {
  const url = "https://parseapi.back4app.com/users";
  const body = JSON.stringify({ username, password, email });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body,
  });

  return await response.json();
}

async function logInUser(username: string, password: string) {
  const url = `https://parseapi.back4app.com/login?username=${username}&password=${password}`;

  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  return await response.json();
}
﻿
ソーシャルログイン
Back4AppでGoogle、Facebook、Apple、その他のプロバイダーを設定できます。その後、OAuthトークンを使用して専用のエンドポイントを呼び出します。詳細については、Back4Appのソーシャルログインドキュメントを参照してください。
ステップ6 – ファイルストレージの処理
ファイルのアップロードと取得
Denoからファイルをアップロードするには、https://parseapi.back4app.com/files/<FILENAME>. 例えば:
Text
async function uploadFile(fileData: Uint8Array, fileName: string) {
  const url = `https://parseapi.back4app.com/files/${fileName}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "image/png",
    },
    body: fileData,
  });
  return await response.json();
}
async function uploadFile(fileData: Uint8Array, fileName: string) {
  const url = `https://parseapi.back4app.com/files/${fileName}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "image/png",
    },
    body: fileData,
  });
  return await response.json();
}
﻿
その結果得られたファイルURLをクラスオブジェクトに保存できます。この方法は、Denoでサーバーを実行している間に画像やドキュメントを保存するのに最適です。
ステップ7 – メール確認とパスワードリセット
概要
メールを確認することで正当なアクセスが保証されます。パスワードリセットは、ユーザーが安全にアクセスを取り戻すのに役立ちます。
ダッシュボード設定
メール確認を有効にする あなたのBack4Appダッシュボードのメール設定で。
確認テンプレートをカスタマイズする
パスワードリセットを有効にする そして、好みのメールレイアウトを設定します。
ユーザーがサインアップすると、メール認証をオンにしている場合は確認リンクが送信されます。パスワードリセットの場合は、RESTエンドポイントを呼び出します POST /requestPasswordReset.
ステップ 8 – クラウドジョブによるタスクのスケジューリング
クラウドジョブの概要
クラウドジョブは、人間の介入なしに定期的に実行されます。たとえば、古いレコードを毎日削除したり、定期的なメールリマインダーを送信したりできます。
Text
Parse.Cloud.job("cleanupOldTodos", async (request) => {
  const Todo = Parse.Object.extend("Todo");
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now.valueOf() - THIRTY_DAYS);

  query.lessThan("createdAt", cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job("cleanupOldTodos", async (request) => {
  const Todo = Parse.Object.extend("Todo");
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now.valueOf() - THIRTY_DAYS);

  query.lessThan("createdAt", cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
このジョブをデプロイした後、あなたの Back4App ダッシュボードの アプリ設定 > サーバー設定 > バックグラウンドジョブ でスケジュールできます。
ステップ 9 – ウェブフックの統合
定義
ウェブフックは、オブジェクトの作成や更新などのイベントが発生したときにトリガーされるHTTPコールバックです。Slack、Stripe、または任意の外部サービスと統合できます。
設定
“その他” > “ウェブフック”を開く Back4App ダッシュボードで。
“ウェブフックを追加”をクリック し、サードパーティサービスのエンドポイントを提供します。
リクエストを送信したいトリガーまたはクラスを設定します。
ウェブフックの追加
﻿
これにより、Back4Appでオブジェクトを作成または変更するたびに、外部システムがデータを受信できるようになります。
ステップ 10 – Back4App 管理パネルの探索
管理パネルの紹介
非技術的なチームは、このパネルを使用してデータを視覚的に管理できます。CRUD操作とデータレビューを簡素化します。
有効にする方法
アプリダッシュボード > その他 > 管理アプリに移動し、「管理アプリを有効にする」を選択します。
管理ユーザーを作成してログインします。
管理アプリ用のサブドメインを設定します。
管理アプリを有効にする
﻿
その後、管理アプリにログインして、安全にレコードを管理できます。
結論
このチュートリアルでは、Back4App上でDenoのバックエンドを構築する方法を学びました。データモデルを作成し、ユーザー認証を処理し、セキュリティのためのACLとCLPについて学び、クラウドジョブをスケジュールしました。
外部APIをWebhookを介して統合する方法や、deno run --allow-netコマンドを使用してサーバーやREST APIを実行する方法も見ました。
このセットアップにより、手動でファイルシステムやサーバーアーキテクチャの標準ライブラリの複雑さを構成することなく、迅速に開始できます。
次のステップ:
Denoアプリケーションを拡張し、Cloud Codeを使用して追加のエンドポイントと高度なロジックを実装します。
より多くのサービスを統合（例：決済ゲートウェイ、分析）し、Back4Appのデータと連携させます。
Back4Appの公式ドキュメントを参照し、セキュリティ、パフォーマンス、ログ分析のヒントを深く学びます。
実験し、リアルタイム機能やdeno kvストレージを活用して、DenoランタイムとBack4Appの堅牢な環境間でデータを橋渡しします。
新しい知識を持って、Back4Appにサポートされた安全でスケーラブル、かつ機能満載のDenoバックエンドを自信を持ってデプロイできます。
更新日 24 Jan 2025
このページは役に立ちましたか？
Astroのバックエンドを構築する方法は？
Golangのバックエンドを構築する方法は？