--- title: [SheetJS] WebアプリでExcelをデータベースとして使う tags: JavaScript Excel SheetJS author: okoppe8 slide: false --- ##この記事について ExcelファイルをJavaScriptで扱うためのライブラリ[SheetJS] についての個人的まとめです。主にExcelシートからJSONに変換する機能について書いています。 ##SheetJSについて 公式:https://github.com/SheetJS/js-xlsx JavaScriptでExcelファイルを扱うためのライブラリです。CDNで提供されています。 ## WebアプリでExcelををデータベースとして使うメリット SheetJSを使うとブラウザで直接Excelファイルを扱えます。 データの編集と管理をクライアント側で行わせてサーバ側にはファイルを送信させるというアプローチは昔からありますが、SheetJSでは解析と出力がブラウザで完結するので、サーバ側とExcelファイルを送受信することなく処理を行うことが可能です。 これにより、以下の効果を得ることができます。 - テータベースの領域の削減、またはデータベースそのものが不要になる。 - 機密性の高いデータを送信させなければセキュリティ対策が不要になる。 - 従来VBAで構築していたロジックがHTML/CSS/JavaScriptに置き換わることによって、表現力が増すほかWebエンジニアが開発できるようになる。バージョン管理が楽になる。 ##参考資料の探し方 「SheetJS」で検索すると、Qiitaにも記事が見つかります。 **JavaScriptでExcel(XLSX)を読み込む** https://qiita.com/tomgoodsun/items/bc5f2db3c28e1a6525d2 npmで配布されている「XLSX」というパッケージもSheetJSと同じものです。 ですので「Node.js + XLSX」で検索しても有用な情報が見つかります。 **Node.jsでExcelファイルのread/write** https://qiita.com/Kazunori-Kimura/items/29038632361fba69de5e ## サンプルコード ファイルを読み込んでJSONに変換する最低限の動作のサンプル。 ```html:index.html sheet.js サンプル

sheet-js サンプル

結果

ここにJSONを出力します
``` 動くものはこちら。 https://okoppe8.github.io/sheetjs_sample/ ##使い方のコツ ###設定 確実に理解して使おうとするとかなり時間がかかる。標準の設定を作って使いまわす方針が良い。おすすめ設定は以下の2つ XSLX.read readfile で指定するオプション ```js wb = X.read(btoa(arr), { type: 'base64', cellDates: true, }); ``` XSLX.sheet_to_json で指定するオプション ```js var roa = X.utils.sheet_to_json( workbook.Sheets[sheetName], { raw: true, }); ``` これでとりあえず日付時間セルについてはISO8601(UTC)形式の文字列となり、それ以外のセルについては書式(例:3桁カンマ区切り)の無いプレーンなデータが取れる。そこから必要な形式に再変換すればよい。 ###Excelファイルのデザイン デフォルトの設定で読み込むと、空行と空列は無視され、データのある一行目がヘッダとして扱われる。そのためデザインのために空白行や空白列を作っても影響はない。 見出しや注釈を入れたければ、上と左に空行・空列を作り、そこに図形オブジェクトをつくるとよい。 ###テーブルヘッダーについて SheetJSではExcelの表の見出し行(1行目)をJSONのフィールド名として使う。そのため普通の使い方なら読み取り時のJSONのフィールド名は日本語となる。 1行目に英語のフィールド名を入れて非表示にする等の細工も可能だが、ユーザーが誤って消してしまう事故もありえるおすすめしない。 JSONをそのまま使うことはあきらめて、読込直後のタイミングでフィールド名の変換と不要フィールドの削除を行うようにする。そうしたほうがユーザー側で列の入れ替えや計算列の追加が自由にできるためユーザビリティが良くなる。