この記事では、FIREBASEのRealTimeDatabaseへJavascript のFetch通信を使って、データのCRUD処理の方法を説明します。Javascript を使って、バックエンド側ともデータをやり取りする機能になります。
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に変換します。
ブラウザからデータ送信してみる
①ブラウザから入力ボックスに名前とメールアドレスを入力して、送信ボタンをクリックします。
②入力して送信したデータが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に格納されたデータを繰り返し抽出して、コンソールへ出力します
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します。
ブラウザから例外処理を発生させてみる
まず、エラーが発生するように、FIREBASEのRealtimeDatabaseの「ルール設定」で”write”をfalseにして、書き込み通信を遮断します。
「データ送信」ボタンをクリックするとエラーが発生して、先ほどエラーオブジェクトで定義したエラーメッセージがアラートで表示されます。
まとめ
今回の記事では、Javascript のFetch通信を使って、FIREBASEのRealtimeDatabase(バックエンド)との通信を実装しました。ブラウザやフロントサイドだけだとデータの登録・保持まで実装できませんが、FIREBASEと通信でデータをやり取りすることで、より実現可能な幅が広がります。