Dateの更新、リンク忘れのファイルを追加

Author: shibukawa

docs/.buildinfo

@@ -1,4 +1,4 @@
 # Sphinx build info version 1
 # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
-config: 6bd1f51aa47eab538528b72d4f0019d8
+config: 1f7cbcf51d8b20472adb11fff596a5d0
 tags: 645f666f9bcd5a90fca523b33c5a78b7

docs/_sources/index.rst.txt

@@ -68,10 +68,11 @@
    :maxdepth: 2
    :caption: 環境ごとのTips（ブラウザ環境）
 
+   browserenv
    browserobjects
    react
    vue
-   webpercel
+   webparcel
    electron
 
 .. toctree::

docs/_sources/otherbuiltinobjects.rst.txt

@@ -319,12 +319,43 @@ TypeScriptで生成した文字列のパースには前述の\ ``DateTimeFormatt
 
 .. [#] `Java8の日時APIはとりあえずこれだけ覚えとけ <https://qiita.com/tag1216/items/91a471b33f383981bfaa>`_
 
+1時間後、1日後、1ヶ月後、1年後の日時の取得
+----------------------------------------------------------
+
+バッチの次回実行時間の計算や、以前のバッチの間に含まれる情報のフィルタリングのために、1時間後や1日後、1ヶ月後、あるいは1時間前や1日前といった日時の演算が必要になることがあります。
+
+現在時刻の\ ``Date``\ インスタンスを作成し、現在の情報を元に、期待する値のインクリメントを行うだけです。1時間後を計算するときに、12月31日の23時30分だから年月日をインクリメントしなければならない、今年の2月は閏年だから1年後の計算の日数が変わる、みたいなことは考慮する必要はなく、そのような演算はJavaScriptが行います。
+
+set系メソッドは値を変更してしまいますし、メソッドが返すのは\ ``Date``\ インスタンスではなく、エポック病なので、必要に応じて新しいインスタンスを作りましょう。
+
+.. code-block:: ts
+
+   const now = new Date();
+   
+   // 1時間後
+   const oneHourLater = new Date();
+   oneHourLater.setHours(now.getHours() + 1);
+
+   // 1日後
+   const oneDayLater = new Date();
+   oneDayLater.setDate(now.getDate() + 1);
+
+   // 1ヶ月後
+   const oneMonthLater = new Date();
+   oneMonthLater.setMonth(now.getMonth() + 1);
+
+   // 1年後
+   const oneYearLater = new Date();
+   oneYearLater.setFullYear(now.getFullYear() + 1);
+
 同一日時かどうかの比較
 ---------------------------------------------
 
-2つの日時が同じ日かどうか確認したいことがあります。たとえば、チケットの日時が今日かどうか、といった比較です。\ ``setHours()``\ に0を4つ設定すると、時、分、秒、ミリ秒のすべてがゼロになります。また、この関数を実行するとエポック時刻が帰ってくるので、これを比較するのがもっとも簡単でしょう。ただし、このメソッドはその日付を変更してしまうため、変更したくない場合は新しいインスタンスを作ってからこのメソッドを呼ぶと良いでしょう。
+2つの日時が同じ日かどうか確認したいことがあります。たとえば、チケットの日時が今日かどうか、といった比較です。JavaScriptが提供しているのは、日時がセットになった\ ``Date``\ 型のみです。他の言語だと、日付だけを扱うクラス、時間だけを扱うクラス、日時を扱うクラスを別に用意しているものもありますが、JavaScriptは1つだけです。日付だけを扱いたいケースでも\ ``Date``\ 型を使う必要があります。
+
+``Date``\ 型で日付だけを扱う方法で簡単なのは時間部分をすべて0に正規化してしまう方法です。\ ``setHours()``\ に0を4つ設定すると、時、分、秒、ミリ秒のすべてがゼロになります。また、この関数を実行するとエポック時刻が帰ってくるので、これを比較するのがもっとも簡単でしょう。ただし、このメソッドはその日付を変更してしまうため、変更したくない場合は新しいインスタンスを作ってからこのメソッドを呼ぶと良いでしょう。
 
-この0時は現在のタイムゾーンでの日時になります。
+この0時は現在のタイムゾーンでの日時になります。もし、UTCで計算したい場合は、\ ``setUTCHours()``\ を使います。
 
 .. code-block:: ts
 
@@ -337,8 +368,49 @@ TypeScriptで生成した文字列のパースには前述の\ ``DateTimeFormatt
    // 同じ日ならtrue
    const isSameDay = (new Date(someDate)).setHours(0, 0, 0, 0) === today;
 
-1時間後、1日後、1ヶ月後、1年後の日時の取得
-----------------------------------------------------------
+日時ではなく時間だけを扱う
+-----------------------------------------
+
+前節では日付だけを扱いましたが、時間だけを扱いたいケースもあるでしょう。こちらも、年月日を同一の日付、例えば、2000年1月1日などの特定の日付に固定してしまえば扱えます。例えば、サーバーではUTCの0時0分からの経過秒で扱うユースケースを考えてみます。例えば、毎日の会議が日本時間で10時であったとします。UTCで朝1時、日本時間の10時を表現するには、3600になりますね。UTCの2000年1月1日0時のエポック秒は946,684,800になりますので、これに足して\ ``Date``\ インスタンスを作れば良いことがわかります。
+
+このクラスはローカルタイムゾーンの時間を計算してくれるので、\ ``setHours()``\ で時間を取得すると、すでにローカルタイムゾーンの時間になります。
+
+.. code-block:: ts
+
+   // 基準日で時間だけオフセットしたDateインスタンス
+   const meetingTime = new Date((946684800 + 3600) * 1000); // JSの時間はミリ秒なので1000倍する
+   console.log(`${meetingTime.getHours()}:${meetingTime.getMinutes()}`);
+   // 10:00
+
+今日のミーティングの日時情報を得るにはは、今日の日付を設定すればOKです。
+
+.. code-block:: ts
+
+   // 今日のミーティング時間を計算するには、今日の年月日を設定する
+   const now = new Date();
+   const todayMeeting = new Date(meetingTime);
+   todayMeeting.setFullYear(now.getFullYear(), now.getMonth(), now.getDate());
+
+Date型のタイムゾーンの制約
+--------------------------------
+
+``Date``\ は「タイムゾーンが扱える」ということは何度か説明していますが、任意の日付で自由にタイムゾーンが扱えるわけではありません。標準の国際化の機能を使えば、ニューヨークの今の時間は？というのを数値で取得、みたいなことを計算する能力はあるのですが、それが使いやすいインタフェースを提供していません。一旦文字列にしてからパースするしかありません。
+
+.. code-block:: ts
+
+   const now = new Date();
+   console.log(now.toLocaleString('en-US', { timeZone: 'America/Los_Angeles' }));
+   // '12/8/2020, 2:19:55 AM'
+
+コンピュータでタイムゾーンで扱う名前はIANAのデータベースが一次情報になります。
+
+* https://www.iana.org/time-zones
+
+ただし、これは.tar.gzなどでの提供のみなので、一覧をみたい場合はWikipediaなどの方が見やすいでしょう。
+
+* https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+
+``Date``\ のみで扱うのは、UTCと現在時刻ぐらいにしておいた方が無難です。最初に紹介した各種ライブラリなどは、タイムゾーンを扱う機能も持っているので、そちらを利用する方が良いでしょう。ただし、標準の国際化機能を利用したもの以外、タイムゾーンはかなり大きなデータファイルを必要とするので、ビルドしたJavaScriptのファイルサイズは大きくなる可能性があります。
 
 ``RegExp``
 ========================

docs/_static/basic.css

@@ -15,12 +15,6 @@ div.clearer {
     clear: both;
 }
 
-div.section::after {
-    display: block;
-    content: '';
-    clear: left;
-}
-
 /* -- relbar ---------------------------------------------------------------- */
 
 div.related {
@@ -322,27 +316,21 @@ img.align-default, .figure.align-default {
 div.sidebar {
     margin: 0 0 0.5em 1em;
     border: 1px solid #ddb;
-    padding: 7px;
+    padding: 7px 7px 0 7px;
     background-color: #ffe;
     width: 40%;
     float: right;
-    clear: right;
-    overflow-x: auto;
 }
 
 p.sidebar-title {
     font-weight: bold;
 }
 
-div.admonition, div.topic, blockquote {
-    clear: left;
-}
-
 /* -- topics ---------------------------------------------------------------- */
 
 div.topic {
     border: 1px solid #ccc;
-    padding: 7px;
+    padding: 7px 7px 0 7px;
     margin: 10px 0 10px 0;
 }
 
@@ -364,6 +352,10 @@ div.admonition dt {
     font-weight: bold;
 }
 
+div.admonition dl {
+    margin-bottom: 0;
+}
+
 p.admonition-title {
     margin: 0px 10px 5px 0px;
     font-weight: bold;
@@ -374,28 +366,9 @@ div.body p.centered {
     margin-top: 25px;
 }
 
-/* -- content of sidebars/topics/admonitions -------------------------------- */
-
-div.sidebar > :last-child,
-div.topic > :last-child,
-div.admonition > :last-child {
-    margin-bottom: 0;
-}
-
-div.sidebar::after,
-div.topic::after,
-div.admonition::after,
-blockquote::after {
-    display: block;
-    content: '';
-    clear: both;
-}
-
 /* -- tables ---------------------------------------------------------------- */
 
 table.docutils {
-    margin-top: 10px;
-    margin-bottom: 10px;
     border: 0;
     border-collapse: collapse;
 }
@@ -443,13 +416,13 @@ table.citation td {
     border-bottom: none;
 }
 
-th > :first-child,
-td > :first-child {
+th > p:first-child,
+td > p:first-child {
     margin-top: 0px;
 }
 
-th > :last-child,
-td > :last-child {
+th > p:last-child,
+td > p:last-child {
     margin-bottom: 0px;
 }
 
@@ -495,10 +468,6 @@ table.field-list td, table.field-list th {
 
 /* -- hlist styles ---------------------------------------------------------- */
 
-table.hlist {
-    margin: 1em 0;
-}
-
 table.hlist td {
     vertical-align: top;
 }
@@ -526,37 +495,17 @@ ol.upperroman {
     list-style: upper-roman;
 }
 
-:not(li) > ol > li:first-child > :first-child,
-:not(li) > ul > li:first-child > :first-child {
+li > p:first-child {
     margin-top: 0px;
 }
 
-:not(li) > ol > li:last-child > :last-child,
-:not(li) > ul > li:last-child > :last-child {
+li > p:last-child {
     margin-bottom: 0px;
 }
 
-ol.simple ol p,
-ol.simple ul p,
-ul.simple ol p,
-ul.simple ul p {
-    margin-top: 0;
-}
-
-ol.simple > li:not(:first-child) > p,
-ul.simple > li:not(:first-child) > p {
-    margin-top: 0;
-}
-
-ol.simple p,
-ul.simple p {
-    margin-bottom: 0;
-}
-
 dl.footnote > dt,
 dl.citation > dt {
     float: left;
-    margin-right: 0.5em;
 }
 
 dl.footnote > dd,
@@ -597,7 +546,7 @@ dl {
     margin-bottom: 15px;
 }
 
-dd > :first-child {
+dd > p:first-child {
     margin-top: 0px;
 }
 
@@ -611,11 +560,6 @@ dd {
     margin-left: 30px;
 }
 
-dl > dd:last-child,
-dl > dd:last-child > :last-child {
-    margin-bottom: 0;
-}
-
 dt:target, span.highlighted {
     background-color: #fbe54e;
 }
@@ -693,68 +637,29 @@ pre {
     overflow-y: hidden;  /* fixes display issues on Chrome browsers */
 }
 
-pre, div[class|="highlight"] {
-    clear: both;
-}
-
 span.pre {
     -moz-hyphens: none;
     -ms-hyphens: none;
     -webkit-hyphens: none;
     hyphens: none;
 }
 
-div[class^="highlight-"] {
-    margin: 1em 0;
-}
-
 td.linenos pre {
+    padding: 5px 0px;
     border: 0;
     background-color: transparent;
     color: #aaa;
 }
 
 table.highlighttable {
-    display: block;
-}
-
-table.highlighttable tbody {
-    display: block;
-}
-
-table.highlighttable tr {
-    display: flex;
+    margin-left: 0.5em;
 }
 
 table.highlighttable td {
-    margin: 0;
-    padding: 0;
-}
-
-table.highlighttable td.linenos {
-    padding-right: 0.5em;
-}
-
-table.highlighttable td.code {
-    flex: 1;
-    overflow: hidden;
-}
-
-.highlight .hll {
-    display: block;
-}
-
-div.highlight pre,
-table.highlighttable pre {
-    margin: 0;
-}
-
-div.code-block-caption + div {
-    margin-top: 0;
+    padding: 0 0.5em 0 0.5em;
 }
 
 div.code-block-caption {
-    margin-top: 1em;
     padding: 2px 5px;
     font-size: small;
 }
@@ -763,7 +668,10 @@ div.code-block-caption code {
     background-color: transparent;
 }
 
-table.highlighttable td.linenos,
+div.code-block-caption + div > div.highlight > pre {
+    margin-top: 0;
+}
+
 div.doctest > div.highlight span.gp {  /* gp: Generic.Prompt */
     user-select: none;
 }
@@ -777,7 +685,11 @@ div.code-block-caption span.caption-text {
 }
 
 div.literal-block-wrapper {
-    margin: 1em 0;
+    padding: 1em 1em 0;
+}
+
+div.literal-block-wrapper div.highlight {
+    margin: 0;
 }
 
 code.descname {
@@ -828,7 +740,8 @@ span.eqno {
 }
 
 span.eqno a.headerlink {
-    position: absolute;
+    position: relative;
+    left: 0px;
     z-index: 1;
 }