axiosと idb やり方 考え方

### axios 導入手順
<p>htmlにURL入れる</p>
<br>
<p>コマンド入力</p>
<p>はじめ方は、ansyc</p>

```js:
<meta charset="UTF-8">
  <title>テーブル表示練習</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

//コマンド入力
npm install axios

//始め方
document.addEventListener('DOMContentLoaded', async () => {
```

### fetch とaxios 違い

<h3>if (!response.ok) { throw new Error 書かなくていい</h3>

```js:fetch
try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, { 
        method: 'DELETE'
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      console.log(`APIからID ${id} のデータが削除されました。`);
```

```js:axios
try {
      await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`); 
      console.log(`APIからID ${id} のデータが削除されました。`);
```

### axiosでリンクなど、大量data保存

<h3>不向き : ローカルストレージ</h3>
<br>
<h3>向く : idb (IndexedDB) </h3>


### idb 使い方
<p>html head　<meta charset="UTF-8">下に、リンク入れる </p>
<br>
<p>ターミナルでライブラリインストール(nodeインストールしてから)</p>

```js:
<meta charset="UTF-8">
  <title>テーブル表示練習</title>
  <script src="https://cdn.jsdelivr.net/npm/idb@7.1.1/build/umd.js"></script>


//インスト
npm install idb
```

### idb　実装の考え方
<p>本番保存と一時保存の二つの処理を同時にしたり、本番保存だけしてる(idbの仕様)</p>
<p>キーを使って保存/削除/読み込む仕様 : student + formDraft </p>
<p>一時保存 : STORE_NAME_STUDENTS = 'students';</p>
<p>本番保存 : STORE_NAME_FORM_DRAFT = 'formDraft'</p>
<p>初期設定</p>
<p>初期化(openDB)</p>
<p>一時保存data data読み込み: loadStudentsFromDB</p>
<p>一時保存data 保存 :saveStudentToDB</p>
<p>一時保存data 削除 : deleteStudentFromDB</p>
<p>一時保存data　読み込み関数 読み込み、入力formでdataが送られたら、data一時保存</p>

```js:code
 //初期設定
document.addEventListener('DOMContentLoaded', async () => { // DOMContentLoadedをasyncに変更
  // IndexedDBの設定
  const DB_NAME = 'myStudentDB';
  const STORE_NAME_STUDENTS = 'students'; // 生徒データ用
  const STORE_NAME_FORM_DRAFT = 'formDraft'; // フォーム入力値の自動保存用
  const DB_VERSION = 1;

  let db;


  //db初期化
  async function initDB() {
    db = await idb.openDB(DB_NAME, DB_VERSION, {
      upgrade(db, oldVersion, newVersion, transaction) {
        if (oldVersion < 1) {
          // バージョン1へのアップグレード時にオブジェクトストアを作成
          db.createObjectStore(STORE_NAME_STUDENTS, { keyPath: 'id', autoIncrement: true });
          db.createObjectStore(STORE_NAME_FORM_DRAFT, { keyPath: 'id' }); // id: 'formDraft' で保存
        }
      },
    });
    console.log('IndexedDBが初期化されました。');
  }

  //テーブル表示 data読み込み: loadStudentsFromDB
  studentData = await db.getAll(STORE_NAME_STUDENTS);
  DBからdata読み込み、最新Idをセットし、
  テーブルに一人分表示（addTableRow） → 全員分表示(renderTable)

  //テーブル表示 保存 :saveStudentToDB
  await db.put(STORE_NAME_STUDENTS, student);


  //テーブル表示 削除 : deleteStudentFromDB
  await db.delete(STORE_NAME_STUDENTS, id);


  // 一時保存data 保存 : saveFormDraftToDB
  await db.put(STORE_NAME_FORM_DRAFT, { id: 'formDraft', ...data })


  // 一時保存data 読み込み、画面に再表示: loadAndFillFormFromDB
  savedData = await db.get(STORE_NAME_FORM_DRAFT
  入力formの”name" / "email"/"phone"のdataを探し、画面に再表示
  if (key === 'id') continue:id は読み込んでも、表示しないようにする

  //一時保存data 削除 :clearFormDraftFromDB
  await db.delete(STORE_NAME_FORM_DRAFT, 'formDraft');
```


### 一時保存data　読み込み関数 読み込み、入力formでdataが送られたら、data一時保存 なぜ？

```js:
 編集dataを編集する時、編集したdataが
 あってるか確認してから保存したい。あってるか確認できず保存することになると、入力dataが確認できないから、不安になる。
 一時保存 → 保存したdata読み込み → 編集画面に一時保存data表示の処理がいる。入力formのinnputボタンが押されたら一時保存してる
```


### 用語解説
<p>data削除 await db.delete</p>
<p>保存 await db.put</p>
<p>読み込み : await db.get / db.getAll </p>


### ルール

```js:
  data読み込み / 追加 / 保存/削除は
  if (!db) await initDB();してから

  入力formの保存は、keyと値の２つがいつもセット

  読み込み / 追加 / 保存/削除は入力form用と
  テーブル表示用、の ２種類作る

  テーブル表示のメソッド順
   : 読み込み → 保存 → 削除
   → dataは配列から

  入力formのメソッド順
   : 保存 → 読み込み → 削除
   → 入力formのdataは、先に保存しないと読み込めない

   テーブルで一人分のdata表示 / 全員分のdata表示を分ける
   のは、よくする設計(安全性とメンテナンス性を保つため)   
```