# ファイル削除

ファイル一覧表示処理で表示されたリストを対象に、ユーザーが複数ファイルを選択して削除する機能を作成していきます。

ファイル削除機能では、次の2つの処理を用意します。

1. deleteSelectedFiles() : 削除する対象ファイルを特定する処理
2. deleteFile() : Firebase FirestoreとFirebase Storageから特定のファイルを削除する処理

## `deleteSelectedFiles` 関数

ファイル一覧上でチェックされたファイルを特定し、ファイルを削除する`deletelFile` 関数に識別子(docId)を渡します。

{% embed url="<https://github.com/monaca-samples/firebase-storage/blob/master/www/js/deleteFiles.js>" %}

```javascript
export const deleteSelectedFiles = async () => {
  // チェックボックスがチェックされているものを全て取得
  const checkedBoxes = document.querySelectorAll(
    "#files-list input[type='checkbox']:checked"
  );

  // 各チェックボックスに対して
  for (const checkbox of checkedBoxes) {
    // ドキュメントIDを取得
    const docId = checkbox.value;
    // ファイルを削除
    await deleteFile(docId);
  }

  // ファイル一覧を再表示
  displayFileList();
};
```

#### **処理の流れ**:

1. **チェックされたファイルの識別**:
   * `document.querySelectorAll("#files-list input[type='checkbox']:checked")` を使用して、IDが `files-list` の要素内にある、チェックされたチェックボックスを全て取得します。
2. **選択されたファイルの削除**:
   * 各チェックボックスから `value` 属性を読み取り（これはドキュメントIDに対応しています）、`deleteFile` 関数を呼び出して、そのIDに対応するファイルを削除します。
   * `deleteFile` は、FirestoreとFirebase Storageの両方からファイルを削除する関数です。
3. **ファイル一覧の再表示**:
   * `displayFileList()` 関数を呼び出して、ファイル一覧を更新します。これにより、削除されたファイルが一覧から取り除かれます。

## `deleteFile` 関数

Firebase FirestoreとFirebase Storageから特定のファイルを削除します。この関数により、FirestoreとFirebase Storageの両方から関連するファイルとメタデータを同時に削除できます。

```javascript
async function deleteFile(docId) {
  try {
    // Firestoreからドキュメントを削除
    const docRef = doc(firestore, "files", docId);
    await deleteDoc(docRef);

    // Firebase Storageからファイルを削除
    const storageRef = ref(storage, "files/" + docId);
    await deleteObject(storageRef);

    console.log(`File deleted: ${docId}`);
  } catch (error) {
    console.error(`Error deleting file: ${docId}`, error);
  }
}
```

**パラメータ**:`docId`: 削除するファイルのドキュメントIDを表します。

**処理の流れ**:

1. **Firestoreからのドキュメント削除**:
   * `doc(firestore, "files", docId)` を使用して、Firestore内の `files` コレクションにある特定のドキュメント（ファイル）への参照を取得します。
   * `deleteDoc(docRef)` を使用して、上記で取得したドキュメント（ファイル）をFirestoreから削除します。
2. **Firebase Storageからのファイル削除**:
   * `ref(storage, "files/" + docId)` を使用して、Firebase Storage内の `files/` ディレクトリにある特定のファイルへの参照を取得します。
   * `deleteObject(storageRef)` を使用して、上記で取得したファイルをFirebase Storageから削除します。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/migration-guide/nifcloud/fairusutoa/fairu-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.