ReactJSでCRUDアプリを構築する方法は？

はじめに このチュートリアルでは、reactjsを使用して包括的なcrud（作成、読み取り、更新、削除）アプリケーションを構築します。 このガイドは、crudアプリを構築する方法を示すことで、ソフトウェアアプリケーションの基本操作を実行するように設計されています。これにより、データを効果的に管理および更新できます。 まず、 basic crud app reactjs という名前のback4appプロジェクトを作成し、構成します。これは、ウェブアプリケーションのための堅牢なバックエンドシステムとして機能します。 次に、詳細なコレクションとフィールドを定義することで、スケーラブルなデータベーススキーマを設計します。これは手動で行うことも、back4app aiエージェントの助けを借りることもできます。 次に、back4app admin appを活用します。これは、ドラッグアンドドロップインターフェースを持つユーザーフレンドリーな管理ツールで、コレクションのデータ管理を簡単に行えます。 この管理インターフェースはユーザーエクスペリエンスを向上させ、ユーザーインターフェースを簡素化し、ユーザーが迅速にcrud操作を実行できるようにします。 最後に、reactjsフロントエンドをデプロイし、rest/graphql（または利用可能な場合はparse sdk）を使用してback4appと統合します。その際、先進的なアクセス制御でバックエンドを保護します。 このガイドの終わりまでに、基本的なcrud操作をサポートするだけでなく、ユーザー認証と堅牢なデータ更新機能を含む、プロダクション準備が整ったwebアプリケーションを構築できるようになります。 主なポイント 信頼性の高いデータベース管理システムを使用してデータを効率的に管理するcrudアプリケーションの構築方法を学びます。 スケーラブルなバックエンドの設計と、それをreactjsフロントエンドと統合してユーザーエクスペリエンスを向上させるための実践的な洞察を得ます。 ドラッグアンドドロップ管理ツール（back4app admin app）を使用して、作成、読み取り、更新、削除操作を簡素化する方法を発見します。 dockerコンテナ化を含むデプロイメント技術を理解し、webアプリケーションを迅速に立ち上げる方法を学びます。 前提条件 始める前に、以下のものを用意してください back4appアカウントと新しいプロジェクトの設定。 助けが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 reactjs開発環境。 create react app https //create react app dev/docs/getting started/ または同様のツールを使用してください。node js（バージョン14以上）がインストールされていることを確認してください。 javascript、reactjs、およびrest apiの基本的な理解。 必要に応じて、 reactjsのドキュメント https //reactjs org/docs/getting started html を確認してください。 ステップ1 – プロジェクトのセットアップ 新しいback4appプロジェクトの作成 back4appアカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします 。 プロジェクト名を入力します： basic crud app reactjs とプロンプトに従ってプロジェクトを作成します。 新しいプロジェクトを作成 作成が完了すると、新しいプロジェクトがback4appダッシュボードに表示され、バックエンドの設定とプロジェクト管理のための堅固な基盤を提供します。 ステップ2 – データベーススキーマ設計 データモデルの設計 基本的なcrudアプリのために、いくつかのコレクションを作成します。 以下は、データベーススキーマを効果的に設定するために必要なフィールドとデータ型を概説したコレクションの例です。 これらのコレクションは、ユーザーがデータを作成、読み取り、更新、削除できる基本的なcrud操作を実行するように設計されています。 1\ アイテムコレクション このコレクションは、各アイテムに関する情報を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムのタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 アイテムが最後に更新されたタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザー情報と認証の詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーのためのユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 認証のためのハッシュ化されたパスワード。 作成日時 日付 ユーザーアカウントが作成された時刻。 更新日時 日付 ユーザーアカウントが更新されたタイムスタンプ。 これらのコレクションは、back4appダッシュボードで手動で設定できます。各コレクションの新しいクラスを作成し、フィールドを定義するための列を追加します。 新しいクラスを作成 データ型を選択し、フィールドに名前を付け、デフォルト値を設定し、必須かどうかを定義することで、データベースのフィールドを簡単に作成できます。 カラムを作成 back4app aiエージェントを使用したスキーマ生成 back4app aiエージェントは、あなたのback4appダッシュボードから直接利用できる強力なツールです。 プロンプトに基づいて、希望するコレクションとフィールドを説明することで、データベーススキーマを自動的に生成することができます。 この機能はプロジェクト管理において大幅な時間の節約となり、データベース管理システムがウェブアプリケーションに必要な基本操作を実行できるように設定されていることを保証します。 aiエージェントの使い方 aiエージェントを開く back4appダッシュボードにログインし、メニューまたはプロジェクト設定内でaiエージェントを見つけます。 データモデルを説明する aiエージェントのインターフェースに、必要なコレクションとフィールドを概説する詳細なプロンプトを貼り付けます。 レビューと適用 送信後、aiエージェントがコレクションとフィールド定義を生成します。これらの提案をレビューし、プロジェクトに適用します。 例のプロンプト create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このようにaiエージェントを使用することで、時間を節約し、スキーマが一貫しており、アプリケーションのニーズに最適化されていることを保証します。 ステップ 3 – 管理アプリの有効化とcrud操作 管理アプリの概要 back4app管理アプリは、バックエンドデータを管理するための強力なノーコードインターフェースです。 この管理ツールは、ユーザーがレコードの作成、読み取り、更新、削除などのcrud操作を簡単に実行できるドラッグアンドドロップのユーザーインターフェースを提供します。 管理アプリの有効化 「その他」メニューに移動 して、back4appダッシュボードで。 「管理アプリ」をクリック し、次に 「管理アプリを有効にする」。 管理者の資格情報を設定 して、最初の管理者ユーザーを作成します。このプロセスでは、役割（例： b4aadminuser )やシステムコレクションも設定されます。 管理アプリを有効にする 有効化後、管理アプリにログインしてデータを管理します。 管理アプリダッシュボード 管理アプリを使用したcrud操作 管理アプリ内でできること レコードの作成 コレクション内の「レコードを追加」ボタンをクリックして、新しいエントリを作成します。 レコードの読み取り/更新 任意のレコードを選択して、その詳細を表示したり、フィールドを編集して、スムーズなデータ更新を確保します。 レコードの削除 削除オプションを使用して、もはや必要のないレコードを削除します。 この使いやすい管理ツールは、crud機能のためのシンプルなドラッグアンドドロップインターフェースを提供することで、全体的なユーザー体験を向上させます。 ステップ4 – reactjsとback4appの統合 バックエンドが設定され、管理アプリを通じて管理されているので、reactjsフロントエンドをback4appに接続する時が来ました。 オプションa parse sdkの使用 parse sdkをインストールする npm install parse reactアプリで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; reactコンポーネントでparseを使用する 例えば、アイテムを取得して表示するコンポーネントを作成します // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("アイテムの取得中にエラーが発生しました ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>アイテム\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; オプションb restまたはgraphqlの使用 環境がparse sdkをサポートしていない場合、restまたはgraphqlを使用してcrud操作を実行できます。例えば、restを使用してアイテムを取得するには // example rest call to fetch 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 必要に応じて、これらのapi呼び出しをreactコンポーネントに統合してください。 ステップ 5 – バックエンドのセキュリティ アクセス制御リスト (acl) オブジェクトにaclを割り当ててデータを保護します。たとえば、プライベートアイテムを作成するには 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); // set acl only the owner can read and write 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 – ユーザー認証 ユーザーアカウントの設定 back4appはparseのuserクラスを認証に利用します。あなたのreactアプリでは、ユーザー登録とログインを次のように処理します // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; ログインとセッション管理にも同様のアプローチを使用できます。ソーシャルログイン、メール確認、パスワードリセットなどの追加機能は、back4appダッシュボードで設定できます。 ステップ7 – webデプロイメントを使用したreactjsフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリからコードをデプロイすることで、reactjsフロントエンドをシームレスにホストできます。 このセクションでは、プロダクションビルドの準備、ソースコードをgithubにコミットする方法、リポジトリをwebデプロイメントに統合する方法、サイトをデプロイする方法を学びます。 7 1 プロダクションビルドの準備 ターミナルでプロジェクトフォルダを開きます。 ビルドコマンドを実行します npm run build このコマンドは、すべての最適化された静的ファイル（ index html 、javascript、css、および画像を含む）を含む build フォルダを作成します。 ビルドを確認します build フォルダに必要なアセットのサブディレクトリとともに index html ファイルが含まれていることを確認してください。 7 2 ソースコードを整理してアップロードする リポジトリには、reactjsフロントエンドの完全なソースコードが含まれている必要があります。典型的なファイル構造は次のようになります basic crud app reactjs 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'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init ソースファイルを追加します： git add 変更をコミットします： git commit m "reactjsフロントエンドソースコードの初回コミット" githubリポジトリを作成します： 例えば、githubに basic crud app reactjs frontend という名前のリポジトリを作成します。 コードをgithubにプッシュします： git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 githubリポジトリをwebデプロイメントに統合する webデプロイメントにアクセスする： back4appダッシュボードにログインし、プロジェクト（basic crud app reactjs）に移動し、 webデプロイメント 機能をクリックします。 githubに接続する： まだ行っていない場合は、画面の指示に従ってgithubアカウントを統合します。この接続により、back4appがあなたのリポジトリにアクセスできるようになります。 リポジトリとブランチを選択する： 作成したリポジトリ（例： basic crud app reactjs frontend ）を選択し、reactjsコードを含むブランチ（例： main ）を選択します。 7 4 デプロイメントの設定 追加の設定詳細を提供してください ビルドコマンド リポジトリに事前にビルドされた build フォルダーが含まれていない場合は、ビルドコマンドを指定してください（例 npm run build )。back4appはデプロイ中にこのコマンドを実行します。 出力ディレクトリ 出力ディレクトリを build に設定して、back4appが静的サイトファイルを含むフォルダーを認識できるようにします。 環境変数 アプリケーションが環境変数（例 apiキー）に依存している場合は、設定で追加してください。 7 5 reactjsアプリケーションプロジェクトのdocker化 デプロイメントにdockerを使用することを好む場合は、reactjsアプリケーションをコンテナ化できます。次のような内容の dockerfile をリポジトリに含めてください \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] この dockerfile をリポジトリに含めてください。次に、webデプロイメントの設定で、dockerデプロイメントオプションを選択して、コンテナ化されたアプリケーションをビルドおよびデプロイします。 7 6 アプリケーションをデプロイする デプロイボタンをクリックする デプロイ設定を構成したら、 デプロイ ボタンをクリックします。 ビルドプロセスを監視する back4appはgithubからコードを取得し、ビルドコマンドを実行し（設定されている場合）、コンテナ内にアプリをデプロイします。 urlを取得する デプロイが完了すると、back4appはreactjsアプリケーションがホストされているurlを提供します。 7 7 デプロイを確認する 提供されたurlにアクセスする ウェブブラウザでurlを開いて、デプロイされたサイトを表示します。 アプリケーションをテストする アプリケーションが正しく読み込まれ、すべてのルートが期待通りに機能し、すべてのアセット（css、javascript、画像）が適切に提供されていることを確認します。 必要に応じてトラブルシューティングする ブラウザの開発者ツールを使用してエラーを確認します。問題が発生した場合は、back4appのデプロイメントログを確認し、githubの統合とビルド設定を確認します。 ステップ8 – 結論と次のステップ おめでとうございます！あなたはreactjsとback4appを使用して完全な基本crudアプリを構築しました。 「 basic crud app reactjs 」というプロジェクトを設定し、アイテムとユーザーのための詳細なデータベースコレクションを設計し、強力な管理アプリを通じてデータを管理しました。 また、reactjsのフロントエンドをバックエンドと統合し、堅牢なアクセス制御でデータを保護しました。 次のステップ： フロントエンドを強化する： 詳細なアイテムビュー、検索機能、リアルタイム通知などの機能を追加して、reactjsアプリを拡張します。 追加機能を統合する： より高度なバックエンドロジック（例：クラウドファンクション）、サードパーティapi統合、または役割ベースのアクセス制御を追加することを検討してください。 さらなるリソースを探る： 「 back4appのドキュメント https //www back4app com/docs 」や、パフォーマンス最適化やカスタム統合に関する詳細なチュートリアルをレビューしてください。 このチュートリアルに従うことで、back4appを使用してreactjsアプリケーションのための堅牢でスケーラブルなcrudバックエンドを作成するスキルを身につけました。コーディングを楽しんでください！