Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
October 02, 2017

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

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

October 02, 2017
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

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

  2. 自己紹介 • 大木尊紀(オオキタカノリ)@takanorip • フロントエンドエンジニア(React、HTML/CSS/JS) • 株式会社スマートドライブ
 Web管理画面や各種ウェブサイトの開発 • 最近のハイライト:


    ReactがMITライセンスになった! • 技術書典3でWebComponentsの本出します!
  3. None
  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[POFGSPNSFBDUESPQ[POF JNQPSU#VUUPOGSPNDPNQPOFOUTBUPNT#VUUPO DMBTT'JMF6QMPBEFYUFOET$PNQPOFOU\ DPOTUSVDUPS QSPQT \ TVQFS QSPQT  UIJTTUBUF\

    JT%SBH3FKFDUGBMTF  ^ ^
  9. PO%SPQ \ UIJTTFU4UBUF \ JT%SBH3FKFDUGBMTF  ^  ^ PO%SPQ3FKFDUFE

    \ UIJTTFU4UBUF \ JT%SBH3FKFDUUSVF  ^  ^ IBOEMF.FSHF SFTVMUT \ UIJTQSPQTPO$PNQMFUF SFTVMUT  ^ IBOEMF1BSTF$TW GJMFT \^
  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   ^ ^
  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^^ 
  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. 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  ^
  17. まとめ • CSVのパースは簡単にできる • Shift-JISは消耗しやすい • フォーマットどおりじゃないとエラーになるので、
 その辺のハンドリングをどうするか

  18. None
  19. おわり