Log.log(work)

いろんな作業メモ

json2csvめも

Express でアプリを作ったときにCSVをDLする機能があったのでjson2csvを使ってみたら思いのほか楽だった。

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本と線グラフで描画

Javascript:

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

おまけ

数値のカンマを入れたい。

Javascript:

  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) {

}