How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

40min
概要
このガイドでは、Riot.jsを使用してCRUD（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。
バックエンドとして機能する「Basic-CRUD-App-RiotJS」という名前のBack4appプロジェクトの設定を行い、その後Riot.jsフロントエンドと統合します。
このチュートリアルでは、データベーススキーマの設計やBack4app Admin Appを使用したデータ管理から、SDK（該当する場合）またはREST/GraphQL API呼び出しを使用したフロントエンドの統合まで、すべてをカバーします。
最後には、ユーザー認証と安全なデータ処理を備えた完全に機能する、商用利用可能なWebアプリケーションが完成します。
主な利点
スケーラブルなバックエンドシステムを使用してCRUD操作をマスターします。
Riot.jsフロントエンドとBack4appの統合に関する洞察を得ます。
直感的なBack4app Admin Appを利用して、データ管理を簡単に行います。
Dockerコンテナ化を含むデプロイメント戦略を学びます。
﻿
前提条件
始める前に、次のものを用意してください:
新しいプロジェクトを持つBack4appアカウント。
ガイダンスについては、Back4appの始め方を参照してください。
Riot.jsの開発環境。
Riot CLIを使用するか、スクリプトタグを介してRiotを含めることができます。Node.js（v14以降）がインストールされていることを確認してください。
JavaScript、Riot.js、およびREST APIの基本的な知識。
必要に応じて、Riot.jsのドキュメントを参照して追加の洞察を得てください。
﻿
ステップ1 – プロジェクトの初期化
Back4appプロジェクトの作成
Back4appアカウントにサインインします。
ダッシュボードで「新しいアプリ」をクリックします。
プロジェクトに名前を付けます: Basic-CRUD-App-RiotJS として、セットアップ手順に従います。
新しいプロジェクトを作成
﻿
あなたのプロジェクトは、アプリケーションのデータのバックボーンとして、Back4appダッシュボードに表示されます。
﻿
ステップ2 – データベーススキーマの設計
データモデルの作成
CRUDアプリケーションのために、複数のコレクションを定義します。以下は、効率的なCRUD操作のためにデータベースを構造化するのに役立つサンプルコレクションとフィールドです。
1. アイテムコレクション
このコレクションは、各アイテムの詳細を保持します。
フィールド
タイプ
説明
_id
オブジェクトID
自動生成された一意の識別子。
タイトル
文字列
アイテムタイトル。
説明
文字列
簡単なアイテムの説明。
作成日時
日付
アイテムが追加されたタイムスタンプ。
更新日時
日付
アイテムが変更されたタイムスタンプ。
2. ユーザーコレクション
このコレクションにはユーザーの詳細と認証情報が含まれています。
フィールド
タイプ
説明
_id
オブジェクトID
自動生成された一意の識別子。
ユーザー名
文字列
ユニークなユーザー名。
メール
文字列
ユニークなメールアドレス。
パスワードハッシュ
文字列
暗号化されたパスワード。
作成日時
日付
アカウント作成のタイムスタンプ。
更新日時
日付
最後のアカウント更新タイムスタンプ。
これらのコレクションは、Back4appダッシュボードで新しいクラスを作成し、列を定義することで手動で構成できます。
新しいクラスを作成
﻿
フィールドを追加するには、データ型を選択し、名前を割り当て、デフォルトを設定し、フィールドが必須かどうかをマークします。
カラムを作成
﻿
Back4app AIエージェントを活用したスキーマ作成
ダッシュボードからアクセスできるBack4app AIエージェントは、必要なコレクションとフィールドを説明する詳細なプロンプトを処理することで、スキーマを自動的に生成できます。
AIエージェントの使用:
AIエージェントを開く:
プロジェクト設定またはメニューで見つけてください。
データモデルを入力:
コレクションとそのフィールドを概説するプロンプトを貼り付けてください。
レビューと確認:
生成されたスキーマを検証し、プロジェクトに適用します。
サンプルプロンプト
Text
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
このツールはプロセスを迅速化し、一貫したスキーマ設定を保証します。
﻿
ステップ 3 – 管理アプリの有効化と CRUD アクション
管理アプリの概要
Back4app 管理アプリは、ノーコードのドラッグアンドドロップインターフェースを提供し、バックエンド管理を簡単に行えるようにし、CRUD 操作を迅速に実行できます。
管理アプリの有効化
「その他」メニューを開く あなたの Back4app ダッシュボードで。
「管理アプリ」を選択し、「管理アプリを有効にする」をクリックします。
管理アカウントを設定する 初期管理ユーザーを作成することで、デフォルトの役割も設定されます。
管理アプリを有効にする
﻿
有効にしたら、Admin Appにログインしてバックエンドデータを管理します。
Admin App ダッシュボード
﻿
Admin Appを通じてCRUD操作を実行する
このインターフェース内で、あなたは:
レコードを追加する: コレクション内の「レコードを追加」ボタン（例：アイテム）を使用して新しいエントリを作成します。
レコードを編集する: 任意のレコードをクリックして、その詳細を表示および修正します。
レコードを削除する: もはや必要のないレコードを削除します。
このツールは、データ管理のためのシンプルなインターフェースを提供することで、ワークフローを効率化します。
﻿
ステップ 4 – Riot.js を Back4app に接続する
バックエンドが設定されたので、Riot.js フロントエンドを Back4app に接続する時が来ました。
オプション A: Parse SDK を使用する
Parse SDK をインストールする:
Bash
npm install parse
npm install parse
﻿
Riot.js プロジェクトで Parse を初期化する:
ファイルを作成します (例: src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Insert your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Insert your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Riot タグで Parse を使用する:
Riot タグを作成します (例: items.riot) でアイテムを取得して表示します:
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
﻿
オプションB: RESTまたはGraphQL APIの使用
Parse SDKが不適切な場合、API呼び出しを介してCRUD操作を実行します。たとえば、RESTを使用してアイテムを取得するには:
JS
// REST API example to get items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
fetchItems();
// REST API example to get items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
fetchItems();
﻿
必要に応じて、これらのAPI呼び出しをRiot.jsタグ内に統合します。
﻿
ステップ5 – バックエンドの保護
アクセス制御リスト（ACL）の設定
オブジェクトにACLを設定することでデータを保護します。たとえば、プライベートアイテムを作成するには:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Define ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Define ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
クラスレベルの権限（CLP）の調整
Back4appダッシュボード内で、各コレクションのCLPを設定し、認証されたユーザーまたは権限のあるユーザーのみが機密データにアクセスできるようにします。
﻿
ステップ6 – ユーザー認証
ユーザーアカウントの設定
Riot.jsアプリケーションは、Back4appの組み込みParse Userクラスを使用してユーザー登録とログインを処理できます。以下は、ユーザーサインアップのためのRiotタグの例です:
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
﻿
ログインとセッション管理にも同様の戦略を適用できます。ソーシャルログイン、メール確認、パスワード回復などの追加機能は、Back4appダッシュボードで設定できます。
﻿
ステップ7 – Riot.js フロントエンドのデプロイ
Back4appのWebデプロイ機能を使用すると、GitHubリポジトリをリンクすることでRiot.jsアプリをホストできます。プロダクションビルドをデプロイするための手順は次のとおりです:
7.1 プロダクションファイルをビルドする
ターミナルでプロジェクトディレクトリを開きます。
ビルドコマンドを実行します:
Bash
npm run build
npm run build
﻿
これにより、最適化された静的ファイル（HTML、JS、CSS、画像）を含む build フォルダーが作成されます。
ビルドを確認します:
 build フォルダーに index.html と必要なアセットディレクトリが含まれていることを確認します。
﻿
7.2 コードを整理してGitHubにプッシュする
あなたのリポジトリには、完全なRiot.jsフロントエンドソースが含まれている必要があります。典型的な構造は次のようになります:
Text
Basic-CRUD-App-RiotJS-Frontend/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── app.riot
|    ├── parseConfig.js
|    └── tags/
|         ├── items.riot
|         └── auth.riot
|-- package.json
|-- README.md
Basic-CRUD-App-RiotJS-Frontend/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── app.riot
|    ├── parseConfig.js
|    └── tags/
|         ├── items.riot
|         └── auth.riot
|-- package.json
|-- README.md
﻿
例: src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Insert your actual Back4app keys here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Insert your actual Back4app keys here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
例: src/app.riot
HTML
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
﻿
コードをコミットしてプッシュする
Git リポジトリを初期化する（まだの場合）：
Bash
git init
git init
﻿
ファイルを追加する：
Bash
git add .
git add .
﻿
変更をコミットする：
Bash
git commit -m "Riot.js フロントエンドの初期コミット"
git commit -m "Riot.js フロントエンドの初期コミット"
﻿
GitHub リポジトリを作成する（例：Basic-CRUD-App-RiotJS-Frontend) そしてコードをプッシュする：
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-RiotJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-RiotJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHubリポジトリをBack4app Webデプロイメントに統合する
Webデプロイメントを開く:
Back4appダッシュボードにサインインし、プロジェクト（Basic-CRUD-App-RiotJS）を選択し、Webデプロイメントをクリックします。
GitHubに接続する:
プロンプトに従って、GitHubアカウントとリポジトリをリンクします。
リポジトリとブランチを選択する:
リポジトリ（例: Basic-CRUD-App-RiotJS-Frontend）と適切なブランチ（例えば main）を選択します。
﻿
7.4 デプロイメント設定
ビルドコマンド:
リポジトリに事前にビルドされた build フォルダーがない場合は、ビルドコマンドを指定してください（例: npm run build)。Back4appが実行します。
出力ディレクトリ:
静的ファイルが存在する場所を示すために、これを build に設定してください。
環境変数:
APIキーなど、必要な変数を設定に含めてください。
﻿
7.5 Riot.jsアプリのDocker化（オプション）
コンテナ化されたデプロイメントを好む場合は、プロジェクトに Dockerfile を追加してください:
Dockerfile
# Use an official Node image to build the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire app and build it
COPY . .
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image to build the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire app and build it
COPY . .
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
このルートを選択した場合は、Webデプロイメント設定でDockerオプションを選択してください。
﻿
7.6 アプリケーションを起動する
デプロイ:
設定を構成した後、「デプロイ」ボタンをクリックします。
プロセスを監視:
Back4appがコードを取得し、ビルドコマンドを実行し、アプリをコンテナにデプロイします。
URLを取得:
デプロイが完了すると、Back4appはRiot.jsアプリケーションがホストされているURLを提供します。
﻿
7.7 デプロイを検証する
URLを訪問:
提供されたURLをブラウザで開きます。
アプリをテスト:
すべてのルートとアセット（CSS、JavaScript、画像）が正しく機能していることを確認します。
トラブルシュート:
問題が発生した場合は、ブラウザの開発者ツールとBack4appのログを使用します。
﻿
ステップ8 – まとめと今後の方向性
おめでとうございます！Riot.jsとBack4appを使用して、完全に機能するCRUDアプリを構築しました。
「Basic-CRUD-App-RiotJS」というプロジェクトを設定し、アイテムとユーザーのための堅牢なデータベーススキーマを設計し、Admin Appでデータを管理しました。
Riot.jsのフロントエンドを統合し、ACLのようなセキュリティ対策を実装しました。
次のステップ：
フロントエンドを強化する：
詳細ビュー、検索機能、リアルタイム更新などの機能を追加します。
機能を拡張する：
Cloud Functionsなどの高度なバックエンド操作を探求するか、サードパーティのAPIを統合します。
学びを深める：
Back4appのドキュメントやその他のリソースを訪れて、アプリケーションを最適化し、拡張します。
これらのステップを経て、Riot.jsとBack4appを使用してスケーラブルなCRUDアプリケーションを構築する専門知識を持つことができました。コーディングを楽しんでください！
フィールド	タイプ	説明
_id	オブジェクトID	自動生成された一意の識別子。
タイトル	文字列	アイテムタイトル。
説明	文字列	簡単なアイテムの説明。
作成日時	日付	アイテムが追加されたタイムスタンプ。
更新日時	日付	アイテムが変更されたタイムスタンプ。
フィールド	タイプ	説明
_id	オブジェクトID	自動生成された一意の識別子。
ユーザー名	文字列	ユニークなユーザー名。
メール	文字列	ユニークなメールアドレス。
パスワードハッシュ	文字列	暗号化されたパスワード。
作成日時	日付	アカウント作成のタイムスタンプ。
更新日時	日付	最後のアカウント更新タイムスタンプ。
How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide
Building a CRUD App with Inferno.js: A Comprehensive Walkthrough