React+TypeScript: csv2json実験

はじめに

JSONデータを作るのがめんどうなのでデータをjsonに変換してついでにidもつけたツールを作りました。その実験です。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

解説

元記事: [Tips] JavaScriptCSV を読み込んで JSON を作る

今回の実験では、csvのファイルを読み込むことをせず、プログラムの中に埋め込んでいます。ヒアドキュメントで1行目と最終行がブランクだったり、データがカンマ区切りだったり、スペース区切りだったりわざと汚いデータにしています。

元記事ではidは付けていませんが、idがあったほうがhtmlのリスト作成のmap処理に使えるので付ける仕様にしました。

問題はnpm create-react-app --template typescript環境ではチェックが厳しすぎて動かない。関数だけをtsプログラムとしてコンパイルすると動くのは確かめてあるので、codepenのreact+typescript環境ではどうかとやってみたら上記の実行例のように動いています。

とりあえず便利なツールが出来たので満足です。