LoginSignup
285
155

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-31

↓次の記事もよろしくやで!
4歳娘「パパ、20歳以上のユーザーを抽出して?」

忘れ物を取りに久々に出社したワイ

ワイ「おはようさん」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • この〇〇ってツールめちゃくちゃ便利やで!

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

  • あ〜、このコードなんで動かねえんだよ〜!

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

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

例えば

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

ワイ「せやな」

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

ワイ「せや」

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

ワイ「確かにな」

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

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

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

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

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

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

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

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

何がReduxやVuexっぽいのか

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

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

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

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

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

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 devtoolsRedux DevToolsにも」
ハスケル子「タイムトラベルデバッグ機能が搭載されています」

ワイ「おお、そうなんや」
ワイ「確かに、状態変化の履歴を見れたら便利そうやなぁ」
ワイ「ワイは今まで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歳以上のユーザーを抽出して?」

285
155
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
285
155