LoginSignup
0
1

More than 1 year has passed since last update.

@junzai(kogure junsai)

Firebase、生のHTML で簡単にデータ保存、データの読み込みをする

Posted at

はじめに

前回に続き、なるべく簡単に環境構築をし、Firebaseを通してデータの書き込み、読み込みを紹介する。
書き込みと読み込みは基礎中の基礎ではあるが、今後のプログラミングの中でかなり多くの割合を占めるのはなかろうか

対象はプログラミング初心者

環境

window 10
node.js 18.12.1
Firebase 8.6.5

データの書き込み

HTML部分
<div class="container p-5">
  <div class="row mb-3">
    <label class="col-sm-2 col-form-label">Title</label>
    <div class="col-sm-10">
      <input class="form-control" id="title_store" />
    </div>
  </div>
  <div class="row mb-3">
    <label class="col-sm-2 col-form-label">Content</label>
    <div class="col-sm-10">
      <input class="form-control" id="content" />
    </div>
  </div>
  <div>
    <button class="btn btn-danger" id="store">Store</button>
  </div>
  <div class="container my-2">
    <div class="show_list"></div>
  </div>
</div>
JS部分
$("#store").click(function () {
var data_input = {
  title: $("#title_store").val(),
  content: $("#content").val(),
};
db.collection("mydata").add(data_input);
});

image.png

jqueryを下のリンクから環境構築は必要

id="store"のbuttonをクリックするとJSの中身がが実行される
そのとき、titleはid="title_store"の中身を、contentはid="content"の中身を持ってくる

image.png

image.png

addで加えるとdocumentIDはランダムで設定されdocが追加された

データの読み込み

db.collection("mydata").get().then((result) => {
    result.forEach((doc) => {
        var to_do_div = `<div class="p-1">
                            <div>title: ${doc.data().title} <div/>
                            <div>content: ${doc.data().content} <div/>
                         <div/>`;

        $(".show_list").append(to_do_div);
  });
});

image.png

document('mydata')の中に存在するすべてのデータを読み込み、class="show_list"のdivに追加した
to_do_divはdocの数だけ追加された

条件付き読み込み

<div class="container p-5">
  <div class="row mb-3">
    <label class="col-sm-2 col-form-label">Title</label>
    <div class="col-sm-10">
      <input class="form-control" id="title_find" />
    </div>
  </div>
  <div>
    <button class="btn btn-primary" id="find">Find</button>
  </div>
  <div class="container my-2">
    <div class="show_search"></div>
  </div>
</div>

$("#find").click(function () {
var data_find = { title: $("#title_find").val() };
$(".show_search").empty();

db.collection("mydata").orderBy("title").startAt(data_find.title).endAt(data_find.title + "\uf8ff")
  .get().then((result) => {
    result.forEach((doc) => {
      search_div = `<div class="p-1"><div>title: ${
        doc.data().title
      } <div/><div>content: ${doc.data().content} <div/><div/>`;

      $(".show_search").append(search_div);
    });
  });
});

image.png

image.png

image.png

検索機能として、inputの中身を読み取り、条件を満たすデータのみを読み込んで並べた
whereを使う方がよいが、より直感的に検索できるように前方一致でデータを読み込んだ
$(".show_search").empty()で検索の度に、前の内容を消す

残念ながらFirestoreではLIKEのようなquery文('%lunch%')が使えないようで、前方一致の条件でしLIKE風検索機能の設定ができなかった。
→ 今後の設計で大きな短所になりそう

すべてのコード

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
  </head>

  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
    crossorigin="anonymous"
  ></script>

  <body>
    <div class="container p-5">
      <div class="row mb-3">
        <label class="col-sm-2 col-form-label">Title</label>
        <div class="col-sm-10">
          <input class="form-control" id="title_store" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-sm-2 col-form-label">Content</label>
        <div class="col-sm-10">
          <input class="form-control" id="content" />
        </div>
      </div>
      <div>
        <button class="btn btn-danger" id="store">Store</button>
      </div>
      <div class="container my-2">
        <div class="show_list"></div>
      </div>
    </div>

    <div class="container p-5">
      <div class="row mb-3">
        <label class="col-sm-2 col-form-label">Title</label>
        <div class="col-sm-10">
          <input class="form-control" id="title_find" />
        </div>
      </div>
      <div>
        <button class="btn btn-primary" id="find">Find</button>
      </div>
      <div class="container my-2">
        <div class="show_search"></div>
      </div>
    </div>
  </body>
</html>
<script>
  const firebaseConfig = {
    apiKey: "your api key",
    authDomain: "---",
    projectId: "----",
    storageBucket: "---",
    messagingSenderId: "---",
    appId: "---",
  };

  firebase.initializeApp(firebaseConfig);

  const db = firebase.firestore();

  $("#store").click(function () {
    var data_input = {
      title: $("#title_store").val(),
      content: $("#content").val(),
    };
    db.collection("mydata").add(data_input);
  });

  $("#find").click(function () {
    var data_find = { title: $("#title_find").val() };
    $(".show_search").empty();
    
    db.collection("mydata")
      .orderBy("title").startAt(data_find.title).endAt(data_find.title + '\uf8ff')
      .get()
      .then((result) => {
        result.forEach((doc) => {
          search_div = `<div class="p-1"><div>title: ${
          doc.data().title
        } <div/><div>content: ${doc.data().content} <div/><div/>`

          $(".show_search").append(search_div);
        });
      });
  });


  db.collection("mydata")
    .get()
    .then((result) => {
      result.forEach((doc) => {
        console.log(doc.data());
        var to_do_div = `<div class="p-1"><div>title: ${
          doc.data().title
        } <div/><div>content: ${doc.data().content} <div/><div/>`;

        $(".show_list").append(to_do_div);
      });
    });
</script>

終わりに

なるべく全体を簡潔にして、シンプルも書いたので、デザイン性はほとんど考えてない。
今回は１つのファイルにすべてを入れて作業したが、今後はより分けて作業を行う方が良さそう
データの保存、読み込みができるだけでも、アイデアさえあればできることはかなり多くなると思う
ただし、HTMLのデザインなどにかける時間が多いのがデザインに興味がない自分としては難点である

関連

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1