コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった

↓次の記事もよろしくやで！
[**4歳娘「パパ、20歳以上のユーザーを抽出して？」**](https://qiita.com/Yametaro/items/80c819054a8dca1fdb5d)


## 忘れ物を取りに久々に出社したワイ
ワイ「おはようさん」

ハスケル子「おはようございます」

ワイ「なんや、ハスケル子ちゃんしかおらんのかいな」

ハスケル子「はい」
ハスケル子「みなさんリモートワークです」

ワイ「コロナウィルスのせいで基本**出社禁止**やもんなぁ」
ワイ「通勤せんでいいのは楽チンやけど」
ワイ「みんなに会ってバカ話ができなくて寂しいわぁ・・・」

ハスケル子「やめ太郎さん、あんまり近づかないでください」
ハスケル子「こっち向いて喋るのもやめてください」

ワイ「おお、失礼失礼」
ワイ「もしウィルス感染してたら、うつってまうもんな」

ハスケル子「いえ、**単純に口が臭いんです**」

ワイ「Oh...」
ワイ「ごめんやで...」

## リモートだと、井戸端会議が聞けなくて困る

ワイ「なんか、リモートって結構やりにくくない？」

ハスケル子「私は別に大丈夫ですね」

ワイ「そうかぁ」
ワイ「ワイはなんか、井戸端会議が聞けへんのが困るわ」

ハスケル子「井戸端会議ですか」

ワイ「せや」
ワイ「色んなとこでPMさんやら営業さんが」

> + 来月くらいに〇〇な案件が受注できそうやで！
> + □□の案件が炎上中みたいや！

ワイ「とか話してたり」
ワイ「エンジニアのみんなも」

> + この〇〇ってツールめちゃくちゃ便利やで！

ワイ「とかよく話してるやん」
ワイ「あとは」

> + あ〜、このコードなんで動かねえんだよ〜！

ワイ「ってセリフが聞こえたりとか」
ワイ「要は、その場におると何となく**みんなのバイブス**が**勝手に伝わってくる**やん」
ワイ「そういう、**周りの人の雑談から得る情報**がけっこう大きいからさ」
ワイ「だからリモートって何かやりづらいねん」
ワイ「Slackとかによる、テキストベースのコミュニケーションが多くなってまうやん？」

ハスケル子「あ〜、確かにそうですね」
ハスケル子「でも、テキストベースのコミュニケーションが増えることのメリットもありますよ」

## 例えば
ハスケル子「例えば弊社は、**Slack**でのコミュニケーションが多いじゃないですか」

ワイ「せやな」

ハスケル子「最近なんてほぼ全員リモートワークだから」
ハスケル子「コミュニケーションの**ほとんどがSlack**じゃないですか」

ワイ「せや」

ハスケル子「今までだったら口頭で済ませてたような軽い相談も**全部Slack**」

ワイ「確かにな」

ハスケル子「そうすることで、みんなの会話が**全部Slack上に残る**のはメリットだと思います」

ワイ「あー、せやな」
ワイ「口頭で相談とかした場合には、議事録でも取らん限り記録に残らんけど」
ワイ「基本がSlackになると、いつでも**簡易議事録**が**勝手に残ってくれる**感じやもんな」

ハスケル子「はい」
ハスケル子「口頭で気楽に好き勝手にコミュニケーションできないのは不便ですけど」
ハスケル子「でもそれ以上に」
ハスケル子「人に何かを伝えようとした時に、全員が**『Slackに投稿する』**という**統一された手段**を取ることで」
ハスケル子「みんなの思考や意見が**Slack上で一括管理**されていくのは」
ハスケル子「すっごく便利ですよね」

ワイ「ほんまやね」
ワイ「だって、基本的に**全てのコミュニケーションが勝手に記録されていく**ことになる訳やもんね」

> 「こないだ、〇〇の技術のこと話したけど、どんな内容やったっけ・・・？」

ワイ「って時にも、**Slack上で検索**できるもんな」

ハスケル子「そうなんです」
ハスケル子「みんなが**統一された手段を取る**ことによって」
ハスケル子「全てのコミュニケーションが**一箇所に記録され、履歴が残り、後から確認できる**」
ハスケル子「まるで**Redux**や**Vuex**みたいですよね」

ワイ「ん？どういうこと？」

## 何がReduxやVuexっぽいのか

ワイ「ReduxやVuexって、Webアプリケーションの**状態管理**に使われるものやんな？」
ワイ「それのどこがSlackっぽいの？」

ハスケル子「Slackぽいというか」
ハスケル子「ReduxやVuexの───」

> 状態を変える手段が**統一されていて、履歴が残り、後から確認できる**

ハスケル子「───そんな所が、さっきの話と似てるなって思ったんです」
ハスケル子「ReduxやVuexって、アプリケーションの状態を変更する時に」
ハスケル子「必ず**決まったメソッドを通る**じゃないですか」

ワイ「ああ、そういえばそうやな」
ワイ「例えばVuexを使って、カウンターの値を増やしたい場合やったら」

```javascript
store.commit('increment')
```

ワイ「↑って風にやるもんな」
ワイ「何らかのデータの状態を変更したい時は」
ワイ「必ず`commit`メソッドを通して変更する感じよな」
ワイ「Reduxなら確か`dispatch`メソッドを通るんよな」

ハスケル子「はい」
ハスケル子「何か状態の変化を起こしたい時には、**必ず`commit`メソッドを通る**」
ハスケル子「こう決まっていると、色々と捗るんです」
ハスケル子「例えばその`commit`メソッドに**変更ログ保存機能**を仕込んでおけば」
ハスケル子「いつどんな変更が起こったかを全て記録して置けるので」

> XX時XX分XX秒: `increment`が起こったため、countが`1`に変化
> XX時XX分XX秒: `increment`が起こったため、countが`2`に変化
> XX時XX分XX秒: `decrement`が起こったため、countが`1`に変化
> XX時XX分XX秒: `reset`が起こったため、countが`0`に変化

ハスケル子「↑こういう記録を見ながら**タイムトラベルデバッグ**ができるんです」
ハスケル子「実際に[**Vue.js devtools**](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja)や[**Redux DevTools**](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja)にも」
ハスケル子「タイムトラベルデバッグ機能が搭載されています」

ワイ「おお、そうなんや」
ワイ「確かに、状態変化の履歴を見れたら便利そうやなぁ」
ワイ「ワイは今までReduxとかVuex使わずに、普通にコンポーネントの持つ状態を変えてたから」
ワイ「複雑な**ご注文フォーム**とか作る時に大変やったんや」

## ワイの体験談
> ワイ「よっしゃ、ご注文フォームが完成したで！」
> ワイ「ほなブラウザ上でテストしていこか！」
> 
> ポチポチ・・・
>
> ワイ「あれ、このパターンの操作を行った場合は」
> ワイ「税込みの合計金額が**11,000円**になるはずやったのに」
> ワイ「**10,500円**になっとるやんけ」
> ワイ「いつや、いつズレたんや・・・」
> ワイ「どこや、どのメソッドが間違っとるんや・・・」

ワイ「↑こんな感じで、**状態変化の経緯が分からんくて困る**ことがよくあったけど」
ワイ「ReduxやVuexを使えば」

> XX時XX分XX秒: `hogeAction`が起こったため、totalPriceが`1,500`に変化
> XX時XX分XX秒: `fugaAction`が起こったため、totalPriceが`10,000`に変化
> XX時XX分XX秒: `bugAction`が起こったため、totalPriceが`10,500`に変化

ワイ「操作後に↑**こんな履歴**を見返すことができるから」

> 「おお、`fugaAction`が起こったタイミングまでは正しく動いてて」
> 「`bugAction`が起こったタイミングで価格がおかしくなっとるな！」

ワイ「・・・的な感じでデバッグができる訳やな！」
ワイ「それは捗りそうやな」

ハスケル子「はい」
ハスケル子「ちなみにReduxもVuexも、Elmの**The Elm Architecture**というパターンに影響を受けて作られています」

ワイ「おお、ハスケル子ちゃんの大好きな**Elm**か」

ハスケル子「はい！」
ハスケル子「それにですね・・・！」
ハスケル子「・・・ってまた**講習**みたいになっちゃいました」
ハスケル子「偉そうにすみません」

ワイ「いやいや、全然ええで」
ワイ「こちらこそ**口臭**がキツくてごめんやで」

ハスケル子「さすがに臭いんでそろそろ帰ってリモートワークしていいですか？」

ワイ「お、おう」
ワイ「もちろんやで」
ワイ「なんかゴメンな...」

## まとめ
+ 全てのアクションが**統一されたツール**によって行われると、  
その履歴が**一箇所にまとまって記録**され、後から確認できて、便利やね。

## 追記
↓次の記事もよろしくやで！
[**4歳娘「パパ、20歳以上のユーザーを抽出して？」**](https://qiita.com/Yametaro/items/80c819054a8dca1fdb5d)