2019.06.07

藤本永一

WEBのCI環境をサクッと始めてみる

WRITER

藤本永一

株式会社PLAN-B システム開発部

2014年新卒入社。ユーザー分析DMPサービスJuicerの開発を担当し、インフラを含めたバックエンドを構築。現在はシステム開発部でリーダーとして開発チームを支える。成果を出せるチームを目指し、可視化やカイゼンをメンバーと進める革新的猫派。

目次

はじめに
早速始めていきましょう
まとめ

お世話になっております、藤本です。

昨今、ユニットテストという言葉がどこからでも聞こえてくるようになってまいりました。弊社も最近では、各所で「テスト」という言葉が飛び交っており、ただ作るだけからしっかりと品質を担保した開発へシフトしているように感じます。

しかし、テストは大事なことですが開発スピードを落としてビジネスチャンスを逃すようでは元も子もありません。開発スピードも品質も担保していきたい。そんな要望に答えて現れたのが、CI（継続的インテグレーション）です。自動化されたビルドとテストを行ってくれるシステムです。

私たちはコードを書き、変更をPushするだけでテストが回るわけです。ここで問題があれば、それを修正し再度Pushします。テストコードは書きますが(これが一番アレだったりしますが…)、これまでのユニットテストがなかった頃と負荷は変わりません。

ここでは、javascriptでCIを取り入れ、自動テストが回っている状態までを作ってみたいと思います。CIと聞くと難しそうなのですが、割とあっさりと導入できることを体感していただければと思います。

はじめに

対象者

Web開発な方で、自動テストに興味がある方。
※ GITの知識やGitHubの知識やアカウントはある前提で書いています。

今回の環境

GitHub (publicリポジトリ)
html + jsな一般的なサイト
Node.js 8系
Jest 22.2.2
Travis CI

この記事のカバー範囲

今回は、「Jest」でのテスト環境の準備から「Travis CI」での自動テスト実行までを取り扱います。

今回使うもの

今回の環境にあるものを簡単に説明します。

Travis CI

Travis CI – Test and Deploy Your Code with Confidence

GitHubと連携して、自動でテストやビルドなどを回してくれるサービスです。
privateリポジトリは有料ですが、publicリポジトなら無料で利用できます。 GitHubのプロジェクトで

こんなマークを見たことはありませんか？これはTravis CIのビルド結果のバッチです。このようなバッチを自分のプロジェクトに追加することで、正常にテスト、ビルドが行われていることをユーザーに示すことができます。

Jest

Jest · 快適なJavaScriptのテスト

Facebookの開発している、javascript向けのテストライブラリ(テストランナー + テストフレームワーク)です。テストライブラリは色々とありますが、今回はシンプルなものを選択しています。設定ファイルなどはなく。「*.test.js」という名前でテスト用のファイルを書き、「Jest」コマンドを実行するだけでテストしてくれます。 ReactやTypescriptなど対応しておりシンプルながら対応範囲も広いです。

Node.js

知る人ぞ知る、サーバーサイドJavascriptです。サーバーサイドと書いている通り、サーバー上やお使いのPC上で実行できるjavascriptです。ブラウザはいりません。これが出たことで、バックエンドな処理もJSで書いたり、コマンドをJSで実装したりできるようになりました。今回は「Jest」を実行するために使います。フロントエンドなツールはNode.jsでできているものが多いので入れておいて損はありません。

【余談】
Node.jsのバージョン管理はNVS (Node Version Switcher)がおすすめです。 Windows、Mac、Linux対応なのでどのOSでも同じように使えます。

今回のゴール

電卓のWebアプリを作成します。

電卓のコアになる「Calculator.js」を作成しこれに対してテストを実行します。今回のサンプルで作成したプロジェクトを公開しておりますので参考にしてください。

CIの流れとしては以下のようになります。
[作業PC] ソース変更・テスト作成 → [GitHub] → [TravisCI] 自動テスト

早速始めていきましょう

01：GitHubでリポジトリ作成

publicなリポジトリを作成してください。名前などはご自分でわかるもので、好きに付けてください。このリポジトリに今回のソースコードを入れて動作確認を行っていきます。

02：TravisCI登録

https://travis-ci.org/にアクセスしてください。サインアップボタンがありますので、押すとGitHubとの連携になります。GitHubにログインし連携を進めてください。

TravisCI

以下のようなTravisCIのダッシュボードにたどり着けば登録完了です。

登録完了

03：アプリケーション作成

それでは、それぞれ作成していきましょう。完成した表示はこのようになる想定です。

電卓完成予想図

（明らかにButtonが少ないのは気にしないでください。）

package.json

ここにNode.jsでのプロジェクトの設定を書きます。今回は、Jestをインストールする項目と、テストにJestを使う設定が大事な部分です。 ※ 細かい部分は説明を省きます。

{
  "name": "sample-web-jest-ci",
  "version": "1.0.0",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "jest": "^22.2.2"
  },
  "scripts": {
    "test": "jest"
  },
}

{

"name": "sample-web-jest-ci",

"version": "1.0.0",

"description": "",

"dependencies": {},

"devDependencies": {

"jest": "^22.2.2"

"scripts": {

"test": "jest"

}

devDependenciesの項目にJestのバージョンを指定しています。
scriptsのtest部分にテスト実行コマンドを指定します。

package.jsonができたら以下のコマンドでjestをインストールしてください。

npm install

1	npm install

node_modulesというフォルダができて、そこにインストールされJestが使える状態になります。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>でんたく</title>
</head>
<body>
    <h1>でんたく</h1>
    式：<input type="text" id="formula" value=""><br>
    答：<input type="number" id="result" value="0"><br>
    <button id="n1">1</button><br>
    <button id="calcSum">+</button><br>
    <button id="calcEqual">=</button><br>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="my_modules/Calculator.js"></script>
    <script src="main.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

式：<input type="text" id="formula" value=""><br>

答：<input type="number" id="result" value="0"><br>

</body>

</html>

main.js

各ボタンのアクションを実装します。

var inputFormula = $('#formula')
var inputResult = $('#result')
var n1 = $('#n1')
var calcSum = $('#calcSum')
var calcEqual = $('#calcEqual')

n1.on('click', clickN1)
calcSum.on('click', clickCalcSum)
calcEqual.on('click', clickCalcEqual)

var calculator = new Calculator();

function clickN1 () {
  clickInputButton('1')
}

function clickCalcSum () {
  clickInputButton('+')
}

function clickCalcEqual () {
  execCalc(inputFormula.val())
}

function clickInputButton (text) {
  inputFormula.val(inputFormula.val() + text)
}

function execCalc (calcText) {
  // パース
  var parse = calculator.parseCalcText(calcText)

  // 実行
  var result = 0
  switch (parse[2]) {
    case '+':
      result = calculator.sum(parse[1], parse[3])
      break
  }

  // 結果を表示
  inputResult.val(result)
}

var inputFormula = $('#formula')

var inputResult = $('#result')

var n1 = $('#n1')

var calcSum = $('#calcSum')

var calcEqual = $('#calcEqual')

n1.on('click', clickN1)

calcSum.on('click', clickCalcSum)

calcEqual.on('click', clickCalcEqual)

var calculator = new Calculator();

function clickN1 () {

clickInputButton('1')

}

function clickCalcSum () {

clickInputButton('+')

}

function clickCalcEqual () {

execCalc(inputFormula.val())

}

function clickInputButton (text) {

inputFormula.val(inputFormula.val() + text)

}

function execCalc (calcText) {

// パース

var parse = calculator.parseCalcText(calcText)

// 実行

var result = 0

switch (parse[2]) {

case '+':

result = calculator.sum(parse[1], parse[3])

break

}

// 結果を表示

inputResult.val(result)

}

my_modules\Calculator.js

電卓機能を実装します。今回は、計算式文字列を分解する機能と足し算機能を実装しています。

また、node.jsのモジュールとしても読み込めるようにするため、ちょっと見慣れない書き方になっているかと思います。
これにより、ブラウザ上でもNode.jsでも動くクラスが実装できます。「Jest」はNode.js上で動くためこのように書いています。

;(function (global) {
  'use strict;'

  function Calculator () {
  }
  Calculator.prototype.constructor = Calculator

  Calculator.prototype.parseCalcText = function (calcText) {
    var reg = /(\d+)([\+\-\*\/])(\d+)/g
    var parse = reg.exec(calcText)
    console.log(parse)

    return parse
  }

  Calculator.prototype.sum = function (a, b) {
    return Number(a) + Number(b)
  }

  // Exports
  if ('process' in global) {
    module['exports'] = Calculator
  }
  global['Calculator'] = Calculator

})((this || 0).self || global)

;(function (global) {

'use strict;'

function Calculator () {

}

Calculator.prototype.constructor = Calculator

Calculator.prototype.parseCalcText = function (calcText) {

var reg = /(\d+)([\+\-\*\/])(\d+)/g

var parse = reg.exec(calcText)

console.log(parse)

return parse

}

Calculator.prototype.sum = function (a, b) {

return Number(a) + Number(b)

}

// Exports

if ('process' in global) {

module['exports'] = Calculator

}

global['Calculator'] = Calculator

})((this || 0).self || global)

ここまでできたら一度ブラウザで表示と動作を確認してみてください。「1+1」などの簡単な計算ができるはずです。

04：Jestでlocalでテスト実行

まずはテストを書きましょう。

ソースの場所はどこでもいいのですが今回は↓のようにしています。
tests/Calculator.test.js
※ Jestは、「__tests__」フォルダの中、もしくは「*.spec.js」or「*.test.js」という拡張子のファイルをテストファイルとして認識してくれます。

// テスト対象クラスの読み込み
var Calculator = require('../my_modules/Calculator')
var calc = new Calculator()

describe('Calculator', () => {  // Calculatorクラスの
  describe('sum()', () => {     // sum()メソッドで
    it('sum(1, 2) = 3', () => { // 1, 2を渡したら3が返ってくるかテスト
      expect(calc.sum(1, 2)).toBe(3)
    })
    it('sum("99", "100") = 199', () => { // "99", "100"を渡したら199が返ってくるかテスト
      expect(calc.sum('99', '100')).toBe(199)
    })
  })
})

// テスト対象クラスの読み込み

var Calculator = require('../my_modules/Calculator')

var calc = new Calculator()

describe('Calculator', () => { // Calculatorクラスの

describe('sum()', () => { // sum()メソッドで

it('sum(1, 2) = 3', () => { // 1, 2を渡したら3が返ってくるかテスト

expect(calc.sum(1, 2)).toBe(3)

})

it('sum("99", "100") = 199', () => { // "99", "100"を渡したら199が返ってくるかテスト

expect(calc.sum('99', '100')).toBe(199)

})

ここでは、先程作ったCalculatorクラスのsum()メソッドのテストを書いてみました。数値を2つ渡すと、それを足した結果が返ってくるメソッドですので、意図した結果かどうかを確認しています。また、文字列で渡した場合も問題ないかを確認しています。今回はシンプルなメソッドですが、「あれを渡したらコレが返ってくる」の実装が複雑な場合などテストがあるのと無いのとでは安心感が違います。

特に、JSでは型が緩いため今回のように数値を想定していても文字列が渡ってくることもあります。そんな時でも、「意図した動作」をしているかここで担保することができるわけです。テストを考えるということも、プログラミングの修行の一環として捉えても面白いです。

それではJestを実行してみましょう

以下のコマンドを実行します。
※ package.jsonのscriptにてJestが実行されるように設定してあります。

npm run test

1	npm run test

結果（Windowsの場合です。Macもほぼ同じような出力のはずです。）↓

PS E:\Projects\sample-web-jest-ci> npm run test

> sample-web-jest-ci@1.0.0 test E:\Projects\sample-web-jest-ci
> jest

 PASS  tests\Calculator.test.js
  Calculator
    sum()
      √ sum(1, 2) = 3 (2ms)
      √ sum("99", "100") = 199

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.303s
Ran all test suites.

PS E:\Projects\sample-web-jest-ci> npm run test

> sample-web-jest-ci@1.0.0 test E:\Projects\sample-web-jest-ci

> jest

PASS tests\Calculator.test.js

Calculator

sum()

√ sum(1, 2) = 3 (2ms)

√ sum("99", "100") = 199

Test Suites: 1 passed, 1 total

Tests: 2 passed, 2 total

Snapshots: 0 total

Time: 3.303s

Ran all test suites.

「Tests: 2 passed, 2 total」

と出ているように、2つのテスト中2つ合格しましたよ。と出ています。ここで問題があると、

PS E:\Projects\sample-web-jest-ci> npm run test

> sample-web-jest-ci@1.0.0 test E:\Projects\sample-web-jest-ci
> jest

 FAIL  tests\Calculator.test.js
  Calculator
    sum()
      × sum(1, 2) = 3 (5ms)
      √ sum("99", "100") = 199

  ● Calculator › sum() › sum(1, 2) = 3

    expect(received).toBe(expected) // Object.is equality

    Expected value to be:
      1
    Received:
      3

       6 |   describe('sum()', () => {     // sum()メソッドで
       7 |     it('sum(1, 2) = 3', () => { // 1, 2を渡したら3が返ってくるかテスト
    >  8 |       expect(calc.sum(1, 2)).toBe(1) // !! 意図的にエラー出してます
       9 |     })
      10 |     it('sum("99", "100") = 199', () => { // "99", "100"を渡したら199が返ってくるかテスト
      11 |       expect(calc.sum('99', '100')).toBe(199)

      at Object.it (tests/Calculator.test.js:8:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        1.136s

PS E:\Projects\sample-web-jest-ci> npm run test

> sample-web-jest-ci@1.0.0 test E:\Projects\sample-web-jest-ci

> jest

FAIL tests\Calculator.test.js

Calculator

sum()

× sum(1, 2) = 3 (5ms)

√ sum("99", "100") = 199

● Calculator › sum() › sum(1, 2) = 3

expect(received).toBe(expected) // Object.is equality

Expected value to be:

Received:

6 | describe('sum()', () => { // sum()メソッドで

7 | it('sum(1, 2) = 3', () => { // 1, 2を渡したら3が返ってくるかテスト

> 8 | expect(calc.sum(1, 2)).toBe(1) // !! 意図的にエラー出してます

9 | })

10 | it('sum("99", "100") = 199', () => { // "99", "100"を渡したら199が返ってくるかテスト

11 | expect(calc.sum('99', '100')).toBe(199)

at Object.it (tests/Calculator.test.js:8:30)

Test Suites: 1 failed, 1 total

Tests: 1 failed, 1 passed, 2 total

Snapshots: 0 total

Time: 1.136s

このように失敗した箇所を教えてくれますので、ソースを修正しましょう。

05： TravisCIの設定を追加

次に、GitHubへプッシュした際にTravisCIが自動でテストを回してくれるように設定していきます。

設定ファイルの作成
TravisCI上で連携の設定

1. 設定ファイルの作成

まずは「.travis.yml」というファイルにTravisCIの動作設定を書いていきます。今回は実行環境の指定のみですが、ビルドの設定や、デプロイの設定などもここに書いていきます。

language: node_js
node_js:
 - "8"

language: node_js

node_js:

- "8"

language:でプログラミング言語の指定、今回はnode_jsです。 node_js:でNode.jsのバージョンを指定します。

2. TravisCI上で連携の設定

次に、TravisCI上で連携の設定をしていきます。設定は簡単で、対象のリポジトリを「ON」にするだけです。

3. 連携するリポジトリの選択

https://travis-ci.org/profile/にアクセスするとリポジトリ一覧が出ますので、連携したいリポジトリを「ON」にしてください。

連携するリポジトリの選択

以上です。。。簡単ですね。

06：プッシュ後TravisCIを確認して見る

それでは、ソースコードに何か修正を入れてGitHubにプッシュしてみてください。 TravisCIの画面を眺めていると、コミットが自動で認識され、テストが回り始めます。

テスト開始

以下のようになるとテスト成功です！！

テスト成功_1

テスト成功_2

まとめ

いかがでしたでしょうか？ちょっと敷居が高そうなイメージのCIがおもったより簡単に導入できました。（個人的には）

今回は、自動テストが行われるだけでしたが、ビルドやデプロイ、結果の通知などを行うことも可能です。masterブランチへマージすることでテストしビルドしデプロイされたらかっこいいのではないでしょうか？

かっこいいだけでなく、デプロイにかかる手間も時間も削減されますね。一度導入してしまえば、勝手に回ってくれますので、CIを意識せず開発に集中できます。

まだユニットテストなんて入れてないよという方も、これを機に導入してみてはいかがでしょう？ユニットテストがあることで、コードの変更時に影響などを気にする範囲が狭くなりますし、書き方自体も意識するようになるので、見通しの良いコードになりますよ。

参考サイト

弊社の会社概要と、ケイパビリティのご紹介資料です。ご覧いただき、お気軽にお問い合わせください。

フォームに必要事項をご記入していただくと、
無料で資料ダウンロードが可能です。

お名前

資料ダウンロード
ありがとうございました。

資料のダウンロードが可能になりました。
下記のボタンより、資料をご確認ください。

DOWNLOAD

無料資料ダウンロードはこちら

CONTACT

サービスに関するお問い合わせはこちら

WEBのCI環境をサクッと始めてみる

藤本 永一

はじめに

対象者

今回の環境

この記事のカバー範囲

今回使うもの

Travis CI

Jest

Node.js

今回のゴール

早速始めていきましょう

01：GitHubでリポジトリ作成

02：TravisCI登録

03：アプリケーション作成

package.json

index.html

main.js

my_modules\Calculator.js

04：Jestでlocalでテスト実行

まずはテストを書きましょう。

それではJestを実行してみましょう

05： TravisCIの設定を追加

1. 設定ファイルの作成

2. TravisCI上で連携の設定

3. 連携するリポジトリの選択

06：プッシュ後TravisCIを確認して見る

まとめ

DOWNLOAD

PLAN-Bのご紹介資料

RELATED POSTS

今更だけど、圧縮についてまとめてみたい

UMLとは？｜ダイアグラムの種類や用途について解説

成果の可視化でチームの心を1つにしよう！ツール選定とMetabaseによる実際の手順をご紹介！ 導入編

AWSマネージドデータベースとは？利点と気をつけたいことまとめ

SPAを開発する際の重要ポイント

サイト内レコメンドにおける推薦アルゴリズム

高級キーボードってどうなの

美味しい情報アーキテクチャとは？

藤本永一

成果の可視化でチームの心を1つにしよう！ツール選定とMetabaseによる実際の手順をご紹介！導入編