ChatGPT先生にJspreadsheetを教えてもらう

# はじめに
この記事は[Jspreadsheet Advent Calendar 2024](https://qiita.com/advent-calendar/2024/jspreadsheet)の11日目の記事です。

Jspreadsheetを今知ったところですが、
とても便利そうなので、ChatGPT先生と一緒に試してみます。

# ChatGPT先生に教えてもらう

![スクリーンショット 2024-12-17 22.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/cc67e00f-7ba7-75b6-d5d9-5404f9e12509.png)
![スクリーンショット 2024-12-17 22.05.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/fd05b3b9-8f9e-bd25-e29a-5e2ab6fd9c24.png)

なるほど、なるほど。便利そう。
JSON、CSVのあたりが気になる。

# サンプルを作ってもらう

![スクリーンショット 2024-12-17 22.06.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/2f4bbb28-2c9f-b6d5-3698-b12f740b7f7b.png)

```html:j1.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>APIデータをJspreadsheetに表示</title>
  <!-- Jspreadsheet CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.css" />
  <script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Axios (API用) -->
</head>
<body>
  <h1>APIデータを取得して表示</h1>
  <!-- スプレッドシートを表示する場所 -->
  <div id="spreadsheet"></div>

  <script>
    // JSONPlaceholder APIからデータを取得
    async function fetchData() {
      try {
        // ユーザーデータを取得
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        const users = response.data;

        // データをスプレッドシート用に整形
        const data = users.map(user => [
          user.id,
          user.name,
          user.username,
          user.email,
          user.address.city
        ]);

        // Jspreadsheetを作成
        jspreadsheet(document.getElementById('spreadsheet'), {
          data: data,
          columns: [
            { type: 'number', title: 'ID', width: 50 },
            { type: 'text', title: 'Name', width: 150 },
            { type: 'text', title: 'Username', width: 100 },
            { type: 'text', title: 'Email', width: 200 },
            { type: 'text', title: 'City', width: 120 }
          ],
          pagination: 5, // ページごとに表示する行数
          search: true   // 検索機能を有効化
        });
      } catch (error) {
        console.error('データの取得に失敗しました', error);
      }
    }

    // データ取得を実行
    fetchData();
  </script>
</body>
</html>

```
![スクリーンショット 2024-12-18 7.26.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/0cb38b91-b129-e809-f0bc-bed3b3339c8c.png)

![スクリーンショット 2024-12-18 7.26.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/239eaf2e-a9f4-c86d-e568-bab183564019.png)

あ。そうだ、CSVで保存するボタンを付けてもらおう。

![スクリーンショット 2024-12-18 7.28.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/9b1d882e-fb18-ce03-5ef8-7dc9636611ba.png)

![スクリーンショット 2024-12-18 7.28.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/12747b49-197c-896d-eeb3-a9cab747c484.png)

```html:j1.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>APIデータをJspreadsheetに表示 & CSV保存</title>
  <!-- Jspreadsheet CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.css" />
  <script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Axios (API用) -->
</head>
<body>
  <h1>APIデータを取得して表示</h1>
  <!-- CSV保存ボタン -->
  <button id="saveCsvBtn">CSVで保存</button>

  <!-- スプレッドシートを表示する場所 -->
  <div id="spreadsheet"></div>

  <script>
    let spreadsheetInstance;

    // JSONPlaceholder APIからデータを取得
    async function fetchData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        const users = response.data;

        // データをスプレッドシート用に整形
        const data = users.map(user => [
          user.id,
          user.name,
          user.username,
          user.email,
          user.address.city
        ]);

        // Jspreadsheetを作成
        spreadsheetInstance = jspreadsheet(document.getElementById('spreadsheet'), {
          data: data,
          columns: [
            { type: 'number', title: 'ID', width: 50 },
            { type: 'text', title: 'Name', width: 150 },
            { type: 'text', title: 'Username', width: 100 },
            { type: 'text', title: 'Email', width: 200 },
            { type: 'text', title: 'City', width: 120 }
          ],
          pagination: 5, // ページごとに表示する行数
          search: true   // 検索機能を有効化
        });
      } catch (error) {
        console.error('データの取得に失敗しました', error);
      }
    }

    // CSV保存ボタンの動作
    document.getElementById('saveCsvBtn').addEventListener('click', () => {
      // JspreadsheetのデータをCSVとしてエクスポート
      spreadsheetInstance.download({ 
        filename: 'spreadsheet-data.csv', 
        delimiter: ',' 
      });
    });

    // データ取得を実行
    fetchData();
  </script>
</body>
</html>
```
![スクリーンショット 2024-12-18 7.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/e4bb75ae-dc11-3e80-a210-481fe2287212.png)
![スクリーンショット 2024-12-18 7.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/fb1f8f80-4a0d-2186-e619-c098b966ca1c.png)
![スクリーンショット 2024-12-18 7.31.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/9dc11bad-5760-ba41-fe97-a4bad2b3bcd8.png)

# いざブラウザで開く

![スクリーンショット 2024-12-18 7.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6628275c-f78c-7623-84fa-e116fa0e4d7e.png)

あれれ？表が表示されない。

元データはこれなのに何も表示されない。
https://jsonplaceholder.typicode.com/users


Chromeの開発者ツールで確認。

![スクリーンショット 2024-12-18 7.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/d67139a8-fd20-bac3-2333-dd562f2112dc.png)

Jspreadsheet自体の読み込みに失敗している様子。
ChatGPTとの対話で、しばし格闘したが改善せず。

１日目の記事を見に行く。

https://qiita.com/yaju/items/97e7093ffafad640f6c8

CDNのところに記載されている通りにやれば良さそう。

![スクリーンショット 2024-12-18 7.42.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/316f2428-f699-9738-b2ec-d1b39b185b2b.png)

![スクリーンショット 2024-12-18 7.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/80170021-353d-d003-f65f-4f1f4d209881.png)

```html:j2.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>APIデータをJspreadsheetに表示</title>
  
  <!-- CSSライブラリ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
  
  <!-- JavaScriptライブラリ -->
  <script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <h1>APIデータを取得して表示</h1>
  <button id="saveCsvBtn">CSVで保存</button>
  <div id="spreadsheet"></div>

  <script>
    let spreadsheetInstance;

    // JSONPlaceholder APIからデータを取得
    async function fetchData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        const users = response.data;

        // データをJspreadsheet用に整形
        const data = users.map(user => [
          user.id, user.name, user.username, user.email, user.address.city
        ]);

        // Jspreadsheetを初期化
        spreadsheetInstance = jspreadsheet(document.getElementById('spreadsheet'), {
          data: data,
          columns: [
            { type: 'number', title: 'ID', width: 50 },
            { type: 'text', title: 'Name', width: 150 },
            { type: 'text', title: 'Username', width: 100 },
            { type: 'text', title: 'Email', width: 200 },
            { type: 'text', title: 'City', width: 120 }
          ],
          pagination: 5,
          search: true
        });

      } catch (error) {
        console.error('データの取得に失敗しました:', error);
      }
    }

    // CSV保存ボタン
    document.getElementById('saveCsvBtn').addEventListener('click', () => {
      spreadsheetInstance.download({
        filename: 'spreadsheet-data.csv',
        delimiter: ','
      });
    });

    fetchData();
  </script>
</body>
</html>
```

# いざ再実行！

やったね！

![スクリーンショット 2024-12-18 7.44.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/2917c987-0918-a629-8128-5a58f890ec05.png)

CSVで保存を押す。
CSVファイルがダウンロードされた！。
開いてみよう。

![スクリーンショット 2024-12-18 7.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/f80839ad-44a1-dc70-c142-4287bcd51c99.png)

素晴らしいです。

右下の「２」を押すと
![スクリーンショット 2024-12-18 7.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/e408fad1-f830-0f17-4e8f-d48fddef3ace.png)

いい感じ。

右上の「Search」に「Ka」と入れると
![スクリーンショット 2024-12-18 7.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/2ba090c3-f69e-0abf-4137-e9c3e73cfee4.png)

セルに「Ka」が含まれる行だけが表示された！　便利。

以上、「ChatGPT先生にJspreadsheetを教えてもらう」でした。