フレームワークの目的は？ UIを作るのが目的です！！
Silicon Valley Super Ware
2020年5月19日
フレームワークの目的
Vue.jsを利用した「お問合せフォーム」のWebサービスもゴールに近づいてきました！ 今日は「フレームワーク（ライブラリ）」について書いてみました。「Vue.js」にしても「React」にしても、基本はUIを作るためのフレームワーク（ライブラリ）と されています。この辺を早い段階できちんと理解しておくことは将来の複雑なWebサービスを 作るために大切なので取り上げてみました。
フレームワークは UI（ユーザーインターフェース）を作るための物です！
Webサービスは、大きく２つの部分で出来ています。- UI(ユーザーインターフェース)
- データ処理部分
全然別のプログラム！
UIはユーザーつまり、利用者が直接見たり、操作する部分です。 一方で、データ処理部分というのは、利用者の操作によって必要なデータを準備する部分です。将来にわたって、管理しやすいプログラムにするためには、この２つは出来るだけ 分けて別々に作れるのが理想です。そうする事で、将来の拡張や、設計の変更が楽になります。
今回のような、「小さな」Webサービスの場合、この２つを混在する形で作っても余り大きな 問題にはなりません。実はデータの処理部分は殆どないからです。
大きなWebサービスになると話が変わってきます！
大きなWebサービスになると、扱うデータの種類は増えますし、表示に使う部品やページの数も増えます。 その場合、各部品間やページ間で同じようなデータを共有したり、受け渡しをする必要が出てきます。そのような場合、データを処理する部分と利用者がやり取りする部分を分けて作った方が、 全体の見通しやデータの受け渡しがシンプルになります。
データの一元管理
そのための設計手法の一つが、データの一元管理です。 データは一か所でまとめて管理して、必要なページや部品に渡すという方法が 大きなWebサービスでは効率的です。Vue.jsもReactでも、そうした実装をするための仕組みがあります。
- Vue.jsでは、「VUEX」というプラグイン
- Reactの場合は、「Redux」を使うことが多いようです
React自体はそうした機能を持っていませんが、これを使う事で同じような事ができます。
初心者には、VUEXを組み込む方が簡単！
このあたりが、最初はVue.jsから入った方が楽だと思う一つの理由です。 Reduxでも慣れてしまえば大きな問題はないのですが、最初の設定だけでも やる事が少し面倒なので、どちらも知らない状態ならVue.jsの方が簡単だと思います。モジュール間のデータの受け渡しがシンプルに！
データの一元管理をすると、モジュール間で受け渡すデータは簡単になります。 そうすると、全体の見通しも良くなりますし、UIそのもの（つまり操作性）に 集中できるので良いWebサービスを作る事ができます。データの受け渡しのところで少し触れましたが、Reactのデータの受け渡しは 一方通行で親から子のみになっていますが、大きなWebサービスの場合、 こうした一元管理で作る事が多くなるので、余り大きな問題ではないという事です。
今回のお問合せフォームでデータを一元管理するとどうなるか？
- データベースアクセスをデータ処理部分に移動
- ログインの処理をログインフォームだけで可能
- ログインの状態は、データ処理部分から取得
- テーブルのデータもデータ処理部分で一元管理
データ処理部分を工夫して作れば、UIをVue.jsで作ったり、 Reactに入れ替えたりも比較的簡単にできます。
余裕のある方は、「VUEX」を試してみてください！
今回は、「VUEX」を組み込むほど複雑ではありませんが、 余裕のある方は、将来の為にVUEXを「使ってみる」のは良いかと思います。 今回のようなシンプルなWebサービスの場合には、少し大げさな感じはありますが、 勉強の為にはシンプルな方が分かり易いと言えます。シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿