ReactでCSV一括登録機能作った話

Transcript

1. Reactで「CSV一括登録機能」
   を開発した話
   Takanori Oki
   

   View Slide

2. 自己紹介
   • 大木尊紀（オオキタカノリ）@takanorip
   • フロントエンドエンジニア（React、HTML/CSS/JS）
   • 株式会社スマートドライブ

   Web管理画面や各種ウェブサイトの開発
   • 最近のハイライト：

   ReactがMITライセンスになった！
   • 技術書典3でWebComponentsの本出します！
   

   View Slide

3. View Slide

4. 各種グッズも販売しています！
   • 買ってください！
   • SZURIとSTEERSで販売中！
   • 「犬テトラ＋」か「takanorip」で検索！！
   

   View Slide

5. CSV一括登録機能？
   

   View Slide

6. やりたいこと
   • ドラッグアンドドロップでCSVをアップロード
   • CSVをJSONにパース
   • JSONを配列に変換し、Storeへ格納
   • フォーム量産
   

   View Slide

7. D&D
   • react-dnd

   有名なD&Dライブラリ

   全体的に使いやすい
   • React-Dropzone-Component
   • react-dropzone

   今回はこれを使用

   ファイルのアップロード周りがやりやすかった
   

   View Slide

8. JNQPSU%SPQ[POFGSPNSFBDUESPQ[POF
   JNQPSU#VUUPOGSPNDPNQPOFOUTBUPNT#VUUPO
   DMBTT'JMF6QMPBEFYUFOET$PNQPOFOU\
   DPOTUSVDUPS QSPQT
   \
   TVQFS QSPQT
   
   UIJTTUBUF\
   JT%SBH3FKFDUGBMTF
   ^
   ^
   

   View Slide

9. PO%SPQ
   \
   UIJTTFU4UBUF \
   JT%SBH3FKFDUGBMTF
   ^
   
   ^
   PO%SPQ3FKFDUFE
   \
   UIJTTFU4UBUF \
   JT%SBH3FKFDUUSVF
   ^
   
   ^
   IBOEMF.FSHF SFTVMUT
   \
   UIJTQSPQTPO$PNQMFUF SFTVMUT
   
   ^
   IBOEMF1BSTF$TW GJMFT
   \^
   

   View Slide

10. SFOEFS
    \
    MFUESPQ[POF3FG
    SFUVSO
    EJWDMBTT/BNF\TUZMFGJMF6QMPBE^
    EJWDMBTT/BNF\TUZMFESPQ"SFB^
    %SPQ[POF
    PO%SPQ\UIJTPO%SPQ^
    PO%SPQ"DDFQUFE\UIJTIBOEMF1BSTF$TW^
    PO%SPQ3FKFDUFE\UIJTPO%SPQ3FKFDUFE^
    BDDFQUUFYUDTW BQQMJDBUJPOWOENTFYDFM
    EJTBCMF$MJDL
    NVMUJQMF\GBMTF^
    DMBTT/BNF\TUZMFESPQ[POF^
    BDUJWF$MBTT/BNF\TUZMFBDUJWF^
    SFKFDU$MBTT/BNF\TUZMFSFKFDU^
    SFG\ OPEF
    \ESPQ[POF3FGOPEF^^
    
    \
    UIJTTUBUFJT%SBH3FKFDU
    QDMBTT/BNF\TUZMFSFKFDU.FTTBHF^ԽԉԌՓӘ┣㜇Ҷ㉹ҮӨӃѭQ
    
    
    
    
    ^
    %SPQ[POF
    #VUUPO
    PO$MJDL\
    \ESPQ[POF3FGPQFO
    ^^
    
    EJW
    EJW
    
    
    ^
    ^
    

    View Slide

11. %SPQ[POF
    PO%SPQ\UIJTPO%SPQ^
    PO%SPQ"DDFQUFE\UIJTIBOEMF1BSTF$TW^
    PO%SPQ3FKFDUFE\UIJTPO%SPQ3FKFDUFE^
    BDDFQUUFYUDTW BQQMJDBUJPOWOENTFYDFM
    EJTBCMF$MJDL
    NVMUJQMF\GBMTF^
    DMBTT/BNF\TUZMFESPQ[POF^
    BDUJWF$MBTT/BNF\TUZMFBDUJWF^
    SFKFDU$MBTT/BNF\TUZMFSFKFDU^
    SFG\ OPEF
    \ESPQ[POF3FGOPEF^^
    
    

    View Slide

12. #VUUPO
    PO$MJDL\
    \ESPQ[POF3FGPQFO
    ^^
    
    

    View Slide

13. CSV to JSON
    • csvtojson

    よくわからんエラーが出て諦めた

    issueたてた
    • csv

    nodeでcsvといえばこれ！って感じ
    • papaparse

    ドキュメントが豊富でわかりやすい

    簡単に実装できた
    

    View Slide

14. Shift-JIS
    

    View Slide

15. Shift-JIS対応
    • アップロードされたCSVファイルがShift-JISだったとき
    文字化けしないように処理が必要
    • Shift-JISなんて存在しない世の中にしたい
    • encoding-japanese

    Shift-JISをUnicodeに変換してくれるライブラリ

    めっちゃ便利、感謝しかない
    

    View Slide

16. JNQPSU1BQBGSPNQBQBQBSTF
    JNQPSU&ODPEJOHGSPNFODPEJOHKBQBOFTF
    IBOEMF1BSTF$TW GJMFT
    \
    DPOTUGJMFGJMFT<>
    DPOTUSFBEFSOFX'JMF3FBEFS
    
    SFBEFSPOMPBE F
    \
    DPOTUDPEFTOFX6JOU"SSBZ FUBSHFUSFTVMU
    
    DPOTUFODPEJOH&ODPEJOHEFUFDU DPEFT
    
    DPOTUVOJDPEF4USJOH&ODPEJOHDPOWFSU DPEFT \
    UPVOJDPEF
    GSPNFODPEJOH
    UZQFTUSJOH
    ^
    
    1BQBQBSTF VOJDPEF4USJOH \
    IFBEFSUSVF
    EZOBNJD5ZQJOHUSVF
    TLJQ&NQUZ-JOFTUSVF
    DPNQMFUF SFTVMUT
    \
    UIJTIBOEMF.FSHF SFTVMUT
    
    ^
    ^
    
    ^
    SFBEFSSFBE"T"SSBZ#VGGFS GJMF
    
    ^
    

    View Slide

17. まとめ
    • CSVのパースは簡単にできる
    • Shift-JISは消耗しやすい
    • フォーマットどおりじゃないとエラーになるので、

    その辺のハンドリングをどうするか
    

    View Slide

18. View Slide

19. おわり
    

    View Slide