SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptでテストを書こう!

コードの健康状態を保て! Jenkinsとtestemを使って、JavaScriptで継続的インテグレーション(CI)を行う

JavaScriptでテストを書こう! 第7回

  • このエントリーをはてなブックマークに追加

 本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義から、テスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなどテスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第7回目の本稿は、JavaScriptで行う継続的インテグレーションについて解説します。

  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptの基本をある程度理解している方
  • テストコードをこれから書こうと考えている方

継続的インテグレーションで「コードを健康的な状態に保つ」

 皆さんはどのように開発したコードのテストとビルドを行っていますか? もう15年ほど前になりますが、筆者が行っていたJavaプロジェクトの方法を紹介しましょう。

  1. テキストエディタでJavaのコードを修正
  2. 共有ディレクトリにコピー
  3. システムすべてのコードをコンパイル
  4. システムすべてのコードをjarファイル化
  5. 共有開発環境を手動シャットダウン
  6. 共有開発環境に手動ビルド
  7. 共有開発環境を手動起動
  8. 手動で画面から動作テスト
  9. エラーが起きた場合は1.に戻る

 箇条書きにするとやることが多いですね。もしかすると古いシステムを開発されている方々は、これと近い方法でテストをしている場合もあるのではないでしょうか。何をやっているかはわかりやすいのですが、少しでもエラーがあるごとにこれらを手作業で行うことを考えると、相当な時間を使うことになるでしょう。また、この方法ですと、当然ながらシステム全体にエラーが存在しない状態を保証することはできません。

継続的インテグレーションとは

 このような手順を出来るだけ少なくしたいと考える開発者の方は多いのではないでしょうか。そこで継続的インテグレーション(CI)の登場です。まずはビルドのプロセスを整理してみましょう。

図1 ビルドのプロセス
図1 ビルドのプロセス

 おおまかに分けるとこのようなプロセスに分かれます。開発をする際はこれを繰り返しながら行っているはずです。これを行うことができる仕組みと、常に行っているという状態を継続的インテグレーションと言います。「継続的インテグレーション」という言葉は、「インテグレーション(結合、統合)」を「継続的に実行する」という意味です。気がついた時や動作確認をしたい時のみにビルドのプロセスを実行するのではなく、常に実行し続け、いつでもエラーの無い状態を保っておきます。

 また、Jenkins等の継続的インテグレーションのツールを使用すると、ビルドプロセスを自動化することができます。コーディング以外の部分を自動化することで、コーディングし、ソースコード管理システムに登録を行うだけで、ビルドが回ります。では、そのような環境を作ることでどんな利点があるかを整理してみましょう。

大きな利点である「フィードバックプロセス」

 コーディングが終わり、gitなどのバージョン管理システムに登録(push)を行うと、自動的にコンパイル、テストの実行が行われ、その結果を終わり次第知ることができます。エラーにならなければ次の開発を行い、エラーになればすぐに直すことができます。常にコードの状態が見える化されるということになります。見える化されることで、すぐに直すことができますし、エラーが出ていなければ安心して別のコーディングを行うことができます。

図2 フィードバックプロセスが回っている状態
図2 フィードバックプロセスが回っている状態

 これはまさにフィードバックプロセスが回っている状態です。見える化し、その状態や結果によって修正を行う。このフィードバックプロセスが回り出した時に品質を常に高い状態を維持することができます。エラーが出ると放置しがちですが、放置せずに常にグリーンの状態を保つことが重要です。グリーンの状態を保つということは「常にコードを健康的な状態に保つ」ということです。コードの健康状態が良ければ開発者の健康状態も良くなります。実はやろうとすると習慣化するのはなかなか難しいのですが、チームでルールを決めるなどして補い合い、コードの健康状態を保つようにしていきましょう。

JavaScriptでの継続的インテグレーション

 継続的インテグレーションはサーバサイドアプリケーションの開発だけでなく、JavaScriptでも大切です。ただ、JavaScriptの場合はブラウザで動作させる必要があるだけでなく、様々なブラウザとバージョンに対応する必要もあり、サーバサイドアプリケーションとは少し勝手が違います。そこで、自動テストを記述するだけでなく、ツールを使って必要なブラウザでのテストを行うなどの工夫が必要になります。

 では、具体的にJavaScriptで継続的インテグレーションを動かしてみましょう。今回は、オープンソースの継続的インテグレーションツールであるJenkinsと、複数ブラウザでテストが実行できるJavaScriptのテストツールであるtestemを使って方法を説明します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Jenkinsとは

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
JavaScriptでテストを書こう!連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 安西剛 (ヤスニシ ツヨシ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8391 2015/01/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング