Log.log(work)

いろんな作業メモ

作業メモ - node.js/webpack

windows7(64bit)でnode.jsとwebpackを使うことになったのでめも。


何かのタイミングでwindowsマシンにnode.jsが入っていたのでついでにnpmも入ってた。
ラッキー。
※--versionで確認
※たぶんインストーラーでいれたような気もする
Node.js



webpackはnpmでインストールする。

github.com



と思ったら案の定proxyでエラー。

環境変数にセットしておくか、npm の configにセットする。
セット後、リトライしたら問題なく行った。

npm config set proxy http://proxy.example.com:8080

insertBeforeで躓いた件

javascript jQuery

テーブル内の要素を上へもしくは下へ入れ替えが出来る画面を造っていたときにはまった。

入れ替えにはinsertBeforeで出来ると聞いて。

やり方はいろいろあれど、楽そうだったのでinsertBefore を使ってノードに挿入する手段を考えてみた。

参考サイト：
DOM Node チラ裏 - latest log

作ってみたらうまく動かない。

単純なテーブルで書いてみたら動くときと動かないときがある。

<tbody id="tbody1">
  <tr>
    <td>
    <input type="text" value="1" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="2" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="3" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
</tbody>


上に移動する処理(下へは省略)

function up(obj) {

  var tbody = document.getElementById("tbody1");
  var tr = obj.parentNode.parentNode;

  if(tr.previousSibling != null & tr.previousSibling.nodeName === "TR") {
    // 「tr」を上に挿入
    tbody.insertBefore(tr, tr.previousSibling);
  }

}
事象

tr.previousSiblingが#textだったりtrだったりする。

前の要素が#textになっているのはなぜ？と不思議に思い、
console.log(tr.previousSibling.nodeValue);
で値を出したら空白が表示されてた。

空白？


原因

htmlにtbody以下は空白は入れてはいけない。
見栄えよくするために空白を入れているとその空白も要素だと勘違いされるっぽい？？
とりあえず改行なし・空白なしで修正してみたら思ったとおりに動いた。

DEPTH_ZERO_SELF_SIGNED_CERT

Node.js上でサンプルコードを書いていざ実行してみたら
DEPTH_ZERO_SELF_SIGNED_CERT
で怒られた。

しらべたらサーバへ接続する際に自前のオレオレ証明書が原因で認証エラーになっていたので
POSTの前におまじないを唱えたらうまく流れました。

// 証明書エラー回避
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

// リクエスト送信
request.post(
・・・


追記：
もしくは環境変数にセットできるならセットしたほうが楽かな。

export NODE_TLS_REJECT_UNAUTHORIZED=0

ソート、重複除く、などJavascript memo

javascript
  • 昇順
  array.sort( function(val1,val2){
    if(val1.propety1< val2.propety1) return -1;
    if(val2.propety1< val1.propety1) return 1;
    return 0
  });

それ以外はこちら
JavaScript つい忘れてしまう配列のソート方法 - Qiita

  • オブジェクトの中身拝見
console.log(JSON.stringify(arrayObj));
  • 重複除く
var hoge = foo.filter(function(x,i,self){return self.indexOf(x) ===i});
  • 同じキーがあるかどうか
Object.keys(dataObj).filter(function(k) { return dataObj[k] == searchword})[0]
// ない場合 === undefined
  • 金額のカンマ編集
1000.toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,')
  • 今日の日付を書式yyyymmdd（月と日を必要に応じて0埋め）で取得する。
var now = new Date();
var yyyymmdd = now.getFullYear()+
	( "0"+( now.getMonth()+1 ) ).slice(-2)+
	( "0"+now.getDate() ).slice(-2);
var tomorrow = now.getFullYear()+
	( "0"+( now.getMonth()+1 ) ).slice(-2)+
	( "0"+( now.getDate()+1) ).slice(-2);
  • 配列→文字列

区切り文字列で結合

ary = ['hoge','foo','bar','piyo'];
str = ary.join(',');
console.log(str);
//=>hoge,foo,bar,piyo
  • 文字列→配列

区切り文字列で配列にする。

str = 'hoge,foo,bar,piyo';
ary = str.split(',');
console.log(ary);
//=>["hoge", "foo", "bar", "piyo"]
  • 小数点の編集

・ 切捨て

Math.floor(val)

・ 切り上げ

Math.ceil(val)

・ 四捨五入

Math.round(val)