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

Transcript

1. Reactで「CSV一括登録機能」 を開発した話 Takanori Oki
2. 自己紹介 • 大木尊紀（オオキタカノリ）@takanorip • フロントエンドエンジニア（React、HTML/CSS/JS） • 株式会社スマートドライブ
 Web管理画面や各種ウェブサイトの開発 • 最近のハイライト：
 ReactがMITライセンスになった！ • 技術書典3でWebComponentsの本出します！
4. 各種グッズも販売しています！ • 買ってください！ • SZURIとSTEERSで販売中！ • 「犬テトラ＋」か「takanorip」で検索！！
5. CSV一括登録機能？
6. やりたいこと • ドラッグアンドドロップでCSVをアップロード • CSVをJSONにパース • JSONを配列に変換し、Storeへ格納 • フォーム量産
7. D&D • react-dnd
 有名なD&Dライブラリ
 全体的に使いやすい • React-Dropzone-Component • react-dropzone
 今回はこれを使用
 ファイルのアップロード周りがやりやすかった
8. JNQPSU
   %SPQ[POF
   GSPN
   SFBDUESPQ[POF
   JNQPSU
   #VUUPO
   GSPN
   DPNQPOFOUTBUPNT#VUUPO
   DMBTT
   'JMF6QMPBE
   FYUFOET
   $PNQPOFOU
   \
   
   
   DPOTUSVDUPS QSPQT
   \
   
   
   
   
   TVQFS QSPQT 
   
   
   
   
   UIJTTUBUF
   
   \
   
   
   
   
   
   
   JT%SBH3FKFDU
   GBMTF
   
   
   
   
   ^
   
   
   ^
9. 
   
   PO%SPQ
   \
   
   
   
   
   UIJTTFU4UBUF \
   
   
   
   
   
   
   JT%SBH3FKFDU
   GBMTF
   
   
   
   
   ^ 
   
   
   ^
   
   
   PO%SPQ3FKFDUFE
   \
   
   
   
   
   UIJTTFU4UBUF \
   
   
   
   
   
   
   JT%SBH3FKFDU
   USVF
   
   
   
   
   ^ 
   
   
   ^
   
   
   IBOEMF.FSHF SFTVMUT
   \
   
   
   
   
   UIJTQSPQTPO$PNQMFUF SFTVMUT 
   
   
   ^
   
   
   IBOEMF1BSTF$TW GJMFT
   \^
10. 
    
    SFOEFS
    \
    
    
    
    
    MFU
    ESPQ[POF3FG
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    EJW
    DMBTT/BNF\TUZMFGJMF6QMPBE^
    
    
    
    
    
    
    
    
    EJW
    DMBTT/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[POF3FG
    
    OPEF
    ^^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    
    UIJTTUBUFJT%SBH3FKFDU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Q
    DMBTT/BNF\TUZMFSFKFDU.FTTBHF^ԽԉԌՓӘ┣㜇Ҷ㉹ҮӨӃѭQ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    
    
    
    
    %SPQ[POF
    
    
    
    
    
    
    
    
    
    
    #VUUPO
    
    
    
    
    
    
    
    
    
    
    
    
    PO$MJDL\
    
    \
    ESPQ[POF3FGPQFO 
    ^^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    ^
    ^
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[POF3FG
    
    OPEF
    ^^
    
12. #VUUPO
    
    
    PO$MJDL\
    
    \
    ESPQ[POF3FGPQFO 
    ^^
    
13. CSV to JSON • csvtojson
 よくわからんエラーが出て諦めた
 issueたてた • csv
 nodeでcsvといえばこれ！って感じ • papaparse
 ドキュメントが豊富でわかりやすい
 簡単に実装できた
14. Shift-JIS
15. Shift-JIS対応 • アップロードされたCSVファイルがShift-JISだったとき 文字化けしないように処理が必要 • Shift-JISなんて存在しない世の中にしたい • encoding-japanese
 Shift-JISをUnicodeに変換してくれるライブラリ
 めっちゃ便利、感謝しかない
16. JNQPSU
    1BQB
    GSPN
    QBQBQBSTF
    JNQPSU
    &ODPEJOH
    GSPN
    FODPEJOHKBQBOFTF
    
    
    IBOEMF1BSTF$TW GJMFT
    \
    
    
    
    
    DPOTU
    GJMF
    
    GJMFT<>
    
    
    
    
    DPOTU
    SFBEFS
    
    OFX
    'JMF3FBEFS 
    
    
    
    
    SFBEFSPOMPBE
    
    F
    
    \
    
    
    
    
    
    
    DPOTU
    DPEFT
    
    OFX
    6JOU"SSBZ FUBSHFUSFTVMU 
    
    
    
    
    
    
    DPOTU
    FODPEJOH
    
    &ODPEJOHEFUFDU DPEFT 
    
    
    
    
    
    
    DPOTU
    VOJDPEF4USJOH
    
    &ODPEJOHDPOWFSU DPEFT
    \
    
    
    
    
    
    
    
    
    UP
    VOJDPEF
    
    
    
    
    
    
    
    
    GSPN
    FODPEJOH
    
    
    
    
    
    
    
    
    UZQF
    TUSJOH
    
    
    
    
    
    
    ^ 
    
    
    
    
    
    
    1BQBQBSTF VOJDPEF4USJOH
    \
    
    
    
    
    
    
    
    
    IFBEFS
    USVF
    
    
    
    
    
    
    
    
    EZOBNJD5ZQJOH
    USVF
    
    
    
    
    
    
    
    
    TLJQ&NQUZ-JOFT
    USVF
    
    
    
    
    
    
    
    
    DPNQMFUF
    SFTVMUT
    
    \
    
    
    
    
    
    
    
    
    
    
    UIJTIBOEMF.FSHF SFTVMUT 
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    ^ 
    
    
    
    
    ^
    
    
    
    
    SFBEFSSFBE"T"SSBZ#VGGFS GJMF 
    
    
    ^
17. まとめ • CSVのパースは簡単にできる • Shift-JISは消耗しやすい • フォーマットどおりじゃないとエラーになるので、
 その辺のハンドリングをどうするか
19. おわり