<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>TestTWF &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/testtwf/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>テストを書いてWebを前進させよう！「Test the Web Forward Meetup (仮), Tokyo #1」</title>
		<link>/myakura/2704/</link>
		<pubDate>Mon, 30 Sep 2013 04:00:34 +0000</pubDate>
		<dc:creator><![CDATA[矢倉 眞隆]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[TestTWF]]></category>
		<category><![CDATA[W3C仕様]]></category>
		<category><![CDATA[html5j]]></category>

		<guid isPermaLink="false">/?p=2704</guid>
		<description><![CDATA[連載： イベントレポート (4)こんにちは。html5jテスト部の部長を務めています矢倉です。 今回は9月14日に行われた「Test the Web Forward Meetup (仮), Tokyo #1」について報告...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/eventarchives/" class="series-159" title="イベントレポート" data-wpel-link="internal">イベントレポート</a> (4)</div><p>こんにちは。html5jテスト部の部長を務めています矢倉です。<br />
今回は9月14日に行われた「Test the Web Forward Meetup (仮), Tokyo #1」について報告します。</p>

<p><span id="more-2704"></span></p>

<h2>Test the Web Forwardとは</h2>

<p>今回のイベントをレポートするにあたり、まずはTest the Web Forward (TestTWF) について説明しないといけませんね。<a href="http://testthewebforward.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test the Web Forward</a>とは、HTMLやCSSなどW3Cが策定している仕様のテストケースを、参加者で一緒に書こうというコミュニティイベントです。</p>

<p>W3Cの仕様が勧告されるには、仕様の実装が必要なのですが、その実装が正しいかを確かめるテストケースも必要です。しかし近年、これまでにないペースで数多くの仕様が公開され、また機能も複雑化していることから、テストが大きな課題となっています。そこで「Webプラットフォームを前進するために、みんなでテストを書いて協力しよう」というイベント、Test the Web Forwardが誕生しました。</p>

<ul>
<li><a href="http://www.w3.org/blog/2012/10/test-the-web-forward/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test The Web Forward | W3C Blog</a></li>
<li><a href="http://aphall.com/2013/06/test-the-web-forward-tokyo/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test The Web Forward とは？ ＆ 来られなくても参加できる方法</a></li>
</ul>

<p>TestTWFは世界各国で開催されており、<a href="http://testthewebforward.org/events/tokyo-2013.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">今年の6月には東京でも開催</a>されました。東京のイベントでは最終的に700を超えるテストが提出され、大成功を収めました。</p>

<ul>
<li><a href="http://blogs.adobe.com/webplatform/2013/06/26/test-the-web-forward-tokyo/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test the Web Forward Tokyo! | Web Platform Team Blog</a></li>
<li><a href="http://www.atmarkit.co.jp/ait/articles/1306/25/news008.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">テストを通じて「より良いWebの実現」に貢献～Test the Web Forwardレポート &#8211; ＠IT</a></li>
<li><a href="http://gihyo.jp/news/report/2013/06/1701" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Webをより良いものにしよう！ HTML5/CSSの仕様のテストを書くハッカソン「Test The Web Forward Tokyo 2013」レポート｜gihyo.jp … 技術評論社</a></li>
<li><a href="http://plus.adobe-adc.jp/post-3208/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Web標準をテストするハッカソン –「Test The Web Forward」がついに東京に上陸 | ADC Plus</a></li>
<li><a href="http://fumit.blogspot.jp/2013/06/test-web-forward-testtwf.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Fumi&#8217;s Travelblog: Test the Web Forward を開催しました！ #testtwf</a></li>
</ul>

<h2>html5jテスト部とTestTWF Meetup (仮)</h2>

<p>Test the Web Forward Meetup (仮) は、<a href="http://html5j.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">html5j</a>のテスト部が主催するイベントです。6月のTestTWF後にhtml5jスタッフ内で「1回きりじゃもったいないから、継続開催していこう！」という話が発端となり、テスト部が立ち上がりました。</p>

<p>その際に筆者がテスト部の部長となったのですが、自分はW3CやWeb標準について少し知っているだけで、とくにテストについて明るいわけではありません。また、テスト部のスタッフにもテスト未経験者がいます。「じゃあまず、スタッフでテストの勉強会をしよう」という話になりました。</p>

<p>日程を調整して一段落したとき、TestTWFがW3Cの公式アクティビティとして取り込まれたことを知りました。これまでのコミュニティ活動が標準化団体にも認められたのです。素晴らしいことですね。</p>

<p>ではその流れに乗っかり、スタッフ勉強会をTestTWFにしようという話になり、今回のTestTWF Meetup (仮) の実現に至りました。今回はW3Cが主催するイベントではないので、「Test the Web Forward Meetup (仮)」と名前を変え、開催することに。「Meetup (仮)」とあるのは、W3C内でTestTWF関連イベントのブランディングを考えており、コミュニティで主催イベントの名前案に「TestTWF Meetup」があったので、「(仮)」とつけた上で使わせていただきました。</p>

<h2>TestTWF Meetup (仮), Tokyo #1レポート</h2>

<p>TestTWFについて簡単に説明するつもりが、だいぶ長くなってしまいました……。ここからようやく「TestTWF Meetup (仮), Tokyo #1」のレポートになります。</p>

<p>今回のイベントは、告知が開催1週間前になるなど急ごしらえ感の否めないものでしたが、20名近くの方に集まっていただきました。</p>

<h3>午前中はテストの書き方を勉強</h3>

<div id="attachment_2711" style="width: 310px" class="wp-caption alignright"><img src="/wp-content/uploads/2013/09/IMG_4608-300x199.jpg" width="300" height="199" class="size-medium wp-image-2711" srcset="/wp-content/uploads/2013/09/IMG_4608-300x199.jpg 300w, /wp-content/uploads/2013/09/IMG_4608-207x137.jpg 207w, /wp-content/uploads/2013/09/IMG_4608.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /><p class="wp-caption-text">TestTWF Meetup (仮) の説明をする筆者</p></div>

<p>まず、筆者による挨拶と今回のMeetup (仮) の説明、その後、どのようなフローでテストケースが取り込まれるのかなどを説明しました。</p>

<ul>
<li><a href="https://docs.google.com/presentation/d/1kNbHD956TedQ2K9L8YNMM9ZlPzGKJbwuyjd9Wj-RBPU/edit?usp=sharing" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test the Web Forward Meetup (仮), Tokyo #1</a></li>
</ul>

<p>仕様のテストケースはW3CのGitHubアカウントが管理しており、レポジトリにPull Requestを送ることでテストを提出できます。テストのレビューは、レビュアーがいればその場でしてもらえます。レビュアーがいない場合はPull Requestを投げて、レビューを待ちます。</p>

<p>今回はレビュアーを呼べなかったので、Pull Requestを投げることをゴールとしました。ただしそれではテストが取り込まれませんので「帰ってからもTestTWF」になります。なかなかに厳しいイベントです。</p>

<p style="clear:both">続いて<a href="https://html5experts.jp/nakajmg/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Experts.jpコントリビューターの中島直博さん</a>に、CSSのテストケースのひとつ「リファレンステスト（reftest）」について説明していただきました。</p>

<div id="attachment_2722" style="width: 310px" class="wp-caption alignleft"><img src="/wp-content/uploads/2013/09/Screen-Shot-2013-09-24-at-21.09.43-300x225.jpg" width="300" height="225" class="size-medium wp-image-2722" srcset="/wp-content/uploads/2013/09/Screen-Shot-2013-09-24-at-21.09.43-300x225.jpg 300w, /wp-content/uploads/2013/09/Screen-Shot-2013-09-24-at-21.09.43-207x155.jpg 207w, /wp-content/uploads/2013/09/Screen-Shot-2013-09-24-at-21.09.43.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /><p class="wp-caption-text">テストとリファレンスを見比べ、一致したらPASS！</p></div>

<ul>
<li><a href="http://slid.es/nakajmg/reftest" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">リファレンステストの書き方</a></li>
</ul>

<p><a href="http://wiki.csswg.org/test/reftest" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Reftest</a>は、テストしたい仕様を使って書いたテストケースと、すでに使える仕様（CSS 2.1など）で再現した「リファレンス」、ふたつのHTMLドキュメントを書くというテストの形式です。</p>

<p>CSSのテストは、ほかにも「テストをパスしたらここが緑になるよ」などとHTML中に書くテスト（self-describing test）という仕組みも存在していますが、機械的にも比べられる点からreftestが好まれているようです。</p>

<p style="clear:both">最後に、HTML5 Experts.js編集長の白石さんによる、仕様のテスト用フレームワークtestharness.jsの説明です。</p>

<div id="attachment_2729" style="width: 310px" class="wp-caption alignright"><img src="/wp-content/uploads/2013/09/th_1-300x202.png" width="300" height="202" class="size-medium wp-image-2729" srcset="/wp-content/uploads/2013/09/th_1-300x202.png 300w, /wp-content/uploads/2013/09/th_1-207x139.png 207w, /wp-content/uploads/2013/09/th_1.png 640w" sizes="(max-width: 300px) 100vw, 300px" /><p class="wp-caption-text">非同期なテストのコード例</p></div>

<ul>
<li><a href="http://dl.dropboxusercontent.com/u/7571134/testharness-intro/index.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">testharness.jsでテストするには</a></li>
</ul>

<p><a href="https://github.com/w3c/testharness.js" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">testharness.js</a>は、HTMLやAPI仕様、CSSOMなど、DOM APIをテストする際に使用する、仕様のテストに特化したフレームワークです。「仕様のテストに特化」と書きましたが、QUnitなどJavaScriptのテストフレームワークに馴染みのある方にはそこまで難しくないと思います。白石さんも、なんと前日夜にスライドやコードを読んで話してくれました！</p>

<p>リンクしたtestharness.jsのスライドは作者本人による紹介スライドの翻訳なのですが、実際の仕様書の記述からテストに落としこむかたちで関数の使い方が説明されており、仕様書の読み方を知るとてもよい資料でもあります。リファレンスとしては、<a href="http://darobin.github.io/test-harness-tutorial/docs/using-testharness.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">using-testharness.js</a>という文書が便利です（現在翻訳中です）。</p>

<p>ひと通り説明が終わったところで、お昼の時間に。午後からテストを書くので、CSS、API、HTML5とテストを書きたい対象ごとにグループになってもらい、そのグループでお昼ごはんを食べることになりました。</p>

<h3>午後はテスト書き…探すのが難しい！</h3>

<p>午後からいよいよテストケースを書きます。CSS、API、HTML5と大きなグループに分かれたので、テストしたい仕様書や機能を選んでテストを書いてもらいます。</p>

<p>しかし…ここからが厄介でした。無印のTest the Web Forwardでは、仕様書のEditorやテストのレビュアーが数多く参加してくれるため、その人達が関わる仕様書のテストを書けばとてもスムーズですが、今回はそうではないので自分たちでテスト対象を決める必要がありました。自分が馴染みのある仕様を選べるという点は自由でよいのですが、すでにテストが書かれている場合もあります。これを調べるには仕様書のテストカバレッジを見ればよいのですが、仕様書のどの箇所に対してテストされているのか記載がなく、テストケースを見るしかありませんでした。</p>

<ul>
<li><a href="http://w3c-test.org/web-platform-tests/master/tools/coverage/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Test Suite Coverage Analysis</a> ― Webプラットフォーム仕様のテストカバレッジを知るツール</li>
<li><a href="http://test.csswg.org/shepherd/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">CSS Test Suite Manager</a> ― CSS WGが利用する、テストスイートマネージャ</li>
<li><a href="http://www.w3.org/html/wg/tests-cr-exit.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Overview of testing in view of CR exit</a> ― HTML5仕様の目次を取り出し、テストのカバレッジや実装状況を大まかに色分けした上で表示したもの</li>
</ul>

<p>テストを書く時間もそこそこかかるのですが、今回いちばん難航したのが、このテスト対象を探すことだったように感じています。</p>

<h3>書いたらPull Request！テストの解説も</h3>

<p>テストを書き始めて3、4時間。いよいよ追い込みです。グループ内で分かる範囲でテストを確認して、コミット、push、そしてPull Requestをしました。今回は計12件のテストがPull Requestで提出されました。</p>

<p>それぞれのグループごとに分かれて作業していたため、最後に参加者のみなさんが書いたテストのコードについて、どういったテストなのかを説明させていただきました。</p>

<div id="attachment_2716" style="width: 801px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2013/09/IMG_4652.jpg" width="791" height="527" class="size-full wp-image-2716" srcset="/wp-content/uploads/2013/09/IMG_4652.jpg 640w, /wp-content/uploads/2013/09/IMG_4652-300x199.jpg 300w, /wp-content/uploads/2013/09/IMG_4652-207x137.jpg 207w" sizes="(max-width: 791px) 100vw, 791px" /><p class="wp-caption-text">謎のジェスチャをする筆者（たぶんCSSのテストについて説明していたのでしょう）</p></div>

<h2>おわりに</h2>

<p>今回は「一人ひとつはPull Request」という目標を立てていましたが、残念ながら達成できませんでした。カバレッジの調査や仕様の選定についてもう少し力を入れるべきだったと反省しています。次回は仕様を絞ったイベントとする、レビュアーの方に協力してもらうことなどを検討しています。</p>

<p>運営としては反省点が多かったのですが、イベントとしてはとても良いことがありました。6月のTestTWF参加者の方に、今回初参加の方にテストの書き方やPull Requestなどを助けてもらったことです。みんなで作り上げるというコミュニティイベントとして、これほど理想的なかたちはありません。</p>

<p>参加者のみなさん、会議室をお貸しいただいた<a href="http://www.geeplus.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ジープラ株式会社</a>さま、本当にありがとうございました。また、AdobeのRebecca Hauckさんには、TestTWFやテスト全般について多くのことを教えていただきました。ありがとうございました。スタッフの皆さんも、おつかれさまでした。</p>

<p>GitHubでも、<a href="https://github.com/w3c/web-platform-tests/pull/337" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Pull Requestがひとつマージされました</a>。まだレビューされていないテストがほとんどですので、これからも動向を追いかけていくつもりです。</p>

<p>今後もTestTWF Meetup (仮) は開催したいと思っていますし、Test the Web Forward自体もまた日本で開催したいという野望があります。ぜひご期待ください！</p>

<p>（Photo Credit: <a href="https://html5experts.jp/nakajmg/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">中島直博</a>）</p>
]]></content:encoded>
		
		<series:name><![CDATA[イベントレポート]]></series:name>
	</item>
	</channel>
</rss>
