Preactフロントエンドを構築し、バックエンドに接続する方法

このチュートリアルでは、preactを使用してto doリストアプリケーションを構築し、back4appが提供する堅牢なバックエンドに接続します。 このガイドは、基本的なcrud（作成、読み取り、更新、削除）操作をカバーしており、クリーンで機能的なuiを作成する手順を説明しているため、始めるのに最適です。 最後には、preactを使用して軽量で高速なフロントエンドを利用しながら、管理されたバックエンドを統合する方法を示す完全に機能するアプリが完成します。 フルスタックアプリケーションを構築することは、特にバックエンドのセットアップ、データベース管理、認証、デプロイメントを扱う際に複雑になる可能性があります。 これらの課題を簡素化するために、back4appを使用します。これはスケーラブルな バックエンド・アズ・ア・サービス（baas） ソリューションであり、ホスティング、データベース、apiを処理しながら、フロントエンドの開発に集中できます。 back4appは、すぐに使用できるデータベース、認証、サーバーサイドロジックのためのcloud code、スムーズな統合のためのsdkを含む包括的なバックエンドサービスを提供します。また、コンテナ化されたデプロイメントもサポートしており、現代のフルスタックアプリケーションに最適な選択肢です。 これらのリソースを使用することで、サーバーインフラの管理の負担を軽減し、アプリケーションを迅速に開発およびデプロイできます。 重要なポイント このチュートリアルに従うことで、以下のことを学びます viteを使用して最新のpreactプロジェクトを初期化します。 アプリケーションのデータを管理するためにバックエンドサービスを統合します。 インタラクティブなユーザーインターフェースのための基本的なcrud操作を実装します。 コンテナ化されたワークフローを使用して、 to doリストアプリケーション をback4appにデプロイします。 前提条件 始める前に、以下のものを用意してください node jsとnpm nodejs org https //nodejs org/ から最新のltsバージョンのnode jsをインストールし、ターミナルで node v と npm v を実行して確認します。 基本的なpreactの知識 機能コンポーネント、フック（例えば usestate や useeffect ）およびjsx構文に慣れていることが期待されます。preactが初めての場合は、まずその基本を確認してください。 back4appアカウント back4app https //www back4app com/ にサインアップして、バックエンドサービスを設定および管理します。 これらの前提条件が整ったら、プロジェクトを設定して構築を開始する準備が整いました。 プロジェクトのセットアップ まず、ローカル開発環境を設定し、スムーズな開発体験のためにviteを使用してpreactプロジェクトを初期化します。 次のことを確認してください node js (ltsバージョン) がインストールされています。必要に応じて、次のリンクからダウンロードしてインストールしてください nodejs org https //nodejs org/ 次のコマンドを実行して確認します node v npm v 次に、 vite を使用してpreactプロジェクトを初期化します。ターミナルで次のコマンドを実行してください（ todo app を希望のプロジェクト名に置き換えてください） npm create vite\@latest todo app template preact プロジェクトディレクトリに移動します cd todo app 必要な依存関係をインストールします npm install 開発サーバーを起動して設定を確認します npm run dev あなたのpreactアプリケーションは現在ローカルで実行されているはずです。提供されたurlをブラウザで開いて確認してください。次に、データストレージとapiのやり取りを管理するためにback4appでバックエンドを設定します。 todoバックエンドの作成 back4appは、nosqlデータベース、認証、cloud code、および自動生成されたapiを提供する parse によって駆動される完全管理されたバックエンドサービスを提供します。 このセクションでは、あなたのto doアイテムを保存するための task データモデルを作成し、それをあなたのpreactフロントエンドに接続する方法を案内します。 バックエンドアプリケーションの設定 ログイン して、あなたの back4appダッシュボード https //www back4app com/ をクリックし、 "新しいアプリを作成" アプリケーションに名前を付ける （例えば、 todopreactapp ）と、バックエンドタイプとして nodejs/parse を選択します。 アプリが作成されたら、 "データベース" > "ブラウザ" に移動します。 "クラスを作成" をクリックし、 "カスタム" を選択します。クラスに名前を付けます task とし、 クラスレベルの権限 を設定して、一般の読み書きを許可します（これらの設定は後で調整できます）。 「 task 」クラスに、次のフィールドを追加します title （文字列）– タスクのタイトル。 description （文字列）– タスクの詳細。 completed （ブール値）– タスクが完了しているかどうかを示します。 duedate （日付）– タスクの締切。 「 保存 」をクリックして、スキーマの設定を完了します。 preactとback4appの統合 あなたのpreactプロジェクトにback4appを統合するには、 parse javascript sdk を使用します。sdkをnpm経由でインストールします npm install parse sdkを設定するには、次のように初期化します。 アプリケーションid と javascriptキー を使用します。これらの資格情報は、back4appダッシュボードの アプリ設定 > セキュリティとキー から取得します。 あなたの src/main jsx , 次のようにparseをインポートして設定します import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) バックエンドが接続されたので、preactでto doリストuiを構築し、crud操作を実装する準備が整いました。 preactを使用したフロントエンドの開発 バックエンドの設定が完了したので、preactを使用してto doリストアプリケーションのユーザーインターフェースを構築します。タスクの追加、表示、更新、削除を行うコンポーネントを作成し、フックを使用して状態を管理します。 コンポーネントの整理 アプリケーションには以下の主要コンポーネントが含まれます taskform jsx – 新しいタスクの追加を管理します。 tasklist jsx – すべてのタスクを表示し、完了または削除するためのコントロールを提供します。 taskitem jsx – 完了を切り替えたり、タスクを削除したりするアクションを持つ個々のタスクを表します。 components フォルダーを src 内に作成し、これらのファイルを追加します mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx フックを使用した状態管理 preactのフックを使用します ( usestate と useeffect ) 状態管理と副作用のために。まず、 app jsx 状態を設定します。 import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); 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); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; タスクフォームコンポーネントの構築 taskform jsx , タスクを追加するための制御されたフォームを作成します。 usestate を使用して入力値を管理し、back4appにデータを送信します import { usestate } from "preact/hooks"; 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} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; タスクリストの表示 「 tasklist jsx 」で、タスク配列をマッピングして、 taskitem コンポーネントを使用してタスクのリストをレンダリングします import taskitem from " /taskitem jsx"; 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 」で、タスクを完了としてマークしたり、削除したりすることができるコンポーネントを作成します 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 class={`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; アプリケーションのスタイリング 次のスタイルを「 index css 」ファイルに追加します。「 src 」フォルダー内 / container styling / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } 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; } container p { font size 1rem; } 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; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } このcssをあなたの src/main jsx import " /index css"; uiの最終調整 あなたのpreact to doリストアプリケーションは、back4appとカスタムスタイリングを統合した動的なフロントエンドを備えています。このアプリでは、タスクを追加、表示、更新、削除しながら、効率的なフロントエンドとバックエンドの通信を維持できます。 次に、back4appのwebデプロイメントプラットフォームを使用して、あなたのpreactアプリをデプロイします。 back4appウェブデプロイメントでのフロントエンドのデプロイ back4appウェブデプロイメントは、アプリケーションをデプロイするための完全に管理されたコンテナ化された環境を提供します。dockerベースのデプロイメントを使用すると、preactフロントエンドをパッケージ化し、簡単にデプロイできます。 本番用のviteの設定 viteで構築されたpreactプロジェクトは、デフォルトで開発モードで実行されます。本番用には、静的バージョンをビルドし、nginxなどの軽量ウェブサーバーを使用して提供します。 正しいベースパスを設定するために、 vite config js を更新してください import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); 本番用のファイルを生成します npm run build アプリ用のdockerfileの作成 ルートディレクトリに dockerfile を作成して、コンテナを定義します # build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] コンテナをローカルでテストする デプロイする前に、ローカルでdockerコンテナをビルドしてテストします docker build t todo preact frontend コンテナを実行します docker run p 8080 80 todo preact frontend ブラウザで http //localhost 8080 にアクセスして、アプリが正しく提供されていることを確認してください。 githubにプッシュし、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にリポジトリへのアクセスを許可し、 todo preact リポジトリを選択します。 "dockerfileデプロイメント"を選択し、ビルド設定を確認します。 "デプロイ"をクリックしてビルドプロセスを開始します。 デプロイメントの監視と管理 デプロイ後、back4appダッシュボードを使用して トラブルシューティングのためのログを表示します。 コンテナのパフォーマンスとリソース使用状況を監視します。 新しいコミットで再デプロイをトリガーします。 必要に応じてカスタムドメインを設定します。 アプリケーションのテストとデバッグ デプロイ後、preactアプリを徹底的にテストします api接続の確認 ブラウザの開発者コンソール（f12 → ネットワーク）を開いて、タスク操作中のapiコールを監視します。 タスクの追加と取得 uiを使用してタスクを追加し、ページをリフレッシュしてback4appデータベースブラウザでの永続性を確認します。 crud操作のテスト タスクを完了としてマークし、削除がバックエンドに正しく反映されることを確認します。 エッジケースの処理 フォーム入力を検証し、開発者ツールを使用して遅いネットワーク条件をシミュレートします。 問題が発生した場合は、back4appのログを確認するか、api設定をチェックしてください。 back4appサービスを使用するためのベストプラクティス これらのベストプラクティスに従って、アプリケーションのパフォーマンスとセキュリティを向上させましょう apiコールの最適化 複数の操作に対してバッチリクエストを使用し、クエリで必要なフィールドのみを選択します。 機密データの保護 アプリケーションidやjavascriptキーなどの資格情報を環境変数に保存します。viteを使用して、 env ファイルを作成します vite parse app id=your app id vite parse js key=your js key 自動スケーリングを有効にする 高トラフィックを管理するためにback4app web deploymentで自動スケーリングを有効にします。 セキュリティを強化する データの変更を制御するためにクラスレベルの権限（clp）を制限し、必要に応じてaclを設定します。 クラウドコードを活用する より良いパフォーマンスとapiの露出を減らすために、複雑なロジックをクラウドコードにオフロードします。 結論 あなたは今、フロントエンドにpreact、バックエンドにback4appの堅牢なサービスを使用して、フルスタックのto doリストアプリケーションを構築しました。 このチュートリアルでは、preactプロジェクトの初期化、parse sdkの統合、back4appでのコンテナ化されたワークフローを使用したアプリのデプロイについて案内しました。 開発を続ける中で、高度なユーザー認証、リアルタイム更新、サードパーティ統合などの機能を追加することを検討してください。追加の詳細やサポートについては、 back4appのドキュメント https //www back4app com/docs を参照してください。