指定日付にaddで日付を増やす（moment.js）

Question

現在、moment.jsを使用し、日付処理のスクリプトを作っています。
moment()で今の時刻をもってくるのは問題ないのですが。
2018年12月7日の3日後 という日付を持ちたいです。　
下記のようなコードを記述しました

var $sitei = moment("2018-12-07 18:00", "YYYYMMDD HH:mm");
var $now = $sitei.add(1, 'days');
console.log($now);
//$nowは 12月8日であってほしい

ですが、コンソールでは 7日の日付のままになっています。
こちらのサイトで同じような質問をされている方がいらっしゃいますが、何も変わりません。
https://stackoverflow.com/questions/22547129/momentjs-date-string-add-5-days

助けていただけると幸いです。

Answer 1

ちょっと分かりづらかったので回答に起こしました。
このサイトで実際に入力して出力結果を確認しました。
http://jsfiddle.net/remus/rLjQx/

var sitei = moment("2018-12-07 18:00", "YYYYMMDD HH:mm");
var new_date = sitei.clone().add(1, 'days');
console.log(new_date);

// console.logの出力結果
e {_i: "2018-12-07 18:00", _f: "YYYYMMDD HH:mm", _l: undefined, _isUTC: false, _a: Array(7), …}

// 各プロパティの詳細
{
  _a: (7) [2018, 11, 7, 18, 0, 0, 0],
  _d: Sat Dec 08 2018 18:00:00 GMT+0900 (日本標準時) {},
  _f: "YYYYMMDD HH:mm",
  _i: "2018-12-07 18:00",
  _isUTC: false.
  _l: undefined.
  __proto__: Object
}

2018年12月7日の3日後 という日付を持ちたいです。

なんで3日後が欲しいのに.add(1, 'days')やねんというツッコミはさておき、
e {_i: "2018-12-07 18:00",の下りを見て「日付変わってないじゃん！」と戸惑ってしまったように見受けられます。
実体はDateTimeで管理されている_dプロパティのようで、_aや_iは12/7を指しっぱなしなので微妙感あふれるライブラリですね。

結論としては面倒でもちゃんと.format()で文字列におこすべきですね。

sitei.clone().add(1, 'days');

sitei変数に代入したmomentですが、単なるオブジェクトなので基本参照の値渡し。
2行目のaddでsiteiの日付も巻き込まれて+1日されてしまっているはずで、
普通に考えればsiteiはそのままの日付を維持して欲しいはずなので、いつかバグとして牙を向いてくる存在になります。

add等のメソッドで日時を変更する際は、常に.clone()を走らせてコピーを取るようにしてくださいね。

Answer 2

addの仕方は間違っていません。
_dにadd後の日付が保管されています。
例えば下記のようにすればちゃんと表示されますよ。

console.log($now.format( "YYYYMMDD HH:mm"));

結果：20181208 18:00

Comments

[T.G]

そのような仕様だったのですね…お恥ずかしい限りです。

[m.ts10806]

解決されたようで何よりです。
オブジェクトとして元の値なども持つようになっているので、
オブジェクトそのままをconsole出力するのではなく表示用にフォーマットかけるのが確実ですね。

Answer 3

addだとaddした$siteiが1日後になりますが、それでは要件を満たさないということですね？

var $now = $sitei.clone().add(1, 'days');とすれば良いと思います。

Comments

[T.G]

それでもコンソールは7日のままです…

[papinianus]

ちょっとまって。
addは自分をreturnするから、$nowに$siteiと同じく12/8が入ってた。
なので、_dとか見なくても12/8になってました(cloneしたほうがいいとは思うが)
なので、コンソールが7日のままっていうのが良く分かりません。

http://jsfiddle.net/remus/rLjQx/
こういうとこで試してみたら、ご自身のコードが正しかったことが分かると思いますよ。

[miyabi-sun]

http://jsfiddle.net/remus/rLjQx/
上記のサイトで動かして確認したところ、意図が分かりました。
add後のオブジェクトをconsole.logで無理やり展開して確認したら、momentオブジェクトがこうなっていました。

// e {_i: "2018-12-07 18:00", _f: "YYYYMMDD HH:mm", _l: undefined, _isUTC: false, _a: Array(7), …}
この_iの値を見て質問者さんがびっくりしてしまったと思うのですが、
実体であるDateTimeの_dだけが「_d: Sat Dec 08 2018 18:00:00 GMT+0900 (日本標準時) {}」という新しい日付であり、_aや_iは古い日時を指したままでした。

従って今回の質問に関してはmtsさんの回答がより正確ですね。
Moment.jsのオブジェクトは破壊的なのでpapinianusさんの仰るcloneメソッドを叩いて切り離す対応はしておくべきですが、別問題かなと感じました。

[papinianus]

formatせずに、console.logしたら_iが出るということなんでしょうか？自分で調べてみようと思います。

Answer 4

add()の中身の順序が逆では？

const moment = require("moment")

const date = moment("2018-12-07 18:00", "YYYYMMDD HH:mm")
const add_date = date.add("days", 1).format()
console.log(add_date)

Comments

[shou6]

ごめんなさい、関係なかったですね。。

[miyabi-sun]

https://momentjs.com/docs/#/manipulating/
ドキュメントにその辺の下りが載っていたので共有です。

> Before version 2.8.0, the moment#add(String, Number) syntax was also supported. It has been deprecated in favor of moment#add(Number, String).

和訳すると、2.8までは単位の方が先でしたが、「それっておかしくね？」みたいな話になり、結果的に数値→単位の順番に修正されたようです。
今は数値が先になり、ドキュメントも数値が先で紹介していますね。

```
moment().add('seconds', 1); // Deprecated in 2.8.0
moment().add(1, 'seconds');
```

恐らくそのコードで動くのはPHPのimplode関数のような歴史的経緯で両対応になっているんじゃないかと思います。

[shou6]

わざわざ、ありがとうございます。

ver2.8までは先だったのですね。
すぐ気づいたので良かったですが、お恥ずかしい指摘をする所でした。