プログラマとデザイナで時計を作るVisual Studioハッカソン × TDDBC 大阪 for C# 2013/01/19 http://atnd.org/events/34779 http://atnd.org/events/34780

1. TDDの考え方を開発全体に応用してみよう!
biac
BluewaterSoft
2013/1/19 Visual Studio ハッカソン 1

2. biac (山本 康彦)
BluewaterSoft http://www.bluewatersoft.jp/
略歴
- 名古屋大学工学部(修士)
- HONDA R&Dで自動車設計
- 1994～ ソフトウェア業界
- 2012～ BluewaterSoft
著書
「速攻入門 C#」(2012/3) 技術評論社、共著
「ソフトな彼女とハードな彼氏。」(2012/3) アジャイルマインドvol.1掲載
2013/1/19 Visual Studio ハッカソン 2

3. 連載
「C#でTDD入門」 CodeZine
「WinRT/Metro Tips」 @IT .NET開発者中心
Web
TDD.NET http://www.tdd-net.jp/
biac の それさえもおそらくは幸せな日々@nifty
http://bluewatersoft.cocolog-nifty.com/blog/
Win8やWP8のアプリを作ってます
2013/1/19 Visual Studio ハッカソン 3

4. Claudia Clock
© HATSUNE, Akira
Leotard Clock
© Pie Dey
2013/1/19 Visual Studio ハッカソン 4

5. Clover Clock
© Kimamano Yuu, Inc.
ミク時計
© UsusWin8AppsProjects
2013/1/19 Visual Studio ハッカソン 5

6. ClockCompass
© www.duruofei.com
BarbarClock
© tkinugaw
2013/1/19 Visual Studio ハッカソン 6

7. My 3D Clock
© Axilesoft
Hover Clock 3D
© Xoanan Industries, LLC.
2013/1/19 Visual Studio ハッカソン 7

8. …と、その前に。
プログラムの作り方 (開発プロセス) につい
て、おさらいしておきましょう。
2013/1/19 Visual Studio ハッカソン 8

9. 何を作るか?
完璧に決める
• 外観
スペック
• 機能1、機能2、・・・
決定
決めたとおりに
ひたすら作る
• 外観 (画像制作、プログラミング)
制作 • 機能1プログラミング、機能2プログラミング、・・・
最初に決めたとお
• 外観 りに出来たか?
検証 • 機能1、機能2、・・・
はっきり言って、このやり方はクリエイティブじゃない。
・途中で思いついたアイデア → 却下!
・飽きる。テンションを維持できない。
完成 ・1発で最高のモノが出来上がる!?
2013/1/19 Visual Studio ハッカソン 9

10. Test Driven Development テスト駆動開発
＝ テストファースト ＋ リファクタリング
テストファースト
失敗する自動化されたテストを書く ⇒
新しいコードを書いてパスさせる ⇒
リファクタリング
All Greenを維持したまま改良 ⇒
2013/1/19 Visual Studio ハッカソン 10

11. スペック • テストケース1、 テストケース2、 テストケース3
決定
• コーディング、 コーディング、 コーディング
制作
• 自動テスト1、 自動テスト2、 自動テスト3、
検証
ちょっとずつ完成させる
・テストケース(スペックの例示)を1つ書く
・そのテストケースをパスするだけのコードを書く
・新しいテストケースが考え出せなくなったら、完成 完成
2013/1/19 Visual Studio ハッカソン 11

12. ハードウェアの開発 ソフトウェアの開発
開発者のアウトプット 開発者のアウトプット
＝図面 ＝ソースコード
試作 (開発中の図面で製造) 試作 (コンパイル/ビルド)
コストも時間も掛かる コストも時間もほぼゼロ
完成品のカタチにならないと 機能ごとに作ってテストが可
テストしにくい 能、自動化も容易
試作回数を減らしたい!! 試作回数増、ウェルカム!!
かわりに、計画やレビューを 走りながら考えたっていい
きっちりやるぜ! じゃないか!
2013/1/19 Visual Studio ハッカソン 12

13. スペック • 外観、 機能1、 機能2、 ・・・、 追加機能
決定
• 外観、 機能1、 機能2、 ・・・、 追加機能
制作
• 外観、 機能1、 機能2、 ・・・、 追加機能
検証
i&i : インクリメンタル & イテレーティブ
・途中で思いついたアイデア → 取り込みやすい
・飽きない(飽きるヒマが無いw)。1イテレーション=2週間前後
・1発で最高のモノが出来上がったりするはずないと分かっている。
2013/1/19 Visual Studio ハッカソン 13

14. ウソです! (w
やっぱり最初に、全体の構想を考えます。
キッチリ考えるのは、そのイテレーション
に入ってから。
そういういわば「ハイブリッド」なやり方
も i&i と呼んでいます。
ついでに言っておくと、
i & i ＋ 顧客主導 ＝ アジャイル
2013/1/19 Visual Studio ハッカソン 14

15. ソフトウェア開発の特性:
試作コスト＝ほぼゼロ、
テストの自動化も容易
⇒ インクリメンタル&イテレーティブ可能
テストファーストは、コーディングレベル
の i&i だと言える。
2013/1/19 Visual Studio ハッカソン 15

16. インクリメンタル&イテレーティブ (i&i) を
意識してみよう
最初に全体の構想と、機能の洗い出し
個々の機能を実装するときに、あらためて
キチンと打ち合わせをする。
このときは、ゴールを明確に
当初の予定とは違うことをやりたくなるは
ず! それが当たり前
2013/1/19 Visual Studio ハッカソン 16

17. アイデアソンで全体の構想を決める
【デザイナー】 外観、機能を決定する
開発者の意見を参考に…
【開発者】機能の実現可能性を見積もる
※ ハッカソンの時間内に完成できそう?
細かいことは後回し、と言ったけど…。
開発者は、実現可能性の判断に必要なことは聞き出すべし!
たとえば「秒針が動く」でも、「ス～っと動く」か「カチ、コチと動く」か
でアーキテクチャが変わるぞ!!
2013/1/19 Visual Studio ハッカソン 17

18. ハッカソン開始: 最初のイテレーション計画
【デザイナー】
・最初に開発してもらう機能を選ぶ
・自分の作業の段取りも考える
【開発者】
・もしも機能の開発順序に制約があるなら、
説明する
・開発中に画像が必要になるタイミングが
あるなら、説明する
2013/1/19 Visual Studio ハッカソン 18

19. イテレーション開始
【デザイナー】このイテレーションで作る
機能を説明する (場合によっては変更する)
【開発者】実装できると確信できるまで、
機能の聞き取りをする。ゴールも明確に。
この最初の打ち合わせの時に、「デザイナーの作業中に、機能に関する質問
をしてもいいかどうか」も、決めてください。OKなら、「だいたい分かった
♪」で作り始めても良いのですが…。デザイナーもプログラマーも、多くは
フローを断ち切られるとガックリ生産性が落ちる人種なのです。
2013/1/19 Visual Studio ハッカソン 19

20. どうぞ遠慮なく訊いてください
全体
@biac
TDD
@irof @datsuns
ペアプロ
@daiksy
C#
@moririring @Posaune
2013/1/19 Visual Studio ハッカソン 20

21. 本日のメインディッシュは、コレ♪
開発プロセスだのTDDだのは、 オマケだからねっ!!
2013/1/19 Visual Studio ハッカソン 21

22. TDDの考え方を開発全体に応用してみよう!
2013/1/19 Visual Studio ハッカソン 22