JavaScript xlsx操作 5選！手軽に実践できる方法を徹底解説

JavaScript xlsx操作の徹底解説JS
2023.05.10
この記事は約10分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptを使ってxlsxファイルを操作することができるようになります。

JavaScript xlsx操作の基本から応用まで、初心者にもわかりやすく徹底解説していきますので、ぜひ最後までお読みください。

●JavaScriptでのxlsxファイル操作とは

JavaScriptでxlsxファイル操作とは、JavaScriptを用いてExcelファイル（拡張子が.xlsxのもの）を操作することです。

例えば、xlsxファイルを読み込んだり、データを追加・編集・削除したり、ファイルを出力・保存することができます。

これにより、ウェブアプリケーション上でExcelファイルを扱うことが可能になり、効率的にデータ処理を行うことができます。

●xlsx操作に必要なライブラリ

○SheetJS

JavaScriptでxlsxファイルを操作する際には、SheetJSというライブラリを使用します。

SheetJSは、Excelファイルの読み書きが可能であり、データの取得や編集が容易になります。

SheetJSを使用することで、次のような操作が可能です。

  1. xlsxファイルを読み込む
  2. xlsxファイルにデータを追加する
  3. xlsxファイルからデータを取得する
  4. xlsxファイルのデータを編集する
  5. xlsxファイルを出力・保存する

これから、それぞれの操作について、サンプルコードを用いて解説していきます。

●JavaScript xlsx操作方法5選

○サンプルコード1：xlsxファイルを読み込む

このコードでは、SheetJSを使ってxlsxファイルを読み込むコードを紹介しています。

この例では、input要素を使ってファイルを選択し、読み込んでいます。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>
<body>
  <input type="file" id="input" accept=".xlsx">
  <script>
    document.getElementById('input').addEventListener('change', (e) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, {type: 'binary'});
        console.log(workbook);
      };
      reader.readAsBinaryString(e.target.files[0]);
    });
  </script>
</body>
</html>

○サンプルコード2：xlsxファイルにデータを追加する

このコードでは、SheetJSを使ってxlsxファイルにデータを追加するコードを紹介しています。

この例では、既存のデータに新しい行を追加し、それを新しいファイルとして保存しています。

// SheetJSを読み込んでください
const XLSX = require('xlsx');

// 既存のxlsxファイルを読み込む
const workbook = XLSX.readFile('sample.xlsx');

// ワークシートを取得する
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 新しいデータを追加する
const newData = ['新しいデータ1', '新しいデータ2', '新しいデータ3'];
const newRowIndex = XLSX.utils.decode_range(worksheet['!ref']).e.r + 1;
const newRowRef = XLSX.utils.encode_row(newRowIndex);
newData.forEach((data, index) => {
  const cellRef = XLSX.utils.encode_col(index) + newRowRef;
  const cell = {v: data, t: 's'};
  worksheet[cellRef] = cell;
});

// データ範囲を更新する
worksheet['!ref'] = XLSX.utils.encode_range({s: {c: 0, r: 0}, e: {c: newData.length - 1, r: newRowIndex}});

// 新しいxlsxファイルに保存する
XLSX.writeFile(workbook, 'new_sample.xlsx');

○サンプルコード3：xlsxファイルからデータを取得する

このコードでは、SheetJSを使ってxlsxファイルからデータを取得するコードを紹介しています。

この例では、指定したシートのデータを二次元配列に変換して表示しています。

// SheetJSを読み込んでください
const XLSX = require('xlsx');

// xlsxファイルを読み込む
const workbook = XLSX.readFile('sample.xlsx');

// ワークシートを取得する
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// ワークシートのデータを二次元配列に変換する
const sheetData = XLSX.utils.sheet_to_json(worksheet, {header: 1});

// データを表示する
console.log(sheetData);

○サンプルコード4：xlsxファイルのデータを編集する

このコードでは、SheetJSを使ってxlsxファイルのデータを編集するコードを紹介しています。

この例では、指定したセルのデータを更新し、その結果を新しいファイルとして保存しています。

// SheetJSを読み込んでください
const XLSX = require('xlsx');

// xlsxファイルを読み込む
const workbook = XLSX.readFile('sample.xlsx');

// ワークシートを取得する
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// セルのデータを編集する
const targetCellRef = 'A1';
const newCellValue = '更新されたデータ';
const targetCell = worksheet[targetCellRef];
if (targetCell) {
  targetCell.v = newCellValue;
} else {
  worksheet[targetCellRef] = {v: newCellValue, t: 's'};
}

// 編集されたデータを新しいxlsxファイルに保存する
XLSX.writeFile(workbook, 'edited_sample.xlsx');

○サンプルコード5：xlsxファイルを出力・保存する

このコードでは、SheetJSを使ってxlsxファイルを出力・保存するコードを紹介しています。

この例では、ブラウザ上で作成したデータをxlsxファイルとしてダウンロードできるようにしています。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
  <button id="download">xlsxファイルをダウンロード</button>
  <script>
    document.getElementById('download').addEventListener('click', () => {
      const data = [
        ['データ1', 'データ2', 'データ3'],
        ['データ4', 'データ5', 'データ6']
      ];

      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'});
      saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'output.xlsx');
    });

    function s2ab(s) {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  </script>
</body>
</html>

●注意点と対処法

  1. セルのデータ型に注意してください。文字列の場合は ‘s’、数値の場合は ‘n’ を設定することが一般的です。
    データ型を間違えると、ファイルが正しく読み込めなくなる可能性があります。
  2. ライブラリのバージョンに注意してください。
    常に最新版のSheetJSを使用することで、予期しないエラーや非互換性の問題を回避できます。
  3. セルの参照を扱う際は、ワークシートの範囲に注意してください。
    範囲外のセルを参照しようとするとエラーが発生する可能性があります。
    そのため、必要に応じて範囲を更新することが重要です。
  4. ファイルの入出力エラーに備えて、適切なエラー処理を行ってください。
    ファイルが存在しない場合や読み取り権限がない場合など、エラーが発生する可能性があるので、try-catch文を使用してエラー処理を行うことが望ましいです。
  5. セキュリティに注意してください。
    特に、ウェブアプリケーションでxlsxファイルを扱う場合は、ファイルのアップロードやダウンロードに関するセキュリティ対策を適切に行ってください。

まとめ

JavaScriptでxlsxファイルを操作する際には、SheetJSというライブラリが非常に便利です。

この記事では、xlsxファイルを読み込み、データを追加・取得・編集し、ファイルを出力・保存する方法を紹介しました。また、注意点と対処法についても触れました。

これらのサンプルコードと説明を参考に、JavaScriptでxlsxファイルを効率的に操作できるようになりましょう。

ただし、エラーやセキュリティ対策も適切に行うことが重要ですので、実装時には十分に注意してください。