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

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

https://qiita.com/junzai/items/bb89a7aeb38bb6757f35

# 環境
window 10
node.js 18.12.1
Firebase 8.6.5

# データの書き込み

```html: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>
```
```javascript:JS部分
$("#store").click(function () {
var data_input = {
  title: $("#title_store").val(),
  content: $("#content").val(),
};
db.collection("mydata").add(data_input);
});
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/ad0bae43-1be4-d955-035e-bef52baac980.png)

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

https://releases.jquery.com/

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/486b1030-d4f5-880c-8212-f8acb49f46dd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/bb5cd64f-3f9d-2add-e9c7-c829d3b391d2.png)



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

# データの読み込み


```javascript
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/04e6fb20-2670-56ba-5483-b2de09c75ca2.png)

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

## 条件付き読み込み
```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_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>
```
```javascript
$("#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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/44c1bbd8-f83d-8952-5e3a-6cfdf7096f9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/e7be96e0-991e-d5d2-7cdc-6540476419c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/132217ec-a04c-6f93-84d5-bea9739d7c64.png)


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

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

https://qiita.com/zaburo/items/4a8354c1f2055891f6cb 

# すべてのコード
```html: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のデザインなどにかける時間が多いのがデザインに興味がない自分としては難点である


# 関連

https://qiita.com/junzai/items/bb89a7aeb38bb6757f35

https://qiita.com/kibinag0/items/bbf3698df1e09989cc17

https://qiita.com/zaburo/items/4a8354c1f2055891f6cb

https://firebase.google.com/docs/firestore/query-data/queries