1. migi

    Posted

    migi
Changes in title
+【JavaScript】 YYYY-MM-DD的な文字列をDateオブジェクトに変更するときの注意点
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,62 @@
+<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">なんでやねん。 <a href="https://t.co/WGWqTjiVkN">pic.twitter.com/WGWqTjiVkN</a></p>&mdash; みぎ (@migi) <a href="https://twitter.com/migi/status/979198641842700289?ref_src=twsrc%5Etfw">March 29, 2018</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+# 原因
+
+原因をちょっと調べてみた。
+
+[Date \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)
+
+`new Date(dateString)`の説明としてこんなものが。
+
+>日付を表す文字列値です。文字列は Date.parse() メソッドによる認識可能な形式でなければなりません (IETF 準拠の RFC 2822 timestamps および ISO8601 版 参照)。
+
+なるほど。
+内部で`Date.parse()`が走っていると。
+
+`Date.parse()`については、みなさんご存知のとおり**ブラウザによって動作が不安定**なので使わないほうが良いやつ。
+
+[Date\.parse\(\) \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse)
+
+>ES5 に準拠して実装されるまで Date.parse の使用は推奨されません。
+
+ということで、`new Date()`の引数として、文字列を渡すこと自体やめた方が良いようですね。。
+
+というか、上記の`new Date(dateString)`の説明の直下にそもそもちゃんと書いてあったし。
+
+>注記: ブラウザごとに動作が異なり一貫性がないため、Date コンストラクタ (または同等の Date.parse) で日付文字列を解釈しないように強くすすめます。
+
+
+## 対処法
+
+とは言え、APIで帰ってきた日付が`YYYY-MM-DD`で固定されていてそれを使わなきゃいけない、って状況は多そう。
+APIを修正してわざわざ`{year: 2018, month: 12, day: 23}`みたいにするのもモヤッとするし。
+
+### 対処法 A
+
+**文字列`YYYY-MM-DD`から年月日それぞれの値を取り出して数値化して`new Date(year, month, day)`の形で渡す。**
+
+たぶんこれが一番正確。
+取り出すのも数値化するのも一手間かかってめんどくさいけど。
+`YYYY-M-D`的な形だったら文字の位置からは取り出せないので正規表現使う必要もあるし。
+めんどくさい。
+
+でも正確で安定はしそう。
+
+### 対処法 B
+
+**文字列`YYYY-MM-DD`を文字列`YYYY/MM/DD`に変換して`new Date(dateString)`の形で渡す。**
+
+相変わらず`new Date(dateString)`を使っちゃってるけど。
+
+でもどうやら`YYYY-MM-DD`に比べて`YYYY/MM/DD`だと安定感は増すっぽい。
+
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/8006/11abf314-df3a-f694-4487-481620c89345.png)
+
+なんでや。
+
+これだと`-`を`/`に変換するだけなので面倒さはほぼ無い。
+
+
+
+なんかもっと良い方法を知っている人がいれば教えてください……。