【FIREBASE】Javascript のFetch通信で、RealtimeDatabaseにCRUD処理を実行する

FIREBASE フェッチ プログラミング

この記事では、FIREBASEのRealTimeDatabaseへJavascript のFetch通信を使って、データのCRUD処理の方法を説明します。Javascript を使って、バックエンド側ともデータをやり取りする機能になります。

CRUDとは

データに対して、Create(作成)・Read(取得)・Update(更新)・Delete(削除)処理を実行することを言います。

FIREBASEを設定する

FIREBASEのコンソールに移動して、RealtimeDatabaseの「データベースを作成」を実行します

②ロケーションは、「米国」、オプションは「ロックモード」を選択します。

③続いて、データベースのルール設定になります。以下のように、“read”と”write”の設定をtrueにします。falseの状態だとJavascript でFetch通信した際に、接続できずエラーになります。trueにすることで、すべての読み込み、書き込みの通信を許可します

④続いて、データベースの接続先URLを確認します。こちらのURLは後ほどFetch通信を作成するうえで使用します。

データ作成処理を実装する(Create)

HTMLのコード説明

シンプルな構造で、インプットボックスと後ほどJavascript でイベントを付与する各ボタンのみ配置しています。メインはFetch通信になるので、今回はCSSは設定していません。

<h2 class="section-title">Contact</h2>
<dl>
    <dt>名前</dt>
    <dd><input type="text" name="name" id="name" /></dd>
    <dt>メールアドレス</dt>
    <dd><input type="email" name="email" id="email" /></dd>
</dl>
<button id="btn">データ送信</button>
<button id="btn-get" onclick="getData()">データ取得</button>
<button id="btn-delete" onclick="deleteData()">データ削除</button>

javascriptのコード説明

送信ボタンをクリックしたときに、インプットボックスに入力されたデータが送信される仕組みになります。

const $btn = document.querySelector("#btn");//ボタンの要素取得
const $name = document.querySelector("#name");//インプットボックスの要素取得
const $email = document.querySelector("#email");//インプットボックスの要素取得

//ボタンをクリックするとイベント実行
$btn.addEventListener("click", () => {
  const inputData = {
    name: $name.value,
    email: $email.value,
  };
  submitData(inputData);//submit関数呼び出し、入力値を引数で渡す
});


async function submitData(inputData) {
  const response = await fetch(
    "https://ご自身のFIREBASEのURL/contact.json",//FIREBASEのURL+階層名+.json
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(inputData),//入力値をJSONへ変換する
    }
  );
}
  • 1~3行目で、Javascript で使用するHTML要素を取得します。
  • 6行目~で、送信ボタンをクリックするとイベントが実行する処理を書きます。入力値をinputDataオブジェクトに格納します。submitData関数を呼び出し、引数にinputDataを渡します。
  • 15行目~で、Fetch通信の処理を書いていきます。データの送信先は先ほどFIREBASEで確認したURLを設定します。methodは“POST”で、headersには、content-TypeにはJSONを指定します
  • 23行目~で、FIREBASEとはJSON形式でデータ接続するため、inputDataオブジェクトをJSONに変換します。
FIREBASEの送信先形式

「FIREBASEで確認したURL」+「/」+「階層名」+「.json」

ブラウザからデータ送信してみる

①ブラウザから入力ボックスに名前とメールアドレスを入力して、送信ボタンをクリックします。

②入力して送信したデータがRealtimeDatabase側で閲覧できるようになります

データ作成の処理を実装する(Read)

Javascriptのコード説明

先ほどデータ作成で実装したJavascript にデータ取得のFetch通信を追記しています。

//データ取得関数実行
async function getData() {
  const response = await fetch(
    "https://ご自身のFIREBASEのURL/contact.json",//FIREBASEのURL+階層名+.json
    { method: "GET" }
  );
  const responseData = await response.json();//promiseをJSONへ変換
  for(const a in responseData){ //JSONに格納された値を繰り返し処理で抽出
    console.log(responseData[a])
  }
}
  • 2行目~でデータ取得ボタンがクリックされたら、getData関数が実行される処理を記述します
  • 4行目のFetch通信のFIREBASEの接続先は、createの時と同様になります。methodは“GET”になります
  • 7行目で、Fetch通信の戻り値はPromise形式になるため、JSON形式へ変換をします
  • 8行目で、JSONに格納されたデータを繰り返し抽出して、コンソールへ出力します

Fetch通信は非同期処理となるため、async~awaitでFetch通信(データ取得)が完了するまで、次の処理を待機させておきます。

FIREBASEからデータ取得してコンソールに出力する

データ取得ボタンをクリックすると、FIREBASEに登録済みのデータがコンソールに出力されます

データ削除を実装する(Delete)

Javascriptのコード説明

先ほどデータ作成で実装したJavascript にデータ取得のFetch通信を追記しています。

//データ削除関数実行
async function deleteData(){
    const response = await fetch(
    "https://ご自身のFIREBASEのURL/contact.json",//FIREBASEのURL+階層名+.json
  {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
  }
);
}
  • 6行目のmethodには、“DELETE”を記述します。あとはCreateの記述同様になります。

ブラウザからFIREBASEのデータを削除してみる

①ブラウザからデータ削除ボタンをクリックしてJavascript の関数を実行します。

RealtimeDatabaseの登録されているデータが削除されます

例外処理(エラー)を追加してみる

FIREBASEとの通信でエラーが発生した場合に、アラートを表示させる例外処理をJavascript に実装してみます

先ほど説明したCreate処理に、例外処理を追加してみます。

//ボタンをクリックするとイベント実行
$btn.addEventListener("click", () => {
    const inputData = {
        name: $name.value,
        email: $email.value,
    };
    (async function a(){//即時関数でtry~catch文を囲む
    try{
        await submitData(inputData);//submit関数呼び出し、入力値を引数で渡す
    }catch(e){
        alert(e.message)
    }
    })()
});

async function submitData(inputData) {
  const response = await fetch(
    "https://ご自身のFIREBASEのURL/contact.json",//FIREBASEのURL+階層名+.json
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(inputData),//入力値をJSONへ変換する
    }
  );
  //例外処理(エラー)を追記
  if (response.ok) {//通信の戻り値をチェック
      console.log(response);
      alert("送信完了しました。");
    } else {
      const error = new Error("サーバーへの送信に失敗しました")//通信エラーがある場合はエラーを返す
      throw error;
    }
}
  • 7行目~即時関数内にtry~catch文を記述します。try文の中の処理でエラーが発生した場合は、catch文が実行され、e.message(エラーメッセージ)をアラートで表示します。
  • 29行目~のif文で、response.ok(通信の戻り値のステータス)がfalseの場合に、エラーオブジェクトを作成して、errorをthrowします。
try~catch文
  • try{実行したい処理}catch{エラーが発生した場合実行する処理}
  • try{実行したい処理}の中で、エラーオブジェクトを定義して”throw error”で、catch文へ処理を投げます

ブラウザから例外処理を発生させてみる

まず、エラーが発生するように、FIREBASEのRealtimeDatabaseの「ルール設定」で”write”をfalseにして、書き込み通信を遮断します

「データ送信」ボタンをクリックするとエラーが発生して、先ほどエラーオブジェクトで定義したエラーメッセージがアラートで表示されます。

まとめ

今回の記事では、Javascript のFetch通信を使って、FIREBASEのRealtimeDatabase(バックエンド)との通信を実装しました。ブラウザやフロントサイドだけだとデータの登録・保持まで実装できませんが、FIREBASEと通信でデータをやり取りすることで、より実現可能な幅が広がります。

タイトルとURLをコピーしました