その他のクラスの追加。テーマ変更

Author: shibukawa

.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint",
+		"streetsidesoftware.code-spell-checker"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+		
+	]
+}

conf.py

@@ -15,19 +15,19 @@
 # import os
 # import sys
 # sys.path.insert(0, os.path.abspath('.'))
-
+import sphinx_rtd_theme
 
 # -- Project information -----------------------------------------------------
 
 project = '仕事ですぐに使えるTypeScript'
-copyright = '2019, Future Corporation'
+copyright = '2019-2020, Future Corporation'
 author = 'Future Corporation'
 
 import os
 import sys
 
 sys.path.insert(0, os.path.abspath('ext'))
-extensions = [ 'pageinfo', 'sphinx.ext.todo', 'sphinx.ext.githubpages' ]
+extensions = [ 'pageinfo', 'sphinx.ext.todo', 'sphinx.ext.githubpages', 'sphinx_rtd_theme' ]
 # The short X.Y version
 version = ''
 # The full version, including alpha/beta/rc tags
@@ -78,7 +78,7 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = 'alabaster'
+html_theme = 'sphinx_rtd_theme'
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the

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: e2e8d675c98311c546b369623bda2fda
+config: 6bd1f51aa47eab538528b72d4f0019d8
 tags: 645f666f9bcd5a90fca523b33c5a78b7

docs/_images/add-to-recommendation.png

@@ -143,9 +143,28 @@ ESLintを起動するタスクを ``package.json`` に追加しましょう。
 .. code-block:: json
    :caption: package.json
 
-   "scripts": {
-     "lint": "eslint .",
-     "fix": "eslint --fix ."
+   {
+     "scripts": {
+       "lint": "eslint .",
+       "fix": "eslint --fix ."
+     }
+   }
+
+Reactを使っていると、JSX内部でコンポーネントを利用していても、未使用変数として扱われてしまうことがあります。その場合は\ ``eslint-plugin-react``\ も追加でインストールして設定を追加しましょう。Reactの場合、返り値の型を明示的に指定しないと警告が出るモードはあまりうれしくないので、この警告は出ないようにしましょう。
+
+.. code-block:: json
+   :caption: .eslintrc
+
+   {
+     "plugins": [
+       "react"
+     ],
+     "extends": [
+       "plugin:react/recommended"
+     ],
+     "rules": {
+       "@typescript-eslint/explicit-module-boundary-types": 0
+     }
    }
 
 テスト
@@ -187,18 +206,25 @@ scripts/testと、jestの設定を追加します。古い資料だと、transfo
 Visual Studio Codeの設定
 --------------------------------
 
-Visual Stuido Codeでフォルダを開いたときに、eslintの拡張と、editorconfigの拡張がインストールされるようにします。
+Visual Studio Codeでフォルダを開いたときに、eslintの拡張と、editorconfigの拡張がインストールされるようにします。\ ``.vscode``\ フォルダにファイルを作ることで、プロジェクトのソースコードと一緒に、プロジェクトの共有設定を共有できます。同じ拡張機能を入れてもらって、コードチェックなどのクオリティを統一し、コードインテグレーション時に無駄な調整をしなくて済むようにできます。ここではついでにコードのスペルチェックの拡張機能も入れておきます。
 
 .. code-block:: json
    :caption: .vscode/extensions.json
 
    {
      "recommendations": [
        "dbaeumer.vscode-eslint",
-       "EditorConfig.editorconfig"
+       "EditorConfig.editorconfig",
+       "streetsidesoftware.code-spell-checker"
      ]
    }
 
+この設定はこのJSONを書いても良いですし、拡張機能のページで該当する拡張機能を開いてから、コードパレットで\ ``Extensions: Add to Recommended Extensions (Workspace Folder)``\ を選択すると追加されます。
+
+.. figure:: images/add-to-recommendation.png
+
+   拡張機能をプロジェクト推奨に設定
+
 ファイル保存時にeslint --fixが自動実行されるように設定しておきましょう。これでVisual Studio Codeを使う限り、誰がプロジェクトを開いてもコードスタイルが保たれます。Visual Studio Codeのeditor.codeActionsOnSaveは、files.autoSaveがafterDelayのときは効かないので、offに設定しておきます。
 
 .. code-block:: json
@@ -211,6 +237,8 @@ Visual Stuido Codeでフォルダを開いたときに、eslintの拡張と、ed
      "files.autoSave": "off"
    }
 
+ファイルを保存してみて修正されるか試してみましょう。もしされない場合は一度コマンドラインから実行してみてください。拡張で設定されているパッケージが足りない場合などはエラーが発生します。
+
 .. todo:: tsdocとかドキュメントツールを紹介
 
 .. todo:: eslintやテストの書き方の紹介

docs/_sources/baseenv.rst.txt

@@ -1,8 +1,23 @@
 クラス
 ================
 
-昔は関数と\ ``prototype``\ という属性をいじくり回してクラスを表現していました。正確には処理系的にはクラスではないのですが、コードのユーザー視点では他の言語のクラスと同等なのでクラスとしてしまいます。
-なお、Javaなどのような書き味を求めて、この仕組みをラップした自前の\ ``extends``\ 関数みたいなのを作ってクラスっぽいことを表現しようという一派も一時期いましたが、今のJavaScriptとTypeScriptでは、より良い書き方が提供されています。
+JavaScriptとJava風オブジェクト指向文法の歴史
+--------------------------------------------------------
+
+クラスはプログラミング言語によってはとても重要な位置付けにあります。たとえば、Javaはすべての要素がクラスに属し、そのクラスの組み合わせでプログラムを作成していきます。クラスの利用方法を学び、クラスの実装方法を学び、よりよいクラスの設計方法を知ることがJavaにおいてはとても重要です。また、20年ほど前はJavaはプログラミングのパラダイムにおいては最先端であり、クラスを元にした設計手法、デザインパターン、アジャイルソフトウェア開発のプログラミング系のプラクティス（テスト駆動開発やリファクタリング）を通じて、多くのプログラミング言語にJava流の設計が輸出されていきました。クラスを使いこなすことで、次のことが実現可能になるとさかんに喧伝されていました。
+
+* 大規模なコード
+* 再利用性の高いコード
+
+例えばPythonやRubyなどの今は古参扱いのプログラミング言語の多くも、当時は機能拡張を積極的に行っておりJavaやその周辺のベストプラクティスに影響を受けたと思われるライブラリなどがいくつか組み込まれています。クラスを持ってその先端の設計技法が利用できることは、当時の一級言語のステータスでした。
+
+JavaScriptはクラスをダイレクトに表現する文法はなかったものの、昔は関数と\ ``prototype``\ という属性をいじくり回してクラスを表現していました。正確には処理系的にはクラスではないのですが、コードのユーザー視点では他の言語のクラスと同等なのでここではこの当時の記法で作るものもクラスとして扱います。とはいえ、それでもJavaScriptはクラスがないことを理由に「大規模開発に向かないおもちゃ言語」と言われることもありました。
+
+その欠点をカバーしてJavaなどのような書き味を求めて、ひと昔前のJavaScript界隈では、この\ ``prototype``\ の仕組みをラップした自前の\ ``extends``\ 関数みたいなのを作ってクラスっぽいことを表現しようという一派も一時期いました。また、5年ほど前までは、クラスを使うためにCoffeeScriptに救いを求める人も多数いました。今のJavaScriptとTypeScriptでは、言語の標準機能として良い書き方が提供されています。
+
+クラスをようやくサポートしたものの、近年ではクラスを使わない書き方、関数型言語のエッセンスを取り入れた書き方も流行ってきています。大規模といえばオブジェクト指向でクラス、という短絡的な言い方をする人はもはや絶滅危惧種です。
+
+しかし、大規模なアプリケーションの部品としてではなく、末端の部品としては便利です。みなさんも、文字列や配列などの組み込み型を通じて、自然とオブジェクト指向には触れています。あのような部品を自分で作るための手段です。関数型のスタイルとも組み合わせて利用できますし、書き方を学んでおきましょう。
 
 用語の整理
 ---------------------

docs/_sources/class.rst.txt

@@ -469,7 +469,7 @@ ES2020で追加された機能として、オプショナルチェイニング
 
 この場合、深い階層にアクセスする場合は、一つずつ、\ ``null``\ や\ ``undefined``\ になりえるところでチェックを行っていました。\ ``&&``\ 演算子が、一つでも途中にfalseyな値があると評価を止める、そうでなければ最後の値を返すという挙動を持っているため、それを活用したコーディングが行われていました。
 
-オプショナルチェイニングは同じことを実現する演算子として\ ``.?``\ が導入されました。途中でnullish（\ ``null``\ か\ ``undefined``\ ）な値があると、式全体の評価結果が\ ``undefined``\ になります。
+オプショナルチェイニングは同じことを実現する演算子として\ ``?.``\ が導入されました。途中でnullish（\ ``null``\ か\ ``undefined``\ ）な値があると、式全体の評価結果が\ ``undefined``\ になります。
 
 .. code-block:: ts
 

docs/_sources/complex.rst.txt

@@ -35,6 +35,7 @@
    syntax
    typing
    function
+   otherbuiltinobjects
    class
    async
    exception