Lightning Web ComponentsでCSVファイルを取り込む

今は、Web APIが流行っていますが、そうは言ってもCSVもまだまだあります(CSVに出会うことの方が多いですね)しかも、Shift-JISのCSVファイルばかりです。

Lighting Web ComponentsでCSVファイルを扱う方法をご紹介します。

前提条件

  • CSVファイルはShift_JISです。
  • CSVファイルには、取引先名、都道府県が並んでいます。
  • CSVファイルの読み込みはLightning Web Componentsで行い、1行ずつApexクラスで取引先を登録します。

Lightning Web Components側

importCSV.html

lightning-input type=”file”でファイルを選択できるようにしています。

ファイルが選択されたら、その内容を表示して、取り込むかを確認します。

取込ボタンをクリックしたら取り込みます。

<template>
    <lightning-card title="取引先CSV取り込み" icon-name="action:new_account">
        <div class="slds-m-around_medium">
            <template if:false={isImport}>
                <div class="slds-p-around_medium lgc-bg">
                    <lightning-input
                        type="file"
                        label="CSVファイルアップロード" 
                        accept="text/csv"
                        onchange={handleFileChanged}>
                    </lightning-input>
                </div>
            </template>
            <template if:true={isImport}>
                <div class="slds-box">
                    {data}
                </div>
                <div>
                        <p>上記データを取り込みますか?</p>
                </div>
                <div>
                    <lightning-button variant="primary" label="取り込み" title="取り込み" onclick={handleImportClick}></lightning-button>
                </div>
            </template>
        </div>
    </lightning-card>
</template>

importCSV.js

ファイルが選択されたら、FileReaderでファイルを読み込みます。ここで「Shift_JIS」でエンコードすることがポイントです。指定しないと「UTF-8」として扱われるので、動作しません(特殊文字の扱いが変わるため)

ボタンがクリックされたら、読み込んだデータを改行コードで分割します。さらに、「”」を削除します。javascriptのreplaceは、指定した文字を見つけたら置換をやめる仕様なので、/\"/g/gを指定するのがポイントです。

Apexクラスのパラメータ付きのメソッドを呼び出すときは、{パラメータ名: データと指定する必要があります。

import { LightningElement, track } from 'lwc';
import addAccount from '@salesforce/apex/importCSV.addAccount';

export default class ImportCSV extends LightningElement {
    /**
     * 取込データ
     */
    @track
    data = undefined;

    @track
    isImport
    
    /**
     * ファイルが選択された場合の処理
     * @param {*} event 
     */
    handleFileChanged(event) {
        // 指定されたファイルを読み込む
        const fileReader = new FileReader();

        fileReader.onloadend = (e) => {
            this.data = fileReader.result;
            this.isImport = true;
        };

        fileReader.readAsText(event.detail.files[0], 'Shift_JIS');
    }

    /**
     * 指定されたCSVファイルを取引先としてインポートする
     * @param {*} event イベント情報
     */
    handleImportClick(event) {
        // 読み込んだデータを改行で分割する
        const rows = this.data.split(/\r\n|\n/);

        // 取引先を登録する
        for(let i=0 ; i<rows.length; i++) {
            if (rows[i].length !== 0){
                const row = rows[i].replace(/\"/g, '');
                addAccount({data: row});
            }
        }

        this.data = undefined;
        this.isImport = false;
    }
}

Apexクラス側

メソッドに@AuraEnabledを付けるだけでLighting Web Componentsから呼び出すことができます。これは簡単です。

REST APIなどでやるときは、もう少し複雑な手順になるので、これはすごく楽でいいです。

public with sharing class importCSV {
    public importCSV() {

    }

    @AuraEnabled
    public static Account addAccount(String data){

        // CSVデータを分割する
        String[] csvdata = data.split(',');

        // 取引先を追加する
        Account acc = new Account();
        acc.Name = csvdata[0];
        acc.BillingState = csvdata[1];
        insert acc;

        return acc;
    }
}

Lighting Web Components(Auraも)の日本語での解説が少ないです。取り組む際は、英語で検索した方がいいリソースに当たります(苦戦する場合は、Google翻訳を活用しましょう)