レポート

「第38回 HTML5とか勉強会 ~Webアプリ×テスト最新事情」活動報告

この記事を読むのに必要な時間:およそ 3 分

2013年4月26日,Googleのオフィスをお借りして,第38回HTML5とか勉強会を開催しました。今回のテーマは「Webアプリ×テスト最新事情」⁠Webアプリとしましたが,今回の内容は主にJavaScriptのテストになります。昨今JavaScriptが利用されるシーンが非常に多くなり,コードの量も多くなってきています。これによりテストが必要になるケースが増えてきていますが,JavaScriptのテストといえばこれ,というものがあまりない現状です。

このような背景もあってか,今回の勉強会の参加率はとても高く,当初予定していた部屋だけでは収まりきらず急遽サテライト会場ができるほどで,JavaScriptテストへの注目度が高いことが伺えました。

本稿では,今回のイベントについてレポートします。

画像

JavaScript Unit Test Why? What? How?

トップバッターとして,サイボウズの佐藤鉄平さんにJavaScriptテストの全体像について紹介いただきました。

画像

昨今のJavaScriptはフロントエンドに求められるものが多くなるにつれて,コードが大きくなり,開発に関わる人も多くなって,コードもチームも大規模になってきています。しかし,同時に速い開発と高い品質の維持も必要です。そこで,JavaScriptにもユニットテストが求められてきています。

この流れとNode.jsの隆盛も相まって,テストを行う上でのツールや,テストがしやすくなるライブラリが多く出てきており,非常にテスト環境がよくなりました。

例えば,JavaScriptでのMV*フレームワークの登場により,モデル(ロジック)とビューを切り分けられるようになり,ロジック部でテストが行えるようになりました。

また,JavaScriptは実際のブラウザ上で実行する必要がありましたが,Node.jsのようにブラウザ以外で実行できる環境が出てきたことや,ブラウザ実行を補助するツールが出てきたため,とても簡単にテストが行えるようになりました。

現在,主に利用されているテストツールの分類は次のようになり,この各分類の中から好きなものを選んで組み合わせてテストするのが良いそうです。

モックライブラリ
外部環境に起因するコードのふりをするオブジェクトを作り,返り値を固定化してテストを行うもの
テスティングフレームワーク
テストの書き換えたを決める,優劣はなく自分やチームにあったものを選ぶ
実行環境
実ブラウザやPhantomjsなどの実際にJavaScriptが動く環境
リモートテストランナー
実際のブラウザからリモートで実行するツール

画像

佐藤さんは,テスト環境が作りやすいためJasmin+testem+実ブラウザの組み合わせがおすすめとのことです。

最後に,⁠最近のJavaScriptテスト環境はよくできているので,TDD的にやるのも楽しくできるので今すぐやりましょう」と締めくくりました。

詳しくは,講演資料講演動画をご覧ください。

unit-testing with jasmine

2番目の講演では,サイバーエージェントの斉藤裕也さんにJavaScriptテストティングフレームワークであるJasmineの特徴や使い方について紹介いただきました。

画像

Jasmineは,JavaScriptのためのビヘイビア駆動開発(BDD)のフレームワークです。BDDは,テスト駆動開発(TDD)と同じようにテストコードを最初に書く開発手法ですが,テストではなく仕様(スペック)を実装するのが目的です。テストコードの記述方法は,自然言語に近い形がとられており,これによりテストコード自体の可読性も上がり,これから書くプログラムの仕様理解の手助けにもなります。

Jasmineは,本体をダウンロードしてくるだけでテストができます。設定などを書き換える必要がありません。最新版は,http://pivotal.github.io/jasmine/からダウンロードできます。

ダウンロードしたファイルの中に,すぐに実行できるテストがありますので,どのように使うのかがわかりやすくなっています。

Jasmineにはビルドインで14個のmatcherが用意されていますが,自由に追加することもできるため,自然言語に近い記述でテストを書くことが容易です。使い方は次のようになります。

画像

また,matcherのような基本的な機能以外にも,高度なテストを行うための仕組みも用意されています。それが次の3つです。

beforeEach/afterEach
毎スペックの前後に処理を入れて,データを初期化する等を行う
waitsFor
非同期処理の処理を指定時間待つ
spy
指定した関数に成り代わって,その関数が呼ばれた回数や引数などをしることができる

さらに,Jasmineをより便利にするツールがいくつも存在しています。講演内では次のものを紹介しました。

  • Jasmine.async
  • Jasmine-jQuery
  • Jasmine-sinon
  • underscore matchers for jasmine
  • javascript testing boilerplate
  • javascript-koan

最後に,⁠テストはデベロッパーズブロックの解消につながる。リファクタリングするにもコードを新規に書くにしても助けるツールになるし,自分のコードの理解もしやすくなるツールにもなる。テストがあることで改変,拡張にも対応しやすくなるので,テストは重要である」と述べ,締めくくりました。

詳しくは,講演資料講演動画をご覧ください。

著者プロフィール

井原雄太郎(いはらゆうたろう)

「html5j.org」スタッフ,主に雑用とたまにレポート記事を担当。Web系男子を目指す1987年生まれ。主に使う言語はJavaとJavaScriptとRuby。

twitter:@yutaro_i

コメント

コメントの記入