環境構築から始めるテスト駆動開発 ~JavaScript開発環境を構築する~


## はじめに

これは [環境構築から始めるテスト駆動開発 ~ プログラミング環境の共通基盤を構築する ~](https://qiita.com/k2works/items/19d037814875b3a03eb3) の開発言語セットアップ記事です。Windows 10 Home で共通基盤が構築されていることを前提としています。

<!-- more -->

## インストール

スタートメニューから `Windows PowerShell` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/docs/images/asciidoc/tdd_env/pkg-001.png?raw=true)

まず、node.jsバージョンマネージャーをインストールします。

``` powershell
> scoop install nvm
```

続いて、nvmでnode.jsをインストールします。

``` powershell
> nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   15.14.0    |   14.16.1    |   0.12.18    |   0.11.16    |
|   15.13.0    |   14.16.0    |   0.12.17    |   0.11.15    |
|   15.12.0    |   14.15.5    |   0.12.16    |   0.11.14    |
|   15.11.0    |   14.15.4    |   0.12.15    |   0.11.13    |
|   15.10.0    |   14.15.3    |   0.12.14    |   0.11.12    |
|    15.9.0    |   14.15.2    |   0.12.13    |   0.11.11    |
|    15.8.0    |   14.15.1    |   0.12.12    |   0.11.10    |
|    15.7.0    |   14.15.0    |   0.12.11    |    0.11.9    |
|    15.6.0    |   12.22.1    |   0.12.10    |    0.11.8    |
|    15.5.1    |   12.22.0    |    0.12.9    |    0.11.7    |
|    15.5.0    |   12.21.0    |    0.12.8    |    0.11.6    |
|    15.4.0    |   12.20.2    |    0.12.7    |    0.11.5    |
|    15.3.0    |   12.20.1    |    0.12.6    |    0.11.4    |
|    15.2.1    |   12.20.0    |    0.12.5    |    0.11.3    |
|    15.2.0    |   12.19.1    |    0.12.4    |    0.11.2    |
|    15.1.0    |   12.19.0    |    0.12.3    |    0.11.1    |
|    15.0.1    |   12.18.4    |    0.12.2    |    0.11.0    |
|    15.0.0    |   12.18.3    |    0.12.1    |    0.9.12    |
|   14.14.0    |   12.18.2    |    0.12.0    |    0.9.11    |
|   14.13.1    |   12.18.1    |   0.10.48    |    0.9.10    |
```

LTSの最新版を入れます。

``` powershell
> nvm install 14.16.1
```

インストールしただけだとまだ使えないので、使用するバージョンを指定します。

``` powershell
> nvm use 14.16.1
```

バージョンを確認しておきます。

``` powershell
> node -v
v14.16.1
> npm -v
6.14.12
```

## Hello world

### プログラムを作成する

`Projects` フォルダ内に `JavaScript` フォルダを作成してエディタからフォルダを開きます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/001.png?raw=true)

新しいターミナルを実行して以下のコマンドを入力します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/002.png?raw=true)

```powershell
> npm init -y
```

`package.json` ファイルが作成されたら続いてターミナルに以下のコマンドを入力します。

```powershell
> npm install --save-dev jest
```

関連して `Jest Runner` 拡張機能をインストールしておきます。


![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/003.png?raw=true)

`新しいフォルダ` 作成アイコンを押します。

フォルダ名は `src` とします。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/004.png?raw=true)

作成したフォルダを選択して `新しいファイル` 作成アイコンを押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/005.png?raw=true)

ファイル名 `App.js` と `App.test.js` を作成します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/006.png?raw=true)

コードを入力する前にフォーマッターの設定を行います。コマンドパレットから `format` と入力してドキュメントのフォーマットを選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/006-1.png?raw=true)

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/006-2.png?raw=true)

`構成` を押して `Prettier` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/006-3.png?raw=true)

`App.test.js` ファイルに以下のコードを入力します。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(false);
  });
});
```

`Jest Runner` 拡張機能がインストールされていればコードの上に `Run` と表示されるのでそれを押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/007.png?raw=true)

プログラムが実行されて実行結果がターミナルに表示されます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/008.png?raw=true)

テストをパスするようにコードを修正して `Run` を押します。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
});
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/009.png?raw=true)

テスティングフレームワークの動作が確認できたので `hello_world` 関数の作成に入ります。まず以下のコードを追加して `Run` を押してテストが失敗することを確認します。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
  test("簡単な挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
});
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/010.png?raw=true)

`helloWorld` 関数を 追加してテストをパスさせます。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
  test("簡単な挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
});

function helloWorld() {
  return "Hello from JavaScript";
}
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/011.png?raw=true)

指定された名前で挨拶を返すようにします。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
  test("簡単な挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
  test("指定された名前で挨拶を返す", () => {
    expect(helloWorld("VSCode")).toBe("Hello from VSCode");
  });
});

function helloWorld() {
  return "Hello from JavaScript";
}
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/012.png?raw=true)

関数に引数を追加します。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
  test("簡単な挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
  test("指定された名前で挨拶を返す", () => {
    expect(helloWorld("VSCode")).toBe("Hello from VSCode");
  });
});

function helloWorld(name) {
  return `Hello from ${name}`;
}
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/013.png?raw=true)

`指定された名前で挨拶を返す` テストはパスしましたが今度は `簡単な挨拶を返す` テストが失敗するようになりましたのでデフォルト引数を設定してテストをパスするようにします。

```JavaScript
describe("TestHelloWorld", () => {
  test("何か便利なもの", () => {
    expect(true).toBe(true);
  });
  test("簡単な挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
  test("指定された名前で挨拶を返す", () => {
    expect(helloWorld("VSCode")).toBe("Hello from VSCode");
  });
});

function helloWorld(name = "JavaScript") {
  return `Hello from ${name}`;
}
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/014.png?raw=true)

仕上げに不要なテストを削除してテストケースの文言をわかりやすくしておきます。

```JavaScript
describe("TestHelloWorld", () => {
  test("何も指定されていない場合は既定の挨拶を返す", () => {
    expect(helloWorld()).toBe("Hello from JavaScript");
  });
  test("指定された名前で挨拶を返す", () => {
    expect(helloWorld("VSCode")).toBe("Hello from VSCode");
  });
});

function helloWorld(name = "JavaScript") {
  return `Hello from ${name}`;
}
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/015.png?raw=true)

### プログラムをデバッグする

まず確認したいプログラムの行を左部分を押してブレークポイント（赤丸）を設定します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/016.png?raw=true)

ブレークポイントを設定したら `Debug` を押してプログラムの実行します。そうするとブレークポイント部分でプログラムが停止して変数などの情報が確認できるようになります。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/017.png?raw=true)

画面上の実行ボタンを押すと次のブレークポイントに移動します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/018.png?raw=true)

デバッガを終了するには終了ボタンを押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/019.png?raw=true)

ブレークポイントを再度押すことで解除ができます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/020.png?raw=true)

### プログラムをレポジトリに保存する

以下の内容の `.gitignore` ファイルを作業ディレクトリ直下に追加します。


```
node_modules
```

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/021.png?raw=true)

ソース管理を選択して `リポジトリを初期化する` を押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/022.png?raw=true)

`全ての変更をステージ` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/023.png?raw=true)

変更内容に `feat: HelloWorld` と入力して `コミット` を押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/024.png?raw=true)

変更内容は `ソース管理` から確認できます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/025.png?raw=true)

## GitHubに公開する

続いて、GitHubを使ってレポジトリを外部に公開できるようにしてみましょう。

まず、[GitHub](https://github.com/) でレポジトリを作成します。

ログインしたら画面右上の+マークから `New repository` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/026.png?raw=true)

レポジトリ名は `hello-javascript` として `Public` で公開します。 公開したくない場合は `Private` を選択します。
`Add a README file` にもチェックを入れておきます。
`Add .gitignore` にもチェックを入れてテンプレートに `Node` を指定します。
最後に `Create repository` を押して公開レポジトリを作成します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/027.png?raw=true)

公開レポジトリが作成されたらVSCodeから読み込めるようにするためリンク先の情報を取得します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/028.png?raw=true)

クリップボードのアイコンをクリックするとレポジトリのURLがコピーできます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/029.png?raw=true)

続いてVSCodeに戻り、`表示` メニューから `コマンドパレット` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/030.png?raw=true)

`clone` と入力して `Git クローン` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/031.png?raw=true)

リポジトリのURLへ先ほどコピーした公開レポジトリのURLを貼り付けます。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/032.png?raw=true)

公開レポジトリの保存場所を指定する必要があるのでここでは `Projects` フォルダに `GitHub` フォルダを追加してそこに保存することにします。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/033.png?raw=true)

チェックアウトが終わると画面左下に通知が出ますので `開く` を押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/034.png?raw=true)

準備ができましたので先ほどやった `HelloWorld` プログラムをもう一度作成して先ほどと同様にローカルレポジトリに保存します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/035.png?raw=true)

ローカルレポジトリの内容をGitHubの公開レポジトリに登録します。`表示` メニューから `コマンドパレット` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/036.png?raw=true)

`push` と入力して `Git プッシュ` を選択します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/037.png?raw=true)

以下のGitHub認証画面が表示された場合は `Sign in with your browser` を押します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/038.png?raw=true)

`Authorize GitCrendtialManager` を押します。

![](https://github.com/k2works/k2works.github.io/blob/source/docs/images/asciidoc/tdd_env/ruby-win-github-014.png?raw=true)

GitHubアカウントのパスワードを入力します。

![](https://github.com/k2works/k2works.github.io/blob/source/docs/images/asciidoc/tdd_env/ruby-win-github-015.png?raw=true)

![](https://github.com/k2works/k2works.github.io/blob/source/docs/images/asciidoc/tdd_env/ruby-win-github-016.png?raw=true)
認証が完了してローカルレポジトリの内容が公開レポジトリに登録されました。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/039.png?raw=true)

内容が反映されているかをブラウザ画面から確認します。

![](https://github.com/k2works/k2works.github.io/blob/source/blog/source/_posts/1617851456/040.png?raw=true)