JavaScriptの学習 ExcelデータをHTML形式に変換-専業株式トレーダーによるテクニカル分析検証

ブログで表を作成するのが非常に面倒

ブログを作成していると、表を追加したいと思うことがあります。

このような場合、元となる表はExcelで作成することが多いのですが、Excelの表をブログに張り付けると、見た目の違和感があるため、普段はHTML形式に手動で変換しています。

しかし、この手動でHTML形式の表を作成するのは非常に面倒に感じます。

そこで、JavaScriptの学習も兼ねて、Excelの表データをHTML形式に変換するプログラムを作成することにしました。

使い方のイメージ

本プログラムの使い方は、次のようなイメージです。

ブログ上にテキストエリアA, テキストエリアB, 変換ボタンを用意します
Excelの表データをコピーし、テキストエリアAにペーストします
変換ボタンを押すと、テキストエリアBにHTML形式の表データが表示されます
テキストエリアBのHTMLデータをマウスでドラッグ & コピーし、ブログに張り付けます

テキストエリアの設置方法

テキストエリアは、HTMLコードにて作成します。

Excelデータ入力用テキストエリア


<textarea id="MyExcelData" cols="50" rows="10" placeholder="Excelデータをここにコピーして下さい"></textarea>

JavaScriptでは、TEXTAREAタグのidパラメータを指定してExcelデータを参照します。

また、placeholderパラメータは、テキストエリアにExcelデータがペーストされるまで表示されるデフォルトメッセージを指定することができます。
このデフォルトメッセージは、Excelデータがペーストされると、自動で消去されます。

HTMLデータ出力用テキストエリア


<textarea id="MyHtmlData" cols="50" rows="10" placeholder="HTMLデータはここに出力されます"></textarea>

JavaScriptでは、TEXTAREAタグのidパラメータを指定してHTMLデータの出力先を指定します。

テキストエリア共通のスタイル設定


<style>textarea{resize:none;}</style>

TEXTAREAタグのresizeパラメータにnoneを設定すると、テキストエリアの幅および高さを固定することができます。

変換ボタンの設置方法

変換ボタンは、HTMLコードにて作成します。


<button id="MyTransBtn">変換</button>

JavaScriptでは、BUTTONタグのidパラメータを指定してボタンのクリックイベントを設定します。

ExcelデータをHTML形式に変換するJavaScriptソースコードの解説

JavaScriptソースコードを次に記載します。

// ボタンのHTMLタグを抽出
let TransBtn = document.getElementById('MyTransBtn');

// HTMLタグ(ID = MyTransBtn)の存在を確認
if (null !== TransBtn) {
  //
  // HTMLタグ(ID = MyTransBtn)が存在する場合
  //

  // ボタンのクリックイベントを検出
  TransBtn.addEventListener('click', function () {
    // Excelデータを取得
    // 改行コードを'¥n'に統一
    let InData = document.getElementById('MyExcelData').value.replace(/\r\n|\r/g, '\n');

    // 1行単位の配列に変更
    InData = InData.split('\n');

    // 空の配列を削除
    InData = InData.filter(function (s) { return s !== ''; });

    // 行データをタブで分割
    let ExcelArray = [];
    InData.forEach(element => {
      ExcelArray.push(element.split('\t'));
    });

    //
    // HTML形式に変換
    //

    // HTMLデータ出力用変数
    const CharDIV = ['', ''];
    const CharTABLE = ['', ''];
    const CharTHEAD = ['', ''];
    const CharTBODY = ['', ''];
    const CharTR = ['', ''];
    const CharTH = ['', ''];
    const CharTD = ['', ''];

    // HTML出力時のインデント用変数
    let CharINDENT = '';
    const CharAddINDENT = '  ';

    // HTMLデータ作成
    let MyOutData = document.getElementById('MyHtmlData');

    // DIVタグ
    MyOutData.value = CharINDENT + CharDIV[0] + '\n';
    CharINDENT += CharAddINDENT;

    // TABLEタグ
    MyOutData.value += CharINDENT + CharTABLE[0] + '\n';
    CharINDENT += CharAddINDENT;

    ExcelArray.forEach((elem1, index1) => {
      if (0 === index1) {
        // THEADタグ
        MyOutData.value += CharINDENT + CharTHEAD[0] + '\n';
        CharINDENT += CharAddINDENT;

        // TRタグ
        MyOutData.value += CharINDENT + CharTR[0] + '\n';
        CharINDENT += CharAddINDENT;

        // THタグ
        elem1.forEach(elem2 => {
          MyOutData.value += CharINDENT + CharTH[0] + elem2 + CharTH[1] + '\n';
        });
        CharINDENT = CharINDENT.replace(CharAddINDENT, '');

        // TRタグ
        MyOutData.value += CharINDENT + CharTR[1] + '\n';
        CharINDENT = CharINDENT.replace(CharAddINDENT, '');

        // THEADタグ
        MyOutData.value += CharINDENT + CharTHEAD[1] + '\n';

        // TBODYタグ
        MyOutData.value += CharINDENT + CharTBODY[0] + '\n';
        CharINDENT += CharAddINDENT;
      } else {
        // TRタグ
        MyOutData.value += CharINDENT + CharTR[0] + '\n';
        CharINDENT += CharAddINDENT;

        // TDタグ
        elem1.forEach(elem2 => {
          MyOutData.value += CharINDENT + CharTD[0] + elem2 + CharTD[1] + '\n';
        });
        CharINDENT = CharINDENT.replace(CharAddINDENT, '');

        // TRタグ
        MyOutData.value += CharINDENT + CharTR[1] + '\n';
      }
    });
    CharINDENT = CharINDENT.replace(CharAddINDENT, '');

    // TBODYタグ
    MyOutData.value += CharINDENT + CharTBODY[1] + '\n';
    CharINDENT = CharINDENT.replace(CharAddINDENT, '');

    // TABLEタグ
    MyOutData.value += CharINDENT + CharTABLE[1] + '\n';
    CharINDENT = CharINDENT.replace(CharAddINDENT, '');

    // DIVタグ
    MyOutData.value += CharINDENT + CharDIV[1] + '\n';
    CharINDENT = CharINDENT.replace(CharAddINDENT, '');
  });
}

JavaScriptソースコードのポイントを以下に記載します。

行番号2では、変換ボタンのHTMLタグを抽出しています。

行番号5では、変換ボタンのHTMLタグの存在を確認しています。

行番号11～111では、変換ボタンがクリックされたイベントを検出して、ExcelデータをHTML形式に変換する処理を行っています。

行番号14では、Excelデータが入力されるTEXTAREAタグを指定すると共に、Excelデータの改行コードを'\n'に統一する処理を行っています。

行番号17では、改行コード'\n'にてExcelデータを分割することで、1行単位の配列を作成しています。

行番号20では、配列データに空のデータが含まれている場合、空のデータを削除しています。

行番号23～26では、1行単位に分割されたExcelデータに対して、1列単位に分割しています。

JavaScriptでは、1列単位の分割は、タブコード'\t'を使用しています。

行番号33～39では、出力されるHTMLタグの文字列を設定しています。

行番号42～43では、HTMLデータを作成する際に使用するインデントを設定しています。

JavaScriptでは、インデント量をスペース2個としています。

行番号46では、作成されたHTMLデータを出力するTEXTAREAタグを指定しています。

行番号49～50では、HTMLデータにDIVタグを追加すると共に、インデント量を追加しています。

以降、TABLEタグ、等に対する同様の処理がJavaScriptソースコードに含まれます。

行番号56～96では、入力されたExcelデータの各行に基づく処理を記述しています。

また、行番号57のif文にて、1行目のExcelデータと2行目以降のExcelデータに対して、異なる処理を記述しています。

具体的には、1行目にはTHタグを設定し、2行目以降はTDタグを設定しています。

行番号67～69では、1行目のExcelデータに含まれる各列データをTHタグで挟み込む処理を記述しています。

行番号88～90では、2行目以降のExcelデータに含まれる各列データをTDタグで挟み込む処理を記述しています。

JavaScriptの学習 ExcelデータをHTML形式に変換