ハンドルできないエラー表示

Author: shibukawa

console.rst

@@ -71,6 +71,9 @@
    console.log({name});
    >>> { "name": "wozozo" }
 
+.. note::
+
+   2020年9月リリースのChrome 85から挙動が変わり、コンソールの左にあるログレベルを選択した場合、選択したものだけが表示されます。エラーがあった場合にもerrorを選択しなければ表示されません。Chrome 84以前、および2020年10月現在のSafariでは選択したログレベル以上のものが表示されますので、infoやwarnを選択した場合にもエラーが表示されます。
 
 ``console.table/dir()``
 --------------------------------

docs/_images/consoleerror.png

@@ -71,6 +71,9 @@
    console.log({name});
    >>> { "name": "wozozo" }
 
+.. note::
+
+   2020年9月リリースのChrome 85から挙動が変わり、コンソールの左にあるログレベルを選択した場合、選択したものだけが表示されます。エラーがあった場合にもerrorを選択しなければ表示されません。Chrome 84以前、および2020年10月現在のSafariでは選択したログレベル以上のものが表示されますので、infoやwarnを選択した場合にもエラーが表示されます。
 
 ``console.table/dir()``
 --------------------------------

docs/_images/unhandleexception.png

@@ -360,10 +360,27 @@ JavaScriptの言語の標準に含まれていない、処理系独自の機能
 
 Node.jsで ``async`` / ``await`` やら ``Promise`` を一切使っていないコードの場合、エラーを無視すると、Node.js自体が最後に ``catch`` して、エラー詳細を表示してプログラムが終了します。これはある意味プログラムとしては作戦放棄ではありますが、「プログラムの進行が不可能なので、OSに処理を返す」というリカバリーと言えなくもないでしょう。開発者にスタックトレースを表示して後を託す、というのも立派なリカバリーの戦術の1つです。
 
-ブラウザの場合、誰もキャッチしないと、開発者ツールのコンソールに表示されますが、開発者ツールを開いていない限りエラーを見ることはできません。ユーザーには正常に正常に処理が進んだのか、そうじゃなかったのかわかりませんので、かならずキャッチして画面に表示してあげる必要があるでしょう。
+ブラウザの場合、誰もキャッチしないと、開発者ツールのコンソールに表示されますが、開発者ツールを開いていない限りエラーを見ることはできません。普段から開発者コンソールを開いている人はまれだと思いますし、大部分のユーザーには正常に正常に処理が進んだのか、そうでなかったのかわかりませんので、かならずキャッチして画面に表示してあげる必要があるでしょう。
 
 どちらにしても何かしらのリカバリー処理が必要となりますので、本書ではエラーと例外の区別といったことはしません。
 
+例外処理のハンドリングの漏れ
+-------------------------------------------------------
+
+例外処理が漏れた場合、ロジックが中断します。例えば、サーバー通信結果のJSONのパースでエラーが発生すると、\ ``SyntaxError``\ が発生し、その後の処理が行われなくなります。そのJSONをパースして画面に表示しようとしていた場合は、通信は行われるものの、画面表示が更新されずに何も発生していないように見えます。この場合、開発者ツールをみると、\ ``Uncaught Error``\ が記録されています。なお、将来のNode.jsではエラーコード0以外で、プログラムが終了することになっています。
+
+.. figure:: images/exception/unhandleexception.png
+
+   キャッチしていない例外
+
+一方、やっかいなのが、サーバー通信のエラーです。XMLHttpRequestの場合は\ ``onerror()``\ コールバックでエラーを取得してハンドルする必要がありますが、うまくハンドルしてもコンソールにはエラーが残ります。fetchの場合は\ ``Uncaught (in promise) Error``\ が出ますが、これを適切に処理しても、やはり同様のエラーが出力されます。
+
+これは\ :doc:`console`\ の章で紹介した\ ``console.error()``\ 出力と同じです。うまくハンドリングしても、キャッチしなかったときと同じように赤くエラーが表示されます。XHRを直接使う場合は\ ``onerror``\ が設定されていなくて例外が握り潰されている可能性もゼロではないため注意しなければなりませんが、XHRをラップした\ `axios <https://www.npmjs.com/package/axios>`_\ や、\ ``fetch()``\ を使った場合には\ ``Uncaught Error``\ の文字がなければ実装上は気にする必要はありません。
+
+.. figure:: images/exception/consoleerror.png
+
+   うまく処理できていた場合にも同様に表示されるエラー  
+
 例外処理機構以外で例外を扱う
 --------------------------------------
 

docs/_sources/console.rst.txt

@@ -1,64 +1,48 @@
 関数
 ==================
 
-関数の定義、使い方などもいろいろ変わりました。表現したい機能のために、ややこしい直感的でないコードを書く必要性がかなり減っています。
+関数は一連の処理に名前をつけてまとめたものです。他の人の作ったものを利用するだけでは関数などなくても、必要な処理を必要なだけ列挙すれば期待する結果が得られるコードは理論上は実現可能です。しかし、数万行の一連のコードを扱うのは事実上不可能です。
 
-アロー関数
-----------------------
+そこで理解できる大きさにグループ化して、名前をつけたものが関数です。関数呼び出しはネストできるので、難しいロジックに名前をつけて関数を作り、それらのロジックを並べたちょっと複雑なタスクを人間の仕事に近い高水準な関数にできます。関数は決まった処理を単純に実行するだけではなく、引数をとって、柔軟に動作させることもできますし、返り値を返すこともできます。
 
-JavaScriptでは、やっかいなのが\ ``this``\ です。無名関数をコールバック関数に渡そうとすると、\ ``this``\ がわからなくなってしまう問題があります。
-アロー関数を使うと、その関数が定義された場所の\ ``this``\ の保持までセットで行いますので、無名関数の\ ``this``\ 由来の問題をかなり軽減できます。
-表記も短いため、コードの幅も短くなり、コールバックを多用するところで ``function`` という長いキーワードが頻出するのを減らすことができます。
+どの程度の分量が適切かはロジックの複雑さによります。単純な仕事を延々と行っている（Reactのコンポーネントのレンダリングなど）であれば、数画面分のコードでもなんとかなるでしょうし、帰って細かく分け過ぎてしまうと、全体像の把握が難しくなります。一方で複雑なロジックだと20行でも難しいかもしれません。
 
-.. code-block:: ts
-   :caption: アロー関数
+関数の基本形態は以下の通りです。
 
-   // アロー関数ならその外のthisが維持される。
-   this.button.addEventListener("click", () => {
-     this.smallAnimal.walkTo("タコ公園");
-   });
+* 関数は名前を持ちます。何かに代入したり、引数で渡す場合は省略可能です。
+* 引数はカンマ区切りで名前と型を列挙していきます。引数がない場合は省略可能です。引数の型はジェネリクスを使って省略可能にもできますが、基本的に指定が必要です。
+* 返り値はreturnで返します。返り値がない場合は\ ``return``\ を省略可能です。
+* もしreturn文の数が一つ、または複数個あっても、毎回同じ型を返しているのであればreturnの型は省略可能です。
 
-アロー関数にはいくつかの記法があります。
-引数が1つの場合は引数のカッコを、式の結果をそのまま ``return`` する場合は式のカッコを省略できます。
-ただし、引数の場所に型をつけたい場合は省略するとエラーになります。
+.. code-block::
 
-.. code-block:: ts
-   :caption: アロー関数の表記方法のバリエーション
+   function 関数名(引数リスト): 返り値の型 {
+     return 返り値
+   }
 
-   // 基本形
-   (arg1, arg2) => { /* 式 */ };
+TypeScriptの関数には次のような特徴があります。
 
-   // 引数が1つの場合は引数のカッコを省略できる
-   // ただし型を書くとエラーになる
-   arg1 => { /* 式 */ };
+* 関数そのものを変数に入れて名前をつけられるし、データ構造にも組み込める
+* 他の関数の引数に関数を渡せる
+* 関数の返り値として返すことができる
 
-   // 引数が0の場合はカッコが必要
-   () => { /* 式 */ };
+関数を受け取る関数があると、プログラムの柔軟性が飛躍的に高まります。従来のJavaScriptは関数の使い勝手が極めて便利だった一方で、言語の他の機能は少なく、関数を多用した数々のテクニックが生み出されました。一方で、かなり黒魔術な、一見すると魔法のような使われ方も多数ありました。近年ではECMAScriptやTypeScriptのバージョンアップで数多くの機能が増え、トリッキーな使い方はだいぶ減っていますが、重要なことには変わりません。
 
-   // 式の { } を省略すると、式の結果が return される
-   arg => arg * 2;
+関数にはいくつかのバリエーションがあります。
 
-   // { } をつける場合は、値を返すときは return を書かなければならない
-   arg => {
-     return arg * 2;
-   };
+* 名前がない関数は無名関数、あるいはアノニマス関数と呼びます。変数に代入したり、他の関数の引数に渡す場所で利用されます。とくに、関数の内部で作られる関数を「クロージャ」と呼びます。
+* 何かのオブジェクトに属する関数は「メソッド」と呼びます。
+* 時間のかかる処理を行い、それが終わるまで他のタスクを途中で行える関数を非同期関数と呼びます（\ :doc:`async`\ の章で扱います）
 
-以前は、 ``this`` がなくなってしまうため、 ``bind()`` を使って束縛したり、別の名前（ここでは ``self`` ）に退避する必要がありました。
-そのため、\ ``var self = this;``\ と他の変数に退避するコードがバッドノウハウとして有名でした。
+名前のない無名関数にはアロー演算子を使った省略記法も追加されました。ふつうの\ ``function``\ キーワードを使った宣言とほぼ同等で置き換えできることが多いのですが、動作については少し異なる部分もあります。こちらについても順をおって説明します。
 
-.. code-block:: ts
-   :caption: this消失を避ける古い書き方
+.. code-block::
 
-   // 旧: 無名関数のイベントハンドラではその関数が宣言されたところのthisにアクセスできない
-   var self=this;
-   this.button.addEventListener("click", function() {
-     self.smallAnimal.walkTo("タコ公園");
-   });
+   const f = (引数リスト) => {
+     return 返り値
+   }
 
-   // 旧: bind()で現在のthisに強制束縛
-   this.button.addEventListener("click", (function() {
-     this.smallAnimal.walkTo("タコ公園");
-   }).bind(this));
+関数はTypeScriptの中では、プログラムの構成をつくるための重要な部品です。いたるところで使われます。言語のバージョンアップとともに、定義、使い方などもいろいろ追加されました。表現したい機能のために、ややこしい直感的でないコードを書く必要性がかなり減っています。
 
 関数の引数と返り値の型定義
 ----------------------------------
@@ -292,6 +276,85 @@ setter/getterの宣言も簡単に行えるようになりました。
      }
    };
 
+
+クロージャと\ ``this``\ とアロー関数
+----------------------------------------------
+
+関数の中で関数を定義したときに、関数は自分の定義の外にある変数を参照できます。
+
+.. code-block::
+
+   function a() {
+     const b = 10;
+     function c() {
+       console.log({b}); // bが表示される
+     }
+     c();
+   }
+
+実行時の親子関係ではなく、ソースコードという定義時の親子関係を元にしてスコープが決定されます。これをレキシカルスコープと呼びます。また、このように自分が定義された場所の外の変数を束縛した関数を「クロージャ」と呼びます。TypeScriptでは関数を駆使してロジックを組み上げていきますので、この機能はとても重要です。
+
+以前はJavaのようなオブジェクトを実装するために、関数内部の変数をプライベートメンバー変数のように扱うテクニックがかつてありました。クラスの機能が公式のサポートされたので、今では重要度は低くなっているし、そもそも隠す必要性もあまりなので使うことはありませんが、頭の体操にはなるので、興味がある方は調べてみてください。
+
+レキシカルスコープは今では多くの言語が持っている機能なので、わざわざ名前を呼ぶこともありませんが、TypeScriptでは、知らないと落とし穴に落ちる可能性のあるやや重要な機能となります。前項でオブジェクトの中の関数定義を紹介しました。ここでは、予め定義された変数のように\ ``this``\ を使っています。しかしこれは変数ではなく、特別な識別子です。レキシカルスコープで束縛できません。クロージャかつ、\ ``this``\ への束縛ができる新文法としてアロー関数が追加されました。
+
+アロー関数
+~~~~~~~~~~~~~~~~~~~~~~~
+
+JavaScriptでは、やっかいなのが\ ``this``\ です。無名関数をコールバック関数に渡そうとすると、\ ``this``\ がわからなくなってしまう問題があります。
+アロー関数を使うと、その関数が定義された場所の\ ``this``\ の保持までセットで行いますので、無名関数の\ ``this``\ 由来の問題をかなり軽減できます。
+表記も短いため、コードの幅も短くなり、コールバックを多用するところで ``function`` という長いキーワードが頻出するのを減らすことができます。
+
+.. code-block:: ts
+   :caption: アロー関数
+
+   // アロー関数ならその外のthisが維持される。
+   this.button.addEventListener("click", () => {
+     this.smallAnimal.walkTo("タコ公園");
+   });
+
+アロー関数にはいくつかの記法があります。
+引数が1つの場合は引数のカッコを、式の結果をそのまま ``return`` する場合は式のカッコを省略できます。
+ただし、引数の場所に型をつけたい場合は省略するとエラーになります。
+
+.. code-block:: ts
+   :caption: アロー関数の表記方法のバリエーション
+
+   // 基本形
+   (arg1, arg2) => { /* 式 */ };
+
+   // 引数が1つの場合は引数のカッコを省略できる
+   // ただし型を書くとエラーになる
+   arg1 => { /* 式 */ };
+
+   // 引数が0の場合はカッコが必要
+   () => { /* 式 */ };
+
+   // 式の { } を省略すると、式の結果が return される
+   arg => arg * 2;
+
+   // { } をつける場合は、値を返すときは return を書かなければならない
+   arg => {
+     return arg * 2;
+   };
+
+以前は、 ``this`` がなくなってしまうため、 ``bind()`` を使って束縛したり、別の名前（ここでは ``self`` ）に退避する必要がありました。
+そのため、\ ``var self = this;``\ と他の変数に退避するコードがバッドノウハウとして有名でした。
+
+.. code-block:: ts
+   :caption: this消失を避ける古い書き方
+
+   // 旧: 無名関数のイベントハンドラではその関数が宣言されたところのthisにアクセスできない
+   var self=this;
+   this.button.addEventListener("click", function() {
+     self.smallAnimal.walkTo("タコ公園");
+   });
+
+   // 旧: bind()で現在のthisに強制束縛
+   this.button.addEventListener("click", (function() {
+     this.smallAnimal.walkTo("タコ公園");
+   }).bind(this));
+
 ``this``\ を操作するコードは書かない（1）
 --------------------------------------------------
 
@@ -370,11 +433,11 @@ setter/getterの宣言も簡単に行えるようになりました。
 
 関数についてさまざまなことを紹介してきました。
 
-* アロー関数
 * 関数の引数と返り値の型定義
 * 関数を扱う変数の型定義
 * デフォルト引数
 * 関数を含むオブジェクトの定義方法
+* クロージャと\ ``this``\ とアロー関数
 * thisを操作するコードは書かない（1）
 * 即時実行関数はもう使わない