json2csvめも
Express でアプリを作ったときにCSVをDLする機能があったのでjson2csvを使ってみたら思いのほか楽だった。
model.js
const jsonbody ={ { "key1":"value", "key2":1, "key3":"2017-05-22", }, { "key1":"value2", "key2":2, "key3":"2017-05-23", }, }; const csvdata = json2csv({ data: jsonbody, fields: Object.keys(jsonbody[0]) });
routes.js
res.setHeader('Content-Type', 'text/csv; charset=shift-jis'); res.setHeader('Content-Disposition', `attachment; filename=download.csv`); res.write(csvdata); res.end();
javascript いろいろ
メモ:
- 配列内の数値を合算したい
mapData.map(o => o.total).reduce((prev, current) => prev + current);
- 日付を操作するmomentについて
format?型?が違うと操作できないので、ISOじゃないといわれたら素直にnew Dateする。
const a = moment().format('YYYY/MM/DD'); // aの一ヵ月後 const b = moment(a).add(1, 'months').format('YYYY/MM/DD'); // 怒られる const c = moment(new Date(a)).add(1, 'months').format('YYYY/MM/DD'); // OK
あと、ローカル時間をUTCに変換する場合はこんなかんじ。
const d = moment().utc().format(); // formatすれば現地時間に直してくれる
- スラッシュをはずす
const beforeStr = '2017/05'; const afterStr = beforeStr.replace(/\u002f/g, ''); // 201705
- こまったときの
<%= JSON.stringify(data); %>
- IEの空href 回避
IEだとhrefに何も指定がないとリンク先が親ディレクトリになるという良く分からないことがおきるため、 hrefには何かしらいれること。
<a href="javascript:void(0)">
ES6の場合for of、そうでない場合はforEachを優先的にかく。
オレオレ回避
export NODE_TLS_REJECT_UNAUTHORIZED=0
と教わったがAPIを操作するパラメーターに
rejectUnauthorized: false
を追加したほうがスマートかな。
.bowerrcの設定例
デフォルトのディレクトリではなく、指定の場所にインストールしたいときはdirectory設定。
registryは入れておいたほうが吉。
あとよくproxyにひっかかるので。
(環境変数に入れてるはずなんだけどなぁ。。
- example
{ "directory": "public/components", "json": "bower.json", "registry": "http://bower.herokuapp.com", "proxy":"http://user:pass@proxy.com:port/", "https-proxy":"http://user:pass@proxy.com:port/" }
chart.js メモ
chart.jsで開発したときのメモ
棒×2本と線グラフで描画
var data ={ labels: ['2017/01','2017/02','2017/03','2017/04','2017/05'], lineLabel: '線グラフのラベル' linedata: ['100','200','300','400','500'], bar1Label: '棒グラフ1のラベル' bar1data: ['10','20','30','40','50'], bar2Label: '棒グラフ2のラベル' bar2data: ['50','40','30','20','10'], }; var chartData = { labels: data.labels, datasets: [{ type: 'line', label: data.lineLabel, data: data.linedata, fill: false, backgroundColor: '#fff', yAxisID: 'y-axis-right', }, { type: 'bar', label: data.bar1Label, data: data.bar1data, yAxisID: 'y-axis-left', }, { type: 'bar', label: data.bar2Label, data: data.bar2data, yAxisID: 'y-axis-left', }, ], }; var complexChartOption = { responsive: true, scales: { yAxes: [{ id: 'y-axis-left', type: 'linear', position: 'left', }, { id: 'y-axis-right', type: 'linear', position: 'right', gridLines: { borderDash: [2], borderDashOffset: 0.0, }, }], }, }; var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: chartData, options: complexChartOption, });
html:
<canvas id="canvas"></canvas>
参考:
javascript - Grouped bar charts, in chart.js - Stack Overflow
おまけ
数値のカンマを入れたい。
var complexChartOption = { responsive: true, tooltips: { callbacks: { label: function(tooltipItem, data) { var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; return String(value).split(/(?=(?:...)*$)/).join(','); } } }, scales: { yAxes: [{ id: 'y-axis-left', type: 'linear', position: 'left', ticks: { callback: function(label, index, labels) { return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } }, scaleLabel: { display: true, labelString: data.bar1Label + ' & ' + data.bar2Label, } }, { id: 'y-axis-right', type: 'linear', position: 'right', gridLines: { borderDash: [2], borderDashOffset: 0.0, }, ticks: { callback: function(label, index, labels) { return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } }, scaleLabel: { display: true, labelString: data.lineLabel, } }], }, };
YYYY/MMからYYYYMMにしたい
momentを使っていればformatで変えられるけど、
直前の処理で正しい日付であることが担保されているので単純に正規表現をつかってみたり。
const yyyy_mm = '2017/05' const foo = moment(yyyy_mm).format('YYYYMM'); console.log(foo); // 201705 const hoge = yyyy_mm.replace(/\u002f/g, ''); // スラッシュ=u002f console.log(hoge); // 201705 const hogehoge = yyyy_mm.split('/'); // スラッシュの前後の値が配列としてそれぞれの要素に入る。 console.log(`${hogehoge[0]}${hogehoge[1]}`); // 201705
オブジェクトの判定
Javascriptで中身がないオブジェクトを判定する際のメモ。
const hoge = {};
空でもIFで判定するとtrueになる。
if (hoge) { // true }
中身がないことを判定するにはキーの数がゼロかどうかで見分ける。
if (Object.keys(hoge).length === 0) { }
標準出力&標準エラーどちらもロギングしたい
node + express で作成したアプリを起動時からの標準エラーも含めたログを延々取りたくなったときのコマンド。
npm run dev 2>&1 | tee test.log