next .js(react)でテーブルをコピーする機能を作る

# やりたいこと
コピーボタンを用意し、表示されている表をそのままコピーできる機能を作りたい。

これが（表示している表）
![Noto Sans Regular.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694053/b57fb297-4fb7-ea26-21c7-a58d0ede76b1.png)


こう（コピーしてエクセルに貼り付け）
![会社.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694053/a473eb59-070c-1273-2f91-77534003acf2.png)



# 技術候補
**navigator clipboard**　

https://developer.mozilla.org/ja/docs/Web/API/Clipboard

**Document.execCommand()**

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

**react-copy-to-clipboard**

https://www.npmjs.com/package/react-copy-to-clipboard



# 選定結果
**navigator clipboard**
パッケージを導入せずに最も簡単にコピー機能を作成できるが、http通信に対応しておらず断念

**Document.execCommand()**
現在非推奨なので極力使いたくなかったが、こちらで決定

**react-copy-to-clipboard**
単純なコピー自体は実装できたが、複雑なコピーに対応できなそうだったので断念


# 実装

```sampleTable.tsx
// コピー機能
const copyTable = async () => {
    const tableCompaniesCopy = tableRef.current

    const tableHeaderColunm = [
      '#',
      '会社',
      'ID',
      '項目１',
      '項目２',
      '項目３',
      '項目４',
      '項目５',
      '項目６',
      '項目７',
      '項目８\n'
    ]

    // 会社ごとコピー
    let companiesTable = tableHeaderColunm.join('\t');
    for (let i = 0; i < tableCompaniesCopy.rows.length; i++) {
      for (let j = 0; j < tableCompaniesCopy.rows[i].cells.length; j++) {
        const replacement = tableCompaniesCopy.rows[i].cells[j].innerText
        companiesTable += replacement + '\t'
      }
      companiesTable += '\n'
    }
    // コピー処理
    const copyTextarea = document.createElement('textarea');
    copyTextarea.value = totalTable + companiesTable;
    document.body.appendChild(copyTextarea);
    copyTextarea.select();
    document.execCommand('copy');
    copyTextarea.remove()
  }

// テーブル
return (
    <tbody ref={tableRef}>
    {summaries &&
      summaries.map((summary: Summary, index: number) => {
        return (
          <tr key={summary.id} className="h-36">
            <td className="text-xl">
              {index + 1}
            </td>
            <td className="text-xl">
              <p className="text-left">{summary.company}</p>
            </td>
            <td className="text-xl">
              {summary.id}
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item1}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item2}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>¥{summary.item3}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item4}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>¥{summary.item5}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item6}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item7}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item8}</p>
            </td>
          </tr>
        )
      })}
    </tbody>
)
```


# まとめ
技術選定に一番時間がかかりました。
navigator clipboardを使えるように、ローカル環境もSSL化したいなと思いました。