diff --git a/async.rst b/async.rst index 0a93911..f7258ae 100644 --- a/async.rst +++ b/async.rst @@ -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 diff --git a/class.rst b/class.rst index 174d98f..1e0456d 100644 --- a/class.rst +++ b/class.rst @@ -444,7 +444,7 @@ JavaScriptではまだStage 3の機能ですが、TypeScriptですでに使え これらの機能は、言語の文化とか、他の代替文法の有無とかで使われ方が大きく変わってきます。 TypeScript界隈では、Angularなどのフレームワークではインタフェースが多用されています。 -ユーザーが実装するコンポーネントなどのクラスにおいて、Anguarが提供するサービスを受けるためのメソッドの形式が決まっていて、実装部分の中身をライブラリユーザーが実装するといった使われ方をしています。 +ユーザーが実装するコンポーネントなどのクラスにおいて、Angularが提供するサービスを受けるためのメソッドの形式が決まっていて、実装部分の中身をライブラリユーザーが実装するといった使われ方をしています。 ``OnInit`` をimplementsすると、初期化時に呼び出されるといった具合です。 継承が必要となるのは実装も提供する必要がある場合ですが、コードが追いかけにくくなるとか、拡張性のあるクラス設計が難しいとかもあり、引き継ぐべきメソッドが大量にあるクラス以外で積極的に使うケースはあまり多くないかもしれません。 diff --git a/complex.rst b/complex.rst index 1d55ff9..16d4d2a 100644 --- a/complex.rst +++ b/complex.rst @@ -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パースのエラー diff --git a/exception.rst b/exception.rst index 8f8ac2e..534b3eb 100644 --- a/exception.rst +++ b/exception.rst @@ -126,7 +126,7 @@ JavaScriptの言語の標準に含まれていない、処理系独自の機能 } } -よくやりがちなのが、 ``ok`` の確認をしない（ステータスコードが200以外でJSON以外が帰ってきているときに）JSONをパースしようとしてエラーになることです。 +よくやりがちなのが、 ``ok`` の確認をしない（ステータスコードが200以外でJSON以外が返ってきているときに）JSONをパースしようとしてエラーになることです。 ``404 Not Found`` のときは、ボディが ``Not Found`` というテキストになるので、未知のトークン ``N`` というエラーになります。あとは403 Forbiddenのときには、未知のトークン ``F`` のエラーが発生します。 .. code-block:: text @@ -302,7 +302,7 @@ JavaScriptの言語の標準に含まれていない、処理系独自の機能 console.log(e); } -エラーを発生させるには、　``Promise`` 作成時のコールバック関数の2つめの引数の ``reject()`` コールバック関数に ``Error`` オブジェクトを渡しても良いですし、 +エラーを発生させるには、 ``Promise`` 作成時のコールバック関数の2つめの引数の ``reject()`` コールバック関数に ``Error`` オブジェクトを渡しても良いですし、 ``then()`` 節の中で例外をスローしても発生させることができます。 .. code-block:: ts @@ -345,7 +345,7 @@ JavaScriptの言語の標準に含まれていない、処理系独自の機能 * 原因: ネットワークエラー * リカバリー: リトライ -* サーバーにリクエストを送ってみたら400エラーが帰ってきた +* サーバーにリクエストを送ってみたら400エラーが返ってきた * 原因: リクエストが不正 * リカバリー(開発時): 本来のクライアントのロジックであればバリデーションで弾いていないといけないのでこれは潰さないといけない実装バグ。とりあえずスタックトレースとかありったけの情報をconsole.logに出しておく。 diff --git a/function.rst b/function.rst index 13c613d..6954f03 100644 --- a/function.rst +++ b/function.rst @@ -5,7 +5,7 @@ そこで理解できる大きさにグループ化して、名前をつけたものが関数です。関数呼び出しはネストできるので、難しいロジックに名前をつけて関数を作り、それらのロジックを並べたちょっと複雑なタスクを人間の仕事に近い高水準な関数にできます。関数は決まった処理を単純に実行するだけではなく、引数をとって、柔軟に動作させることもできますし、返り値を返すこともできます。 -どの程度の分量が適切かはロジックの複雑さによります。単純な仕事を延々と行っている（Reactのコンポーネントのレンダリングなど）であれば、数画面分のコードでもなんとかなるでしょうし、帰って細かく分け過ぎてしまうと、全体像の把握が難しくなります。一方で複雑なロジックだと20行でも難しいかもしれません。 +どの程度の分量が適切かはロジックの複雑さによります。単純な仕事を延々と行っている（Reactのコンポーネントのレンダリングなど）であれば、数画面分のコードでもなんとかなるでしょうし、かえって細かく分け過ぎてしまうと、全体像の把握が難しくなります。一方で複雑なロジックだと20行でも難しいかもしれません。 関数の基本形態は以下の通りです。 diff --git a/functional.rst b/functional.rst index 89e6737..ac80caf 100644 --- a/functional.rst +++ b/functional.rst @@ -40,7 +40,7 @@ JavaScriptで実現できる関数型プログラミングのテクニックは * ``map()``: 元のデータの各要素に何かしらの加工を行った新しい配列を作る * ``forEach()``: 元のデータの各要素に対するループを行う -* ``fileter``: 元のデータの書く要素を評価し、選択されたものだけを保持する新しい配列を作る +* ``filter``: 元のデータの書く要素を評価し、選択されたものだけを保持する新しい配列を作る これは配列の例ですが、複合型の場合に値そのものを書き換えるのではなく、書き換えた別のバージョンを作っていくのがポイントです。 オブジェクト指向はデータと操作が結びついていますが、関数型はデータとそれに対する操作を切り離すと共に、データを複製するという異なったアプローチを取ります。 diff --git a/libenv.rst b/libenv.rst index fe34952..0cfda65 100644 --- a/libenv.rst +++ b/libenv.rst @@ -122,7 +122,7 @@ package.jsonで手を加えるべきは次のところぐらいですね。 "module": "dist-esm/index.js", "types": "dist-cjs/index.d.ts", "scripts": { - "build": "npm-run-all -s build:cjs buid:esm", + "build": "npm-run-all -s build:cjs build:esm", "build:cjs": "tsc --project . --module commonjs --outDir ./dist-cjs", "build:esm": "tsc --project . --module es2015 --outDir ./dist-esm" } @@ -158,7 +158,7 @@ package.jsonで手を加えるべきは次のところぐらいですね。 * TypeScriptでライブラリのコードを記述する * 使う人は普段通りrequire/importすれば、特別なツールやライブラリの設定をしなくても適切なファイルがロードされる。 -* 使う人は、別途型定義ファイルを自作したり、別パッケージをインストールしなくても、普段通りrequire/importするだけでTypeScriptの処理系やVisual Stuido Codeが型情報を認識する +* 使う人は、別途型定義ファイルを自作したり、別パッケージをインストールしなくても、普段通りrequire/importするだけでTypeScriptの処理系やVisual Studio Codeが型情報を認識する * Tree Shakingの恩恵も受けられる ``package.json`` の ``scripts`` のところに、開発に必要なタスクがコマンドとして定義されています。npmコマンドを使って行うことができます。 diff --git a/module.rst b/module.rst index d4a2879..9ed7cf1 100644 --- a/module.rst +++ b/module.rst @@ -223,7 +223,7 @@ Node.js向けに出力する場合は、 ``import`` と ``export`` を、CommonJ } // リネームしてエクスポート - export { favorite as favariteFood }; + export { favorite as favoriteFood }; 複数のファイル内容をまとめてエクスポート ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/otherbuiltinobjects.rst b/otherbuiltinobjects.rst index 338fbda..cdcf886 100644 --- a/otherbuiltinobjects.rst +++ b/otherbuiltinobjects.rst @@ -61,7 +61,7 @@ TypeScriptの\ ``Date``\ 型は数字に毛の生えたようなものですの // 現在時刻でDateのインスタンス作成 const now = new Date(); - // newを付けないと文字列として帰ってくる + // newを付けないと文字列として返ってくる const nowStr = Date(); // 'Sun Sep 06 2020 22:36:08 GMT+0900 (Japan Standard Time)' @@ -161,7 +161,7 @@ UTCの時刻から生成したい場合には、\ ``Date.UTC()``\ 関数を使 TypeScript（含むJavaScript同士） ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -TypeScript（含むJavaScript）であれば、\ ``toISOString()``\ でも、\ ``toString()``\ でも、どちらの方式で出力した文字列であってもパースできます。\ ``new Date()``\ に渡すと\ ``Date``\ のインスタンスが、\ ``Date.parse()``\ に渡すと、エポック時刻が帰ってきます。 +TypeScript（含むJavaScript）であれば、\ ``toISOString()``\ でも、\ ``toString()``\ でも、どちらの方式で出力した文字列であってもパースできます。\ ``new Date()``\ に渡すと\ ``Date``\ のインスタンスが、\ ``Date.parse()``\ に渡すと、エポック時刻が返ってきます。 .. code-block:: ts @@ -353,7 +353,7 @@ set系メソッドは値を変更してしまいますし、メソッドが返 2つの日時が同じ日かどうか確認したいことがあります。たとえば、チケットの日時が今日かどうか、といった比較です。JavaScriptが提供しているのは、日時がセットになった\ ``Date``\ 型のみです。他の言語だと、日付だけを扱うクラス、時間だけを扱うクラス、日時を扱うクラスを別に用意しているものもありますが、JavaScriptは1つだけです。日付だけを扱いたいケースでも\ ``Date``\ 型を使う必要があります。 -``Date``\ 型で日付だけを扱う方法で簡単なのは時間部分をすべて0に正規化してしまう方法です。\ ``setHours()``\ に0を4つ設定すると、時、分、秒、ミリ秒のすべてがゼロになります。また、この関数を実行するとエポック時刻が帰ってくるので、これを比較するのがもっとも簡単でしょう。ただし、このメソッドはその日付を変更してしまうため、変更したくない場合は新しいインスタンスを作ってからこのメソッドを呼ぶと良いでしょう。 +``Date``\ 型で日付だけを扱う方法で簡単なのは時間部分をすべて0に正規化してしまう方法です。\ ``setHours()``\ に0を4つ設定すると、時、分、秒、ミリ秒のすべてがゼロになります。また、この関数を実行するとエポック時刻が返ってくるので、これを比較するのがもっとも簡単でしょう。ただし、このメソッドはその日付を変更してしまうため、変更したくない場合は新しいインスタンスを作ってからこのメソッドを呼ぶと良いでしょう。 この0時は現在のタイムゾーンでの日時になります。もし、UTCで計算したい場合は、\ ``setUTCHours()``\ を使います。 @@ -572,7 +572,7 @@ TypeScriptの環境設定ではファイルの拡張子のルールを設定す ``JSON`` ======================== -JavaScriptで外部のAPIのやりとりなどで一番使うのはこのJSONでしょう。サーバーから帰ってくるJSON形式の文字列を、プログラム中で扱いやすいJavaScriptやTypeScriptのプリミティブなデータ型などに変換します。 +JavaScriptで外部のAPIのやりとりなどで一番使うのはこのJSONでしょう。サーバーから返ってくるJSON形式の文字列を、プログラム中で扱いやすいJavaScriptやTypeScriptのプリミティブなデータ型などに変換します。 基本は\ ``parse()``\ と\ ``stringify()``\ を呼ぶだけですので使い方に迷うことはないでしょう。 @@ -615,7 +615,7 @@ JSONのパース // 本当はres.okで通信が成功したかチェックが必要！ person = { name: "Michael Palin" }; -HTTPのAPIの場合、エラーがあると、\ ``Forbidden``\ などのステータスコードの文字列がレスポンスとして帰ってくることがあり、これをJSONにパースしようとすると次のような例外が発生します。 +HTTPのAPIの場合、エラーがあると、\ ``Forbidden``\ などのステータスコードの文字列がレスポンスとして返ってくることがあり、これをJSONにパースしようとすると次のような例外が発生します。 .. code-block:: text diff --git a/primitive.rst b/primitive.rst index 4545aca..c517e31 100644 --- a/primitive.rst +++ b/primitive.rst @@ -408,7 +408,7 @@ TypeScriptで数値計算を行う場合、 ``Math`` オブジェクトの関数 const year = 2019; console.log((2019).toString(2)); // numberはtoStringの引数で2進数-36進数にできる console.log((true).toString()); // boolean型を'true'/'false'の文字列に変換 - console.log(Stirng(false)); // こちらでも可 + console.log(String(false)); // こちらでも可 JavaScriptはUTF-16という文字コードを採用しています。Javaと同じです。絵文字など、一部の文字列は1文字分のデータでは再現できずに、2文字使って1文字を表現することがあります。これをサロゲートペアと呼びます。範囲アクセスなどで文字列の一部を扱おうとすると、絵文字の一部だけを拾ってしまう可能性がある点には要注意です。何かしらの文字列のロジックのテストをする場合には、絵文字も入れるようにすると良いでしょう。 @@ -548,7 +548,7 @@ printfのような数値の変換などのフォーマットはなく、あく JavaScript/TypeScriptでは、 ``undefined`` と ``null`` があります。他の言語では ``null`` （もしくは ``None`` 、 ``nil`` と呼ぶことも）だけの場合がほとんどですが、JavaScript/TypeScriptでは2種類登場します。 -このうち、 ``undefined`` は未定義やまだ値が代入されていない変数を参照したり、オブジェクトの未定義の属性に触ると帰ってくる値です。 +このうち、 ``undefined`` は未定義やまだ値が代入されていない変数を参照したり、オブジェクトの未定義の属性に触ると返ってくる値です。 TypeScriptはクラスなどで型定義を行い、コーディングがしやすくなるとよく宣伝されますが、「 ``undefined`` に遭遇するとわかっているコードを事前にチェックしてくれる」ということがその本質だと思われます。 .. code-block:: ts @@ -574,7 +574,7 @@ TypeScriptでは「これは無効な値をとる可能性がありますよ」 .. code-block:: ts // stringかnullを入れられるという宣言をしてnullを入れる - let favaoriteGame: string | null = null; + let favoriteGame: string | null = null; ``undefined`` と ``null`` は別のものなので、コンパイラオプションで ``compilerOptions.strict: true`` もしくは、 ``compilerOptions.strictNullChecks: true`` の場合は、 ``null`` 型の変数に ``undefined`` を入れようとしたり、その逆をするとエラーになります。 これらのオプションを両方とも ``false`` にすれば、エラーにはならなくなりますが、副作用が大きいため、これらのオプションは有効にして、普段から正しくコードを書く方が健全です。 diff --git a/react.rst b/react.rst index 5c30a94..b113145 100644 --- a/react.rst +++ b/react.rst @@ -113,7 +113,7 @@ ESLintはJSX関連の設定や、.tsxや.jsxのコードがあったらJSXとし "no-console": 0, "prettier/prettier": "error", "@typescript-eslint/no-var-requires": false, - "@typescript-eslint/indent": "ingore", + "@typescript-eslint/indent": "ignore", "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx", ".js", ".jsx"] }] @@ -186,7 +186,7 @@ Next.jsも同じようなことをする必要がありますが、サーバー Material UI以外の選択肢としては、React専用でないWeb Components製のUI部品もあります。 -* Material Web Compoennts: https://github.com/material-components/material-components-web-components +* Material Web Components: https://github.com/material-components/material-components-web-components * Ionic: https://ionicframework.com/ * Fast: https://github.com/microsoft/fast @@ -377,7 +377,7 @@ Reduxはストアと呼ばれる中央のデータ庫を持ちます。データ このreducerをトリガーするのに必要なのが、アクションと呼ばれるデータでした。これを\ ``dispatch()``\ という関数に投げ込むことでreducerが起動され、そのアクションに応じてデータを書き換えていました。 -しかし、まずJavaScriptの文化で、アクションクリエーターというアクションを作る関数を作っていました。この場合、型をつけるにはreducerの引数にはすべてのアクションの型（アクションクリエーターの返り値の型）の合併型を作る必要がありました。この「すべての」というのが大きなアプリケーションになると依存関係が循環しないように気をつけたり、漏れなく型を合成してあげないといけなかったりと、型のために人間が行う作業が膨大でした。多くの人が「Reduxに型をつけるには？」という文章を書いたりしましたが、その後、Reduxが公式で出してきた解答がRedux-Toookitでした。 +しかし、まずJavaScriptの文化で、アクションクリエーターというアクションを作る関数を作っていました。この場合、型をつけるにはreducerの引数にはすべてのアクションの型（アクションクリエーターの返り値の型）の合併型を作る必要がありました。この「すべての」というのが大きなアプリケーションになると依存関係が循環しないように気をつけたり、漏れなく型を合成してあげないといけなかったりと、型のために人間が行う作業が膨大でした。多くの人が「Reduxに型をつけるには？」という文章を書いたりしましたが、その後、Reduxが公式で出してきた解答がRedux-Toolkitでした。 Redux-Toolkitは次のような実装になります。スライスというステートとreducer、アクションクリエーターがセットになったオブジェクトを作成します。Reducerの引数のstateは\ ``Readonly<>``\ をつけておくと、デバッグで問題の追跡が難しい不測の事態が発生するのを未然に防げます。 @@ -573,7 +573,7 @@ Redux-Toolkitのreducersにはそのままでは非同期処理が書けませ initialState, reducers: {}, extraReducers: builder => { - builder.addCase(fetchLastCounter.fullfilled, + builder.addCase(fetchLastCounter.fulfilled, (state, action) => { return { ...state, @@ -775,7 +775,7 @@ Reactは歴史のあるコンポーネントで、途中でいくつも機能追 label: "押して下さい" }; -一番短くなってミスがおきにくくなったのは\ ``state``\ 周りです。\ ``useState()``\ に初期値を渡すと、現在の値を保持する変数と、変更する関数がペアで帰ってきます。初期値から型推論で設定されるため、Stateの型定義を外で行う必要はなくなります。\ ``setState()``\ で変更したものが直後に変更されているはず、と誤解されることもなくなりました。もう一度レンダリングが実行されないと変数の値が変更されないのは\ ``useState()``\ の宣言を見ればあきらかです。 +一番短くなってミスがおきにくくなったのは\ ``state``\ 周りです。\ ``useState()``\ に初期値を渡すと、現在の値を保持する変数と、変更する関数がペアで返ってきます。初期値から型推論で設定されるため、Stateの型定義を外で行う必要はなくなります。\ ``setState()``\ で変更したものが直後に変更されているはず、と誤解されることもなくなりました。もう一度レンダリングが実行されないと変数の値が変更されないのは\ ``useState()``\ の宣言を見ればあきらかです。 イベントハンドラの\ ``this``\ の束縛もなくなります。もはや単なる関数であって、オブジェクトではないため、\ ``this``\ を扱う必要もなくなります。横方向に圧縮されたのは\ ``this.``\ がたくさん省略されたからです。 @@ -845,7 +845,7 @@ Hooksに対応したReact-Routerのv5移行であればコンポーネントの } // PropTypesへの追加が必要 - MyComponent.porpTypes = { + MyComponent.propTypes = { counter: PropTypes.object, onClick: PropTypes.func, dispatch: PropTypes.func, diff --git a/syntax.rst b/syntax.rst index 6177fa5..d246ff4 100644 --- a/syntax.rst +++ b/syntax.rst @@ -120,7 +120,7 @@ JavaScript時代との違いは、 ``let`` で定義された変数の範囲で * ``map.values()`` （ ``Map`` の値が返ってくる） * ``map.entries()`` （ ``Map`` のキーと値が返ってくる） -キーと値の両方が帰ってくるメソッドは、分割代入を用いて変数に入れます。 +キーと値の両方が返ってくるメソッドは、分割代入を用いて変数に入れます。 .. code-block:: ts :caption: for of @@ -225,4 +225,4 @@ ES2018で導入されました。ループごとに非同期の待ち処理を 基本的な部分は他の言語、特にC++やJavaといった傾向の言語を使っている人からすればあまり大きな変化に感じないでしょう。 ``for`` ループだけはいくつか拡張がされたりしていましたので紹介しました。 -また、今時のウェブフレームワークで使う、1行のコード内で使える条件分岐とループも紹介しました。 \ No newline at end of file +また、今時のウェブフレームワークで使う、1行のコード内で使える条件分岐とループも紹介しました。