番外編 ～ Reactで作ったらどうなる？
Silicon Valley Super Ware
2020年6月5日
番外編 ～ Reactで作ったらどうなる？
普段は週末はブログの方はお休みを頂いているのですが、 今週はいろいろご質問を頂いたので番外編をお送りします。今月は、「REST API」をWebサービスに組み込む事を体験するのがテーマです。 先月に続いてフロントエンドのUIをVue.jsを使って作っています。
その中で、前回はVUEXにデータ処理を集めて主なデータを一元管理する 所までやってみました！
Reactでやったらどうなるの？という質問を頂きましたので簡単に説明します！
Reactの場合は、データの一元管理をする場合、REDUXを使う場合が殆どです。では、同じような事をREDUXで行うにはどんな感じになるかという話です！
REDUXはデータを一元管理するモジュール
REDUXはReactだけでなく、もちろんVue.jsで使うことができます。 ただ、VUEXがあるので、Vue.jsを使う場合は殆どの方がVUEXを使っているという事です。REDUXを使う場合にやる事は
- どんなデータを管理するか
- どんなデータ操作をするか
- Reducerの作成（管理するデータとその処理をする所）
- Reducerの処理を呼び出す部分（Action）
- storeの作成
- 各モジュールでの設定
Reactで使う場合は、Reactで使いやすいように「react-redux」を使う場合が殆どです
そうすると、REDUX以外に幾つかモジュールをインストールする事が必要です。もう一つ問題があって、Vue.jsの「mutation」と似たような理由で、 データ処理で呼び出す「action」の処理では、非同期処理を扱うことができません。 これは、Reducerの制約があるためです。そのため、非同期の処理は別のところで 一旦処理を行ってデータが確定した状態で、「dispatch」でactionの処理を呼び出す 必要があります。
この方法だと、使い勝手が余りよくありません。 そこで、利用されるのが「ミドルウエア」と呼ばれるソフトウエアです。 この辺が分かりにくい部分で多くの方から質問を受ける所です。
このミドルウエアで良く利用されているのが「thunk」と呼ばれている物です。 同じような事をしてくれる物も他にもいろいろあります。 何をしてくれるかというと、簡単に言えば「裏で仲介」してくれるという物です。 実際にモジュールをインストールして、storeを作る時に指定もするのですが、 余り意図的にコードに現れない裏方で何をしているのか良くわからないモジュールです。
ミドルウエアって何か？
これは本当に裏方の仕事を陰でやってくれる便利屋さんです。 結構いろいろな所で使われています。 余り表立って何かをやっているわけではないので、使っているのも 余り気づかないソフトウエアの存在です。thunkの場合、「dispatch」に渡す処理の仲介をやってくれます。 このミドルウエアを入れておくと、「action」に非同期の処理を渡せるような 記述ができるので、使い勝手がよくなります。 特に、処理をUIとデータ処理で区別したい場合、この機能があると データ処理をREDUX側に集めるのが簡単になります。
もう一つ厄介な事は、直接Stateを書き換えると変更が感知されない事があります
これが、「イミュータブル」「ミュータブル」を言われている概念です。 この辺りが分かりづらく混乱する人が多いようです。VUEXの場合、この変更が可能ですが、REDUXでは基本的に stateのデータの複製（コピー）を作ってから変更して 変更後に全体を置き換えるという処理をしています。
なんでそんな面倒な事をするか？
簡単に一言で言うと、変更したのがわからない事があるからです。 変更されたのがわからないと、本当は表示データを更新しなければいけない時に 表示データが書き換わらないという事態が起きてしまうからです。REDUXでは、複製を作って更新するというのが基本になります
これはデータの参照方法で制限があるからです。 簡単に言うと、ひとまとまりのデータを箱に入れて、その箱の中にデータがある という感じでデータを管理しているからです。何が起こるかというと、箱の中身を変えても外からは分からないという事です。
そこで、箱の中身の複製を作っておいて、必要な部分を変更したり追加して これが新しい箱だよと渡す事で。 「箱が変わった」事を認識させるという事です。
もう一つは箱のデータをいじっているときに問題が起きた場合の対処がやりやすいという 利点があります。箱の中のデータの準備が整ったところで置き換える事で、 エラー発生時の処理や復旧がやりやすくなるからです。
結構大変ですよね？
Vue.jsだと、VUEXをインストールすると基本的な設定は準備してもらえます。 また、Storeオブジェクトに全て必要な部分が用意されているのでコードを書くのも 簡単です。REDUXだと、複数のモジュールを追加でインストールして、Reducerを作って Actionを決めて、Storeを作って、さらに、ミドルウエアやイミュータブルの処理 （複製を作って処理）などやる事が山盛りです。 慣れれば特に大きな問題になる程の事ではないので、良いのですが 初めてやる場合には大きな差がつきます。
この辺りが、Vue.jsを体験版にお勧めしている理由です。 もし余裕がある方が、同じことを是非React + REDUXでやってみてください。 初めてだと結構大変な事がわかるかと思います！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿