Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

概要 このガイドでは、inferno jsを使用してフル機能のcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を示します。 効率的に情報を操作し更新するcrudシステムを開発することで、基本的なデータ操作を扱う方法を学びます。 私たちのバックエンド基盤はback4appによって支えられており、データをシームレスに管理するために「 basic crud app infernojs 」というプロジェクトを立ち上げます。 まず、back4appプロジェクトを設定し、クラスとフィールドを定義することでスケーラブルなデータベーススキーマを設計します。これは手動でもback4app aiアシスタントを使用しても構いません。このプロセスにより、すべてのcrudタスクに対してデータ構造が十分に堅牢であることが保証されます。 その後、データ管理を簡単にするノーコードのドラッグアンドドロップツールであるback4app管理インターフェースを利用します。 最後に、sdk（設定に合う場合）またはapi呼び出しを介してinferno jsフロントエンドをback4appにリンクし、すべてのセキュリティのために厳格なアクセス制御を適用します。 このチュートリアルの終わりまでに、ユーザー認証、動的データ処理、レスポンシブインターフェースを備えたプロダクションレベルのwebアプリケーションを持つことができます。 コアインサイト back4appで堅牢なバックエンドを使用してcrud機能をマスターする。 スケーラブルなデータベーススキーマを設計し、inferno jsフロントエンドと統合する方法を理解する。 作成、読み取り、更新、削除操作を簡単に実行するための視覚的管理ツールを探る。 dockerを使用したコンテナ化を含むデプロイメント戦略を学ぶ。 要件 back4appアカウントと新しく作成したプロジェクト。 ガイダンスが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 inferno jsの開発セットアップ。 お気に入りのinfernoスターターまたはボイラープレートを使用してください。node js（バージョン14以上）がインストールされていることを確認してください。 javascript、inferno js、およびrest apiの原則についての基本的な理解。 詳細については、 infernoドキュメント https //infernojs org/docs/introduction を参照してください。 始める前に、次のことを確認してください ステップ 1 – プロジェクトの初期化 新しい back4app プロジェクトの立ち上げ back4app アカウントにサインインします。 ダッシュボードから「新しいアプリ」オプションを選択します。 プロジェクトに名前を付けます basic crud app infernojs そして、画面の指示に従って作成を完了します。 新しいプロジェクトを作成 作成後、プロジェクトはダッシュボードに表示され、アプリのための堅実なバックエンドプラットフォームを提供します。 ステップ 2 – データベーススキーマの作成 データモデルの定義 このcrudアプリケーションでは、いくつかのクラスを定義します。以下は、crud操作をサポートするために設定された2つの基本クラスの例です。 1\ アイテムクラス フィールド タイプ 詳細 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムのタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成された時刻のマーク。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザークラス フィールド タイプ 詳細 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全な認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 back4appのダッシュボードで「新しいクラス」を選択し、必要なカラムを追加することで、これらのクラスを手動で作成します。 新しいクラスを作成 各フィールドは、データ型を選択し、名前を提供し、デフォルトや要件を設定することで定義できます。 列を作成 back4app aiアシスタントを活用したスキーマ設定 back4app aiアシスタントは、あなたの説明に基づいてクラスを自動生成することで、スキーマ作成を簡素化します。 aiアシスタントの使い方 aiアシスタントにアクセスする back4appダッシュボードにサインインし、設定でaiアシスタントを見つけます。 データモデルの詳細を記入する 必要なクラスとフィールドの包括的な説明を入力します。 レビューと実装 アシスタントがクラス定義を提案します。これらの設定を確認し、適用します。 例のプロンプト create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) aiアシスタントを使用すると、設定が簡素化され、一貫性と効率が確保されます。 ステップ3 – 管理インターフェースとcrud機能の有効化 管理インターフェースの紹介 back4app管理インターフェースは、バックエンドを管理するための強力なノーコードツールで、ドラッグアンドドロップの体験を提供します。crud操作を簡単に実行できます。 管理インターフェースの有効化 「その他」セクションに移動 あなたのback4appダッシュボードで。 「管理アプリ」をクリック そして次に 「管理アプリを有効にする。」 管理アカウントを設定 初期の管理ユーザーを作成することで。このプロセスは自動的に役割と重要なシステムクラスを構成します。 管理アプリを有効にする 有効化後、データを管理するために管理インターフェースにサインインします。 管理アプリダッシュボード 管理インターフェースを介したcrudの実行 管理インターフェース内で、あなたは エントリの作成 クラス内の「レコードを追加」オプションを使用して、新しいデータを挿入します。 エントリの読み取り/変更 任意のレコードをクリックして、その詳細を表示または更新します。 エントリの削除 削除機能を利用して、不要なレコードを削除します。 このインターフェースは、すべてのcrudタスクを簡素化することにより、使いやすさを大幅に向上させます。 ステップ4 – inferno jsをback4appに接続する 管理インターフェースを介してバックエンドが設定されたので、inferno js フロントエンドを統合する時が来ました。 オプション a parse sdk の利用 parse sdk をインストール npm install parse inferno アプリで parse を初期化 設定ファイルを作成します (例 src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // back4app の認証情報をここに挿入してください parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; inferno コンポーネントで parse を実装 例えば、アイテムを取得してリスト表示するコンポーネントを作成します // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("アイテムの読み込み中にエラーが発生しました ", err); } } render() { return ( \<div> \<h2>アイテム\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; オプションb restまたはgraphql apiの使用 parse sdkがあなたのシナリオに理想的でない場合、restまたはgraphqlを介してcrudアクションを実行できます。たとえば、restを使用してアイテムを取得するには // rest api call to retrieve items const fetchitems = async () => { 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); 必要に応じて、これらのapi呼び出しをinfernoコンポーネント内に埋め込んでください。 ステップ5 – バックエンドの強化 アクセス制御リスト（acl）の実装 aclを割り当てることでデータのセキュリティを確保します。たとえば、プライベートアイテムを生成するには async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各クラスのclpを調整してデフォルトのアクセスポリシーを強制し、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの確立 back4appは、認証を処理するためにuserクラス（parse経由）を利用します。あなたのinferno jsアプリで、以下のように登録とログインの機能を実装してください // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } ログインとセッション管理にも同様の戦略が適用されます。ソーシャル認証、メール確認、パスワード回復などの追加機能は、back4appダッシュボードで設定できます。 ステップ7 – inferno jsフロントエンドのデプロイ back4appのwebデプロイメントオプションを使用すると、githubリポジトリをリンクすることで、inferno jsフロントエンドを簡単にホストできます。 7 1 本番用ビルド ターミナルでプロジェクトディレクトリを開きます。 本番ビルドコマンドを実行します npm run build このコマンドは、最適化された静的アセットを含む build フォルダーにアプリケーションをコンパイルします。 ビルドを確認します build フォルダーに index html ファイルと他のアセットフォルダーが含まれていることを確認します。 7 2 コードの整理とアップロード あなたのリポジトリには、inferno js フロントエンドの完全なソースが含まれている必要があります。例のディレクトリ構造 basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md サンプルファイル src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; コードをgithubにプッシュする gitを初期化する プロジェクトフォルダーで git init ファイルをステージする git add 変更をコミットする git commit m "inferno jsフロントエンドの初期コミット" githubリポジトリを作成する 名前は basic crud app infernojs frontend にする。 プロジェクトをプッシュする git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 githubとback4appのwebデプロイメントの接続 webデプロイメントに移動 back4appにログインし、プロジェクト（ basic crud app infernojs ）を選択し、 webデプロイメント 機能をクリックします。 githubと統合 プロンプトに従ってgithubアカウントをリンクし、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択 リポジトリ（例 basic crud app infernojs frontend )と、コードが含まれているブランチ（通常は main )を選択します。 7 4 デプロイメント設定 追加の設定を入力してください ビルドコマンド リポジトリに事前にビルドされた build フォルダがない場合は、次のようなコマンドを指定してください npm run build back4appは、デプロイ中にこれを実行します。 出力フォルダ 出力を build に設定して、back4appが静的ファイルの場所を知ることができるようにします。 環境変数 設定内に必要な変数（apiキーなど）を追加してください。 7 5 アプリケーションのdocker化 コンテナ化を選択する場合は、次のような dockerfile をリポジトリに含めてください \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app 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;"] この方法を選択した場合は、back4appでdockerデプロイメントを選択してください。 7 6 アプリケーションの起動 デプロイをクリック すべての設定が構成されたら、「 デプロイ 」ボタンを押してください。 ビルドを確認 back4appがコードを取得し、プロジェクトをビルドしてコンテナにデプロイします。 アプリにアクセス デプロイ後、back4appはあなたのinferno jsアプリがライブであるurlを提供します。 7 7 デプロイメントの確認 提供されたurlを訪問 ブラウザでurlを開いてください。 機能をテスト アプリが読み込まれ、すべてのルートが正しく動作し、アセット（css、js、画像）が期待通りに表示されることを確認してください。 トラブルシューティング 開発者ツールを使用してエラーを検査します。問題が発生した場合は、back4appのログを確認し、githubの設定を確認してください。 ステップ8 – まとめと今後の方向性 おめでとうございます！あなたはinferno jsとback4appを使って完全なcrudアプリケーションを作成しました。 プロジェクトを設定しました basic crud app infernojs , データクラスを設計し、データ管理のための直感的な管理インターフェースを使用しました。あなたのフロントエンドは、堅牢なアクセス制御で接続され、安全になっています。 次のステップ： uiを強化する： 詳細なビュー、検索機能、ライブ通知を備えたinferno jsアプリを拡張します。 さらに機能を追加する： 追加のバックエンド機能（cloud codeなど）の実装、サードパーティapiの統合、または役割ベースのアクセスの導入を検討してください。 さらに探求する： back4appのドキュメント https //www back4app com/docs やパフォーマンスチューニングやカスタム統合のための追加のチュートリアルを深く掘り下げてください。 コーディングを楽しんで、今後のプロジェクトに幸運を祈ります！