VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト
個人開発をしている時に、「Vueを使い、CSVファイルをアップロードすると、JSON形式に変換してくれる処理」を書きました。 検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「vue-papa-parse」というライブラリがすごく使いやすかったので、今回はその共有となります。 非常に簡単に変換処理が書くことが出来ましたので、vue-papa-parseの使い方はこの記事でマスターできます。 最終的には、以下のようなものを目指します vue-papa-parseを使うことで、非常に短い行数で書けます。とても便利なので、ぜひマスターして下さい。
FileAPIを使って、CSVファイルからテーブルを作成する方法 - Qiita
はじめに 初めまして、初投稿です。読みづらい箇所もあると思いますが、よろしくお願いします。 エクセルなどで作成した表データをそのままテーブルにできないかと色々模索した際に作成したコードです。 「エクセルをそのままテーブルにしたい！」という私みたいなモノグサさんのお役に立てれば幸いです。 環境 html Javascript Google Chrome CSVファイル（Excel、Googleスプレッドシートなどで作成） ※条件：セル内改行なし ・ コンマ , は使用しない 作業手順 以下の手順でコードを作成していきます。 - 1. 【HTML】CSVファイルの読み込み - 2. 【HTML】テーブルを書き出す場所を作成する - 3. 【Javascript】form要素（CSVファイル）の取得する - 4. 【Javascript】CSVの各データを配列として読み込む-1 - 5. 【Ja
Node.js CSV まとめ :: JavaScript | Refills
function readCsvSync(filename, options) { const fs = require('fs'); const parse = require('csv-parse/lib/sync'); const content = fs.readFileSync(filename).toString(); return parse(content, options); } const options = { columns: true, comment: '#' }; const records = readCsvSync('sample.csv', options); /* [ { fruit: 'apple' }, { fruit: 'orange' }, { fruit: 'lemon' } ] */ const options = { columns: [
Papa Parse - Powerful CSV Parser for JavaScript
The powerful, in-browser CSV parser for big boys and girls Download Demo Documentation // Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(result
「vuecsv」で配列をCSV形式でダウンロードする | カバの樹
vuecsvとは vuecsvは、配列をCSV形式でダウンロードできるライブラリです。 option機能が搭載されており、改行コードを指定することができます。 インストール 以下のCDNを使ってインストールします。 CDN <link rel="stylesheet" href="https://unpkg.com/vuecsv/dist/vuecsv.min.css"> <script type="text/javascript" src="https://unpkg.com/vuecsv/dist/vuecsv.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/ynishi/vuecsv 導入手順 配列をCSV形式でダウンロードします。 1. ライブラリの取り込み Vue.component("csv-download"
Railsで大量データを扱うときに気をつけていること - LCL Engineers' Blog
バックエンドエンジニアの横塚です。 Railsで中規模以上のサービスを運用していると、大量のレコードやcsvをバッチで処理したい場面などが出てくると思います。 当たり前のように意識できている人も多いかと思いますが、今回はおさらいの意味も込めてバッチで大量データを扱うときに気をつけていることをまとめていこうと思います！ 大量レコードに対して処理をするときはfind_eachやfind_in_batchesを使う DBからデータを取得してきて処理をしたい場合、eachで処理しようとすると対象データがすべてメモリに展開されてしまいますが、find_eachは1行ずつメモリに展開するため、レコード数を気にせず処理をすることができます。 User.each do |user| # なんか処理 end ↓ User.find_each do |user| # なんか処理 end また、find_in_
File APIを使ってローカルのファイルを読み込んでみる ｜ Tips Note by TAM
HTML5のFile APIについて少し調べる機会がありましたので、JavaScriptを使ってローカルからファイルを読み込んで、ブラウザ上に表示するところまでを試してみます。 画像の読み込み ローカルの画像を読み込んで、ブラウザ上に表示させてみます。 <input type="file">でファイルの読み込みを行い、読み込んだ結果を#resultに出力します。 ■HTML <input type="file" name="file" id="file"> <div id="result"></div> ■JavaScript var file = document.getElementById('file'); var result = document.getElementById('result'); // File APIに対応しているか確認 if(window.File && w
Vue.jsでCSVファイルを読み込む - Wiita
結構記事があるので余裕だと思ったら躓きまくったので残しておこうと思います. 目指すもの CSVファイルをドラッグアンドドロップ もしくは 選択してアップロードして, そのCSVファイルを自由に読み取れるようにするまでです. 簡単な流れを説明すると ファイルアップロード => パース => dataにぶちこむ => 表示 といった感じです. script vueファイルのCSVを読み込む部分はこんな感じになってます. <script> export default { data: function() { return { // CSVファイルのヘッダー部を定義しておきます headers: [ { text: "Code", align: "left", sortable: false, value: "code" }, { text: "Name", align: "left", val
Railsアプリの処理を100倍以上に高速化して得られた知見 | PSYENCE:MEDIA
はじめまして。2019年4月から妊娠・出産アプリ『Babyプラス』の開発チームにJOINした濱田です。 『Babyプラス』のバックエンドはRailsで実装されているのですが、とあるCSV生成処理がとても遅かったので100倍以上に高速化しました。この過程でRailsアプリの処理高速化に関する以下の知見が得られたので、具体例を交えて共有します。この知見は、ActiveRecordを使用してMySQLなどのRDBMSからデータ抽出をする様々な場面で活用できると思います。 いわゆる「N+1問題」を起こさないのは基本 「ActiveRecordインスタンスの生成コスト」はそれなりに高い pluckはjoinsと組み合わせることで他テーブルのカラム値も取得できる 前提: DBスキーマとデータ規模 今回の処理高速化に関わるモデルのDBスキーマとデータ規模は以下の通りです。なお、これらは本エントリ向けに少
先頭の0が消えないCSVファイルの作り方 | ウェブインパクトエンジニア IT番長ブログ
東京kです。こんにちは。 なんか、このBlogが食べ物の話題だらけになっていると聞きつけて、久しぶりに投稿です。 とはいえ、すぐに出てくるネタが無いので、割と知っている人は知っている的な技術話題を。 業務でCSVファイルってよく使いますよね？ でもよくある話しの一つとして『「0123」等の値がExcelで開いても「123」になってしまう。』問題があります。 今回はそれを解決するお話し。 この問題のアプローチは2つあります。 ファイルを開くときに対処するか ファイルを作るときに対処するか です。今回は後者で、普通に開いても0が消えないCSVの作り方です。 この話の前に、そもそもCSVファイルはなんぞや？という話はありますが、語り始めると長いので割愛します。 簡単に言うと「カンマで区切られたデータが入ったテキストファイルで、ソフト毎の方言が非常に多いファイル形式」ですね。 今回のミソは、この「
Ruby で CSV を扱う際に便利な gem である SmarterCSV - 約束の地
SmarterCSV Ruby で CSV を扱う際には標準ライブラリが便利です。 Ruby標準添付ライブラリcsvのCSV.tableメソッドが最強な件について ただ、このライブラリでは面倒な操作を行う際には SmarterCSV という gem もとても便利です。 SmarterCSV の使い方 ドキュメントにもありますが、基本的な使い方は以下のとおりです。gem のインストールや gem の require は省略します。 1. CSVファイル を読み込む CSVファイル として your_csv_file.csv を用意します。このファイルの内容は以下のようになっているとします。 first name,last name,age taro,tanaka,23 keiko,yamada,21 tomoko,yamamoto,25 kenji,saito,20 この CSVファイル は
Ruby on RailsでCSV一覧出力する３つの方法 - TIS ENGINEER NOTE
ユーザーが画面に表示されている一覧情報をダウンロードしたい、という場合によく使われるのがcsv形式。 Ruby on Railsでcsv出力をしようとして、情報を集めていると色々な実装手順を見かけました。使っているライブラリなどはほとんど変わらないのですが、実装箇所が異なっているので、ちょっと混乱してしまいました。 今回は自分が調べた結果のまとめとしてRuby on Railsでcsv出力を行う際の３つのアプローチをご紹介していきます。 前提 基本的にRubyのライブラリであるCSV.generateを利用します。もっともシンプルにcsvの出力を行えます。 名前(name),説明(description),価格(price)という情報を持った製品(product)モデルのデータを表示させるとしましょう。 csv_data = CSV.generate do |csv| csv_column
Ruby 2.6.0とより高速なcsv - 2018-12-25 - ククログ
Rubyの標準添付ライブラリーのcsvをメンテナンスしている須藤です。 歴史 csvは名前の通りCSVを読み書きするための便利ライブラリーです。 もともとRuby本体とは別に開発されていたのですが、Ruby 1.8.0のときにRuby本体にバンドルするようになりました。dRubyやREXMLがRuby本体にバンドルされたのも同じタイミングです。Ruby 1.8.0のときにバンドルするライブラリーをすごく増やしたのです。（その頃の様子がわかるURLをここに置いておきたかったけど見つけられなかった。。。） Rubyではcsvのようにrequireするだけで使えるライブラリーを「標準添付ライブラリー」と呼んでいます。Stringのようにrequireしなくても使えるライブラリーは。。。なんだろう。組み込みクラスかしら。 その後、Ruby 1.9.0のタイミングで実装をFasterCSVに置き換え
Rails で動的にテーブルを作成して、大きな CSV のデータをインポートする方法 | feedforce Engineers' blog
こんにちは！SQL 大好き kano-e です。 「データ更新のたびに新規にテーブルを作って、そこにデータを投入したい」とか。 「お客様を DB に登録したら、合わせてそのお客様専用のテーブルを作っておきたい」とか。 「とにかくこの CSV の内容を DB に投入したい、10万件」とか。 こんな状況、意外と遭遇していませんか？ この記事では、そんな時に多分役立つ「Rails で動的にテーブルを作成して、大きな CSV のデータを PostgreSQL にインポートする方法」について、思いつくままにまとめてみました。 合わせて読みたい「動的に作成したテーブルを db/schema.rb に含めない方法」のおまけ付きです。 はじめに この記事では、以下の内容についてまとめています。 Rails で動的にテーブルを CREATE/DROP する テーブルに対応するモデルを用意せずに SQL を組
CarrierWaveでファイルのアップロードをテストしたいときは
今北産業 ・ここにあるようにfixture_file_upload railsを使うと良い｡ ・このやり方は効果がない ・Paramにファイルパスをじかに渡すとCarrierWaveが You tried to assign a String or a Pathname to an uploader, for security reasons, this is not allowed. と出て受け取ってくれない 経緯 CSVファイルをアップロードして､その内容をDBに登録し､データに操作をくわえて､CSVファイルを吐き出す｡という業務用のCSV編集アプリをRailsでつくろうとしてました｡ CarrierWaveをいれて､CSVをアップロードしてやるためにコントローラーをつくりました｡ def import @uploaded_file = CsvUploader.new @uploade
Ruby標準添付ライブラリcsvのCSV.tableメソッドが最強な件について
─ 問題１ ─ data.csvファイルには、５人のプレイヤー（Alice, Bob, Jimmy, Kent, Ross）が二種類のゲーム（gameA, gameB）をプレイした結果が次のような形で格納されている。各ゲームの平均点を求めよ。 data.csv player,gameA,gameB Alice,84.0,79.5 Bob,20.0,56.5 Jimmy,80.0,31.0 Kent,90.5,15.5 Ross,68.0,33.0 data = File.read('data.csv') headers, *scores = data.lines.map { |line| line.chomp.split(',') } scores # => [["Alice", "84.0", "79.5"], ["Bob", "20.0", "56.5"], ["Jimmy", "80
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
note/CSVの解説と各プログラミング言語での実装例.md at master · mima3/note
vue-papa-parse
【Ruby】よく使う、CSVライブラリを使ったCSV操作 - Qiita
Ruby - Railsでcsv形式のみを取り込む方法(それ以外エクセルファイルなどはエラーを出したいです)(40786)｜teratail