見出し画像

初めて#tddyyχの通常回に参加した

amixedcolor

はじめに

こんにちは！amixedcolor(エイミ)です。

今回の記事は、初めてTDDワイワイ会 (TDDyyχ)の通常回である、TDD+モブプログラミングでワイワイする会 その35に参加してきたので、やったことや感想を書いていきます。

TDDyyχの説明は、ここを参照してください

TDDワイワイ会

自己紹介

輪になって、一人ずつ、今日呼ばれたい名前、普段何をしているか、今どんな気持ちかを話しました。

僕が話したのはこんなことです。
「エイミックストカラー(amixedcolor)もといエイミといいます。今日はエイミと呼んで欲しいです。普段は筑波大学で学生をしていて、TDDyyχは2回目、といいつつ初回はグローバルデイオブコードリトリート2021 in #tddyy χだったので、普通のTDDyyχは実質的な初回みたいなところがあって、ちょっとドキドキしながらもすごく楽しみにしています。TDDyyχ楽しむぞ！って気持ちでいますよろしくお願いします」

はじめての人も多く、わくわくした感情を僕は感じました。

余談ですが、初回の分もこのブログ記事を書いていて、noteではないのですが気になる方は読んでみてくれると嬉しいです。

TDD+モブプロでワイワイする

チームを組んで、TDD+モブプロでワイワイしました。

チームメンバーは、ﾂﾉさんと、shuyuheyさん、そして僕エイミの3人です。選んだ言語はJavaScript、選んだお題はFizzBuzz、ツールはcyber-dojo、テストライブラリはjestでした。

FizzBuzzの実装自体は難しいものではありませんが、TDDで、モブプロで、という部分が新しい学びとして困難性をあげていました。

実際にコードを書く前には、どんな振る舞いをして欲しいのかを書き出しました。最終的には画像のようになりましたが、最初は、「数字をもらうと数字をひとつずつ出力する」でした。これと画像で違うのは、「返す」「出力する」という部分ですが、このとき意識すると良いと学んだのが、その振る舞いの責務を少なくするということでした。今回の例では、計算する責務と出力する責務を分けたのです。

書き出すときにもう一つ意識したのが、書き出している1項目が1テストディスクリプションと対応するようにするということでした。これにより、どの項目がまだ達成できていないのか、今達成したい項目がなんなのかが明白になります。

ホワイトボードに書いた振る舞い

これを書き出したら、実装に入りました。

落ちるテストを書く→最小限の実装でテストを通す→リファクタリングする

という流れに沿って、テストを書いて落としたら交代する形でモブを回しつつ、TDDをしていきました。

TDDをしていく中で、3つのキーワードが出てきました。

  1. 仮実装

  2. 三角測量

  3. 明白な実装

それぞれ、例を挙げながらなんなのか、なぜそれをするのかを書いていきます。

  1. 仮実装
    これは、FizzBuzzで3の倍数のときはFizzを返すことをテストするときに、「func(3)の戻り値＝Fizzである」というテストを書いたとき、最小限の実装を考えます。その実装を仮実装と呼び、今回の例ではif文で3の倍数の時だけFizzを返すようにしました。
    これによって、難しい問題だったときでも、テストを通すことだけに集中できます。そしてテストを通すに必要な条件の事例を作れます。この事例が次の「三角測量」で活きてきます。

  2. 三角測量
    これは、3の倍数のときに、「func(3)の戻り値＝Fizzである」と「func(6)の戻り値＝Fizzである」というテストに対して2つの事例ができたとき、その規則性から、一般化されたコードになるようにリファクタリングをすることです。今回の場合、3と6でFizzになるように、それぞれ等号でif分岐してコードを書いていましたが、これは3の倍数です。であれば、if分岐は3で割った余りが0のときで良いのではないでしょうか。これが三角測量です。
    これによって、事例を一般化することができ、たとえば今回のFizzBuzzでは、9,12, … 96,99というような全てをif分岐する必要がなくなります。

  3. 明白な実装
    これは、5の倍数のときの実装を考える際、すでに経験のある3の倍数の時の実装が参考になるということです。3の倍数の時は経験がなかったために、仮実装→三角測量という流れをたどりましたが、5の倍数の時は、3の倍数と同じ要領で数字を5にすればできると考えます。これをモブ内で合意し、「明白な実装」としてはじめから5で割った余りが0のif分岐をします。
    これにより、明白な部分に関して余計かもしれないことを繰り返さずに実装できます。

少し長くなりましたが、このようなものだと僕は認識しています。

実装は続きまして、FizzBuzzを返すとこまで行ったときには、3と5の数字を定数化、15の数字は3と5の定数による計算で定義しました。

続いて、出力のところまでやってきました。出力はconsole.logにしましたが、どうやってテストするのでしょうか？僕たちのチームは、ここで一旦モブプロを止めて、全員で方法を調べました。結果的に、このページにあるspyonというメソッドを用いて、console.logが呼び出されているか、その中の値は期待通りかを確認しました。

残念ながら前半の時間制限には間に合いませんでした。でもすっごく楽しかった！！！！

終了時点でのRed, Yellow, Greenの数

しかし、さっき僕の方で調べて無事グリーンになりました！！通らなかった理由は、「.(ドット)」は「改行以外の全ての文字」を表す文字だったからです。それを解決するためにsモード（シングルラインモード）のパターン修飾子を足しました。参考記事はこの記事です。改行文字は「\n」のままでよかったです。

前半をふりかえる

最初と同じように輪になって、一言ずつ感想を言いました。

僕が話したのはこんなことです。
「自分もちゃんとテストコードを書くのがめちゃくちゃ久しぶりで多分今、今日が一番人生でテストコードを書いているんですけど、標準出力のテストを、みんなで調べながら書くっていうことができて、すごく楽しく、いろいろな学びがありつつTDDのお作法というか、こうこうこうすることが多い、実務ではこういうチップスがあるみたいなことも聞いて、すごく楽しくやれていてただあと一歩で正規表現が届かず最後でグリーンにならないという悔しさがあるので、もうちょっと休憩時間やりたいなと思っています。以上です。」

休憩時間は休憩しなさい！
結局休憩しました。先に述べた正規表現の部分はこの記事を書いている今さっきグリーンにしました。

この時点で15:45くらいでした。時間経つの早くない！？！？

おしゃべりでワイワイする

休憩をしつつ、ゆるーっとハリーポッターという問題を解いているチームを覗きにいきました。

いろいろな話が出ました。フロントエンドとバックエンドについて、そのやること、責務、ロジックの置き場、業務の進め方などについて話しました。これとは別に特に印象に残ったのが、先ほども出た三つのキーワードの関係性についての話でした。

結論から言うと、1. 仮実装と2. 三角測量でセット、3. 明白な実装でセットだという話が出ました。また、フローチャート的に分解するならと言う話も出ました。

「その実装は明白か？」--yes-> 3. 明白な実装、--no->「規則性がわかるだけの実例はあるか？」--no-> 1. 仮実装、--yes-> 2.三角測量

というように辿れます。

そんな話をしていたらあっという間に終わりの時間になっていました。

全体をふりかえる

最後も、輪になってひとことずつ感想を話しました。感想を話す前には、それぞれ紙にも感想を書きました。

僕が話したのはこんなことです。
「TDD。楽しい！！！（大変だけど。脳が疲れた感じがありますね、筋トレしてるーっていう表現がピッタリはまったと思います。でもなんか、通った時も、落とした時も、ワイワイするのがすごく楽しくてまた着たいなって思いました。またよろしくお願いします！ありがとうございました。」

最後にその感想の画像を載せて、このブログを締めようと思います。もう3377文字書いてた。卒論を書きなさい。

ふりかえりペーパー

おわりに

楽しかった！！！！またいきます。

以上amixedcolor(エイミ)でした！

ご意見ご感想お待ちしております！！

またね！

この記事が気に入ったらサポートをしてみませんか？