DDD.rb #14 Redux で気軽に始める テスト駆動開発

React が UI のライブラリで人気です。Flux と組み合わせて使うのが最適と言われています。そこで Flux のライブラリの Redux を使った開発を体験をしてみましょう。

React は解ってきたけど、ビジネスロジックはどこに書くのだろう。React のコンポーネントが太って辛い。とにかく テスト駆動開発 をしたいなどの方はいっしょにワークショップをしましょう。

• モデルのライブラリにはImmutable.js を使います。
• テストツールには Jest を使います。

アジェンダ

• Redux の概要を紹介
• Redux のサンプルコードを紹介
• Immutable.js の概要を紹介
• テスト駆動開発の概要を紹介
• 演習

演習

お金箱(MoneyBox) というお金を出し入れできる課題をします。
Actions, Reducers, Records(Model) のコードを TDD で開発してみましょう。

演習には Create React App を使います。可能ならインストールを済ませてください。（インストールのサポートもありますがPCによっては不能な場合があります。）

Money.js のサンプルコード

```
import { Record } from 'immutable'

const MoneyRecord = Record({
  name: ''
})

const MoneyValue = {
  "10円玉": 10,
  "100円玉": 100,
}

class Money extends MoneyRecord {
  get value() {
    return MoneyValue[this.name] || 0
  }
}

export default Money

```

Money.test.js のサンプルコード

```
import Money from './Money'

describe('Money', () => {
  describe('valid money', () => {
    const money = new Money({name: "10円玉"})

    test('value of 10円玉 is 10', () => {
      expect(money.value).toBe(10)
    })
  })

  describe('invalid money', () => {
    const money = new Money({name: "1円玉"})

    test('value of 1円玉 is 0', () => {
      expect(money.value).toBe(0)
    })
  })
})

```

食べ物と飲み物

自分の食べるものや飲みたいものは持ち込んでください。
（多少のおかしは準備しています。）

会場へのアクセス

• 大阪市営地下鉄 御堂筋線 本町駅 徒歩8分
• 大阪市営地下鉄 御堂筋線 淀屋橋駅 徒歩9分
• 大阪市営地下鉄 堺筋線 北浜駅 徒歩9分
• 大阪市営地下鉄 堺筋線 堺筋本町駅 徒歩9分

ステーツ本町ビル のエレベータで 8F までお越しください。