GithubとTravisCIで継続的インテグレーションする方法を解説します。|おちゃカメラ。

本日限定

Amazonタイムセール開催中

セール商品を見に行く

javascriptまたはEcmaScript6(ES6)のコードを継続的インテグレーションする方法をまとめてみたいと思います。

develop or drink ? ©

今回は第5回目最終回です。GithubにpushしたリポジトリをTravis CIというサービスを使って自動的にテストを行う手順について触れていきたいと思います。

GithubとTravisCIを連携させると、GithubリポジトリのREADME.mdでテストやカバレッジの結果をバッジ表示させる事ができます。

Githubにテストやカバレッジの結果をバッジで表示 ©

前回は、javascriptやES6のプログラム構文(文法)をチェックする方法を解説しました。npmパッケージのeslintを使うと、プログラムがルールで定めた通りに記述されているか否かを機械的に検証することができます。

自身のブログ
javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方

私自身もテスト初心者ですので、できるだけ平たく説明していきます。もしこれは違う！という内容があればツッコミをお待ちしております。

継続的インテグレーション(CI)とは何か？
GithubとTravisCIを使ってテストする手順
サンプルプロジェクトをダウンロード
TravisCIにサインイン
TravisCIを使うGithubリポジトリを選択
COVERALLSにGithubアカウントでサインイン
COVERALLSを使うGithubリポジトリを選択
.travis.ymlやテストプログラムを配置
再びGithubにプログラムをpush
pushされたタイミングでTravisCIがテストを実行される
まとめ

継続的インテグレーション(CI)とは何か？

継続的インテグレーション(CIと呼ばれる)は以下のような定義だそうです。

Wikipedia
継続的インテグレーション
(以下引用)継続的インテグレーション、CI（英: continuous integration）とは、主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のことである。エクストリーム・プログラミング (XP) のプラクティスの一つで、狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する[1]

今回の記事で扱うのは、wikipediaで説明されている中でも、テストを継続的に実行する方法に限定して触れていきたいと思います。

テストを継続的かつ自動的に行うためには、テストプログラムを実行できるサーバーが必要になります。そこで活用するのが、GithubとTravisCIです。

Github(ギットハブ)は、プログラムを共有するWebサービスです。TravisCI(トラビスシーアイ)は継続的インテグレーションを支援するサービスの一つです。Githubにプログラムをアップしたタイミングで、TravisCIではテストなどのプログラムを実行させる事ができます。

GithubとTravisCIを使ってテストする手順

ということで、GithubとTravisCIを使って継続的インテグレーション、つまり自動テストさせる手順をまとめてみたいと思います。手順は次の通りです。

Githubのアカウントを作成
公開したいプログラムをGithubの新規リポジトリにpush
TravisCIにGithubアカウントでサインイン
TravisCIを使うGithubリポジトリを選択
COVERALLSにGithubアカウントでサインイン
COVERALLSを使うGithubリポジトリを選択
Gtihubのリポジトリにpushする.travis.ymlやテストプログラムを配置
再びGithubにプログラムをpush
pushされたタイミングでTravisCIがテストを実行される

手順1と2は、Githubの通常の使い方と同様です。Githubの使い方については下記の記事が参考になりますので、以下をご覧ください。

Qiita
【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～

当記事では、3以降の手順を解説していきたいと思います。まずは、次項のサンプルコードを入手しておきましょう。

サンプルプロジェクトをダウンロード

それではまず、サンプルコードをダウンロードしましょう。

サンプルコード

サンプルコードはgithubにアップしていますので、そちらをご覧ください。

https://github.com/tea3/js-test-practice

まずは、サンプルコードを実行するプロジェクトjs-test-practiceディレクトリを作成し、npmパッケージをインストールします。

bash

$ git clone https://github.com/tea3/js-test-practice.git
$ mkdir js-test-practice
$ cd js-test-practice
$ npm init
$ npm install

save-devオプションって何？

npm installコマンドの--save-devオプションは、開発で使うパッケージという意味合いを示すために指定しています。本体のプログラムでは使用せず、テストなど本体のプログラムで使わないパッケージがあれば、このオプションを指定してインストールしましょう。

また、node.jsやnpm、そしてコマンドラインについてご不明な場合は以下をご覧ください。

node.jsやコマンドラインについて

node.jsの環境を用意する方法やコマンドラインの使い方については以下を併せてご覧ください。

TravisCIにサインイン

続いてTravisCIにサインインします。

TravisCI
https://travis-ci.org/

サインインにはGithubのアカウントを使いますので、Sign in with githubを選びます。

Travis CIにGithubアカウントでサインイン ©

Githubアカウントで認証します。

認証する ©

TravisCIを使うGithubリポジトリを選択

続いて、TravisCIを使用したいGithubリポジトリを選択します。TravisCIの右上にあるアカウントアイコンを選択し、Accountsを選択します。

Accountsを選択すると、Githubに公開しているリポジトリが下部にリスト表示されます。リストの中から、TravisCIを使いたいリポジトリを選択し、TravisCIを有効にします。

リポジトリのTravisCIを有効にする ©

上記でTracisCIを有効にしているのは、サンプルコードとしても前述で紹介したtea3/js-test-practiceリポジトリです。

COVERALLSにGithubアカウントでサインイン

続いて、カバレッジの結果を表示するCOVERALLSというサービスにもサインインしておきます。

COVERALLS
https://coveralls.io/

COVERALLSのトップページの右上にあるSIGN INでサインインします。

COVERALLSにサインインする ©

更に、どのようにサインインするか聞かれるので、Githubアカウントでサインインします。

COVERALLSにGithubアカウントでサインインする ©

こちらもTravisCIとほとんど同じ流れです。Githubアカウントで認証します。

Githubアカウントで認証する ©

COVERALLSを使うGithubリポジトリを選択

次に、COVERALLSで使うGithubリポジトリを選択します。メニュー左側からADD REPOSを選択します。

ADD REPOSでリポジトリを選択する画面へ遷移する ©

使うGithubリポジトリを選択する ©

以上の流れで、COVERALLSからカバレッジレポートが確認できるようになります。

.travis.ymlやテストプログラムを配置

前述までの流れで、TravisCIは有効になりました。続いてTravisCIで実行するプログラムを.travis.ymlというファイルで定義します。

ローカルにあるプロジェクトに.travis.ymlファイルを作成し、以下を記述します。

.travis.yml

language: node_js
node_js:
  - "8"
script:
  - npm run eslint
  - npm run test-cov

after_script:
  - npm install coveralls
  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

上記の.travis.ymlでは、次のような内容を定義しています。

language:

TravisCIで使うプログラム言語を指定します。サンプルコードではnode.jsを使います。
node_js:

TravisCIで実行するnode.jsのバージョンを定義します。サンプルではnode.js v8を使用します。
script:

travisCIで実行したいプログラムをここで定義します。サンプルでは、第2回と第3回目で解説したテストとカバレッジを行う命令npm run test-covと、第4回目で解説した構文チェックを行う命令npm run eslintを定義しています。
after_script:

TravisCIでプログラムを実行した後で、行いたい処理をここで定義します。サンプルでは、カバレッジの結果となるカバレッジレポートやバッジをTravisCIやGithubに反映させるための処理を書いています。カバレッジレポート作成にはcoverallsというnode.js製のnpmパッケージを使います。

また、ローカルにあるプロジェクトにはテストのコードも用意します。手順は第2回と第3回目、第4回目をご覧ください。

自身のブログ
javascriptでプログラムのテストを行う方法を解説します。mocha・power-assertの簡単な使い方
 javascriptでテストカバレッジ(網羅率)を取得する方法を解説します。istanbulの簡単な使い方
 javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方

再びGithubにプログラムをpush

続いてローカルのプログラムをGithubのリポジトリにプッシュします。リモートリポジトリが無い場合は、予めGithubのリポジトリを登録しておきます。

bash

1
2
3

$ git remote -v
$ git remote add origin https://your-github-repository.git
$ git push origin master

上記コマンドでは、

$ git remote -vで何も返ってこない場合
$ git remote add origin githubリポジトリでリポジトリのURLを登録
登録したGithubリポジトリにプッシュ

という処理を行っています。

pushされたタイミングでTravisCIがテストを実行される

続いて、Githubのリポジトリを見てみましょう。リポジトリでcommits(コミット履歴)を開きます。

GithubリポジトリにPushした後で、TravisCIが動作していれば、下図のようにテストやカバレッジの結果がアイコンで表示されます。チェックマークが表示されれば、テストプログラムやカバレッジが問題なく通った事を示しています。

上図のように、Detailsでテストやカバレッジの詳細レポートを見てみましょう。

まずは、TravisCIによるテストと構文チェックの結果を確認してみたいと思います。TravisCIのDetailsを開くと、下図ようにTravisCIで実行されたプログラムのログが確認できます。

ログの後半を下図のように確認していくと、第3回目や第4回目で書いたテストプログラムや構文チェックが実行されているのが分かります。

実行結果はローカル環境で行った結果と同じです。

続いて、カバレッジ・レポートも見てみましょう。Githubのコミット履歴から、coverallsのDetailsを開きます。

こちらも第3回目で解説したように、ローカル環境でカバレッジ・レポートを確認した内容と同じものが表示されています。

以上のように、テストとカバレッジが動作していれば、作業は完了です。

まとめ

という事で、今回はjavascriptやES6をTravis CIで継続的にインテグレーションする手法を分かりやすくまとめました。

冒頭で触れた通り、GithubとTravisCIを連携させると、GithubリポジトリのREADME.mdでテストやカバレッジの結果をバッジ表示させる事ができます。

README.md

1
2
3

以下のコードでバッジ表示できる
[![Build Status](https://travis-ci.org/tea3/js-test-practice.svg?branch=master)](https://travis-ci.org/tea3/js-test-practice) 
[![Coverage Status](https://img.shields.io/coveralls/tea3/js-test-practice.svg)](https://coveralls.io/r/tea3/js-test-practice?branch=master)

Travis CIを活用すると、Githubへリポジトリをpushするたびに、テストを自動で実行させる事ができますので、ぜひ参考にしてください。