VUEXって何？データの一元管理
Silicon Valley Super Ware
2020年5月21日
VUEXって何？データの一元管理
先日、Webサービスのデータの一元管理の話の際に少しVUEXに触れました。 そのあと、何件か質問を頂いたので今日はVUEXについてもう少し詳しく 書いてみる事にしました。一番基本のVue.js使い方は、「script」の中で、変数を使ってデータを 保持して使うという方法です。Vue.jsの場合、この変数と「template」の HTML記述を「v-」というタグで結び付けてUIを作っています。
部品（モジュール）間のデータの受け渡しは基本的に
「v-bind」と「$emit」を使ってやり取りします
お問合せフォームの場合やり取りする情報は限定的で余り多くないため データの受け渡しはそれほど問題になりません。所が、ページ数や部品数が増えてきて、扱うデータが増えて、 同じデータをいろいろなページや部品で扱うとなるとちょっと大変です。
データの流れも不明瞭になりやすいですし、どこでデータを更新して、 更新した事を他のページに通知したりで結構大変です。
フレームワークはUIを作る物
前回取り上げたように、ReactやVue.jsなどのフレームワーク（ライブラリ）は主にUIを 作るために作られたものです。本来、データ処理とUIは分けて考えた方がコードも整理されて扱いやすくなります。 そこで良く取られる方法が、データをまとめて一元管理するという手法です。
そのために、Vue.jsで使われているのがVUEXというわけです。
他にも、Reactで良く利用されるREDUXなども、同じような目的で作られたモジュールです。 もちろん、Vue.jsでも利用できます。
VUEXが良く利用されるのは、Vue.jsに簡単に組み込む事ができるからです。
「VUE UI」を利用している場合、「Project plugins」から簡単に既存のプロジェクトに組み込めます。テンプレートはできているので、後は「穴埋め」式で、必要な記述（プログラム）を書けば 簡単に導入できます。標準の設定の場合、ソースファイルのフォルダ（src）の下に 「store」というフォルダーが作られて、その中の「index.js」がデータ処理のプログラムを 書くファイルになります。
これと似たことをプログラムの世界で実現したのがオブジェクト指向のプログラミングの 考え方です。ある「クラス(class)」に何か新しい機能（method）を追加すると、 以前の機能はそのままに機能の拡張ができるという感じです。
UIのデータアクセスの「窓口」
VUEXを導入すると、この「store」が重要なデータアクセスの窓口になります。Webサービスの重要なデータや、ページ間、モジュール間で共有されるデータなどを ここにおいておけば、モジュール間でのデータのやり取りを気にする必要がなくなります。
データの中身を更新する場合も一定の「ルール（手続き）」を通して行うので、 データの管理がやりやすくなります。
開発時などは、データーの更新履歴を追跡する事もできます！
少し規模が大きなWebサービスを作る場合、VUEXはとても強力な物です。同じことをReactでやるには？
では、同じような事をReactでやるには何が必要かというと 良く利用されるのが、「REDUX」というモジュールを使う場合が多いようです。ただ、Vue.jsのように簡単ではありません。（要領を掴んでしまえば簡単です！）
REDUXを「npm」でインストールして設定します。
殆どの場合、「react-redux」というReactとREDUXを繋げるモジュールも 一緒に使う場合が多く、これをインストールして、自分、「Reducer」と 呼ばれる、処理の記述と、Reduceを呼び出す「Action」の設定、 Storeの作成、Reactモジュールへの適用などの一通りの設定を行います。Vue.jsに比べると作業量は多くなりますが、機能ごとに記述を分割したりするのも やりやすく、慣れてしまえば問題になるような物ではありません。
使い勝手を良くするために、他にもモジュールを導入する場合が殆どです。 私が良く使うのは「immer」や「react-thunk」などです。
問題は、なかなか分かり易く説明したドキュメントが日本語では特に 少ないので一番最初は少し大変化もしれません。
大きなWebサービスの場合はReactもVue.jsも同じ！
大きなサービスになると、Vue.jsでVUEXを使う場合でも 全ての処理を、「store/index.js」で書くよりも機能別に分けて書いて 「store/index.js」でまとめる感じにした方がコードの見通しが良くなります。そう考えると、ReactもVue.jsも手間という点では余り変わりが無いように思います。
ただ、初めて使う場合や、Webサービスの規模が余り大きくない場合は、 Vue.jsとVUEXならば、特に自分で初期設定をしなくてもすぐにコードが書けるのは魅力です。 この辺が、初心者にVue.jsをお勧めしている理由です。
VUEXについては、近日中に何か良いサンプルを考えて、 Webサービスの実施例で取り上げようと思っています。 記述の詳細についてはもう少しお待ちください！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿