JavaScriptでオブジェクトをExcelファイルに出力する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでオブジェクトをExcelファイルに出力する方法について解説しています。SheetJSを使うことにより、ブラウザから直接Excelファイルを扱うことが出来るようになります。WebアプリでExcelをデータベースとして使うことが出来るようになります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでオブジェクトをExcelファイルに出力する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

オブジェクトをExcelファイルに出力する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

オブジェクトをExcelファイルに出力する方法

JavaScriptでオブジェクトをExcelファイルに出力するにはsheet.js というライブラリを使用するのが簡単です。

https://github.com/SheetJS/js-xlsx

今回は、作成したExcelファイルをダウンロードするために、FileSaverというライブラリも使用します。

https://github.com/eligrey/FileSaver.js/

 

実際に書いてみよう

今回のサンプルプログラムは、JavaScriptでExcelファイル(xlsx形式)を作成し、ファイルをダウンロードします。サンプルプログラムを作成するにあたり、参考にしたurlはコード内のコメントに記載しています。

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample1</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
</head>
<body>
  <input type="button" id="xlsx" value="Excelファイル出力" onclick="func1()">
  <script language="javascript" type="text/javascript">
    // 出力するオブジェクト(Array)
    var array1 =
      [
        ["apple", "banana", "cherry"],
        [1, 2, 3]
      ];

    // SheetをWorkbookに追加する
    // 参照:https://github.com/SheetJS/js-xlsx/issues/163
    function sheet_to_workbook(sheet/*:Worksheet*/, opts)/*:Workbook*/ {
      var n = opts && opts.sheet ? opts.sheet : "Sheet1";
      var sheets = {}; sheets[n] = sheet;
      return { SheetNames: [n], Sheets: sheets };
    }

    // ArrayをWorkbookに変換する
    // 参照:https://github.com/SheetJS/js-xlsx/issues/163
    function aoa_to_workbook(data/*:Array<Array<any> >*/, opts)/*:Workbook*/ {
      return sheet_to_workbook(XLSX.utils.aoa_to_sheet(data, opts), opts);
    }

    // stringをArrayBufferに変換する
    // 参照:https://stackoverflow.com/questions/34993292/how-to-save-xlsx-data-to-file-as-a-blob
    function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }

    function func1() {
    // 書き込み時のオプションは以下を参照
    // https://github.com/SheetJS/js-xlsx/blob/master/README.md#writing-options
    var write_opts = {
      type: 'binary'
    };

    // ArrayをWorkbookに変換する
    var wb = aoa_to_workbook(array1);
    var wb_out = XLSX.write(wb, write_opts);

    // WorkbookからBlobオブジェクトを生成
    // 参照:https://developer.mozilla.org/ja/docs/Web/API/Blob
    var blob = new Blob([s2ab(wb_out)], { type: 'application/octet-stream' });

    // FileSaverのsaveAs関数で、xlsxファイルとしてダウンロード
    // 参照:https://github.com/eligrey/FileSaver.js/
    saveAs(blob, 'myExcelFile.xlsx');
  }
  </script>
</body>
</html>

実行結果は以下のようになります。Excelファイル出力ボタンをクリックするとExcelファイルがダウンロードされます。

ファイルを開いてみると、JavaScriptで作成したオブジェクトの内容が出力されているのが確認できます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。