LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Takakiri(Takakiri)

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

Posted at

React

Break point

Jest passed

今回構築する開発環境

今回は 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
を参照してください。

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

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

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

Node.js インストール ページ

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

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

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

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

Git インストール ページ

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

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

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

Visual Studio Code インストール ページ

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

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

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

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

  1. Visuatl Studio Code を開きます（タスクバーにピン留めしたアイコンや、スタート メニューから開きます）

  2. Visuatl Studio Code の拡張機能のボタンを押し、検索ボックスをクリックします
    Visuatl Studio Code の拡張機能

  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

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

React

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

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

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

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

Break point

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

Break point

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

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

$ npm test

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

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

Jest passed

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

Jest failed

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?