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

このチュートリアルでは、sveltekitを使用してto doリストアプリケーションを構築し、back4appによって提供される管理されたバックエンドサービスに接続します。 このガイドは、基本的なcrud（作成、読み取り、更新、削除）操作を習得し、sveltekitを使用して動的でレスポンシブなインターフェースを作成したい方のために設計されています。このチュートリアルの終わりまでに、あなたのアプリケーションはデータストレージ、認証などを処理するバックエンドとシームレスに相互作用します。 フルスタックアプリケーションの開発は、バックエンドの設定やデータベース管理のために複雑になることがあります。ワークフローを簡素化するために、back4appという堅牢なバックエンドサービスを使用し、優れたsveltekitフロントエンドの作成に集中できるようにします。 back4appは、完全に管理されたnosqlデータベース、認証、カスタムロジックのためのcloud code、スムーズな統合のためのsdkを提供します。これにより、サーバーインフラストラクチャを管理することなく、スケーラブルなアプリケーションを構築および展開できます。 主なポイント このチュートリアルに従うことで、あなたは viteを使用して、モダンなsveltekitプロジェクトを初期化します。 アプリケーションのデータを管理するためにバックエンドサービスを統合します。 動的な to doリスト のための基本的なcrud操作を実装します。 コンテナ化されたワークフローを使用して、完全に機能するアプリケーションをback4appに展開します。 前提条件 始める前に、次のものを確認してください node js と npm があなたのマシンにインストールされていること。 node v と npm v を実行して確認してください。 基本的な sveltekit の知識 , ルーティング、ロード関数、リアクティブ変数を含む。 バックエンドサービスを管理するための back4app アカウント 。まだ登録していない場合は、 back4app https //www back4app com/ にサインアップしてください。 これらの前提条件が整ったら、プロジェクトの構築を開始する準備が整いました。 プロジェクトのセットアップ ローカル開発環境を設定し、新しい sveltekit プロジェクトを初期化することから始めます。 node js (lts バージョン) がインストールされていることを確認してください。そうでない場合は、 nodejs org https //nodejs org/ からダウンロードしてください。 次のコマンドを実行して sveltekit プロジェクトを作成します npx sv create todo app プロンプトが表示されたら、プロジェクトに最適なsveltekitオプションを選択します（例：スケルトンプロジェクト、必要に応じてtypescript）。 プロジェクトディレクトリに移動します cd todo app セットアップを確認するために開発サーバーを起動します npm run dev あなたのsveltekitアプリは今、ブラウザで開くはずです。フロントエンドが準備できたら、back4appでバックエンドを作成してください。 todoバックエンドの作成 back4appは、 parse によって提供される完全管理されたバックエンドサービスです。nosqlデータベース、認証、cloud code、および自動生成されたapiが含まれています。 バックエンドを設定するための手順は次のとおりです ログイン して、あなたの back4appダッシュボード https //www back4app com/ をクリックし、 "新しいアプリを作成" アプリの名前を付ける （例えば、 todoapp ) として、 nodejs/parse をバックエンドタイプとして選択します。 "データベース" > "ブラウザ" に移動し、 "クラスを作成" をクリックし、 "カスタム" を選択します。クラスの名前を task とし、公開の読み書き用に設定します（これらの権限は後で調整できます）。 "task" クラスに次のフィールドを追加します title （文字列）– タスクのタイトル。 description （文字列）– タスクの詳細。 completed （ブール値）– タスクの完了状況。 duedate （日付）– タスクの締切。 "保存" をクリックして、スキーマを作成します。 back4appとsveltekitの統合 あなたは、 parse javascript sdk を使用して、sveltekitアプリをback4appバックエンドに接続します。 parse sdkをインストールします npm install parse sdkを設定するには、 src/app html を編集するか、専用のモジュールを作成します（例： src/lib/parseclient js )。例えば、次の内容で src/lib/parseclient js を作成します 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; export default parse; このモジュールをsveltekitのルートやコンポーネントにインポートして、back4appと対話できます。 フロントエンドの開発 あなたのsveltekitアプリケーションは、タスクを追加、表示、更新、削除するためのルートとコンポーネントで構成されます。sveltekitのファイルベースのルーティングとリアクティブ変数を活用して、動的な更新を行いましょう。 コンポーネントの構造化 コンポーネントを整理するために、 src/lib/components フォルダーを作成します mkdir p src/lib/components 次のコンポーネントを作成します taskform svelte – 新しいタスクを追加するためのものです。 tasklist svelte – タスクリストを表示するためのものです。 taskitem svelte – 個々のタスクを表すためのものです。 taskform svelte このコンポーネントは、タスクの詳細をキャプチャし、それをback4appに送信するフォームをレンダリングします。 \<script> import { createeventdispatcher } from 'svelte'; import parse from '$lib/parseclient'; 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 '$lib/parseclient'; 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 '$lib/components/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} +page svelte (メインルート) あなたのメインsveltekitルート（例： src/routes/+page svelte ）、タスクの状態を管理し、コンポーネントを統合します。 \<script> import { onmount } from 'svelte'; import parse from '$lib/parseclient'; import taskform from '$lib/components/taskform svelte'; import tasklist from '$lib/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/app 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/app html またはメインレイアウトファイルにインポートします。 back4app web deploymentでのフロントエンドのデプロイ back4app web deploymentは、あなたのsveltekitアプリケーションをホストするためのコンテナ化された環境を提供します。 本番用のviteの設定 必要に応じて、コンテナ化された環境のためのベースパスを設定するためにあなたの vite config js を更新します import { sveltekit } from '@sveltejs/kit/vite'; import { defineconfig } from 'vite'; export default defineconfig({ plugins \[sveltekit()], base ' /', }); 本番ビルドを生成します npm run build dockerfileの作成 ローカルでdockerコンテナをテストする前に、あなたのサイトをnode js用にビルドする adapter node をインストールする必要があります。これを行うには、ターミナルで次のコマンドを実行します npm i d @sveltejs/adapter node インストール後、 adapter node を開き、 svelte config js ファイルのコードを以下のコードブロックに置き換えます import adapter from '@sveltejs/adapter node'; / @type {import('@sveltejs/kit') config} / const config = { &#x9;kit { &#x9; // adapter auto only supports some environments, see https //svelte dev/docs/kit/adapter auto for a list &#x9; // if your environment is not supported, or you settled on a specific environment, switch out the adapter &#x9; // see https //svelte dev/docs/kit/adapters for more information about adapters &#x9; adapter adapter() &#x9;} }; export default config; 次に、プロジェクトのルートに以下の内容で dockerfile を作成します from node 22 alpine as builder workdir /app copy package json / run npm ci copy run npm run build run npm prune production from node 22 alpine workdir /app copy from=builder /app/build build/ copy from=builder /app/node modules node modules/ copy package json expose 3000 env node env=production cmd \[ "node", "build" ] dockerコンテナのローカルテスト dockerイメージをビルドします docker build t todo frontend コンテナを実行します docker run p 3000 3000 todo frontend ブラウザで http //localhost 3000 を開いて、sveltekitアプリが正しく提供されていることを確認します。 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/ です。 テストとデバッグ デプロイ後、sveltekitフロントエンドがback4appバックエンドと適切に通信していることを確認します api検証 ブラウザの開発者ツール（f12 → ネットワーク）を使用してapiコールを検査します。 タスク操作 uiを介してタスクを追加、完了、削除し、back4appデータベースブラウザで更新を確認します。 エラーハンドリング エラーのためにコンソールログを確認し、空のタスクを送信するなどのエッジケースをテストします。 パフォーマンステスト ブラウザツールを使用して遅いネットワーク条件をシミュレートし、応答性を評価します。 sveltekitとback4appを使用するためのベストプラクティス アプリケーションを最適化するために 効率的なリクエスト 複数のタスクを処理する際はバッチ操作を使用します const tasks = \[task1, task2, task3]; parse object saveall(tasks); 最適化されたクエリ 必要なフィールドのみを取得 query select('title', 'completed'); 環境管理 環境変数に機密キーを保存 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の露出を減らす。 結論 あなたは今、sveltekitフロントエンドを作成し、back4appのバックエンドと統合し、コンテナ化されたワークフローを使用してデプロイすることによって、フルスタックのto doリストアプリケーションを構築しました。 このチュートリアルは、ローカル開発からクラウドデプロイメントまでのすべてのステップを案内し、sveltekit uiとバックエンドサービス間のスムーズな相互作用を確保しました。 今後は、リアルタイム更新、改善された認証、サードパーティ統合などの強化を検討してください。さらなる学習のために、 back4appドキュメント https //www back4app com/docs を訪れて、コミュニティリソースを探索してください。