Svelteフロントエンドを構築し、それをバックエンドに接続する方法は？

このチュートリアルでは、svelteを使用してto doリストアプリケーションを構築し、back4appによって提供される管理されたバックエンドサービスに接続します。 このガイドは、基本的なcrud（作成、読み取り、更新、削除）操作を習得し、svelteを使用して直感的なインターフェースを作成したい方のために設計されています。最終的には、アプリケーションがデータストレージ、認証などを処理するバックエンドとシームレスに連携します。 フルスタックアプリケーションの開発は、バックエンドの設定やデータベース管理のために複雑になることがあります。作業を簡素化するために、back4appという堅牢な バックエンド・アズ・ア・サービス を使用します—これにより、動的なsvelteフロントエンドの構築に集中できます。 back4appは、完全に管理されたnosqlデータベース、認証、カスタムロジックのためのcloud code、スムーズな統合のためのsdkを提供します。これにより、サーバーインフラストラクチャを管理することなく、スケーラブルなアプリケーションを展開できます。 主なポイント このチュートリアルに従うことで、あなたは viteを使用して、モダンなsvelteプロジェクトを初期化します。 アプリのデータを管理するために、バックエンドサービスをシームレスに統合します。 動的な to doリスト のための基本的なcrud操作を実装します。 コンテナ化されたワークフローを使用して、完全に機能するアプリケーションをback4app上に展開します。 前提条件 始める前に、次のものを用意してください node js と npm があなたのマシンにインストールされていること。 node v と npm v で確認してください。 基本的な svelte の知識 , コンポーネント、リアクティブ変数、イベント処理を含む。 バックエンドサービスを管理するための back4app アカウント 。まだ持っていない場合は、 back4app https //www back4app com/ にサインアップしてください。 これらの前提条件が整ったら、プロジェクトの構築を開始する準備が整いました。 プロジェクトのセットアップ ローカル開発環境を設定し、vite を使用して新しい svelte プロジェクトを初期化することから始めます。 node js (lts バージョン) がインストールされていることを確認してください。そうでない場合は、 nodejs org https //nodejs org/ からダウンロードしてください。 次のコマンドを実行して svelte プロジェクトを作成します npm create vite\@latest todo app template svelte プロジェクトディレクトリに移動します cd todo app 必要な依存関係をインストールします npm install セットアップを確認するために開発サーバーを起動します npm run dev 提供されたurlをブラウザで開いて、あなたのsvelteアプリが動作しているのを確認してください。フロントエンドが準備できたら、back4appでバックエンドを作成してください。 todoバックエンドの作成 back4appは、 parse によって提供される完全管理型バックエンドサービスを提供します。nosqlデータベース、認証、cloud code、および自動生成されたapiが含まれています。 バックエンドを設定するための手順は次のとおりです ログイン して、あなたの back4appダッシュボード https //www back4app com/ を開き、「 新しいアプリを作成する。 アプリに名前を付ける （例えば、 todoapp ）と、バックエンドタイプとして「 nodejs/parse 」を選択します。 「 データベース > 「 ブラウザ 」に移動し、「 クラスを作成する 」をクリックし、「 カスタム 」を選択します。クラスに「 task 」という名前を付け、パブリックの読み書きを許可するように権限を設定します（後でこれを調整できます）。 「 task 」クラスに次のフィールドを追加します タイトル （文字列）– タスクのタイトル。 説明 （文字列）– タスクの詳細。 完了 （ブール値）– タスクの完了状況。 期限日 （日付）– タスクの締切。 「 保存 」をクリックして、スキーマを作成します。 back4appとsvelteの統合 svelteアプリをback4appに接続するには、次のようにします。 parse javascript sdk parse sdkをインストールします npm install parse sdkを設定するには、 src/main js ファイルを編集します。sdkをインポートし、次の情報で初期化します。 アプリケーションid と javascriptキー をback4appダッシュボードから取得します（これらは アプリ設定 > セキュリティとキー )の下にあります import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; バックエンドが接続されたので、to doリストインターフェースを構築し、crud操作を実装できます。 フロントエンドの開発 あなたのsvelteアプリケーションは、タスクを追加、表示、更新、削除するためのコンポーネントで構成されます。svelteのリアクティビティを活用して動的な更新を行います。 コンポーネントの構造化 svelteコンポーネントを整理するために、 components フォルダーを作成します。 src の中に mkdir src/components 次のコンポーネントを作成します taskform svelte – 新しいタスクを追加するためのものです。 tasklist svelte – タスクリストを表示するためのものです。 taskitem svelte – 個々のタスクを表すためのものです。 taskform svelte このコンポーネントは、タスクの詳細をキャプチャし、back4appに送信するフォームをレンダリングします。 \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event 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(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte このコンポーネントは個々のタスクを表し、その完了ステータスを切り替えたり、削除したりすることができます。 \<script> import parse from 'parse/dist/parse min js'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte このコンポーネントは、すべてのタスクを反復処理し、各タスクをtaskitemを使用してレンダリングすることで表示します。 \<script> import taskitem from ' /taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} app svelte メインコンポーネントで、アプリケーションの状態を管理し、タスクコンポーネントを統合します。 \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> アプリケーションのスタイリング 基本的なスタイリングを追加するために、 src/global css ファイルを作成します 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; } 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; } } このスタイルシートを、 src/main js にインポートします import ' /global css'; back4app web deploymentでのフロントエンドのデプロイ back4app web deploymentは、svelteアプリケーションをホストするためのコンテナ化された環境を提供します。 プロダクション用のviteの設定 必要に応じて、 vite config js を調整して、コンテナ化された環境のためにベースパスを正しく設定します import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); プロダクションビルドを生成します npm run build dockerfileの作成 ルートディレクトリに次の内容で dockerfile を作成します \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] ローカルでのdockerコンテナのテスト dockerイメージをビルドします docker build t todo frontend コンテナを実行します docker run p 8080 80 todo frontend ブラウザで http //localhost 8080 を開いて、svelte アプリが正しく提供されていることを確認します。 back4appへのデプロイ gitリポジトリを初期化し、プロジェクトファイルを追加してコミットします 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 https //www back4app com/containers 」にログインします。 「 新しいアプリを作成 」をクリックし、プロジェクト名を入力し、githubリポジトリを選択します。 back4appを認証し、「 dockerfileデプロイメント 」を選択します。 ビルド設定を確認し、「 デプロイ 」をクリックして最初のビルドを開始します。 デプロイメントの監視 デプロイ後、back4appダッシュボードを使用して デバッグ用のログを表示します。 コンテナのパフォーマンスとリソース使用状況を監視します。 新しいコミットで再ビルドをトリガーします。 必要に応じてカスタムドメインを設定します。 ライブアプリケーションにアクセスするには、 https //todoapp ku5ofg8s b4a run/ です。 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 。 テストとデバッグ デプロイ後、svelteフロントエンドがback4appバックエンドと適切に通信していることを確認してください api検証 ブラウザの開発者ツール（f12 → ネットワーク）を使用してapiコールを検査します。 タスク操作 uiを介してタスクを追加、完了、削除し、back4appデータベースブラウザで更新を確認します。 エラーハンドリング エラーのためにコンソールログを確認し、空のタスクを送信するなどのエッジケースをテストします。 パフォーマンステスト ブラウザツールを使用して遅いネットワーク条件をシミュレートし、応答性を評価します。 svelteとback4appを使用するためのベストプラクティス アプリケーションを最適化するために 効率的なリクエスト 複数のタスクを処理する際はバッチ操作を使用します const tasks = \[task1, task2, task3]; parse object saveall(tasks); 最適化されたクエリ 必要なフィールドのみを取得 query select('title', 'completed'); 環境変数 機密キーを env ファイルに保存 vite parse app id=your app id vite parse js key=your js key セキュリティ aclを使用してアクセスを制限 task setacl(new parse acl(parse user current())); バックエンドオフロード 複雑なビジネスロジックのためにcloud codeを活用し、apiの露出を減らす。 結論 これで、svelteフロントエンドを作成し、back4appのバックエンドと統合し、コンテナ化されたワークフローを使用してデプロイすることで、フルスタックのto doリストアプリケーションを構築しました。 このチュートリアルでは、ローカル開発からクラウドデプロイメントまでのすべてのステップを案内し、svelte uiとバックエンドサービス間のスムーズな相互作用を確保しました。 今後は、リアルタイム更新、改善された認証、サードパーティ統合を使用してアプリを強化することを検討してください。さらなる学習のために、 back4appドキュメント https //www back4app com/docs を訪れて、コミュニティリソースを探索してください。