Vueってなんなの?

おはようございますー。

最近弊社ではvue.jsなるものが賑やかしています。

導入が容易ということも手伝い、世間的にもなかなかに流行っているようです。

ということで、実装や構造的な云々はさておき、
とりあえず今まで使ったことのあるjQuery
「何が違うってどういいのよ」ってのが知りたくなったので
Wスカディエドモンで種火周回しながら調べてみました。多段HIT全体Q宝具は神。

php+javascriptでWebサイトを構築する的な前提で調べています。

ワッツ ザ・違い jQueryとVue

jQuery

javascriptによってページを構成する要素を操作*する。
*値の更新、要素の追加、削除

例えばテーブル構造の一覧を更新するときは、

  1. バックエンドに対象データをjsonで返すAPI構築して、
  2. フロントではAjaxAPI叩いてjson取得して、
  3. クラスかIDで対象テーブルを特定して、
  4. json解析して必要な分foreach回して追加&更新

こんなイメージ。

Vue

Javascipt上で保持しているデータと構成要素が紐づいている。
保持しているデータを書き換えると紐づく要素も自動で書き換わる。

jQueryの時と同じ想定を例に取っても、

  1. バックエンドに対象データをjsonで返すAPI構築して、
  2. フロントではAjaxaxiosってのを使う?)でAPI叩いてjson取得して、
  3. jsonを保持してるデータとして扱う

という感じで、わざわざforeach回して要素をごにょごにょする必要なし的な。
(まだ特に2,3のあたりの仕組みがよくわかってないです)

 

うん、確かに便利そうな感じがする。(合ってれば)

番外:vuex

vueとの組み合わせでvuexってやつもあるみたいなんですが、
【vuexを使わない】

  1. 一覧(親)から詳細(子)を開くとき、一覧で保持してる情報を詳細に渡す
  2. 更新する時も子から親にデータを渡す必要がある。
  3. 複雑になると受け渡しで憤死する

【vuexを使う】

  1. 一覧(親)も詳細(子)も同じデータ(store)を参照してるから受け渡し不要
  2. 更新時も親にはわたさなくてよい

くらいに今のところは解釈してます。あってる?ねえねえ合ってる?

なんか知ってるな

調べててvueの発想って
なんかに近いなーと思ったんですよ。考え方に覚えがあるというか。

で、これってその昔いた会社で、
Excelベースの集計帳票作ったときと同じ発想だなー」と。
発想と言ったらいいか、楽さというか。

当時の作ったものの構造

メインシステムのDBからデータを引っ張って集計するExcel帳票を作ってたんですよ。
構造的には下にあるような感じ。

【メインシート(帳票として使う)】
 セルに「データシートの何列目の数値を〜な条件で集計」みたいな関数を記述

【データシート】
 DBから引っ張ってきたデータを展開しておく

あとは適当に貼っつけた集計ボタン押すとODBCドライバ(ADOだっけ)
でDB接続して、データシートを更新するだけの作り。

そうすると帳票を構成するマクロ書かなくても、
データシートの更新するだけでメインシート内の集計値も更新されるお手軽帳票が作れるんですよ。

とんかつとDJって同じだったんだ!的なアレ

これってvueの発想に近いなと。とんかつDJアゲ太郎
「とんかつとDJって同じだったんだ!」
って閃く時の他人には理解できなさそうな「同じだったんだ!」を味わいました。

 

いや、わかってる、怒らない、怒るのはよくない。
色々違うのはわかってるけどなんか似た良さを感じたって話。

逆にjQueryはデータシートを元にエクセルVBAとかマクロで
「集計した値を〜セルに書き出し」みたいなソースを書いて帳票作ったときに近い感覚。

 

というわけで何これ怖い感は多少なくなりましたよ的な話でした。
(個人の感想です)