> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/migration-guide/nifcloud/fairusutoa/fairu-1.md).

# ファイル一覧表示

ファイル一覧表示機能を作成し、Firebaseにアップロードしたファイルの一覧をアプリ上に表示させます。

## ファイル一覧の表示エリア

まず、Firebaseにアップロードしたファイルの一覧を表示させるエリアを次のように準備します。\
ボタン「ファイル一覧を表示」をクリックすると、`<ul id="files-list"></ul>`の中にファイル情報が追加されます。

```html
<section>
    <h2>ファイル一覧</h2>
    <button id="list-files-button">ファイル一覧を表示</button>
    <ul id="files-list"></ul>
</section>
```

## Firestoreからファイル一覧を取得する

Firebase Firestoreから取得したファイルの一覧を表示するための関数です。Firestoreの `files` コレクションにあるすべてのドキュメントを取得し、それらをリスト形式で表示します。

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

```javascript
export const displayFileList = async () => {
  const filesList = document.getElementById("files-list");
  filesList.innerHTML = ""; // 一覧をクリア

  try {
    // Firestoreから"files"コレクションのドキュメントを取得
    const querySnapshot = await getDocs(collection(firestore, "files"));
    querySnapshot.forEach((doc) => {
      const data = doc.data();
      // テンプレートリテラルを使用してリストアイテムを作成
      const listItem = `
        <li>
          <input type="checkbox" value="${doc.id}"> ${data.name}
        </li>
      `;
      // innerHTMLを使用してリストアイテムを追加
      filesList.innerHTML += listItem;
    });
  } catch (error) {
    console.error("Error listing files: ", error);
  }
};
```

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

1. **ファイルリスト表示エリアの準備**:
   * `document.getElementById("files-list")` で、ファイル一覧を表示するHTML要素を取得します。
   * `filesList.innerHTML = ""` で、以前のファイル一覧をクリアします。
2. **Firestoreからのドキュメント取得**:
   * `getDocs(collection(firestore, "files"))` を使用して、Firestoreの `files` コレクションにある全ドキュメントを取得します。
3. **ファイル一覧の表示**:
   * `querySnapshot.forEach` を使用して、取得したドキュメントのリストを繰り返し処理します。
   * 各ドキュメントから `doc.data()` でデータを取得し、リストアイテムのHTMLをテンプレートリテラルで作成します。
   * 各リストアイテムには、チェックボックス（`<input type="checkbox">`）とファイル名が含まれます。チェックボックスの `value` 属性にはドキュメントのIDが設定されます。
   * `filesList.innerHTML += listItem` で、新しいリストアイテムをファイル一覧に追加します。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.