mmyoji's diary

プログラミングとか日々のどうでもいいこととか

React.jsでもカレンダー作った

動機

  • Vue.jsを実際に運用する予定のプロダクトで使ってみて、ツラい部分とかがあった
  • 「これReactならこういう感じで書けるかな?」みたいのが頭にあった

Vue.jsでちょっとめんどくさかったところ

  • data にカスタムオブジェクトを渡したりした時にwarningが出た
    • 内部で Date オブジェクトを持っていたあたりにwarning出ていたので100%ではないのかもしれない
  • d3.jsと組み合わせてcomponentsに受け取ったデータをd3に渡してd3で描画した場合、データがvue.jsで更新されても再描画が起きない
    • d3うまく使えば回避できる??もうちょっと勉強する必要ありそう
  • (Reactでも同じだと思うけど)同列のcomponent間でお互いの data (Reactで言うところのstate) を触りたいってなったらちょっとしんどい。
    • 親componentで扱って2way bindingする??

一つ目に関しては基本的な型しか渡さないようにすることと、Object, Arrayの時は操作に気をつけることですね

リスト表示 - vue.js

Object関係は vm.$set("dataName", newObj) , Array関係は push(), pop(), shift(), unshift(), splice(), sort() 及び reverse() を利用して変更を明示的に起こさせるようにする、とかってあたりでしょうか。

React.js書いてみて

前にちょっとだけ触ったことはありましたが、基本チュートリアル写経レベルで何も考えてなかったので何も覚えてませんでした笑

繰り返し要素に毎回map使ったりしてarrayを渡したり、React.creatClassrender() で返すタグは必ず一つのelementでラップされてないといけないとか、getInitialStatesetDefaultStates とかって勘違いしたりとか()、正直めんどくさい笑

繰り返しに v-repeat (もうすぐ v-for ?) が使いたくて仕方なかったです。あとやっぱりjsの中にhtmlタグ書いていくのが結構ダルい。emmet-modeを *.js, *.jst ファイル内で有効にはしたくないし、かといってjadeも。。。うーん。

vueify使えば *.vue ファイルにほぼほぼhtmlと同じノリで書ける(実際に web-mode をhookしている )のでそこはvue.jsに軍配があがるかなと。

propsの双方向bindingができないのもやっぱりめんどくささがありますね。ただReactの思想的にデータが一方向に流れないといけない、ってのがあるのでそこは仕方ないというか、アプリケーションがどんどん大きくなったらそっちの方が管理しやすいとかあるんでしょうけど。(いろんな人の記事で読んだはずですが忘れた...)

よかったところ

やっぱりVue.js派なので悪いとこばっかりいいましたが、 state に渡すものはカスタムクラスであろうと、変更があれば setState() で明示的に変更をpublishするのでそこはいいのかなーという印象です。

Vue.jsだとdataを変更しても、それがhtmlに書かれているデータに影響を及ぼしたりしない限り再描画が起きないので。。。(これに関してはまだ試してないです。あとでまとめます)

結論

まだわからない。まだしばらくはVue.js LOVEかなって感じです。

これを機に積ん読になってた『入門React』引っ張り出してきたので読んじゃおうと思います。