How to Build a Blitz.js Frontend and Connect It to a Backend?

このガイドでは、blitz jsを使用してto doリストアプリケーションを構築し、back4appの管理されたバックエンドに接続します。 このステップバイステップのチュートリアルは、基本的なcrud操作を実装し、blitz jsを使用して動的なユーザーインターフェースを作成するのに役立つように設計されています。 フルスタックアプリケーションを構築することは、フロントエンドとバックエンドのシステムの両方を管理しなければならない場合、複雑になる可能性があります。 back4appを活用することで、 スケーラブルなbaas を通じてバックエンド管理を簡素化でき、魅力的なblitz jsインターフェースの構築に集中できます。 back4appは、すぐに使用できるnosqlデータベース、認証、クラウド関数、apiエンドポイントなどのバックエンドサービスのスイートを提供します。 これらの機能により、サーバーのメンテナンスの負担を軽減しながら、アプリケーションを迅速に開発および展開できます。 主なポイント このチュートリアルの終わりまでに、あなたは以下のことができるようになります 業界標準のツールを使用して、最新のblitz jsプロジェクトをセットアップします。 parse sdkを使用して、blitz jsアプリケーションにback4appバックエンドを統合します。 crud操作を実装して、あなたの to doリスト を管理します。 back4appのwebデプロイメントを使用して、blitz jsアプリをコンテナ化してデプロイします。 前提条件 始める前に、次のものを用意してください node js と npm があなたのマシンにインストールされていること。ターミナルで node v と npm v を使ってインストールを確認してください。 基本的な blitz js の知識 , ルーティング、クエリ、ミューテーションを含む。blitz js は react に基づいているため、react に慣れていると良いでしょう。 back4app アカウント を持っていること。バックエンドサービスの設定と管理のために。まだ登録していない場合は、 back4app https //www back4app com/ にサインアップしてください。 これらの前提条件が満たされたら、blitz js プロジェクトを初期化し、堅牢なバックエンドと統合する準備が整いました。 プロジェクトのセットアップ blitz js アプリケーションのセットアップを開始します。blitz js は、next js の力をフルスタックフレームワークと組み合わせることで、スムーズな開発者体験を提供します。 次のコマンドを実行して新しい blitz js プロジェクトを作成します。 todo app を選択したプロジェクト名に置き換えてください npx blitz new todo app プロジェクトディレクトリに移動します cd todo app すべてが正しく設定されていることを確認するために、開発サーバーを実行します npm run dev ターミナルに表示されたurlにアクセスして、blitz jsアプリが実行されていることを確認してください。 back4appでのtodoバックエンドの設定 back4appは、アプリケーションのデータ管理を簡素化する管理されたparseバックエンドを提供します。このセクションでは、to doリストのタスクを保存するためのデータモデルを作成します。 バックエンドアプリケーションの作成 あなたの back4appダッシュボード https //www back4app com/ にログインし、 "新しいアプリを作成" アプリケーションの名前を入力します（例： todoblitzapp ）そして、バックエンドタイプとして nodejs/parse を選択します。 「 データベース 」 > 「 ブラウザ 」セクションで、 「クラスを作成」 をクリックし、「 カスタム 」を選択します。クラスに task という名前を付け、クラスレベルの権限を設定して、公開の読み取りと書き込みを許可します（これらの設定は後で調整できます）。 次のフィールドを task クラスに追加します title (文字列) – タスクのタイトル。 description (文字列) – タスクの詳細。 completed (ブール値) – タスクが完了しているかどうか。 duedate (日付) – タスクの締切。 「 保存 」をクリックして、スキーマを作成します。 back4app と blitz js の統合 blitz js アプリを back4app に接続するには、parse javascript sdk をインストールします npm install parse 次に、blitz js プロジェクトで parse sdk を設定します。新しい設定ファイルを作成します（例えば、 src/parseclient js ) そして、以下のように parse を初期化します。プレースホルダーを app settings > security & keys からの back4app 認証情報で置き換えてください。 // src/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; この設定をblitz jsのクエリやミューテーションにインポートして、バックエンドと対話することができます。 blitz jsを使ったフロントエンドの構築 バックエンドが設定されたので、blitz jsでto doリストインターフェースを構築する時が来ました。crud操作を実行するために、blitz jsの組み込みクエリとミューテーションを使用します。 ページとapiコールの構造化 blitz jsでは、ページは src/pages ディレクトリの下にあります。 src/pages/index tsx を開いて、ページを設定し、back4appからタスクをクエリし、タスクの追加、切り替え、削除のためのミューテーションを定義するために次のコードを追加します // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<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> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home このページは、tanstackのクエリフックを利用してタスクを取得し、ユーザーアクションを処理し、back4appバックエンドとのシームレスな統合を確保します。 動作することを確認するために、 usequery アプリケーション全体を queryclientprovider でラップする必要があります。これは src/pages/ app tsx ファイルで行います。 以下のコードブロックで src/pages/ app tsx ファイルのコードを置き換えてください // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) グローバルスタイルの追加 アプリの基本スタイルを定義するには、次のコードブロックを src/styles/globals css に追加します。 / src/styles/globals 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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/pages/ app tsx （またはカスタムappコンポーネントファイルに） / src/pages/ app tsx / import " /styles/globals css"; あなたのblitz jsアプリは、back4appと統合された完全に機能するto doリストインターフェースを表示します。 back4app上でのblitz jsアプリのコンテナ化とデプロイ back4appのwebデプロイメントは、デプロイプロセスを簡素化するコンテナ化された環境を提供します。あなたはblitz jsアプリをdockerコンテナにパッケージ化し、シームレスにデプロイします。 本番環境に向けたblitz jsアプリの準備 まず、blitz jsアプリケーションを本番用にビルドします blitz build dockerfileの作成 プロジェクトのルートディレクトリに次の内容で dockerfile を作成します from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] このdockerfileは、blitz jsプロジェクトをビルドし、軽量のnode jsランタイムを使用して本番用のイメージを準備します。dockerfileを作成したら、 dockerignore ファイルを作成し、 gitignore ファイルをコピーして貼り付けます。 dockerコンテナのビルドとテスト ローカルでdockerイメージをビルドします docker build t todo blitz frontend コンテナを実行してテストします docker run p 3000 3000 todo blitz frontend ブラウザで http //localhost 3000 にアクセスして、blitz js アプリが正しく動作していることを確認してください。 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 ウェブデプロイメント https //www back4app com/containers にログインし、次の手順に従ってください "新しいアプリを作成" をクリックし、プロジェクトの詳細を入力します。 "github リポジトリ" を選択し、back4app を認証します。 "todo blitz" リポジトリを選択します。 "dockerfile デプロイメント" を選択し、ビルド設定を確認します。 "デプロイ" をクリックして、デプロイメントプロセスを開始します。 デプロイが完了したら、back4app ダッシュボードを使用してログを監視し、ビルドを管理し、必要に応じてカスタムドメインを設定します。 アプリケーションのテストとデバッグ デプロイ後、アプリが期待通りに動作することを確認します api接続の確認 ブラウザの開発者ツールを使用して、タスクの追加、切り替え、削除のためのapiリクエストが成功していることを確認します。 データの永続性の確認 uiを通じてタスクを追加し、ページをリフレッシュして、back4appデータベースに保存されていることを確認します。 crud操作のテスト タスクが切り替えられ、削除できることを確認し、エラーがないかコンソールログを確認します。 エッジケースの処理 無効な入力を送信して、バリデーションの堅牢性をテストします。 ベストプラクティスと最適化のヒント 安全で効率的なアプリケーションのために、以下の推奨事項を考慮してください apiリクエストの最適化 バッチ処理を使用し、クエリされたフィールドを制限してネットワークオーバーヘッドを削減します。 環境変数のセキュリティ 機密情報（アプリケーションidとjavascriptキー）を安全な env ファイルに保存します。 アクセス制御の実装 動的aclを使用して、認可されたユーザーのみがデータを変更できるようにします。 クラウドコードの活用 複雑なロジックをback4appクラウドコードにオフロードして、パフォーマンスとセキュリティを向上させます。 結論 これで、blitz jsを使用してback4appバックエンドと統合されたフルスタックのto doリストアプリケーションを構築しました。 このチュートリアルでは、プロジェクトの初期化、バックエンドの統合、コンテナ化されたデプロイメントを案内しました。 今後は、高度なユーザー管理、リアルタイム更新、サードパーティ統合などの機能を追加してアプリを拡張することを検討してください。 追加の洞察については、 back4appドキュメント https //www back4app com/docs とblitz jsリソースを探ってみてください。