同じものをVueと

Reactで作ってみた

個人的感想

2018.8.30 山田 典明 | @noliaki

Vue

  • 業務で結構使ってる

React

  • 業務で使ったことがある

私の経験値

作ったもの

簡易見積りSimulator

Vue

https://noliaki.github.io/quotation-compare/vue/

React

https://noliaki.github.io/quotation-compare/react/​

※ コストテーブルはものすごく適当です

  • マークアップ、CSSは共通
  • コストテーブルも共通
  • コンポーネント粒度も同じ

Category

Item

作った動機

  • 見積もりのブレを少なくしたかった

  • 誰でもある程度の金額を知れるようにしたかった

  • 見積もった項目の共有をしたかった

  • 何かってとVueを選択してたのでReactも触ってみたかった

Vue

  • カジュアル系男子

React

  • 理系男子

個人的印象

データの更新

今回使用したデータ

[
  { "id": 1, "subject": "トップページデザイン", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "デザイン" },
  { "id": 2, "subject": "下層ページデザイン", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "デザイン" },
  { "id": 3, "subject": "バナーデザイン", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "デザイン" },
  { "id": 4, "subject": "トップページマークアップ", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 5, "subject": "トップページCSS設計", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 6, "subject": "下層ページマークアップ", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 7, "subject": "下層ページCSS設計", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 8, "subject": "JSコーディング 難易度:高", "cost": 50000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 9, "subject": "JSコーディング 難易度:中", "cost": 40000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" },
  { "id": 10, "subject": "JSコーディング 難易度:低", "cost": 30000, "volume": 0, "totalCosts": 0, "totalHours": 0, "category": "フロントエンド" }
]

配列の中にObjectがある

これを costTable というkeyに

それぞれぶっ込んだ

Vue

プロパティで渡ってきたObjectの値を直接編集できちゃう

今回の規模ではこれでもOKな気がする。

でも、今後大きくなっていくと、どこでデータを更新してるのかわからなくなるので、親のイベントを発火させるようにした

https://jp.vuejs.org/v2/guide/components-props.html​

Itemコンポーネント

React

↑ ムリシャリ、こうやれば、プロパティの値は変更出来るけど 親に影響しない

なので、素直に親のイベントを発火させて状態の変更をする

this.props.content.volume = 10
this.setState({
  hoge: fuga
})

基本的に setState を呼び出して、データの変更を行う

配列の値変更の違い

Vue

https://jp.vuejs.org/v2/guide/list.html

onChangeVolume(id, volume) {
  const index = this.costTable.findIndex(item => item.id === id)
  const cloneItem = Object.assign({}, this.costTable[index], { volume })

  this.costTable.splice(index, 1, cloneItem)
}

今回は splice を使った

React

onChangeVolume (id, volume) {
  const index = this.state.costTable.findIndex(item => item.id === id)
  const cloneItem = Object.assign({}, this.state.costTable[index], { volume })

  const newCostTable = [
    ...this.state.costTable.slice(0, index),
    cloneItem,
    ...this.state.costTable.slice(index + 1)
  ]

  this.setState({
    costTable: newCostTable
  }, () => {
    this.tweenTotalCost()
  })
}

新しい配列を作って、ぶっこむ感じ

まとめ

  • このくらいの規模だと、違いというのは そこまで感じずに出来た（メソッドとかもほぼコピペで出来たし）
  • どっちをコーディングしてても、楽しくコーディングできた
  • 今回はpugやTypeScript、CSS modulesとか使ってないので、ここらへん使おうとなると 結構変わってくるのかなーといった印象。（ReactはJSX 1択のようだけど）
  • 次回はAngularもやってみたい

今後

  • コストテーブルをGoogle Spread Sheet とかに移して、サクッと更新できるようにする
  • 何なら それで見積書まで作れるようにする

（個人開発としてはやる気はない）

Thank you

Made with Slides.com