数学
Maths
現代のコンピューターのすべての能力が驚異的な速さで膨大な合計を実行するために、普通の開発者は自分の仕事を行うために数学を使用することはほとんどありません。
でも今日はだめ！
今日は、数学を使用して実際の問題を解決します。退屈な数学ではありません。 私たちは三角法やベクトルなど、高校の後で使う必要はないと言っていたあらゆる種類のものを使用します。
問題
時計のSVGを作成したい。
デジタル時計ではありません。きっと、それは簡単でしょう。アナログ時計です。 あなたが求めているのは、
timeパッケージからTimeを受け取り、時、分、秒のすべての針が正しい方向を向いている時計の SVG を出力するだけの素敵な関数です。これがどれほど難しいことなのでしょうか？
最初に、遊ぶために時計の SVG が必要になります。 SVGは、XMLで記述された一連の形状として記述されているため、プログラムで操作するための素晴らしい画像フォーマットです。
時計のSVG
このように記述されています。
1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
<svg xmlns="http://www.w3.org/2000/svg"
4
width="100%"
5
height="100%"
6
viewBox="0 0 300 300"
7
version="2.0">
8
9
<!-- bezel -->
10
<circle cx="150" cy="150" r="100" style="fill:#fff;stroke:#000;stroke-width:5px;"/>
11
12
<!-- hour hand -->
13
<line x1="150" y1="150" x2="114.150000" y2="132.260000"
14
style="fill:none;stroke:#000;stroke-width:7px;"/>
15
16
<!-- minute hand -->
17
<line x1="150" y1="150" x2="101.290000" y2="99.730000"
18
style="fill:none;stroke:#000;stroke-width:7px;"/>
19
20
<!-- second hand -->
21
<line x1="150" y1="150" x2="77.190000" y2="202.900000"
22
style="fill:none;stroke:#f00;stroke-width:3px;"/>
23
</svg>
Copied!
これは、3本の線が描かれた円で、各線は円の真ん中にあり、（x=150、y=150）あり、少し離れています。
だから私たちがやろうとしていることは、上記をどうにかして再構築することですが、線を変更して、それらが所定の時間に適切な方向を指すようにします。
受け入れテスト
行き詰まる前に、受け入れテストについて考えてみましょう。時計の例があるので、重要なパラメータがどうなるかを考えてみましょう。
1
<line x1="150" y1="150" x2="114.150000" y2="132.260000"
2
style="fill:none;stroke:#000;stroke-width:7px;"/>
Copied!
時計の中心（この線の属性
x1およびy1）は、時計の各針で同じです。 時計の針ごとに変更する必要がある数値（SVGを構築するためのパラメーター）は、x2およびy2属性です。時計の針ごとにXとYが必要です。私はより多くのパラメーターについて考えることができました。 文字盤の円の半径、SVGのサイズ、手の色、その形状など...しかし、シンプルで具体的な問題を解決することから始めるのが良いです。具体的な解決策、そしてそれを一般化するためにパラメーターを追加し始めます。
ので、箇条書きにします。
- すべての時計の中心は（150、150）です
- 時針は50です。
- 分針は80です
- 秒針は90秒です。
SVGに関する注意点：原点（0, 0）-は、予想される 左下 ではなく、 左上 です。どの番号をラインに接続するかを検討しているときは、これを覚えておくことが重要です。
最後に、SVGを構築する how は決めていません。
text/templateパッケージのテンプレートを使用するか、単にバイトをbytes.Bufferまたはライターに入れます。しかし、これらの数値が必要になることはわかっているので、それらを作成するもののテストに焦点を合わせましょう。最初にテストを書く
だから私の最初のテストは次のようになります。
1
package clockface_test
2
3
import (
4
"testing"
5
"time"
6
7
"github.com/gypsydave5/learn-go-with-tests/math/v1/clockface"
8
)
9
10
func TestSecondHandAtMidnight(t *testing.T) {
11
tm := time.Date(1337, time.January, 1, 0, 0, 0, 0, time.UTC)
12
13
want := clockface.Point{X: 150, Y: 150 - 90}
14
got := clockface.SecondHand(tm)
15
16
if got != want {
17
t.Errorf("Got %v, wanted %v", got, want)
18
}
19
}
Copied!
SVGが左上から座標をプロットする方法を覚えていますか？ 秒針を真夜中に配置するには、X軸（まだ150）の文字盤の中心から移動しておらず、Y軸は中心からの「上」方向の長さです。 150 マイナス 90。
テストを実行してみてください
これにより、不足している関数と型の周囲で予想される失敗が排除されます。
1
--- FAIL: TestSecondHandAtMidnight (0.00s)
2
# github.com/gypsydave5/learn-go-with-tests/math/v1/clockface_test [github.com/gypsydave5/learn-go-with-tests/math/v1/clockface.test]
3
./clockface_test.go:13:10: undefined: clockface.Point
4
./clockface_test.go:14:9: undefined: clockface.SecondHand
5
FAIL github.com/gypsydave5/learn-go-with-tests/math/v1/clockface [build failed]
Copied!
だから秒針の先が行くはずの
Pointとそれを取得する関数。テストを実行するための最小限のコードを記述し、失敗したテスト出力を確認します
これらの型を実装して、コードをコンパイルしてみましょう
1
package clockface
2
3
import "time"
4
5
// A Point represents a two dimensional Cartesian coordinate
6
type Point struct {
7
X float64
8
Y float64
9
}
10
11
// SecondHand is the unit vector of the second hand of an analogue clock at time `t`
12
// represented as a Point.
13
func SecondHand(t time.Time) Point {
14
return Point{}
15
}
Copied!
そして今、私たちは
1
--- FAIL: TestSecondHandAtMidnight (0.00s)
2
clockface_test.go:17: Got {0 0}, wanted {150 60}
3
FAIL
4
exit status 1
5
FAIL github.com/gypsydave5/learn-go-with-tests/math/v1/clockface 0.006s
Copied!
成功させるのに十分なコードを書く
予想される失敗が発生したら、
HandsAtの戻り値を入力できます。1
// SecondHand is the unit vector of the second hand of an analogue clock at time `t`
2
// represented as a Point.
3
func SecondHand(t time.Time) Point {
4
return Point{150, 60}
5
}
Copied!
見てください。テストが成功しました。
Behold, a passing test.
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v1/clockface 0.006s
Copied!
リファクタリング♪
まだリファクタリングする必要はありません。コードはほとんどありません！
新しい要件について繰り返します
毎回真夜中を示す時計を返すだけではなく、おそらくここでいくつかの作業を行う必要があります...
最初にテストを書く
1
func TestSecondHandAt30Seconds(t *testing.T) {
2
tm := time.Date(1337, time.January, 1, 0, 0, 30, 0, time.UTC)
3
4
want := clockface.Point{X: 150, Y: 150 + 90}
5
got := clockface.SecondHand(tm)
6
7
if got != want {
8
t.Errorf("Got %v, wanted %v", got, want)
9
}
10
}
Copied!
同じアイデアですが、今度は秒針が downwards を指しているため、Y軸の長さを add します。
これはコンパイルされます...しかし、どのように成功したのでしょうか？
思考時間
この問題をどのように解決しますか？
秒針は毎分同じ60の状態を通過し、60の異なる方向を指しています。 0秒の場合は文字盤の上部を指し、30秒の場合は文字盤の下部を指します。簡単です。
つまり、秒針がどの方向を向いているか、たとえば37秒を考えたい場合は、円の周りの12時から37/60度の間の角度が必要です。 度数では、これは
(360 / 60 ) * 37 = 222ですが、完全なローテーションの37/60であることを覚えているだけの方が簡単です。しかし、角度はストーリーの半分にすぎません。秒針の先端が指しているX座標とY座標を知る必要があります。どうすればそれを解決できますか？
数学
原点の周りに描かれた半径1の円を想像してください。座標
0, 0。
単位円の画像
これは「単位円（
unit circle）」と呼ばれます。半径が1単位だからです。円の円周は、グリッド上のポイントから作られます。 より多くの座標。これらの各座標のxおよびyコンポーネントは三角形を形成し、その斜辺は常に1。 円の半径です
円周上にポイントが定義されている単位円の画像
三角測量では、原点との角度がわかっている場合、各三角形のXとYの長さを計算できます。 X座標はcos（a）になり、Y座標はsin（a）になります。ここで、aは線と（positive）x軸とのなす角度です。
それぞれcos（a）とsin（a）として定義された光線のx要素とy要素を含む単位円の画像。ここで、aはx軸と光線がなす角度
最後のひねりX軸からではなく12時からの角度を測定したいので、（3時）、軸を交換する必要があります。ここで、x = sin(a)およびy = cos(a)です。
y軸からの角度で定義された単位円光線
これで、秒針の角度（1秒ごとに円の1/60）とX座標とY座標を取得する方法がわかりました。
sinと cosの両方に関数が必要です。math
mathCosは、ラジアン引数xの余弦を返します。
角度をラジアンにする必要があります。では、ラジアンとは何ですか？円の完全な回転を360度で構成するのではなく、完全な回転を2πラジアンとして定義します。これを実行する理由はありません。
読んだり、学習したり、考えたりしたので、次のテストを書くことができます。
最初にテストを書く
このすべての数学は困難で混乱を招きます。私は何が起こっているのか理解していると確信していません。 それではテストを書きましょう！問題全体を一度に解決する必要はありません。特定の時間の秒針について、ラジアン単位で正しい角度を計算することから始めましょう。
私はこれらのテストを
clockfaceパッケージ内で記述します。それらがエクスポートされることはなく、何が起こっているのかをしっかり把握すると、または移動されて削除される可能性があります。また、これらのテストに取り組んでいる間に取り組んでいた受け入れテストをコメントアウトします 。これに合格している間、そのテストに気を取られたくありません。
1
package clockface
2
3
import (
4
"math"
5
"testing"
6
"time"
7
)
8
9
func TestSecondsInRadians(t *testing.T) {
10
thirtySeconds := time.Date(312, time.October, 28, 0, 0, 30, 0, time.UTC)
11
want := math.Pi
12
got := secondsInRadians(thirtySeconds)
13
14
if want != got {
15
t.Fatalf("Wanted %v radians, but got %v", want, got)
16
}
17
}
Copied!
ここでは、1分の30秒後に秒針が24時間半になることをテストしています。そして、それは
mathパッケージの最初の使用です！円の1回転が2πラジアンである場合、途中のラウンドはちょうどπラジアンになるはずです。math.Piはπの値を提供します。テストを実行してみてください
1
# github.com/gypsydave5/learn-go-with-tests/math/v2/clockface [github.com/gypsydave5/learn-go-with-tests/math/v2/clockface.test]
2
./clockface_test.go:12:9: undefined: secondsInRadians
3
FAIL github.com/gypsydave5/learn-go-with-tests/math/v2/clockface [build failed]
Copied!
テストを実行するための最小限のコードを記述し、失敗したテスト出力を確認します
1
func secondsInRadians(t time.Time) float64 {
2
return 0
3
}
Copied!
1
--- FAIL: TestSecondsInRadians (0.00s)
2
clockface_test.go:15: Wanted 3.141592653589793 radians, but got 0
3
FAIL
4
exit status 1
5
FAIL github.com/gypsydave5/learn-go-with-tests/math/v2/clockface 0.007s
Copied!
成功させるのに十分なコードを書く
1
func secondsInRadians(t time.Time) float64 {
2
return math.Pi
3
}
Copied!
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v2/clockface 0.011s
Copied!
リファクタリング♪
まだリファクタリングは必要ありません。
新しい要件について繰り返します
テストを拡張して、さらにいくつかのシナリオをカバーできます。 少し先にスキップして、すでにリファクタリングされたテストコードをいくつか示します。目的の場所に到達する方法は十分に明確になっているはずです。
1
func TestSecondsInRadians(t *testing.T) {
2
cases := []struct {
3
time time.Time
4
angle float64
5
}{
6
{simpleTime(0, 0, 30), math.Pi},
7
{simpleTime(0, 0, 0), 0},
8
{simpleTime(0, 0, 45), (math.Pi / 2) * 3},
9
{simpleTime(0, 0, 7), (math.Pi / 30) * 7},
10
}
11
12
for _, c := range cases {
13
t.Run(testName(c.time), func(t *testing.T) {
14
got := secondsInRadians(c.time)
15
if got != c.angle {
16
t.Fatalf("Wanted %v radians, but got %v", c.angle, got)
17
}
18
})
19
}
20
}
Copied!
いくつかのヘルパー関数を追加して、このテーブルベースのテストの作成を少し面倒にしました。
testNameは時刻をデジタル時計形式（HH：MM：SS）に変換し、simpleTimeは実際に気にする部分のみを使用してtime.Timeを構築します（再び、時間、分、秒）。1
func simpleTime(hours, minutes, seconds int) time.Time {
2
return time.Date(312, time.October, 28, hours, minutes, seconds, 0, time.UTC)
3
}
4
5
func testName(t time.Time) string {
6
return t.Format("15:04:05")
7
}
Copied!
これらの2つの関数は、これらのテスト（および将来のテスト）の記述と保守を少し簡単にするのに役立ちます。
これにより、優れたテスト出力が得られます。
1
--- FAIL: TestSecondsInRadians (0.00s)
2
--- FAIL: TestSecondsInRadians/00:00:00 (0.00s)
3
clockface_test.go:24: Wanted 0 radians, but got 3.141592653589793
4
--- FAIL: TestSecondsInRadians/00:00:45 (0.00s)
5
clockface_test.go:24: Wanted 4.71238898038469 radians, but got 3.141592653589793
6
--- FAIL: TestSecondsInRadians/00:00:07 (0.00s)
7
clockface_test.go:24: Wanted 0.7330382858376184 radians, but got 3.141592653589793
8
FAIL
9
exit status 1
10
FAIL github.com/gypsydave5/learn-go-with-tests/math/v3/clockface 0.007s
Copied!
上で話していた数学のすべてを実装するお時間です。
1
func secondsInRadians(t time.Time) float64 {
2
return float64(t.Second()) * (math.Pi / 30)
3
}
Copied!
1秒は（2π/60）ラジアンです... 2をキャンセルすると、π/30ラジアンになります。これに秒数（
float64として）を掛けると、すべてのテストに合格するはずです...1
--- FAIL: TestSecondsInRadians (0.00s)
2
--- FAIL: TestSecondsInRadians/00:00:30 (0.00s)
3
clockface_test.go:24: Wanted 3.141592653589793 radians, but got 3.1415926535897936
4
FAIL
5
exit status 1
6
FAIL github.com/gypsydave5/learn-go-with-tests/math/v3/clockface 0.006s
Copied!
待って、なになに？
浮動小数点数（Floats）は恐ろしい
Floats）は恐ろしい浮動小数点演算は悪名高いほど不正確です。 コンピュータは本当に整数とある程度の有理数しか扱えません。特に、
secondsInRadians関数のように10進数を上下に因数分解すると、10進数は不正確になり始めます。 math.Piを30で除算してから30を掛けることで、math.Piと同じではない数値になりました。これを回避するには2つの方法があります。
- 1.それに活かす
- 2.方程式をリファクタリングして関数をリファクタリングする
（1）はそれほど魅力的ではないように思われるかもしれませんが、浮動小数点の等価性を機能させる唯一の方法であることがよくあります。時計の文字盤を描画するために、ごくわずかな分数で不正確であることは率直に言って問題にならないので、角度に対して「十分に近い」等式を定義する関数を書くことができます。
しかし、精度を取り戻すには簡単な方法があります。方程式を並べ替えて、分割して乗算しないようにします。分割するだけですべてが可能です。
だから代わりに
1
numberOfSeconds * π / 30
Copied!
私たちは書けます。
1
π / (30 / numberOfSeconds)
Copied!
これは同等です。
In Go:
1
func secondsInRadians(t time.Time) float64 {
2
return (math.Pi / (30 / (float64(t.Second()))))
3
}
Copied!
そして、パスが成功します。
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v2/clockface 0.005s
Copied!
新しい要件について繰り返します
したがって、ここで最初の部分をカバーしました。 秒針がラジアンで指し示す角度はわかっています。次に、座標を計算する必要があります。
繰り返しますが、これは可能な限り単純にして、単位円 でのみ機能するようにします。半径1の円です。これは、手の長さがすべて1であることを意味しますが、明るい面では、数学が飲み込みやすくなります。
最初にテストを書く
1
func TestSecondHandVector(t *testing.T) {
2
cases := []struct {
3
time time.Time
4
point Point
5
}{
6
{simpleTime(0, 0, 30), Point{0, -1}},
7
}
8
9
for _, c := range cases {
10
t.Run(testName(c.time), func(t *testing.T) {
11
got := secondHandPoint(c.time)
12
if got != c.point {
13
t.Fatalf("Wanted %v Point, but got %v", c.point, got)
14
}
15
})
16
}
17
}
Copied!
テストを実行してみてください
1
# github.com/gypsydave5/learn-go-with-tests/math/v4/clockface [github.com/gypsydave5/learn-go-with-tests/math/v4/clockface.test]
2
./clockface_test.go:40:11: undefined: secondHandPoint
3
FAIL github.com/gypsydave5/learn-go-with-tests/math/v4/clockface [build failed]
Copied!
テストを実行するための最小限のコードを記述し、失敗したテスト出力を確認します
1
func secondHandPoint(t time.Time) Point {
2
return Point{}
3
}
Copied!
1
--- FAIL: TestSecondHandPoint (0.00s)
2
--- FAIL: TestSecondHandPoint/00:00:30 (0.00s)
3
clockface_test.go:42: Wanted {0 -1} Point, but got {0 0}
4
FAIL
5
exit status 1
6
FAIL github.com/gypsydave5/learn-go-with-tests/math/v4/clockface 0.010s
Copied!
成功させるのに十分なコードを書く
1
func secondHandPoint(t time.Time) Point {
2
return Point{0, -1}
3
}
Copied!
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v4/clockface 0.007s
Copied!
新しい要件について繰り返します
1
func TestSecondHandPoint(t *testing.T) {
2
cases := []struct {
3
time time.Time
4
point Point
5
}{
6
{simpleTime(0, 0, 30), Point{0, -1}},
7
{simpleTime(0, 0, 45), Point{-1, 0}},
8
}
9
10
for _, c := range cases {
11
t.Run(testName(c.time), func(t *testing.T) {
12
got := secondHandPoint(c.time)
13
if got != c.point {
14
t.Fatalf("Wanted %v Point, but got %v", c.point, got)
15
}
16
})
17
}
18
}
Copied!
テストを実行してみてください
1
--- FAIL: TestSecondHandPoint (0.00s)
2
--- FAIL: TestSecondHandPoint/00:00:45 (0.00s)
3
clockface_test.go:43: Wanted {-1 0} Point, but got {0 -1}
4
FAIL
5
exit status 1
6
FAIL github.com/gypsydave5/learn-go-with-tests/math/v4/clockface 0.006s
Copied!
成功させるのに十分なコードを書く
ユニットサークルの画像を覚えていますか？
ここで、XとYを生成する方程式が必要です。秒に書きましょう。
1
func secondHandPoint(t time.Time) Point {
2
angle := secondsInRadians(t)
3
x := math.Sin(angle)
4
y := math.Cos(angle)
5
6
return Point{x, y}
7
}
Copied!
これなら、いけるでしょうか。
1
--- FAIL: TestSecondHandPoint (0.00s)
2
--- FAIL: TestSecondHandPoint/00:00:30 (0.00s)
3
clockface_test.go:43: Wanted {0 -1} Point, but got {1.2246467991473515e-16 -1}
4
--- FAIL: TestSecondHandPoint/00:00:45 (0.00s)
5
clockface_test.go:43: Wanted {-1 0} Point, but got {-1 -1.8369701987210272e-16}
6
FAIL
7
exit status 1
8
FAIL github.com/gypsydave5/learn-go-with-tests/math/v4/clockface 0.007s
Copied!
待って。。もう一度、フロートにもう一度呪われているようです。 予期しない数値は両方とも、小数点以下16桁で「無限」 infinitesimal のようです。 したがって、ここでも、精度を上げるか、ほぼ同じであると言って私たちの生活を続けるかを選択できます。
これらの角度の精度を向上させる1つのオプションは、
math/bigパッケージの合理的なタイプRatを使用することです。 しかし、目的が月着陸ではなくSVGを描画することであることを考えると、少しぼやけて暮らせると思います。1
func TestSecondHandPoint(t *testing.T) {
2
cases := []struct {
3
time time.Time
4
point Point
5
}{
6
{simpleTime(0, 0, 30), Point{0, -1}},
7
{simpleTime(0, 0, 45), Point{-1, 0}},
8
}
9
10
for _, c := range cases {
11
t.Run(testName(c.time), func(t *testing.T) {
12
got := secondHandPoint(c.time)
13
if !roughlyEqualPoint(got, c.point) {
14
t.Fatalf("Wanted %v Point, but got %v", c.point, got)
15
}
16
})
17
}
18
}
19
20
func roughlyEqualFloat64(a, b float64) bool {
21
const equalityThreshold = 1e-7
22
return math.Abs(a-b) < equalityThreshold
23
}
24
25
func roughlyEqualPoint(a, b Point) bool {
26
return roughlyEqualFloat64(a.X, b.X) &&
27
roughlyEqualFloat64(a.Y, b.Y)
28
}
Copied!
2つの
Points間のおおよその等価性を定義する2つの関数を定義しました。- X要素とY要素が互いに0.0000001以内にある場合に機能します。それはまだかなり正確です。
そして今、私たちはテストに成功します。
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v4/clockface 0.007s
Copied!
リファクタリング♪
これでもかなり満足しています。
新しい要件について繰り返します
まあ、 new と言っても完全に正確というわけではありません。 実際にできることは、受け入れテストに合格することです！それがどのように見えるかを思い出してみましょう
1
func TestSecondHandAt30Seconds(t *testing.T) {
2
tm := time.Date(1337, time.January, 1, 0, 0, 30, 0, time.UTC)
3
4
want := clockface.Point{X: 150, Y: 150 + 90}
5
got := clockface.SecondHand(tm)
6
7
if got != want {
8
t.Errorf("Got %v, wanted %v", got, want)
9
}
10
}
Copied!
テストを実行してみてください
1
--- FAIL: TestSecondHandAt30Seconds (0.00s)
2
clockface_acceptance_test.go:28: Got {150 60}, wanted {150 240}
3
FAIL
4
exit status 1
5
FAIL github.com/gypsydave5/learn-go-with-tests/math/v5/clockface 0.007s
Copied!
成功させるのに十分なコードを書く
単位ベクトルをSVG上の点に変換するには、3つのことを行う必要があります。
- 1.長さに合わせます
- 2.SVGに原点があるSVGを考慮するため、X軸上で反転します左上隅
- 3.それを正しい位置に移動します（それが（150, 150））
楽しい時間ですね！
1
// SecondHand is the unit vector of the second hand of an analogue clock at time `t`
2
// represented as a Point.
3
func SecondHand(t time.Time) Point {
4
p := secondHandPoint(t)
5
p = Point{p.X * 90, p.Y * 90} // scale
6
p = Point{p.X, -p.Y} // flip
7
p = Point{p.X + 150, p.Y + 150} // translate
8
return p
9
}
Copied!
正確にその順序でスケーリング、反転、変換されます。やったー！
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v5/clockface 0.007s
Copied!
リファクタリング♪
ここに定数として取り出されるべきいくつかの魔法の数字があるので、それをやってみましょう
1
const secondHandLength = 90
2
const clockCentreX = 150
3
const clockCentreY = 150
4
5
// SecondHand is the unit vector of the second hand of an analogue clock at time `t`
6
// represented as a Point.
7
func SecondHand(t time.Time) Point {
8
p := secondHandPoint(t)
9
p = Point{p.X * secondHandLength, p.Y * secondHandLength}
10
p = Point{p.X, -p.Y}
11
p = Point{p.X + clockCentreX, p.Y + clockCentreY} //translate
12
return p
13
}
Copied!
時計を描く
さて...とにかく秒針...
これをやってみましょう！ そこに座って人々を魅了するために世界に出て行くのを待っているだけで、価値を提供しないよりも悪いことはありません。秒針を描いてみよう！
メインの
clockfaceパッケージディレクトリの下に、（confusingly）、clockfaceという新しいディレクトリを追加します。そこにSVGをビルドするバイナリを作成するmainパッケージを置きます。1
├── clockface
2
│ └── main.go
3
├── clockface.go
4
├── clockface_acceptance_test.go
5
└── clockface_test.go
Copied!
main.goの中1
package main
2
3
import (
4
"fmt"
5
"io"
6
"os"
7
"time"
8
9
"github.com/gypsydave5/learn-go-with-tests/math/v6/clockface"
10
)
11
12
func main() {
13
t := time.Now()
14
sh := clockface.SecondHand(t)
15
io.WriteString(os.Stdout, svgStart)
16
io.WriteString(os.Stdout, bezel)
17
io.WriteString(os.Stdout, secondHandTag(sh))
18
io.WriteString(os.Stdout, svgEnd)
19
}
20
21
func secondHandTag(p clockface.Point) string {
22
return fmt.Sprintf(`<line x1="150" y1="150" x2="%f" y2="%f" style="fill:none;stroke:#f00;stroke-width:3px;"/>`, p.X, p.Y)
23
}
24
25
const svgStart = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
26
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
27
<svg xmlns="http://www.w3.org/2000/svg"
28
width="100%"
29
height="100%"
30
viewBox="0 0 300 300"
31
version="2.0">`
32
33
const bezel = `<circle cx="150" cy="150" r="100" style="fill:#fff;stroke:#000;stroke-width:5px;"/>`
34
35
const svgEnd = `</svg>`
Copied!
ああ、少年よ、私はこの混乱の美しいコードのために賞を獲得しようとしているわけではありません。 しかし、これは仕事をします。これは
os.Stdoutに SVG を書き出しています。一度に一文字ずつ。これを構築すると
1
go build
Copied!
そしてそれを実行し、出力をファイルに送信します
1
./clockface > clock.svg
Copied!
私たちは次のようなものを見るはずです
秒針のみの時計
リファクタリング♪
これは臭い。まあ、それはまったく悪臭はしませんが、私はそれについて満足していません。
- 1.その
SecondHand関数全体は、SVGであることに結びついています...SVGについて言及するか、実際にSVGを作成する... - 2.... 同時に、私はSVGコードをテストしていません。
ええ、私は失敗したと思います。これは間違っていると感じます。 よりSVG中心のテストで回復してみましょう。
私たちのオプションは何ですか？ さて、
SVGWriterから吐き出される文字に、特定の時間に予想されるSVGタグのようなものが含まれていることをテストしてみることができます。例えば：1
func TestSVGWriterAtMidnight(t *testing.T) {
2
tm := time.Date(1337, time.January, 1, 0, 0, 0, 0, time.UTC)
3
4
var b strings.Builder
5
clockface.SVGWriter(&b, tm)
6
got := b.String()
7
8
want := `<line x1="150" y1="150" x2="150" y2="60"`
9
10
if !strings.Contains(got, want) {
11
t.Errorf("Expected to find the second hand %v, in the SVG output %v", want, got)
12
}
13
}
Copied!
しかし、これは本当に改善されたのでしょうか？
有効なSVGを生成しなかった場合でも（パスが出力に文字列が表示されることをテストするだけなので）成功するだけでなく、その文字列に最小の重要でない変更を加えた場合も失敗します。たとえば、属性の間にスペースを追加します。
最大のにおいは、実際には、データ構造（XML）を一連の文字としての（文字列としての）表示でテストすることです。これは never 、 ever です。これは、上で概説したのと同じような問題を引き起こすためです。脆弱すぎて感度が不十分なテストです。間違ったことをテストするテスト！
したがって、唯一の解決策は、出力をXMLとしてテストすることです。そのためには、それを解析する必要があります。
XMLの解析
したがって、XMLを非整列化するための構造体が必要になります。 すべてのノードと属性の正しい名前と正しい構造の書き方を検討するのに少し時間を費やすことができましたが、幸い、誰かが
zekそのハードワークのすべてを自動化するプログラム。 さらに良いことに、https://www.onlinetool.io/xmltogo/にオンラインバージョンがあります。ファイルの上部から1つのボックスにSVGを貼り付けるだけです。- 飛び出します
1
type Svg struct {
2
XMLName xml.Name `xml:"svg"`
3
Text string `xml:",chardata"`
4
Xmlns string `xml:"xmlns,attr"`
5
Width string `xml:"width,attr"`
6
Height string `xml:"height,attr"`
7
ViewBox string `xml:"viewBox,attr"`
8
Version string `xml:"version,attr"`
9
Circle struct {
10
Text string `xml:",chardata"`
11
Cx string `xml:"cx,attr"`
12
Cy string `xml:"cy,attr"`
13
R string `xml:"r,attr"`
14
Style string `xml:"style,attr"`
15
} `xml:"circle"`
16
Line []struct {
17
Text string `xml:",chardata"`
18
X1 string `xml:"x1,attr"`
19
Y1 string `xml:"y1,attr"`
20
X2 string `xml:"x2,attr"`
21
Y2 string `xml:"y2,attr"`
22
Style string `xml:"style,attr"`
23
} `xml:"line"`
24
}
Copied!
（構造体の名前を
SVGに変更するなど）必要がある場合は、これを調整できますが、最初から十分です。1
func TestSVGWriterAtMidnight(t *testing.T) {
2
tm := time.Date(1337, time.January, 1, 0, 0, 0, 0, time.UTC)
3
4
b := bytes.Buffer{}
5
clockface.SVGWriter(&b, tm)
6
7
svg := Svg{}
8
xml.Unmarshal(b.Bytes(), &svg)
9
10
x2 := "150"
11
y2 := "60"
12
13
for _, line := range svg.Line {
14
if line.X2 == x2 && line.Y2 == y2 {
15
return
16
}
17
}
18
19
t.Errorf("Expected to find the second hand with x2 of %+v and y2 of %+v, in the SVG output %v", x2, y2, b.String())
20
}
Copied!
clockface.SVGWriterの出力をbytes.Bufferに書き込み、次にUnmarshallをSvgに書き込みます。次に、Svg内の各Lineを見て、それらのいずれかが期待されるX2およびY2値を持っているかどうかを確認します。 一致した場合、早期に（テストに合格）します。そうでない場合、（うまくいけば）情報メッセージで失敗します。1
# github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface_test [github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface.test]
2
./clockface_acceptance_test.go:41:2: undefined: clockface.SVGWriter
3
FAIL github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface [build failed]
Copied!
その
SVGWriterを書くほうがいいようです...1
package clockface
2
3
import (
4
"fmt"
5
"io"
6
"time"
7
)
8
9
const (
10
secondHandLength = 90
11
clockCentreX = 150
12
clockCentreY = 150
13
)
14
15
//SVGWriter writes an SVG representation of an analogue clock, showing the time t, to the writer w
16
func SVGWriter(w io.Writer, t time.Time) {
17
io.WriteString(w, svgStart)
18
io.WriteString(w, bezel)
19
secondHand(w, t)
20
io.WriteString(w, svgEnd)
21
}
22
23
func secondHand(w io.Writer, t time.Time) {
24
p := secondHandPoint(t)
25
p = Point{p.X * secondHandLength, p.Y * secondHandLength} // scale
26
p = Point{p.X, -p.Y} // flip
27
p = Point{p.X + clockCentreX, p.Y + clockCentreY} // translate
28
fmt.Fprintf(w, `<line x1="150" y1="150" x2="%f" y2="%f" style="fill:none;stroke:#f00;stroke-width:3px;"/>`, p.X, p.Y)
29
}
30
31
const svgStart = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
32
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
33
<svg xmlns="http://www.w3.org/2000/svg"
34
width="100%"
35
height="100%"
36
viewBox="0 0 300 300"
37
version="2.0">`
38
39
const bezel = `<circle cx="150" cy="150" r="100" style="fill:#fff;stroke:#000;stroke-width:5px;"/>`
40
41
const svgEnd = `</svg>`
Copied!
最も美しいSVGの書き方ですか？いいえ。でもうまくいけば、うまくいきます...
1
--- FAIL: TestSVGWriterAtMidnight (0.00s)
2
clockface_acceptance_test.go:56: Expected to find the second hand with x2 of 150 and y2 of 60, in the SVG output <?xml version="1.0" encoding="UTF-8" standalone="no"?>
3
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
<svg xmlns="http://www.w3.org/2000/svg"
5
width="100%"
6
height="100%"
7
viewBox="0 0 300 300"
8
version="2.0"><circle cx="150" cy="150" r="100" style="fill:#fff;stroke:#000;stroke-width:5px;"/><line x1="150" y1="150" x2="150.000000" y2="60.000000" style="fill:none;stroke:#f00;stroke-width:3px;"/></svg>
9
FAIL
10
exit status 1
11
FAIL github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface 0.008s
Copied!
おっと！
％fフォーマットディレクティブは、座標をデフォルトの精度レベル（小数点以下6桁）に出力します。座標に期待する精度のレベルを明示する必要があります。小数点第3位としましょう。1
s := fmt.Sprintf(`<line x1="150" y1="150" x2="%.3f" y2="%.3f" style="fill:none;stroke:#f00;stroke-width:3px;"/>`, p.X, p.Y)
Copied!
テストでの期待を更新した後
1
x2 := "150.000"
2
y2 := "60.000"
Copied!
我々はテストの成功を得られます
1
PASS
2
ok github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface 0.006s
Copied!
main関数を短くすることができます。1
package main
2
3
import (
4
"os"
5
"time"
6
7
"github.com/gypsydave5/learn-go-with-tests/math/v7b/clockface"
8
)
9
10
func main() {
11
t := time.Now()
12
clockface.SVGWriter(os.Stdout, t)
13
}
Copied!
そして、同じパターンに従って別の時間のテストを書くことができますが、前にはできません...
リファクタリング♪
3つのことが突き出ています。
- 1.確認する必要があるすべての情報を実際にテストしているわけではありません。現在-たとえば、
x1値はどうですか？ - 2.また、
x1などの属性は実際には「文字列」ではないのですか？彼らは数字！ - 3.私は本当に手の「スタイル」を気にしますか？または、そのことについては、
zakによって生成された空のTextノード？
私たちはもっとうまくやることができます。 すべてをシャープにするために、
Svg構造体とテストにいくつかの調整を加えましょう。1
type SVG struct {
2
XMLName xml.Name `xml:"svg"`
3
Xmlns string `xml:"xmlns,attr"`
4
Width string `xml:"width,attr"`
5
Height string `xml:"height,attr"`
6
ViewBox string `xml:"viewBox,attr"`
7
Version string `xml:"version,attr"`
8
Circle Circle `xml:"circle"`
9
Line []Line `xml:"line"`
10
}
11
12
type Circle struct {
13
Cx float64 `xml:"cx,attr"`
14
Cy float64 `xml:"cy,attr"`
15
R float64 `xml:"r,attr"`
16
}
17
18
type Line struct {
19
X1 float64 `xml:"x1,attr"`
20
Y1 float64 `xml:"y1,attr"`
21
X2 float64 `xml:"x2,attr"`
22
Y2 float64 `xml:"y2,attr"`
23
}
Copied!
ここで私は
- 名前付き型構造体の重要な部分 --
LineとCircle - 数値属性を
stringではなくfloat64に変更しました。 StyleやTextなどの未使用の属性を削除SvgはSVGに名前が変更されました。
これにより、探している行でより正確に評価できます。
1
func TestSVGWriterAtMidnight(t *testing.T) {
2
tm := time.Date(1337, time.January, 1, 0, 0, 0, 0, time.UTC)
3
b := bytes.Buffer{}
4
5
clockface.SVGWriter(&b, tm)
6
7
svg := SVG{}
8
9
xml.Unmarshal(b.Bytes(), &svg)
10
11
want := Line{150, 150, 150, 60}
12
13
for _, line := range svg.Line {
14
if line == want {
15
return
16
}
17
}
18
19
t.Errorf("Expected to find the second hand line %+v, in the SVG lines %+v", want, svg.Line)
20
}
Copied!
最後に、単体テストのテーブルから葉を取り除き、ヘルパー関数
containsLine(line Line, lines []Line) boolを記述して、これらのテストを本当に輝かせることができます。