IT ニュース＆コラム    2020/12/21   通巻821号  技術版

                             ソフトウェアデザイン館  Sage Plaisir 21

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣


■■　リセット状態の Windows から Jest + TypeScript + React + Visual Studio Code を確実に構築する手順　■■


https://qiita.com/Takakiri/items/f9f2c20333a04aeeb580
では画像付きで見ることができます。


## 今回構築する開発環境

今回は React というフレームワークを使った Web アプリケーションのフロントエンドの開発環境を構築します。

React を選んだ理由は、React をベースとした UI 部品が多く提供されてきている傾向が見られるからです。
たとえば、aws の Amplify が提供する認証関係の UI は、使う分には React に限らないのですが、
React だけがカスタマイズできるようになっています。

| 種類                  | 構成物                 | バージョン |
| --------------------- | ---------------------- | ---------- |
| 開発PCのOS            | Windows 10             | 20H2       |
| フレームワーク        | React                  | 17.0.1     |
| 各種ライブラリ        | Node.js                | 14.15.3    |
| シェル                | Git (bash)             | 2.29.2.3   |
| 言語                  | TypeScript             | 4.1.3      |
| 開発環境              | Visual Studio Code     | 1.52.1     |
| テスト フレームワーク | ts-jest                | 26.4.4     |
| サーバー              | 不使用（ローカル開発） |            |

本手順ではサーバーやクラウドを特定していません。 React などの多くの SPA のフレームワークは、
ビルドするとできるフォルダーを特定のフォルダーに配置するだけでデプロイできるので
今回の記事では割愛させていただきます。

上記のすべてのバージョンは、執筆時点の最新版です。
本手順は、具体的な手順で書かれているために前提知識をほとんど必要とせず、
リセット状態からテストしているため確実に構築できるように書かれています。
ただし、この記事が古くなったら失敗するかもしれません。ご了承ください。

テスト プログラムを自動的に実施できるように Jest の実行環境も構築します。 
フロントエンドのテストは cypress などの E2E テストを実施する方がバグが残る可能性が
低いのですが、今回の構築手順と独立しているので、また別の機会に説明したいと思います。
ただ、フロントエンドでもロジックに関するコードに関しては Jest を使ったほうが
開発効率は良いです。
Jest は必須ではありませんが、はじめから入れておいた方が後から追加するより簡単に
追加できます。


## 手順

手順は多いですが、とくに前提とする知識や考慮すべきことはないので、そのまま進めていくことができます。

自然言語では余計な情報が多すぎると思う方は、
[GitHub にある手順メモ.yaml](https://github.com/Takakiriy/Trials/blob/master/try_Jest_TypeScript_React_VisualStudioCode/steps.yaml)
を参照してください。


### Node.js をインストールします

React が使う Node.js をインストールします。

[https://nodejs.org/ja/download/](https://nodejs.org/ja/download/)
をブラウザーで開き、Windows Installer (.msi) >> 64-bit をダウンロードして、実行します。
ダウロードするファイルの名前は node-v14.15.3-x64.exe のようになっています。

![Node.js インストール ページ](files/020_Node_js.png)

インストール オプションはすべてデフォルトで構いません。


### Git for Windows をインストールします

Git bash というシェルを使うためにインストールします。

[https://git-scm.com/](https://git-scm.com/)
をブラウザーで開き、Downloads >> Windows をダウンロードして、実行します。
ダウロードするファイルの名前は Git-2.29.2.3-64-bit.exe のようになっています。

![Git インストール ページ](files/030_Git.png)

インストール オプションはすべてデフォルトでも構いませんが、
個人的には改行コードの種類の警告がうるさくならないように
Configuring the line ending conversions オプションを
Checkout as-is, commit as-is
に設定しています。


### Visual Studio Code をインストールします

[https://code.visualstudio.com/](https://code.visualstudio.com/)
をブラウザーで開き、ダウンロードして、実行します。

![Visual Studio Code インストール ページ](files/010_VSCode.png)

インストール オプションはすべてデフォルトで構いません。

インストールが完了したら、Visual Studio Code を起動して
タスクバーにピン止めすることをオススメします。


### 拡張機能をインストールします

Visuatl Studio Code の拡張機能を次の手順でインストールします。

1. Visuatl Studio Code を開きます（タスクバーにピン留めしたアイコンや、スタート メニューから開きます）
2. Visuatl Studio Code の拡張機能のボタンを押し、検索ボックスをクリックします
    ![Visuatl Studio Code の拡張機能](files/060_VSCode_extension.png)
3. 検索ボックスを使って、以下の拡張機能をインストールします
    - Jest Runner

公式ドキュメントで「拡張機能」といえば Visual Studio Code エクステンションのことです。


### シェルを開きます

React や Node.js のコマンドを入力するために Git bash シェルを開きます。

カレント フォルダー（カレント ディレクトリ）にしたいフォルダーを右クリックして
[ Git Bash Here ] を選びます。

本書では、入力するコマンドの並びの先頭の cd コマンドで
カレント フォルダーにしたいフォルダーを英語のシンボルで示しています。
また、シンボルの先頭と末尾にアンダーバーを書いていますが、
これは置き換える部分であることを示しています。
たとえば、下記のようにコマンドを入力するように説明している場合、

    $ cd  "__Project__"
    $ pwd

プロジェクト フォルダーを右クリックして
[ Git Bash Here ] を選び、pwd コマンドを入力します。
もしくは、すでに開いているシェルから
cd コマンドでプロジェクト フォルダーの親フォルダーに移動して、
pwd コマンドを入力します。

行頭の $ は入力しません。 行頭の $ より右を入力し、行末で Enter キーを押します。
本書では１つのコマンドラインが複数行で表示される場合があります。
行頭にある $ を頼りに Enter キーを押すタイミングを読んでください。
たとえば、

    $ npx create-react-app
    "react1_jest"

は、npx から "react1_jest" までが１つのコマンドラインです。
create-react-app の後で Enter キーを押さず、
同じ行で続けて "react1_jest" を入力した後で Enter キーを押します。

    $ npx create-react-app "react1_jest"

PowerShell などでもコマンドを入力することはできますが、
本書で説明するコマンドと少し書き方が異なる場合があるので注意してください。


### React のプロジェクトを新規作成します

React + TypeScript のプロジェクトを新規作成するには、
Git bash で以下のコマンドを入力します。
cd ＿ParentOfProject＿ はデスクトップがよいでしょう。

    $ cd  "__ParentOfProject__"
    $ npx create-react-app --template typescript  "react1_jest"

react1_jest の部分は、アプリケーション名、かつ、リポジトリ名なので、
必要に応じて変更する部分ですが、お試しするときはそのまま変えないほうがよいでしょう。
変えてしまうと、以後のコマンド入力で間違える可能性が高くなるからです。


### React プロジェクトの Web サーバーをローカルで起動します

npm start コマンドを入力すると、React プロジェクトの Web サーバーが起動し、
ブラウザーも自動的に開きます。

    $ cd  "react1_jest"
    $ npm start

初回のみ、ファイアーウォールから警告されますが、そのまま「アクセスを許可」して構いません。 自分が Web サーバーを起動したときの警告は無視（許可）して構いませんが、
突然警告されたときはキャンセルを選んでください。

![Firewall](files/100_firewall.png)

新規作成した状態の React プロジェクトがブラウザーに表示されたら成功です。

![React](files/110_React.png)

Git bash で Ctrl + C を押すと Web サーバーを終了します。
Git bash のウィンドウを右上の閉じるボタンで閉じると 
node.exe のプロセスが残ってしまうので注意してください。
タスクマネージャーから node.exe を終了させればよいですが、
多くの node.exe が起動しているとどの node.exe を終了すべきかが
分からなくなるので注意してください。


### Visual Studio Code でデバッグできるようにします

Web サーバーを起動することはできましたが、
それだけではバグが発生したときに対処することが難しいです。
デバッガーを使えるようになれば、
コードが実行している内容を確認できるようになり、バグに対処しやすくなります。

Visual Studio Code (VSCode) を開き、File >> Open Folder メニューで
react1_jest フォルダーを開きます。

VSCode の Terminal >> New Terminal メニューを選び、
以下のコマンドを入力します。
このコマンドで、ts-jest という Node.js モジュールをインストールします。
npm が見つからないエラーになったときは、VSCode を再起動してください。

    $ npm install  "ts-jest" --save-dev

＿Project＿/package.json に下記の jest キーを追加します。
この設定で、ファイルの拡張子 .ts または .tsx を ts-jest に関連付けし、
.js または .jsx を babel-jest に関連付けします。

    {
            :

        "jest": {
            "transform": {
                "^.+\\.tsx?$": "ts-jest",
                "^.+\\.jsx?$": "babel-jest"
            }
        }
    }


### テスト対象のコードを作成します

デバッガーの動作確認のためだけに使うテスト対象のコードを作成してみます。
ファイルを新規作成するときは、VSCode の左上にある Explore のボタンを押して
フォルダー（下記の場合 src フォルダー）を右クリックして [ New File ] を選びます。

＿Project＿/src/foo.ts

    export const sum = (...a: number[]) =>
        a.reduce(
            (acc, val) => acc + val,
            0);

ちなみに、このコードは Jest を使う方法を説明した某ホームページから拝借したコード
ですが、コードから理解することは難しいため説明します。
内容は、sum 関数の定義です。
sum 関数の引数に指定した数値の並びの合計を返します。

読みにくいコードを書いたままにする不届き者が多いですが、
そんなときでも、次に示すテストコードを見たり変更して試してみれば推測できることがあります。


### テスト コードを作成します

テスト対象のコードを実行するためのテスト プログラム（テスト コード）を作成します。

＿Project＿/src/foo.test.ts

    import { sum } from './foo';

    test('basic', () => {
        expect(sum()).toBe(0);
    });

    test('basic again', () => {
        expect(sum(1, 2)).toBe(3);
    });

test や expect は Jest が提供しています。
よって、このテストコードは Jest を使っていることになります。

ちなみに、これも某ホームページから拝借したコードです。
basic というテストケースと basic again というテストケースがあります。
テストケース名 basic again は不適切なので無視しましょう。

expect の部分を和訳すると、1 と 2 の合計は 3 になるべき、と読めます。
なるほど、sum は引数に指定した数値の並びの合計を返していると推測できます。
このようにテスト コードを見れば内容が推測できますが、
あくまで推測できる可能性が高いだけで、推測できないこともあります。


### デバッグできることを確認します

すでに Visual Studio Code (VSCode) の File >> Open Folder メニューで
react1_jest フォルダーを開いている状態から以下の手順を行います。

＿Project＿/src/foo.test.ts ファイルを開きます。

test 関数の中の expect が書かれた行にブレークポイントを張ります。
ブレークポイントを張るには、行番号の左をクリックして赤い丸が表示された
状態にします。

![Break point](files/015_BreakPoint.png)

デバッグを開始するには、test 関数の上に表示されている Debug をクリックします。
この Debug 表示は、ts-jest という Visual Studio Code
の拡張機能によるものです。

初回のみ、ファイアーウォールから警告されますが、そのまま「アクセスを許可」して構いません。

ブレークポイントでブレークしたことを確認します。

![Break point](files/016_Break.png)

ステップ イン(Step Into)のボタンを押して、
2行目にブレークポイントを張り、続行(Continue)のボタンを押すと、
引数の値が確認できます。

![Break point](files/017_Break2.png)


### すべてのテストを実行できることを確認します

Jest を使ったテストコードをすべて実行するには、
VSCode の Terminal >> New Terminal メニューを選び、
以下のコマンドを入力します。

    $ npm test

Failed が表示されなかったら、すべてのテストが成功（パス）したことになります。

全てのテストが成功したとき：

![Jest passed](files/200_Jest_pass.png)

一部のテストが失敗したとき：

![Jest failed](files/210_Jest_fail.png)

そのまま、Jest のウォッチ モードになります。
ウォッチモードではソース ファイルを保存すると自動的にテスト コードが実行されます。

プログラミングが難しいことの１つの要因は、ある個所を変更したら
別の機能が正しく動かなくなってしまうことがあることです。
その関連性を特定するために調査をするのは時間がかかるのですが、
変更した箇所が分かっているうちに問題があると分かれば、
その変更した箇所に問題があるとすぐに特定できるので、
普段からテストしていくことが最終的にはリリースが早まります。


■■　注目ニュース  一覧　■■

◇ プログラムのコードを読む時に活性化される脳の領域は言語処理と同じではない。
https://gigazine.net/news/20201217-reading-computer-code-brain-region/
 … このことから文章だけでコードを説明することが非効率であることが分かる。

◇ Googleが倫理的AIチームのテクニカルリーダーを解雇。
https://gigazine.net/news/20201204-google-fire-ai-ethics-researcher/
https://gigazine.net/news/20201207-google-ai-ethics-researcher/
https://gigazine.net/news/20201210-google-investigate-timnit-gebru/
https://japan.cnet.com/article/35163499/
https://japan.cnet.com/article/35163646/
 … 倫理的にもリードしていると思われていた Google が検閲をした。

◇ アダルトムービー世界最大手Pornhubへの決済をMastercardとVisaが停止。
https://gigazine.net/news/20201211-mastercard-visa-stop-payments-pornhub/
https://gigazine.net/news/20201215-pornhub-removed-all-unverified-content/
 … これも乱暴な検閲だが無許可アップロードもある。違法しているコンテンツだけ停止にすべき。

◇ Microsoftが従業員の強力な監視ツールになると非難されていた機能を一部削除。
https://gigazine.net/news/20201202-microsoft-productivity-score-user-name/
 … ヨーロッパでは違法になる。この法律があるところが素晴らしい。

◇ Appleが広告業界のエコシステムを一転させる日が刻々と近づいている。
https://gigazine.net/news/20201216-apple-idfa-stop/
https://gigazine.net/news/20201217-facebook-attacks-apple/
 … Cookie の使用にユーザーから許可を求める GDPR のようなことを技術的に実施。

◇ グーグルのWorkspace、Office との連携を強化する複数の新機能。
https://japan.cnet.com/article/35163801/
 … Google Workspaceを統括する元Microsoftの幹部 Javier Soltero氏。

◇ AWSがmacOSをクラウド上で利用可能にする Amazon EC2 Mac Instances を発表。
https://gigazine.net/news/20201202-amazon-ec2-mac-instances/
https://japan.cnet.com/article/35163226/
 … Desktop として使うだけなら mac 本体を自分で買ってネットに接続した方が安い。

◇ CentOS終了にコミュニティからは非難の嵐、CentOSの設立者が新プロジェクトの発足を発表する事態に。
https://gigazine.net/news/20201211-centos-red-hat-enterprise-linux/
https://gigazine.net/news/20201217-rocky-linux/
 … どちらもアップストリームであると主張している。様子見されているうちにシェアが落ちていきそう。

◇ GoogleのIoT用プラットフォーム Android Things が終了へ、IoT向け汎用OSの野望は軌道に乗らず失速。
https://gigazine.net/news/20201218-google-android-things-shut-down/
 … IoT業界の信用を得られなかったのだろう。

◇ なぜ魅力的な人は昇進が早いのか？
https://gigazine.net/news/20201213-good-looking-good-employee/
 … エンジニアにもいえる。

◇ マイクロソフト、公式ダサセーターの新作 MS Paint を発売。目的は女性支援。
https://japan.cnet.com/article/35163335/
 … 速攻で完売。

◇ アドビ、Flash Player 最終のアップデート公開。
https://japan.cnet.com/article/35163659/
 … 長い歴史の終了。



■■　ソフトウェアデザイン館  Sage Plaisir 21　■■


  ホームページ   >>> http://www.sage-p.com/
  メルマガ       >>> http://www.mag2.com/m/0000083983.html
  ブログ         >>> http://blog.livedoor.jp/sage_p/
  ツイッター     >>> http://twitter.com/Ts_Neko
  ダウンロード   >>> http://www.sage-p.com/freesoft.htm
  サポート掲示板 >>> http://www.sage-p.com/kg_ban09/z6037C8.cgi
  東日本大震災   >>> http://www.sage-p.com/saigai.html
  メール         >>> ts-neko◇sage-p.com   ←◇を@に変えてください
                     緊急メールは件名に「うどんメール」を付けてください。

      このメルマガの登録・解除 - http://www.mag2.com/m/0000083983.htm