How to Build a React Frontend and Connect It to a Backend?

このチュートリアルでは、reactを使用してto doリストアプリケーションを作成し、それをバックエンドサービスに接続します。 このプロジェクトは、基本的なcrud（作成、読み取り、更新、削除）操作とシンプルなユーザーインターフェースを含むため、理想的な出発点です。最終的には、接続されたバックエンドを持つ完全に機能するアプリを作成し、管理されたバックエンドサービスを開発ワークフローに統合する方法を示します。 ゼロからフルスタックアプリケーションを構築するには、バックエンドの設定、データベースの管理、認証の処理、インフラの展開が必要です。これらのタスクは複雑で時間がかかることがあり、特にフロントエンド開発に集中している場合はそうです。この目的のためにback4appを使用します。 back4appは、ホスティング、データベース、apiを処理しながら、アプリケーションの構築に集中できるようにする、 スケーラブルなバックエンドサービス（baas） ソリューションを提供し、このプロセスを簡素化します。 back4appは、すぐに使用できるデータベース、認証、サーバーサイドロジックのためのcloud code、シームレスな統合のためのsdkを含むバックエンドサービスを提供します。また、コンテナ化されたデプロイメントをサポートしており、フルスタックアプリケーションのホスティングに柔軟な選択肢となります。 これらの機能を使用すると、サーバーインフラを管理することなく、アプリケーションを迅速に構築して展開できます。 重要なポイント この記事を読むことで、あなたは以下を学ぶことができます 業界標準のツールを使用して、最新のreactプロジェクトをセットアップします。 アプリケーションデータを管理するために、バックエンドサービスをシームレスに統合します。 動的なユーザー体験のために、基本的なcrud操作を実装します。 完全に機能するtodoアプリケーションをデプロイし、 todo app が実行されているのを確認します。 前提条件 このチュートリアルを効果的に進めるために、以下のツールとスキルを持っていることを確認してください node jsとnpm がマシンにインストールされていること。npmを使用して依存関係をインストールし、reactアプリケーションを実行します。インストールを確認するには、 node v と npm v をターミナルで実行してください。 基本的なreactの知識 , 関数コンポーネント、フックを使った状態管理、ユーザー入力の処理を含みます。このチュートリアルではreactの基本をカバーしないため、jsxやコンポーネント構造に慣れていることが期待されます。 バックエンドサービスを設定および管理するための back4appアカウント。アカウントを持っていない場合は、 back4app https //www back4app com/ でサインアップしてください。 これらが整ったら、プロジェクトをセットアップして構築を開始する準備が整いました。 プロジェクトのセットアップ 始めるには、ローカル開発環境をセットアップし、viteを使用してフロントエンドプロジェクトを初期化する必要があります。 これにより、迅速で効率的な開発体験が確保され、プロジェクト構造がクリーンに保たれます。 まず、 node js（ltsバージョン） がインストールされていることを確認してください。インストールされていない場合は、 nodejs org https //nodejs org/ からダウンロードしてインストールします。インストール後、次のコマンドを実行して確認してください node v npm v 今、あなたのreactプロジェクトを初期化します vite , create react appと比較して優れた速度を提供する現代的なビルドツールです。 ターミナルで次のコマンドを実行し、 todo app を好みのプロジェクト名に置き換えます npm create vite\@latest todo app template react プロジェクトフォルダーに移動します cd todo app 必要な依存関係をインストールします npm install セットアップを確認するために開発サーバーを起動します npm run dev これにより、ローカルでreactアプリが起動します。提供されたurlをブラウザで開いて、アプリが実行されていることを確認してください。フロントエンドが設定されたら、次のステップはデータストレージとapiインタラクションを処理するためにback4appでバックエンドを作成することです。 todoバックエンドの作成 back4appは、 parse によって提供される完全管理型バックエンドサービスで、 nosqlデータベース、認証、cloud code、api生成 をすぐに利用できます。 これにより、バックエンドをゼロから構築することなく、アプリのデータを管理できます。 タスク データモデルを作成して、to doリストのアイテムを保存し、それをreactフロントエンドに接続します。 バックエンドアプリケーションの作成 ログイン して、あなたの back4appダッシュボード https //www back4app com/ をクリックし、 "新しいアプリを作成"。 アプリケーションの名前を入力 します（例： todoapp ) そして nodejs/parse をバックエンドタイプとして選択します。 作成後、 "データベース" > "ブラウザ" に移動し、 "クラスを作成" をクリックし、 "カスタム" を選択します。名前を タスク とし、 クラスレベルの権限 を設定して、一般公開の読み書きを許可します（後でこれを調整できます）。 タスク クラスに次のフィールドを追加します： タイトル （文字列）– タスクのタイトル 説明 （文字列）– タスクの詳細 完了 （ブール値）– 完了状況 期限日 （日付）– タスクの締切 "保存" をクリックして、スキーマを作成します。 back4appをreactに接続する 次に、 parse javascript sdk を使用して、バックエンドと通信するためにback4appをreactプロジェクトに統合します。npmを介してインストールします npm install parse 次に、 application id と javascript key を使用してsdkを初期化することで構成します。これらの資格情報は、 back4app dashboard の app settings > security & keys セクションから取得します。 アプリidとjsキーが強調表示されたback4appキーのページ 内部の src/main jsx , minified sdkをインポートし、 application id と javascript key を使用してparseを構成します。 import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; バックエンドが接続されたので、 to do list ui を構築し、crud操作を統合できます。 フロントエンドの開発 バックエンドが設定され接続されたので、reactで to do list ui を構築する時が来ました。タスクの追加、表示、更新、削除のためのコンポーネントを作成し、状態を効率的に管理します。 コンポーネントの構造化 アプリケーションは、3つの主要なコンポーネントで構成されます taskform jsx – 新しいタスクを追加する処理を行います。 tasklist jsx – すべてのタスクを表示し、タスクを完了としてマークしたり削除したりするためのコントロールを提供します。 taskitem jsx – 完了としてマークしたり削除したりするアクションを持つ単一のタスクを表します。 まず、 components フォルダーを src 内に作成し、これらのファイルを追加します mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx 状態の管理 ローカルでタスクを管理するために、 usestate と useeffect フックを使用して、back4appからデータを取得および更新します。まず、 app jsx の中で状態を定義します。 import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; タスクフォームの作成 の中で、 taskform jsx , 新しいタスクを追加するための制御されたフォームを作成します。これにより、入力値が状態に保存され、データがback4appに送信されます。 import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; タスクの表示 の中で、 tasklist jsx , タスクのリストをレンダリングし、完了としてマークしたり削除したりするためのアクションを含めます。 import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; タスクアイテムコンポーネント 内部の taskitem jsx , タスクを完了としてマークするか、back4appから削除するアクションを定義します。 import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; アプリケーションのスタイリング 次の場所に styles css ファイルを作成し、基本的なスタイリングを追加します / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } このcssを main jsx import " /styles css"; アプリケーションのui あなたの to do list app は、react ui、back4app統合、基本的なスタイリングを備えた動作するフロントエンドを持っています。 完成したtodoリストアプリ 次に、このフロントエンドを back4app web deployment にデプロイします。 back4app web deploymentでのフロントエンドのデプロイ back4app web deploymentは、アプリケーションをデプロイするための 完全に管理されたコンテナ化環境 を提供します。 それは dockerベースのデプロイメント をサポートしており、フロントエンドをコンテナにパッケージ化し、back4appのインフラストラクチャ上で実行することができます。これにより、スケーラビリティ、セキュリティ、そしてgithubと直接統合することで簡単なci/cdパイプラインが確保されます。 コンテナ化のためのviteの設定 viteはデフォルトで開発モードでアプリケーションを提供します。プロダクション用には、 静的バージョンをビルド して、 nginx のような軽量のウェブサーバーを使用して提供する必要があります。まず、 vite config js を更新して、デプロイメントのための適切なベースパスを指定します import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); 次に、ビルドコマンドを実行して、プロダクション用のファイルを生成します npm run build デプロイメントのためのdockerfileの作成 「 dockerfile 」は、あなたのreactアプリがどのようにコンテナ化されるかを定義します。プロジェクトのルートに「 dockerfile 」という名前のファイルを作成し、次の設定を追加します # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] このdockerfileは次のことを行います 依存関係をインストールし、 node js を使用してreactアプリをビルドします。 ビルドされたファイルを nginx コンテナにコピーして、効率的に静的ファイルを提供します。 アプリケーションを提供するためにポート 80 を公開します。 コンテナのローカルビルドとテスト デプロイする前に、コンテナが期待通りに動作するかをローカルでテストします。次のコマンドを実行してdockerイメージをビルドします docker build t todo frontend 次に、次のコマンドを使用してコンテナを起動します docker run p 8080 80 todo frontend ブラウザで http //localhost 8080 を開いて、reactアプリが正しく提供されていることを確認します。 githubにプッシュしてback4appに接続する back4appにデプロイするには、まずプロジェクトをgithubにプッシュします git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 次に、back4app web deploymentプラットフォームを介してデプロイするための手順に従います にログインします back4app web deployment https //www back4app com/containers "新しいアプリを作成"をクリックし、プロジェクトに名前を付け、 githubリポジトリ を選択します。 back4appにgithubへのアクセスを許可し、 todo app リポジトリを選択します。 "dockerfileデプロイメント"を選択し、ビルド設定を確認します。 "デプロイ"をクリックして、最初のビルドをトリガーします。 デプロイメントの管理と監視 デプロイが完了したら、 back4appダッシュボード にアプリに移動します。ここで、次のことができます 問題をデバッグするために ログ を表示します。 コンテナの再起動とリソース使用量を 監視します 新しいコミットで再デプロイするには、 "ビルドをトリガー" ボタンを使用します。 個人ドメインでホスティングする場合は、 カスタムドメイン を設定します。 back4app web deployment dashboard デプロイされたアプリケーション このチュートリアルで使用されるデプロイされたアプリケーションには、次のリンクからアクセスできます https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ フロントエンドが正常にデプロイされたので、次のステップはテストとデバッグです。すべてがスムーズに動作することを確認します。 テストとデバッグ フロントエンドとバックエンドをデプロイした後、アプリケーションが正しく機能することを確認する必要があります。これには、 フロントエンドとバックエンドの相互作用 をテストし、一般的な問題を特定し、エラーを効果的にデバッグすることが含まれます。 統合アプリケーションテスト reactフロントエンドがback4appバックエンドと適切に相互作用していることを確認するために、次の手順に従ってください。 api接続のテスト ブラウザの開発者コンソールを開く ( f12 → ネットワークタブ ) を使用して、タスクを追加または取得する際のapi呼び出しを確認します。 apiリクエストが失敗した場合、レスポンスステータスとエラーメッセージを確認します。 タスクを手動で追加および取得する 「 to doリストui 」を使用してタスクを追加します。タスクが持続することを確認するためにページを更新します。 「 back4appデータベースブラウザ 」を開き、タスクが「 タスク 」クラスの下に表示されることを確認します。 crud操作を確認する uiからタスクを完了および削除し、back4appのデータベースで変更を確認します。 更新が反映されない場合、ブラウザのコンソールまたはapiログでエラーを確認します。 エッジケースをテストする 空のタスクを送信して、バリデーションが機能することを確認します。 遅いインターネット接続をシミュレートする ( chrome devtools → ネットワーク → 遅い3g ) でパフォーマンスをテストします。 一般的な問題とトラブルシューティング corsエラー（ access control allow origin の問題） 次に進む back4appダッシュボード > アプリ設定 > セキュリティとキー 「 許可されたヘッダーとドメイン 」の下に、フロントエンドのurlを追加します。 バックエンドを保存して再起動します。 認証失敗（401 unauthorized errors） アプリケーションidとjavascriptキーが、reactアプリに正しく設定されていることを確認してください。 ユーザー認証を使用している場合は、セッショントークンがapiリクエストに含まれていることを確認してください。 バックエンドデプロイメントの問題 apiが応答しない場合は、次に進む back4app web deployment > ログ でバックエンドデプロイメントのエラーを確認します。 必要に応じてコンテナを再起動します。 テストとデバッグが完了したら、次のステップは back4appサービスのベストプラクティス を実装して、パフォーマンスと保守性を最適化することです。 back4appサービスのベストプラクティス back4appを使用する際に従うことができるいくつかのベストプラクティスを紹介します。 フロントエンドとバックエンドの相互作用の最適化 フロントエンドとback4appのバックエンド間の効率的な通信は、スムーズなユーザーエクスペリエンスを保証します。複数の操作を実行する際は、ネットワークオーバーヘッドを削減するために、 バッチリクエスト を使用してください。 const tasks = \[task1, task2, task3]; parse object saveall(tasks); 読み取り操作のために、 キャッシングを有効にする と、 インデックス付きクエリを設定する ことで、頻繁なリクエストの速度を向上させます。常に必要なフィールドのみをリクエストして、応答サイズを最小限に抑えます query select("title", "completed"); 環境とスケーリング アプリケーションidのような機密キーや、 javascriptキー をハードコーディングするのではなく、環境変数に保存します。 vite を使用する場合は、 env ファイルを作成します vite parse app id=your app id vite parse js key=your js key 本番環境では、 自動スケーリングを有効にする ことで、back4app web deploymentが増加したトラフィックを処理できるようにします。データベースの使用状況を監視し、 パフォーマンスモニタリング ツールを使用してクエリを最適化します。 強化されたセキュリティとパフォーマンス クラスレベルの権限（clp）を制限して、認証されたユーザーのみがデータを変更できるようにします。ユーザーの役割に基づいて、読み取り/書き込み権限を動的に設定します task setacl(new parse acl(parse user current())); 複雑なビジネスロジックをフロントエンドからオフロードするために、 クラウドコードを使用する ことで、apiの露出を減らし、パフォーマンスを向上させます。最後に、 レート制限を有効にする と、 リクエスト検証を行う ことで、悪用を防ぎ、データの整合性を確保します。 結論 reactフロントエンドを設定し、back4appのバックエンドと統合し、コンテナ化されたワークフローを介してデプロイすることで、フルスタックのto doリストアプリケーションを構築しました。 このプロセスは、ローカル開発からクラウドデプロイメントへの明確な道筋を示し、フロントエンドとバックエンドのスムーズな相互作用を確保しました。 今後は、高度なユーザー管理、リアルタイム更新、サードパーティ統合などの強化を検討してください。 さらなる学習のために、 back4appドキュメント https //www back4app com/docs とコミュニティサポートリソースを探求してください。