Vueってなんなの?
おはようございますー。
最近弊社ではvue.jsなるものが賑やかしています。
導入が容易ということも手伝い、世間的にもなかなかに流行っているようです。
ということで、実装や構造的な云々はさておき、
とりあえず今まで使ったことのあるjQueryと
「何が違うってどういいのよ」ってのが知りたくなったので
Wスカディエドモンで種火周回しながら調べてみました。多段HIT全体Q宝具は神。
php+javascriptでWebサイトを構築する的な前提で調べています。
ワッツ ザ・違い jQueryとVue
jQuery
javascriptによってページを構成する要素を操作*する。
*値の更新、要素の追加、削除
例えばテーブル構造の一覧を更新するときは、
- バックエンドに対象データをjsonで返すAPI構築して、
- フロントではAjaxでAPI叩いてjson取得して、
- クラスかIDで対象テーブルを特定して、
- json解析して必要な分foreach回して追加&更新
こんなイメージ。
Vue
Javascipt上で保持しているデータと構成要素が紐づいている。
保持しているデータを書き換えると紐づく要素も自動で書き換わる。
jQueryの時と同じ想定を例に取っても、
という感じで、わざわざforeach回して要素をごにょごにょする必要なし的な。
(まだ特に2,3のあたりの仕組みがよくわかってないです)
うん、確かに便利そうな感じがする。(合ってれば)
番外:vuex
vueとの組み合わせでvuexってやつもあるみたいなんですが、
【vuexを使わない】
- 一覧(親)から詳細(子)を開くとき、一覧で保持してる情報を詳細に渡す
- 更新する時も子から親にデータを渡す必要がある。
- 複雑になると受け渡しで憤死する
【vuexを使う】
- 一覧(親)も詳細(子)も同じデータ(store)を参照してるから受け渡し不要
- 更新時も親にはわたさなくてよい
くらいに今のところは解釈してます。あってる?ねえねえ合ってる?
なんか知ってるな
調べててvueの発想って
なんかに近いなーと思ったんですよ。考え方に覚えがあるというか。
で、これってその昔いた会社で、
「Excelベースの集計帳票作ったときと同じ発想だなー」と。
発想と言ったらいいか、楽さというか。
当時の作ったものの構造
メインシステムのDBからデータを引っ張って集計するExcel帳票を作ってたんですよ。
構造的には下にあるような感じ。
【メインシート(帳票として使う)】
セルに「データシートの何列目の数値を〜な条件で集計」みたいな関数を記述
【データシート】
DBから引っ張ってきたデータを展開しておく
あとは適当に貼っつけた集計ボタン押すとODBCドライバ(ADOだっけ)
でDB接続して、データシートを更新するだけの作り。
そうすると帳票を構成するマクロ書かなくても、
データシートの更新するだけでメインシート内の集計値も更新されるお手軽帳票が作れるんですよ。
とんかつとDJって同じだったんだ!的なアレ
これってvueの発想に近いなと。とんかつDJアゲ太郎が
「とんかつとDJって同じだったんだ!」
って閃く時の他人には理解できなさそうな「同じだったんだ!」を味わいました。
いや、わかってる、怒らない、怒るのはよくない。
色々違うのはわかってるけどなんか似た良さを感じたって話。
逆にjQueryはデータシートを元にエクセルVBAとかマクロで
「集計した値を〜セルに書き出し」みたいなソースを書いて帳票作ったときに近い感覚。
というわけで何これ怖い感は多少なくなりましたよ的な話でした。
(個人の感想です)