この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

ほとんどの Web アプリは、純粋に共有情報を作成してアクセスするために存在します。 Amazon の Web サイト https://www.amazon.co.uk/ を考えてみましょう。このシステムの本質的な目的は、製品詳細の集中コレクションを參照し、注文し、配送の進捗狀況を監(jiān)視できるようにすることです。これを機能させるには、Amazon は次のことを行う必要があります。

• この情報は Web 経由でアクセスできる場所に保管してください
• ほぼ即時のアクセスと完全な整合性を確保するために、それを構築および管理します。

この投稿は、これらの目的を達成するために使用される「データベース」テクノロジーに関するものです。

警告 - これは 長い投稿です。Svelte でデータベースの読み取りと書き込みを行うと、SvelteKit のクライアントサーバー アーキテクチャを容赦なく使用することになるからです。以前は、コードは Web ブラウザーの「クライアント側」でのみ実行されていました。これで、npm run dev によって起動されたローカル サーバー上でもコードを実行できるようになります。これには影響があります...

投稿を分割する方法を検討しましたが、うまくいきません。さらに悪いことに、使用する Javascript には多くの新機能が含まれています。申し訳ありませんが、そのまま飲み込んでください。

しかし、明るい面も見てください。これを乗り越えると、物事は楽になり始めます。ゆっくりと行ってください。何かを明確に説明していないと思われる場合は、chatGPT を使用してください。このボットは、JavaScript 構文に関するアドバイスが必要な場合に特に役立ちます。リラックス。これは楽しそうです!

2. Google の Firestore を使用するようにプロジェクトを構成する

ウェブ上で共有データを保存する方法は無數にあります。この投稿シリーズでは、初心者に適しているため、Google の Firestore システムを使用します。最小限のセットアップが必要で、Svelte Web アプリの構造に快適に適合します。

最初に 4 つの手順を実行する必要があります:

1. Google アカウントを取得します
2. このアカウントで Firebase プロジェクトを作成します
3. 「ウェブアプリ」を登録します
4. Firebase プロジェクトの Firestore データベースを初期化します

Firebase は、Web 上に単純なプロジェクトをマウントするために使用できるさまざまなサービスを表す Google の包括的な用語です。特定のアカウントのサービスは、Google の「Firebase コンソール」(https://console.firebase.google.com/) を介して管理されます。これらには、Google Cloud にファイルをアップロードできる「ストレージ」サービスと「Firestore データベース」サービスの両方が含まれています。データベースは、構成可能な構造を持っているという點でファイルとは異なります。これにより、構成されたデータセットの個別の要素にアクセスして更新できるようになります。

2.1 Googleアカウントの取得

Gmail アドレスをお持ちの場合は、自動的に Google アカウントとしてカウントされるため、すでにカバーされています。まだお持ちでない場合は、「Google アカウントの作成」の手順に従ってアカウントを取得してください。

2.2 コード用の Firebase プロジェクトの作成

Google Firebase コンソールを起動し、Google アカウントでログインします (これで Gmail にログインしている場合は、すでに Firebase コンソールにもログインしていることに注意してください)。次に、[プロジェクトの作成] ボックスをクリックしてプロセスを開始します。

Google はプロジェクトの名前を指定するよう求めます (VSCode で使用しているプロジェクト名を使用することをお勧めします)。これを Firebase の世界で一意の「プロジェクト識別子」にする拡張機能を提案します。たとえば、この投稿シリーズで使用されている「Svelte-dev」プロジェクトの私のバージョンは、Google には「Svelte-dev-afbaf」として知られています。

余談ですが、プロジェクト識別子は最終的に Web アプリのデフォルトのライブ URL の一部を形成し、Google では最初の「獨自性拡張」提案を編集できるため、これを変更しようとする誘惑に駆られるかもしれません。意味のあるものに。ただし、この考えは忘れることをお勧めします。まず、雙方に適した識別子を選択するのは難しいことがわかります。次に、私の経験では、これらの「デフォルト URL」は Google によってインデックスに登録されることはありません。最小限のコストで購入し、公開時にデフォルトの URL にリンクする「カスタム URL」が、記憶に殘る URL を取得する最良の方法です。

[続行] をクリックすると、[Google Analytics] 登録ページが表示されます。これはライブアプリのパフォーマンスの問題にのみ関係するため、ここでは無視しても問題ありません。スライダー バーを使用して拒否し、[プロジェクトの作成] ボタンをクリックして続行します。

Google がプロジェクトを登録すると、ライトが少し暗くなります。最後に、もう 1 つ [続行] ボタンをクリックすると、プロジェクトの Firebase コンソール ウィンドウが表示されます。これは「svelte-dev」プロジェクトの Firestore タブのスクリーンショットです:

このページは少し複雑なので、少し時間をかけてよく理解しておくと良いでしょう?；镜膜蕵嬙欷?、右側のメイン パネルに何を表示するかを決定する左側の「ツール メニュー」で構成されます。問題は、メニューが「アダプティブ」で、どこにいたかを記憶する「プロジェクトのショートカット」セクションを維持していることです。その結果、コンソールを開くたびにメニューの外観が異なって見えるようになります。ただし、この機能を一度理解すると、物事はうまくいきます。ツールの完全なセットは、親の「製品カテゴリ」メニュー項目の「構築」、「実行」、および「分析」サブメニュー內に隠されていることに注意してください。 「Build」 セットには、現時點で必要なものがすべて含まれています。

先に進む前に、次の點に注意してください:

畫面上部の
• 情報により、svelte-test プロジェクトが現在「Spark」プランに登録されていることが確認できます。これは、現在行っていることはすべて無料であることを意味します。最終的に、この投稿シリーズでは、Google への支払いを開始する必要がある段階に達し、プロジェクトを「Blaze」料金にアップグレードする必要があります。ただし、心配しないでください。これはまだ先の話です。大した金額を支払うことはありません。Google が請求しようとする金額を制限するために、毎月の予算を作成することができます。
• プロジェクトの詳細は、ツールバーの上部にある「プロジェクト概要」ボタンをクリックすると表示されます。ここで利用できる詳細には、プロジェクト ID のリマインダーとプロジェクトを削除するボタンが含まれます。すべてがうまくいかない場合は、いつでもこれを使用して混亂を取り除き、最初からやり直すことができます。これには費用はかかりません

2.3 Webアプリの登録

Firebase は、Web アプリの名前を知る必要があります:

• をクリックします。 「はじめましょう」メッセージの下のアイコンをクリックし、要求されたらニックネームを入力します。ここでもプロジェクト名を再度使用することをお勧めします (例: 「svelte-dev」)。
• 「このアプリに Firebase Hosting を設定してください」という提案は無視してください。最終的にデプロイメントに取りかかると、ホスティングのニーズはすべて App Engine によって処理されるためです。
• 最後に、[登録] をクリックし、[コンソールに進む] をクリックして、最初のコンソール畫面に戻ります。

2.4 - Firestore データベースの初期化

ツール メニューの [ビルド] スタックから [Firestore データベース] を選択すると、以下に示す Firebase コンソール ビューが表示されます。

[データベースの作成] ボタンをクリックすると、コンソールで次の操作が求められます:

1. データベースの「名前と場所」を設定します。 「名前」はデータベースの識別子であり、プロジェクト內に複數の異なるデータベースを作成する場合にのみ関係します。 Google が「デフォルト」設定を使用するように、現時點ではこれを空のままにしておきます。 「場所」は、データベースが物理的に配置される場所を指定します。ここで利用可能なオプションのプルダウン リストを見ると、おそらく Google Cloud サービスの規(guī)模が初めてわかるでしょう。そのサーバー ファームは世界中で利用できます。おそらく、現在地に近いサーバーを選択することをお勧めします。たとえば、私は英國に拠點を置いているため、通常は「europe-west2 : Heathrow」を使用します。 Google Cloud コンソールの他のページでは、パフォーマンスと可用性の特性を指定できますが、現時點ではこれらを確認する必要はありません。

2. 「ルール」を使用してデータベースを保護します。ここの畫面では、初期の「運用」ルールと「テスト」ルールのどちらを設定するかを選択できます。もちろん、これが意味をなすのは、そもそも「ルール」とは何かを知っている場合に限られますが、今は私がそれらを説明するのに適切な時期ではありません。よくわからない場合は、ここで「テストモード」オプションを確認してください。安心してください。これについては、後で「承認」について話すときに戻ってきます (そして、話したいことはたくさんあります!)。

これら 2 つの段階を完了すると、Firebase コンソールで Cloud Firestore ページが開きます。今はどうする?

3. Firestore データベースの操作

このセクションは、次の質問に答えることを目的としています:

1. データベースとは何ですか?
2. Firestore データベースはどのようなものですか?
3. Firestore コンソールでデータベースを初期化するにはどうすればよいですか?
4. JavaScript で Firestore データベースにアクセスするにはどうすればよいですか?
5. Firestore データベースからデータをロードするために Svelte page.svelte ファイルを取得するにはどうすればよいですか?
6. Firestore データベースにデータを追加するために Svelte page.svelte ファイルを取得するにはどうすればよいですか?

3.1 データベースとは何ですか?

當面の目的として、データベースは、名前付きデータ「フィールド」の値の行を含むテーブルのセットです。したがって、たとえば、「顧客注文」データベースには

が含まれる可能性があります。

• 「顧客 ID」と「顧客住所の詳細」フィールドの値が含まれる「顧客」テーブル
• 「製品番號」フィールドと「製品詳細」フィールドがいっぱいの「製品」テーブル
• 「顧客 ID」によって行われた「製品番號」の注文の詳細を含む「顧客注文」テーブル

重要なことは、そのような取り決めが、データコンテンツの命名とフォーマットに関する一貫した基準で構造化されているということです

3.2 Firestore データベースはどのようなものですか?

Firestore では、テーブルは「コレクション」と呼ばれ、テーブル內の行は「ドキュメント」と呼ばれます。コレクション內に保存されるドキュメントがすべて同じフィールドを持つ必要はありませんが、フィールド名とコンテンツはコレクション全體で一貫したパターンに従うことが期待されます。

Firestore ドキュメントの重要な特徴は、一意の識別子または「キー」が必要であることです。場合によっては、各文書內に「自然な」一意のキーを提供するために使用できる「電子メール アドレス」などのフィールドが存在することがあります。そうでない場合は、Firestore に人工キーを自動的に作成するように依頼できます。

データベース設計は、おそらくシステム開発の中で最も難しい部分ですが、これについては省略します。関連する問題は、実際の経験を積んで初めて明らかになるからです。ただし、時間があれば、Cloud Firestore データ モデル ページをチェックすると便利です。

3.3 Firestore コンソールでデータベースを初期化するにはどうすればよいですか?

この投稿では、デフォルトの Firestore データベースに単一の製品コレクションを作成する方法を説明する予定です。これには、Firestore によって自動的に生成されたキーを持つ製品番號フィールドを含む単純なドキュメントが含まれます。

Firebase コンソールの Firestore ページで、[コレクションの開始] ボタンをクリックし、表示されるポップアップの [コレクション ID] フィールドに名前「products」を入力します。

次に、データ入力ページを使用して、數値「1」の「productNumber」フィールドとテキスト値「Product 1」の「productDetails」フィールドを含むテスト製品ドキュメントを作成します。

• 「フィールド」入力ボックスに「productNumber」と入力してフィールド名を設定し、「タイプ」ボックスを「數値」に設定して、「値」ボックスに「1」（引用符なし）を入力します。
• 「フィールドの追加」をクリックし、「フィールド」入力ボックスに「productDetails」と入力してフィールド名を設定します?！弗骏ぅ住攻堀氓工膝钎榨━毳趣巍肝淖至小乖O定のままにして、「Product 1」と入力します（引用符は除く） )「値」ボックス
。

まず [自動 ID] ボタンをクリックしてドキュメントをサインオフし、次にドキュメントを [保存] します。コンソールは次のようになります。

さらにドキュメントを追加したい場合は、この時點で「ドキュメントの追加」をクリックしますが、この場合はその必要はありません。Web アプリの読み取り機能を示すために必要なのは 1 つのドキュメントだけです。

今のところこれで作業(yè)は完了ですが、コンソールの「パネル ビュー」では、作成したばかりのドキュメントを編集または削除できることに注意してください。完全に混亂してしまった場合は、コレクション全體を削除して最初からやり直すこともできます。

3.4 Javascript で Firestore データベースにアクセスするにはどうすればよいですか?

ここからが本當に面白くなります！

Google は、Firestore ドキュメントの読み書きを可能にする Javascript 関數のライブラリを提供しています。このようなライブラリは「API」（Application Program Interface）と呼ばれます。 firebase/firestore ライブラリを使用して svelte-dev の製品コレクション內のすべてのドキュメントを読み取る方法を示す次のコードを見てください。

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

const productsCollRef = collection(db, "products"); で始まるセクションに注目してください。これは、Firestore API 呼び出しを使用して、製品コレクション內のすべてのドキュメントの並べ替えられたコピーを State currentProducts 変數に読み込みます。

まず、Firestore クライアント API ライブラリから抽出されたコレクション関數とクエリ関數を使用して、Firebase に製品コレクションを指定し、そのコレクションに対して実行するクエリを定義します。次に、getDocs API 呼び出しによってクエリが起動されます。

この一連の Firestore API 呼び出しの仕組みについては説明しません。これらを「定型コード」、つまりコードの一部として扱い、一度書いたら、その後は単にコピーするようなものとして扱います。 Firestore の「読み取り」、「更新」、「削除」操作をすべてカバーするには、テンプレートのライブラリ全體が必要であることがわかるため、Post 10.1 - Firestore CRUD コマンド テンプレートを確認すると役立つかもしれません。 Google 獨自の API の説明を確認したい場合は、投稿 10.1 の最後にリンクがあります。

ここでの「CRUD」は、「作成」、「読み取り」、「更新」、「削除」の略です。

getDocs の結果は、従來「スナップショット」と呼ばれるドキュメントの配列として返されます。ただし、getDocs 関數呼び出しの前に await キーワードが付いていることに注意してください。

ここで await キーワードが必要になるのは、Javascript のデフォルトでは、完了までに予期せぬ時間がかかる可能性のある外部データ ソースを參照する命令が非同期で処理されるためです。 "await" キーワードを使用すると、基本的に (これは非常に単純化されていますが) この配置をオーバーライドできます。もう少し時間があるときに、JavaScript fetch() API と "await" キーワードの簡単なガイド

を參照すると役立つかもしれません。

しかしここで、上記のコード スニペットに戻って、const firebaseConfig ステートメントで始まるセクションを見てください。

firebaseConfig 宣言は、ウェブアプリを特定の Firebase プロジェクトに接続するために必要な設定の詳細を含むオブジェクトを初期化します。これには、Firebase がアプリを見つけて認証するために使用するさまざまなキーと識別子が含まれています。 あなたの特定のウェブアプリの設定は、Firebase コンソールの [プロジェクトの概要/プロジェクト設定] にあります。以下のコード サンプルの firebaseConfig 設定は、私の プロジェクトに固有のものであり、安易に渡すべきではないため、「難読化」されています (これについては後ほど詳しく説明します)。以下のサンプル コードを試す場合は、獨自のプロジェクトから firebaseConfig 設定をコピーする必要があります。

firebaseConfig が初期化されると、Web アプリはクエリの const productsCollRef = collection(db, "products"); に必要な db 変數を初期化できます。ステートメント:

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

最後に、これらの API 関數がどこから來たのか疑問に思われるかもしれません。答えは、コード ブロックの先頭にある 3 つのステートメントによって、プロジェクト內の場所からインポートされるということです。

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

ここでは、コードに関數を提供するために「モジュラー ライブラリ」にアクセスしています。コレクションなどの名前付き関數は、コードの後半で必要な參照を満たすために親モジュールから抽出されます。

しかし、これは「そもそもモジュラー ライブラリはどのようにして私のプロジェクトに取り込まれるのでしょうか?」という疑問につながります。もちろん、答えは、それらをそこに配置する必要があり、これを行うために使用するツールは忠実な古い npm であるということです。

VSCode svelte-test ターミナル セッションに戻り (必要に応じて Ctrl-C キーストロークを數回押して開発サーバーを終了します)、次の命令を実行します。

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

1 ～ 2 分後 (インストールには大量のダウンロードが必要です)、Firestore データベース コレクションをダウンロードするコードを実行できるようになります。しかし、これを Svelte Web アプリに埋め込む方法はまだわかりません。それでは、次の質問に進みます...

3.5 Firestore データベースからデータをロードするために Svelte page.svelte ファイルを取得するにはどうすればよいですか?

長かったですが、もうすぐ終わりですので、頑張ってください。

現在、