fix samll bugs

Author: shibukawa

browserenv.rst

@@ -47,7 +47,7 @@ webpackとRollup以外だと次のようなツールがあります。以下も
 
 * RollupをベースにTypeScriptサポートを最初から組み込んだ\ `microbundle <https://www.npmjs.com/package/microbundle>`_
 * .js/.tsの変換に特化して高速なビルド応答性を重視し、本番環境のバンドル作成はプラグインを使ったオプション(webpack/Rollup)としている\ `Snowpack <https://www.snowpack.dev/>`_
-* HTMLやCSSのビルドもできて、package.jsonに書かれた定義(mainやtypesなど)をもとにビルドを行い、開発サーバーも全てついてくるオールインワンでビルド速度を重視した\ `Parcel V2<https://v2.parceljs.org/>`_
+* HTMLやCSSのビルドもできて、package.jsonに書かれた定義(mainやtypesなど)をもとにビルドを行い、開発サーバーも全てついてくるオールインワンでビルド速度を重視した\ `Parcel V2 <https://v2.parceljs.org/>`_
 * Go製でビルド速度に特化した\ `esbuild <https://esbuild.github.io/>`_
 * microbundleに似ているが、React/Vue.js/Svelte/Lit-Element/素のHTML+JS(Vanilla)向けの環境構築までやってくれる\ `vite.js <https://vitejs.dev/>`_
 

browserobjects.rst

@@ -10,12 +10,17 @@
 Polyfill、Ponyfill
 -----------------------------------
 
-``fetch``
+``fetch()``
 ----------------------------------------
 
+Node.js 18からは標準で組み込まれました。2022年10月にLTSになった以降は特に設定せずに利用できます。
+
+クラウドのランタイムなど、それ以前のバージョンを扱う必要があれば追加のパッケージが必要です。
+
 確実にNode.jsだけでしか使われないコードであれば\ `node-fetch <https://www.npmjs.com/package/node-fetch>`_\ をインポートして利用すれば十分です。
 
-もし、ブラウザでもサーバーでも実行されるコードの場合
+もし、ブラウザでもサーバーでも実行されるコードを書く必要があれば、次のパッケージを利用すると、Node.js環境ではPolyfillが使われ、ブラウザではネイティブの ``fetch()`` 関数が利用されます。
+
 https://www.npmjs.com/package/isomorphic-unfetch
 https://www.npmjs.com/package/isomorphic-fetch
 https://www.npmjs.com/package/fetch-ponyfill

conf.py

@@ -27,7 +27,7 @@
 import sys
 
 sys.path.insert(0, os.path.abspath('ext'))
-extensions = [ 'pageinfo', 'sphinx.ext.todo', 'sphinx.ext.githubpages', 'sphinx_rtd_theme' ]
+extensions = [ 'pageinfo', 'sphinx.ext.todo', 'sphinx.ext.githubpages', 'sphinx_rtd_theme', 'sphinxcontrib.blockdiag' ]
 # The short X.Y version
 version = ''
 # The full version, including alpha/beta/rc tags

console.rst

@@ -28,22 +28,22 @@
     - * ``console.log()``
       * ✔
       * ✔
-      * ✔
+      * 標準出力
       * ✔
     - * ``console.info()``
       * ``log()``\ と同じ
       * ✔
-      * ``log()``\ と同じ
+      * 標準出力
       * ✔
     - * ``console.warn()``
       * ✔
       * ✔
-      * ``log()``\ と同じ
+      * 標準エラー出力
       * ✔
     - * ``console.error()``
       * ✔
       * ✔
-      * ``log()``\ と同じ
+      * 標準エラー出力
       * ✔
 
 それぞれ、見た目が大きく異なります。

contributors.rst

@@ -46,6 +46,7 @@ Pull Request/Issueをくださった方々
 * `@kesoji <https://github.com/kesoji>`_
 * `@maguroguma <https://github.com/maguroguma>`_
 * `@nukopy <https://github.com/nukopy>`_
+* `@soraiyu <https://github.com/soraiyu>`_
 
 
 フィードバックをくださった方々

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: 65f1bc4d6239bd5f9e4ded52b2175125
+config: f0ad1fd6c5a0d93275bba3eb765fb7ef
 tags: 645f666f9bcd5a90fca523b33c5a78b7

docs/_images/vue-cli-3.png

@@ -30,7 +30,7 @@ JavaScriptの処理系には、現在のシステムのUIを担うレイヤー
 CPU速度が問題になることはあまりないとはいえ、コードで処理するタスクの中には長い時間の待ちを生じさせるものがいくつかあります。
 例えば、タイマーなどもそうですし、外部のサーバーやデータベースへのネットワークアクセス、ローカルのファイルの読み書きなどは往復でミリ秒、場合によっては秒に近い遅延を生じさせます。
 JavaScriptは、そのような時間のかかる処理は基本的に「非同期」という仕組みで処理を行います。
-タイマー呼び出しをする次のコードを見て見ます。
+タイマー呼び出しをする次のコードを見てみます。
 
 .. code-block:: ts
 
@@ -137,7 +137,7 @@ TypeScriptでは、 ``async`` を返す関数の返り値は必ず ``Promise`` 
 
 TypeScriptの処理系は、この ``Promise`` の種類と、関数の返り値の型が同一かどうかを判断し、マッチしなければエラーを出してくれます。
 非同期処理の場合、実際に動かしてデバッグしようにも、送る側の値と、受ける側に渡ってくる値が期待通りかどうかを確認するのが簡単ではありません。
-ログを出して見ても、実際に実行されるタイミングがかなりずれていることがありえます。
+ログを出してみても、実際に実行されるタイミングがかなりずれていることがありえます。
 TypeScriptを使うメリットには、このように実際に動かすデバッグが難しいケースでも、型情報を使って「失敗するとわかっている実装」を見つけてくれる点にあります。
 
 比較的新しく作られたライブラリなどは最初から\ ``Promise``\ を返す実装になっていると思いますが、そうでないコールバック関数方式のコードを扱う時は ``new Promise``\ を使って\ ``Promise``\ 化します。
@@ -175,7 +175,7 @@ Node.js標準にもありますし、npmで調べてもたくさんあります
 
 TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関数呼び出しを伴わないフラットなコードなので\ ``await``\ とも一緒に使えます。
 ``Promise`` やコールバックを使ったコードで、条件によって非同期処理を1つ追加する、というコードを書くのは大変です。
-試しに、TypeScriptのPlayGroundで下記のコードを変換してみるとどうなるか見て見ると複雑さにひっくり返るでしょう。
+試しに、TypeScriptのPlayGroundで下記のコードを変換してみるとどうなるか見てみると複雑さにひっくり返るでしょう。
 
 .. code-block:: ts
 
@@ -222,7 +222,7 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
 
 ``Promise`` は「時間がかかる仕事が終わった時に通知するという約束」という説明をしました。
 みなさんは普段の生活で、時間がかかるタスクというのを行ったことがありますよね？
-味噌汁をガスレンジあたためつつ、ご飯を電子レンジで温め、両方終わったらいただきます、という具合です。
+味噌汁をガスレンジで温めつつ、ご飯を電子レンジで温め、両方終わったらいただきます、という具合です。
 ``Promise`` および、その完了を待つ ``await`` を使えば、そのようなタスクも簡単に実装できます。
 
 .. code-block:: ts
@@ -243,8 +243,8 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
 ``味噌汁温め()`` と ``ご飯温め()`` は ``async`` がついた関数です。
 省略可能ですがあえて返り値に ``Promise`` をつけています。
 これまでの例では、 ``async`` 関数を呼ぶ時には ``await`` をつけていました。
-``await`` をつけると、待った後の結果（ここでは味噌汁とご飯のインスタンス）が帰ってきます。
-``await`` をつけないと、 ``Promise`` そのものが帰ってきます。
+``await`` をつけると、待った後の結果（ここでは味噌汁とご飯のインスタンス）が返ってきます。
+``await`` をつけないと、 ``Promise`` そのものが返ってきます。
 
 この ``Promise`` の配列を受け取り、全部の ``Promise`` が完了するのを待つのが ``Promise.all()`` です。
 ``Promise.all()`` は、引数のすべての結果が得られると、解決して結果をリストで返す ``Promise`` を返します。
@@ -256,7 +256,7 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
 なお、 ``Promise.all()`` の引数の配列に、 ``Promise`` 以外の要素があると、即座に完了する ``Promise`` として扱われます。
 
 類似の関数で ``Promise.race()`` というものがあります。
-これは ``all()`` と似ていますが、全部で揃うと実行されるわけではなく、どれか一つでも完了すると呼ばれます。
+これは ``all()`` と似ていますが、全部が揃うと実行されるわけではなく、どれか一つでも完了すると呼ばれます。
 レスポンスの値は、引数のうちのどれか、ということで、結果を受け取る場合は処理が少し複雑になります。
 結果を扱わずに、5秒のアニメーションが完了するか、途中でクリックした場合には画面を更新する、みたいな処理には適しているかもしれません。
 
@@ -290,14 +290,14 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
      )
    );
 
-図で見て見ると、この違いは一目瞭然でしょう。
+図で見てみると、この違いは一目瞭然でしょう。
 
 .. figure:: images/async/loop.png
 
 ``Promise.all()`` が適切ではない場面もいくつかあります。
 
 例えば、外部のAPI呼び出しをする場合、たいてい、秒間あたりのアクセス数が制限されています。
-配列に100個の要素があるからといって100並列でリクエストを投げるとエラーが帰って来て正常に処理が終了しないこともありえます。
+配列に100個の要素があるからといって100並列でリクエストを投げるとエラーが返ってきて正常に処理が終了しないこともありえます。
 その場合は、並列数を制御しつつ ``map()`` と同等のことを実現してくれる ``p-map`` [#]_ といったライブラリを活用すると良いでしょう。
 
 .. [#] https://www.npmjs.com/package/p-map

docs/_sources/async.rst.txt

@@ -521,10 +521,10 @@ JestでもMochaでも、人気のフレームワークはテスト専用の関
 Jestはこのファイルから情報を取得してくれませんので専用の設定が必要です。
 
 .. code-block:: json
-
+  :caption: jest.config.js
    {
      "moduleNameMapper": {
-       "^@/(.*)$": "<rootDir>/src/$1"
+       "^@/src/(.*)$": "<rootDir>/src/$1"
    }
 
 単なるエイリアスなので、この設定を入れなくてもできることは変わりませんが、特にテストコードからプロジェクトのファイルを参照したい場合など、\ ``import { Targert } from "../../../../src/components/Target";``\ のように\ ``import``\ が長くなる可能性があります。\ ``import``\ 文を他のファイルからコピーするときも、どのフォルダであってもそのまま使えるというメリットもあります。

docs/_sources/baseenv.rst.txt

@@ -47,7 +47,7 @@ webpackとRollup以外だと次のようなツールがあります。以下も
 
 * RollupをベースにTypeScriptサポートを最初から組み込んだ\ `microbundle <https://www.npmjs.com/package/microbundle>`_
 * .js/.tsの変換に特化して高速なビルド応答性を重視し、本番環境のバンドル作成はプラグインを使ったオプション(webpack/Rollup)としている\ `Snowpack <https://www.snowpack.dev/>`_
-* HTMLやCSSのビルドもできて、package.jsonに書かれた定義(mainやtypesなど)をもとにビルドを行い、開発サーバーも全てついてくるオールインワンでビルド速度を重視した\ `Parcel V2<https://v2.parceljs.org/>`_
+* HTMLやCSSのビルドもできて、package.jsonに書かれた定義(mainやtypesなど)をもとにビルドを行い、開発サーバーも全てついてくるオールインワンでビルド速度を重視した\ `Parcel V2 <https://v2.parceljs.org/>`_
 * Go製でビルド速度に特化した\ `esbuild <https://esbuild.github.io/>`_
 * microbundleに似ているが、React/Vue.js/Svelte/Lit-Element/素のHTML+JS(Vanilla)向けの環境構築までやってくれる\ `vite.js <https://vitejs.dev/>`_
 

docs/_sources/browserenv.rst.txt

@@ -10,12 +10,17 @@
 Polyfill、Ponyfill
 -----------------------------------
 
-``fetch``
+``fetch()``
 ----------------------------------------
 
+Node.js 18からは標準で組み込まれました。2022年10月にLTSになった以降は特に設定せずに利用できます。
+
+クラウドのランタイムなど、それ以前のバージョンを扱う必要があれば追加のパッケージが必要です。
+
 確実にNode.jsだけでしか使われないコードであれば\ `node-fetch <https://www.npmjs.com/package/node-fetch>`_\ をインポートして利用すれば十分です。
 
-もし、ブラウザでもサーバーでも実行されるコードの場合
+もし、ブラウザでもサーバーでも実行されるコードを書く必要があれば、次のパッケージを利用すると、Node.js環境ではPolyfillが使われ、ブラウザではネイティブの ``fetch()`` 関数が利用されます。
+
 https://www.npmjs.com/package/isomorphic-unfetch
 https://www.npmjs.com/package/isomorphic-fetch
 https://www.npmjs.com/package/fetch-ponyfill

docs/_sources/browserobjects.rst.txt

@@ -444,7 +444,7 @@ JavaScriptではまだStage 3の機能ですが、TypeScriptですでに使え
 これらの機能は、言語の文化とか、他の代替文法の有無とかで使われ方が大きく変わってきます。
 
 TypeScript界隈では、Angularなどのフレームワークではインタフェースが多用されています。
-ユーザーが実装するコンポーネントなどのクラスにおいて、Anguarが提供するサービスを受けるためのメソッドの形式が決まっていて、実装部分の中身をライブラリユーザーが実装するといった使われ方をしています。
+ユーザーが実装するコンポーネントなどのクラスにおいて、Angularが提供するサービスを受けるためのメソッドの形式が決まっていて、実装部分の中身をライブラリユーザーが実装するといった使われ方をしています。
 ``OnInit`` をimplementsすると、初期化時に呼び出されるといった具合です。
 
 継承が必要となるのは実装も提供する必要がある場合ですが、コードが追いかけにくくなるとか、拡張性のあるクラス設計が難しいとかもあり、引き継ぐべきメソッドが大量にあるクラス以外で積極的に使うケースはあまり多くないかもしれません。

docs/_sources/class.rst.txt

@@ -6,7 +6,7 @@
 アクセッサ
 --------------------------
 
-プロパティのように見えるけど、実際には裏でメソッド呼び出しが行われ、ちょっとした気の利いたをできるようにすることをするのがアクセッサです。
+プロパティのように見えるけど、実際には裏でメソッド呼び出しが行われ、ちょっとした気の利いたことをできるようにするのがアクセッサです。
 メンバーのプロパティへの直接操作はさせないが、その読み込み、変更時に処理を挟むといったことが可能です。
 登場する概念としては基本的には次の3つです。 ``get`` だけを設定すれば取得のみができる読み込み専用とかもできます。
 

docs/_sources/class2.rst.txt

@@ -82,15 +82,15 @@ TypeScriptのビルド設定のポイントは、ブラウザからは使わな
 このキー名が実行ファイル名になります。
 
 .. code-block:: json
-   :caption: package.js
+   :caption: package.json
 
    {
      "bin": {
        "awesome-cmd": "dist/index.js"
      },
      "scripts": {
        "build": "ncc build main.ts --minify --v8-cache --source-map",
-       ”watch": "ncc build main.ts --watch",
+       "watch": "ncc build main.ts --watch",
        "start": "ncc run main.ts",
        "lint": "eslint .",
        "fix": "eslint --fix ."

docs/_sources/clienv.rst.txt

@@ -428,7 +428,7 @@ JSON（JavaScript Object Notation）
 プレーンテキストであり、書きやすく読みやすい（XMLやSOAPと比べて）こともありますし、JavaScriptでネイティブで扱えるため、API通信で使われるデータフォーマットとしてはトップシェアを誇ります。
 
 JSONをパースすると、オブジェクトと配列で階層構造になったデータができあがります。
-通信用のライブラリでは、パース済みの状態でレスポンスが帰ってきたりするため、正確ではないですが、このオブジェクト/配列も便宜上、JSONと呼ぶこともあります。
+通信用のライブラリでは、パース済みの状態でレスポンスが返ってきたりするため、正確ではないですが、このオブジェクト/配列も便宜上、JSONと呼ぶこともあります。
 
 .. code-block:: ts
    :caption: JSONとオブジェクト
@@ -438,7 +438,7 @@ JSONをパースすると、オブジェクトと配列で階層構造になっ
    //   省略可能。通常はnull
    // 3つめは配列やオブジェクトでインデントするときのインデント幅
    //   省略可能。省略すると改行なしの1行で出力される
-   const json = JSON.stringfy(smallAnimal, null, 2);
+   const json = JSON.stringify(smallAnimal, null, 2);
 
    // これは複製されて出てくるので、元のsmallAnimalとは別物
    const smallAnimal2 = JSON.parse(json);
@@ -447,7 +447,7 @@ JSONはJavaScript/TypeScriptのオブジェクト定義よりもルールが厳
 たとえば、キーは必ずダブルクオートでくくらなければなりませんし、配列やオブジェクトの末尾に不要なカンマがあるとエラーになります。
 その場合はJSON.parse()の中で ``SyntaxError`` 例外が発生します。
 特に、JSONを便利だからとマスターデータとして使っていて、非プログラマーの人に、編集してもらったりしたときによく発生します。
-あとは、JSONレスポンスを期待しているウェブサービスの時に、サーバー側でエラーが発生して、 ``Forbidden`` という文字列が帰ってきた場合（403エラー時のボディ）にも発生します。
+あとは、JSONレスポンスを期待しているウェブサービスの時に、サーバー側でエラーが発生して、 ``Forbidden`` という文字列が返ってきた場合（403エラー時のボディ）にも発生します。
 
 .. code-block:: text
    :caption: JSONパースのエラー

docs/_sources/complex.rst.txt

@@ -28,22 +28,22 @@
     - * ``console.log()``
       * ✔
       * ✔
-      * ✔
+      * 標準出力
       * ✔
     - * ``console.info()``
       * ``log()``\ と同じ
       * ✔
-      * ``log()``\ と同じ
+      * 標準出力
       * ✔
     - * ``console.warn()``
       * ✔
       * ✔
-      * ``log()``\ と同じ
+      * 標準エラー出力
       * ✔
     - * ``console.error()``
       * ✔
       * ✔
-      * ``log()``\ と同じ
+      * 標準エラー出力
       * ✔
 
 それぞれ、見た目が大きく異なります。

docs/_sources/console.rst.txt

@@ -46,6 +46,7 @@ Pull Request/Issueをくださった方々
 * `@kesoji <https://github.com/kesoji>`_
 * `@maguroguma <https://github.com/maguroguma>`_
 * `@nukopy <https://github.com/nukopy>`_
+* `@soraiyu <https://github.com/soraiyu>`_
 
 
 フィードバックをくださった方々