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

このチュートリアルでは、qwikを使用してto doリストアプリケーションを構築し、back4appによって強化された堅牢なバックエンドに接続します。 このガイドは、qwikの再開性とレイジーローディング機能を活用し、管理されたバックエンドと基本的なcrud（作成、読み取り、更新、削除）操作を統合したい開発者向けに調整されています。 最後には、現代的なqwikフロントエンドとback4appの信頼性の高いバックエンドサービスを組み合わせる方法を示す完全に機能するアプリケーションが得られます。 フルスタックアプリケーションを構築することは、バックエンドのセットアップ、データベース管理、認証、デプロイメントを含むため、挑戦的です。 これらのタスクを簡素化するために、back4appを使用します— スケーラブルなバックエンド・アズ・ア・サービス（baas） ソリューション—これにより、ホスティング、データベース、apiの管理を行いながら、qwikアプリの構築に集中できます。 back4appは、すぐに使用できるnosqlデータベース、認証、サーバーサイドロジックのためのcloud code、スムーズなsdk統合を含む包括的なバックエンドサービスのスイートを提供します。そのコンテナ化されたデプロイメントサポートは、現代のフルスタックアプリケーションにとって優れた選択肢です。 これらのツールを手元に持つことで、サーバーインフラの管理のオーバーヘッドなしに、アプリケーションを迅速に開発およびデプロイできます。 重要なポイント このチュートリアルに従うことで、以下を学ぶことができます 最新のqwikプロジェクトを初期化する。 アプリケーションのデータを管理するためにバックエンドサービスを統合する。 インタラクティブなユーザーインターフェースのための基本的なcrud操作を実装する。 コンテナ化されたワークフローを使用して、 完全に機能するto doリストアプリケーション をback4appにデプロイする。 前提条件 始める前に、以下を確認してください node jsとnpm 最新のltsバージョンを nodejs org https //nodejs org/ からインストールし、 node v と npm v で確認してください。 基本的なqwikの知識 qwikのコンポーネント、シグナル（ usesignal を使用）、およびその再開可能性の概念に慣れていることが推奨されます。qwikが初めての場合は、まずそのドキュメントを確認してください。 back4appアカウント バックエンドサービスを設定および管理するために、 back4app https //www back4app com/ にサインアップしてください。 これらの前提条件が整ったら、プロジェクトを設定して構築を開始する準備が整いました。 プロジェクトのセットアップ ローカル開発環境を設定し、qwikプロジェクトを初期化します。 次のことを確認してください node js (ltsバージョン) がインストールされています node v npm v qwik cliを使用して新しいqwikプロジェクトを作成します。次のコマンドを実行してください npm create qwik\@latest cliが提供するプロンプトに答えてください。プロジェクト名をtodo appにするか、お好みの名前に置き換えてください。 プロジェクトディレクトリに移動します cd todo app セットアップを確認するために開発サーバーを起動します npm start あなたのqwikアプリは現在ローカルで実行されているはずです。提供されたurlをブラウザで開いて確認してください。次に、データストレージとapiのやり取りを管理するためにback4appでバックエンドを設定します。 todoバックエンドの作成 back4appは、 parse によって提供される完全管理されたバックエンドサービスです。このサービスは、nosqlデータベース、認証、cloud code、および自動生成されたapiをすぐに利用できるように提供します。 このセクションでは、あなたのto doアイテムを保存するための task データモデルを作成し、それをあなたのqwikフロントエンドにリンクする方法を案内します。 バックエンドアプリケーションの設定 ログイン して、あなたの back4appダッシュボード https //www back4app com/ をクリックし、 "新しいアプリを作成"。 アプリケーションに名前を付ける （例えば、 todoqwikapp ）と、バックエンドタイプとして nodejs/parse を選択します。 作成後、 "データベース" > "ブラウザ" に移動します。 "クラスを作成" をクリックし、 "カスタム" を選択します。クラスに名前を付けます task とし、 クラスレベルの権限 を設定して、一般の読み取りと書き込みを許可します（これらの設定は後で調整できます）。 「 task 」クラスに、次のフィールドを追加します： title （文字列）– タスクのタイトル。 description （文字列）– タスクの詳細。 completed （ブール値）– タスクが完了しているかどうかを示します。 duedate （日付）– タスクの締切。 "保存" をクリックして、スキーマを確定します。 back4appとqwikの統合 back4appをあなたのqwikプロジェクトに統合するには、 parse javascript sdk を使用します。sdkをnpm経由でインストールします npm install parse sdkを設定するには、あなたの アプリケーションid と javascriptキー で初期化します。これらの資格情報は、あなたのback4appダッシュボードの アプリ設定 > セキュリティとキー から取得してください。 設定ファイルを作成します（例えば、 src/lib/parse 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; これで、qwikコンポーネントやルートでこの設定をインポートして、バックエンドとやり取りすることができます。 qwikを使ったフロントエンドの開発 バックエンドが接続されたので、qwikを使用してto doリストアプリケーションのユーザーインターフェースを構築します。タスクを追加、表示、更新、削除するためのコンポーネントを作成し、qwikシグナルで状態を管理します。 コンポーネントの整理 アプリケーションには以下の主要コンポーネントが含まれます taskform tsx – 新しいタスクを追加するためのコンポーネントです。 tasklist tsx – すべてのタスクを表示し、タスクを完了としてマークしたり削除するためのコントロールを提供するコンポーネントです。 taskitem tsx – 個々のタスクを表し、完了を切り替えたり削除したりするアクションを持つコンポーネントです。 components フォルダーを src 内に作成し、これらのファイルを追加します mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx qwikシグナルによる状態管理 qwikの usesignal を利用して、リアクティブな状態管理を行います。メインページ（例えば、 src/routes/index tsx ）で、状態とデータ取得を以下のように設定します import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); タスクフォームコンポーネントの構築 「 src/components/taskform tsx 」で、タスクを追加するためのフォームコンポーネントを作成します。フォーム入力にはqwikのリアクティブシグナルを使用します import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); タスクリストとアイテムコンポーネントの構築 次のファイルで src/components/tasklist tsx , タスクのリストをレンダリングします import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); 次のファイルで src/components/taskitem tsx , 完了を切り替えたりタスクを削除したりするアクションを持つ個々のタスクのコンポーネントを作成します import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); アプリケーションのスタイリング 基本スタイリングを追加するために、 src/global css ファイルを作成します / 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; } 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; } } ルートファイルにグローバルスタイルをインポートします（例： src/root tsx ) import " /global css"; uiの最終調整 あなたのqwik to doリストアプリケーションは、back4appとカスタムスタイリングを統合した動的なフロントエンドを備えています。このアプリでは、タスクを追加、表示、更新、削除でき、フロントエンドとバックエンドの間でスムーズな通信が確保されています。 次に、back4appのwebデプロイメントプラットフォームを使用してqwikアプリケーションをデプロイします。 back4appウェブデプロイメントでのフロントエンドのデプロイ back4appウェブデプロイメントは、アプリケーションをホスティングするための完全に管理されたコンテナ化された環境を提供します。dockerベースのデプロイメントを使用すると、qwikアプリをパッケージ化し、シームレスにデプロイできます。 expressサーバーアダプターを追加する qwikでは、特定のターゲット用にデプロイメントアダプターを構成できます。プロダクションでプロジェクトを提供するために、expressアダプターを追加します。 アダプターをインストール npm run qwik add 次に、 アダプター node js expressサーバー を選択し、インストールを確認します。これにより、readmeが更新され、package jsonに新しいデプロイメントスクリプトが追加されます。 スタートスクリプトを更新 package json を開き、スタートスクリプトを次のように変更します "start" "node server/entry express" 必要に応じて、別の開発スクリプトを保持することもできます。これにより、プロジェクトがexpressを使用してプロダクションビルドを提供することが保証されます。 プロダクション用にqwikを構成する プロダクション準備が整ったqwikサイトを次のコマンドでビルドします npm run build アプリのためのdockerfileの作成 プロジェクトのルートに dockerfile を作成して、qwikアプリケーションをコンテナ化します # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] 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にリポジトリへのアクセスを許可し、あなたのqwikプロジェクトリポを選択します。 選択する dockerfileデプロイメント を選択し、ビルド設定を確認します。 クリックして "デプロイ" ビルドプロセスを開始します。 デプロイメントの監視と管理 デプロイ後、back4appダッシュボードを使用して トラブルシューティングのためにログを表示します。 コンテナのパフォーマンスとリソース使用状況を監視します。 新しいコミットがプッシュされたときに再デプロイをトリガーします。 必要に応じてカスタムドメインを設定します。 アプリケーションのテストとデバッグ デプロイ後、qwikアプリを徹底的にテストしてください api接続の確認 ブラウザの開発者コンソール（f12 → ネットワーク）を開いて、タスク操作中のapiコールを確認します。 タスクの追加と取得 uiを使用してタスクを追加し、データがback4appデータベースブラウザに持続していることを確認するためにリフレッシュします。 crud操作のテスト タスクを完了としてマークし、削除がバックエンドに正しく反映されることを確認します。 エッジケースの処理 フォーム入力を検証し、開発者ツールを使用して遅いネットワーク条件をシミュレートします。 問題が発生した場合は、back4appのログを確認するか、api設定を再確認してください。 back4appサービスを使用するためのベストプラクティス アプリケーションのパフォーマンスとセキュリティを向上させるために apiコールの最適化 複数の操作に対してバッチリクエストを使用し、必要なフィールドのみをクエリします。 機密データの保護 アプリケーションidやjavascriptキーなどの資格情報を環境変数に保存します。qwikでは、 env ファイルを作成します vite parse app id=your app id vite parse js key=your js key 自動スケーリングの有効化： 高トラフィックを管理するためにback4app web deploymentで自動スケーリングを有効にします。 セキュリティの強化： データの変更を制御するためにクラスレベルの権限（clp）を制限し、必要に応じてaclを設定します。 クラウドコードの利用： パフォーマンスを向上させ、apiの露出を減らすために複雑なロジックをクラウドコードにオフロードします。 結論 これで、フロントエンドにqwik、バックエンドにback4appの堅牢なサービスを使用したフルスタックのto doリストアプリケーションを構築しました。 このチュートリアルでは、qwikプロジェクトの設定、parse sdkの統合、back4appでのコンテナ化されたワークフローを使用したサイトのデプロイについて案内しました。 開発を続ける中で、高度なユーザー認証、リアルタイム更新、サードパーティ統合などの機能を追加することを検討してください。 さらなる情報とサポートについては、 back4appのドキュメント https //www back4app com/docs を参照してください。