Quickstarters
jQueryのためのバックエンドを構築する方法は？

36min
はじめに
このチュートリアルでは、 jQueryのバックエンドを構築する方法を学びます。
私たちは、データベース管理、Cloud Code、RESTおよびGraphQL API、ユーザー認証、リアルタイムクエリなど、Back4appの基本機能を統合して、安全でスケーラブルなバックエンドを作成します。
このバックエンドは、AJAX呼び出しやその他の一般的なjQueryメソッドを通じて、jQueryベースのフロントエンドと通信します。
Back4appの直感的な環境は、サーバーやデータベースのセットアップに必要な時間を短縮します。
いくつかの簡単なステップに従うことで、ACL、クラスレベルの権限、データモデリング、ファイルアップロードなどの実践的な経験を得ることができます。
このチュートリアルの終わりまでには、Back4appバックエンドに接続された完全に機能するjQueryベースのアプリのためのしっかりとした基盤を持つことができます。
カスタムロジックを追加し、外部APIを統合し、データを細かく制御して保護する準備が整います。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウントと新しいBack4appプロジェクト
 Back4appの始め方。
アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。
基本的なjQuery環境
 jQueryは 公式ウェブサイト からダウンロードできます。
Node.js（バージョン14以上）がインストールされていること（オプション）
ブラウザでのjQueryにはNode.jsは厳密には必要ありませんが、ローカルテストサーバーを実行したり、ローカルテストを行うためにnpmパッケージをインストールする場合には必要になることがあります。 Node.jsのインストール﻿
JavaScriptとjQueryの基本に精通していること
 jQuery公式ドキュメント。﻿
jQueryベースのフロントエンドを構築し、Back4appに接続する際にスムーズに進めるように、これらの前提条件をすべて整えておいてください。
ステップ1 – Back4appプロジェクトの設定
新しいプロジェクトを作成する
jQueryバックエンドプロジェクトを始めるには、新しいBack4appプロジェクトを作成してください:
Back4appアカウントにログインする.
「新しいアプリ」ボタンをクリックする あなたのBack4appダッシュボードで。
アプリに名前を付ける （例：「jQuery-Backend-Tutorial」）。
﻿
プロジェクトが作成されると、あなたのBack4appダッシュボードに表示されます。これがjQueryのバックエンド設定の基盤となります。
Parse SDKを接続する
Back4appはデータとリアルタイム機能のためにParseプラットフォームを使用しています。jQueryでParse SDKを直接使用したい場合は、HTMLにスクリプトとして読み込むことができます。
Parseキーを取得する:
Back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」を開いて見つけてください:
アプリケーションID
JavaScriptキー
ParseサーバーURL（通常は https://parseapi.back4app.com）
﻿
Parse SDKを含める あなたのHTMLファイルに:
HTML
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
﻿
「jQuery」環境では、最初にjQueryを読み込み、その後Parseを読み込んで、スクリプト内でParseオブジェクトと対話できます。この接続により、すべてのデータ呼び出しがBack4appバックエンドを通過することが保証されます。
ステップ2 – データベースの設定
データの保存とクエリ
Parse SDKを統合した後、Back4appデータベースからデータを保存および取得できます。以下は、jQueryとParseを使用して「Todo」オブジェクトを作成および取得する簡単な例です:
HTML
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
﻿
cURLを使用してREST APIを呼び出すこともできます:
Bash
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
﻿
またはGraphQLを使用します:
GraphQL
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
﻿
スキーマ設計とデータ型
Back4appのダッシュボードで:
「データベース」に移動します。
新しいクラスを作成します（例：「Todo」）およびタイトル（String）やisCompleted（Boolean）などのカラムを追加します。
新しいクラスを作成
﻿
オブジェクトを初めて保存する際に、Parseが自動的にカラムを作成することもできます。
カラムを作成
﻿
AIエージェントの使用
Back4appにはデータモデリングのためのAIエージェントがあります:
AIエージェントを開きますアプリのダッシュボードまたはメニューで。
データモデルを説明します（例：「クラススキーマを持つToDoアプリを作成します。」）。
AIエージェントにスキーマを生成させます。
﻿
リレーショナルデータ
もしあなたが多くの カテゴリ クラスにリンクされた Todo アイテムを持っている場合、ポインタまたはリレーションを使用できます:
HTML
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
﻿
ライブクエリ
jQueryアプリでリアルタイム更新を行うには:
ライブクエリを有効にする をあなたのBack4appダッシュボードの サーバー設定 の下で.
ライブクエリのサブスクリプションを初期化する:
HTML
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
﻿
このサブスクリプションは、「Todo」オブジェクトが作成、更新、または削除されるたびにリアルタイムで通知します。
ステップ 3 – ACL と CLP を使用したセキュリティの適用
Back4app セキュリティメカニズム
ACL（アクセス制御リスト） と CLP（クラスレベルの権限）を使用すると、オブジェクトまたはクラスレベルでデータの読み取りと書き込みを誰が行えるかを制御できます。
﻿
アクセス制御リスト（ACL）
ACLは、個々のオブジェクトに設定され、アクセスを制限します:
HTML
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
﻿
ACLを編集
﻿
クラスレベルの権限 (CLP)
CLPは、クラス全体のデフォルトの権限を制御します:
Back4appダッシュボードで, データベースセクションを開きます。
クラスを選択します（例: “Todo”）。
クラスレベルの権限タブに移動して、公開、認証済み、または役割ベースのアクセスを設定します。
﻿
オブジェクトレベルのセキュリティのためにACLを、より広範な制限のためにCLPを組み合わせます。詳細については、 アプリセキュリティガイドラインをご覧ください。
ステップ4 – クラウドファンクションの作成とデプロイ
クラウドコードは、サーバー側でカスタムJavaScriptを実行し、ビジネスロジック、データ検証、または外部API呼び出しを追加できます。
動作の仕組み
コードを main.js (または類似のファイル) に配置し、Back4app にデプロイして、Parse Server に実行を任せます。より複雑なロジックには NPM モジュールを使用することもできます。
JS
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
﻿
関数をデプロイする
次の方法で、Back4app CLI:
Bash
b4a deploy  
b4a deploy  
﻿
ダッシュボードを通じて:
アプリのダッシュボードで、Cloud Code > Functions に移動します。
関数を main.js にコピー/ペーストします。
「デプロイ」をクリックします。
﻿
関数を呼び出す
jQueryから、次のようにCloud Functionを呼び出すことができます:
HTML
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
﻿
ステップ5 – ユーザー認証の設定
Back4appにおけるユーザー認証
Back4appは、Parse.Userクラスを使用して認証を行います。パスワードのハッシュ化、セッショントークン、および安全なストレージは自動的に処理されます。
ユーザー認証の設定
HTML
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
﻿
セッション管理
現在のユーザーを取得できます:
Text
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
﻿
ログアウト:
Text
Parse.User.logOut();  
Parse.User.logOut();  
﻿
ソーシャルログイン統合
Back4appはGoogle、Facebook、Apple、その他のOAuthプロバイダーをサポートしています。詳細については、ソーシャルログインドキュメントをご覧ください。
ステップ6 – ファイルストレージの処理
ファイルのアップロードと取得
アップロードを処理するには、Parse.Fileを使用します:
HTML
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
﻿
フィールドに割り当てることで、クラスにファイルを保存できます:
Text
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
﻿
ファイルURLの取得:
Text
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
﻿
ファイルセキュリティ
Parse Serverでファイルアップロード設定を変更することで、誰がファイルをアップロードできるかを管理できます:
JSON
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
﻿
ステップ 7 – クラウドジョブによるタスクのスケジューリング
クラウドジョブ
古いデータを削除するなどの定期的なタスクを実行できます:
JS
// main.js  
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 - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
// main.js  
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 - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
﻿
ダッシュボードで、アプリ設定 > サーバー設定 > バックグラウンドジョブに移動してスケジュールします。
クラウドジョブのスケジューリング
﻿
ステップ 8 – ウェブフックの統合
Webhooks は、特定のイベントが発生するたびにアプリが外部サービスにHTTPリクエストを送信できるようにします:
「More > WebHooks」に移動します。Back4appダッシュボードで。
新しいWebhookを追加し、外部エンドポイントを設定します。
「Configure」を設定し、「Todoクラスに新しいレコードが追加された」などのイベントのトリガーを設定します。
Webhookの追加
﻿
SlackやStripeのような決済ゲートウェイを、Webhookを通じてイベントデータを送信することで統合できます。
BeforeSave WebHook
﻿
ステップ9 – Back4app管理パネルの探索
「Back4app Admin App」は、CRUD操作のための非技術的なウェブベースのインターフェースを提供します。
管理アプリの有効化
移動する アプリダッシュボード > もっと > 管理アプリ をクリックして「管理アプリを有効にする」を選択します:
管理アプリを有効にする
﻿
最初の管理ユーザーを作成する, これにより新しい役割（B4aAdminUser）とスキーマ内のクラスが自動的に作成されます:
﻿
サブドメインを選択する 管理アプリにアクセスするために:
﻿
ログインする 新しい管理者の資格情報を使用して:
﻿
有効にすると、この管理アプリは、コーディングなしでデータを管理したり、チームメンバーにアクセスを許可したりできます。
結論
このガイドでは、Back4appを使用してjQueryのバックエンドを構築する方法を学びました。あなたは:
バックエンドの基盤として新しいBack4appプロジェクトを作成しました。
スキーマ設計とデータ関係を含むデータベースを設定しました。
細かいセキュリティのためにACLとCLPを使用しました。
カスタムサーバーサイドロジックのためにCloud Codeをデプロイしました。
ユーザー認証、ファイルストレージ、リアルタイム更新を設定しました。
バックグラウンドジョブをスケジュールし、外部サービスのためにWebhookを統合しました。
データ管理を簡素化するためにBack4app管理パネルを探索しました。
これで、基本的なjQuery + Back4appのセットアップをフルプロダクションソリューションに拡張する準備が整いました。ソーシャルログインやより詳細なセキュリティルールなどの高度な機能を統合し続けてください。スケーラブルでデータ駆動型のアプリケーションを構築するのを楽しんでください！
次のステップ
プロダクション準備を整える: 高度な役割ベースの権限、キャッシング戦略、パフォーマンスチューニングを追加します。
サードパーティAPIを統合する: 支払い、メッセージング、または分析のために。
Back4appのドキュメントを探索する: 高度なセキュリティ、ログ、または分析についてさらに深く掘り下げます。
実世界のアプリを作成する: jQueryのシンプルさとBack4appの強力なバックエンドサービスを組み合わせて使用します。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
Gatsbyのバックエンドを構築する方法は？
WatchOSのためのバックエンドを構築する方法は？