vue.jsでStoreパターンを使用した時のv-model代用設定
v-model
を使うとStore
を通さずにdata
が変わってしまう。
Store
パターンの制約を守るために以下のように:value
を更新する必要がある。
See the Pen Storeパターンにおけるv-modelへの対処 by tamoriinu (@yokoyama) on CodePen.
Vue.jsによるデータ絞り込み
Codegridの連載を元にちょっとだけ変えたもの。
複数選択するとandで絞り込む
See the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.
配列を一定の要素を持つ配列の配列に変換
何処かで使う可能性がありそうなのでメモ
lodashでそのもののメソッドがある
See the Pen lodash chunk by tamoriinu (@yokoyama) on CodePen.
実装 github.com
グループ
こんなデータがあるとして、
[ { name: "筒香", bats: 5, hits: 3 }, { name: "ロペス", bats: 5, hits: 2 }, { name: "宮崎", bats: 5, hits: 4 }, { name: "筒香", bats: 4, hits: 2 }, { name: "ロペス", bats: 4, hits: 4 }, { name: "宮崎", bats: 4, hits: 4 }, ]
こんな結果が欲しいとき
[ {:name=>"宮崎", :bats=>9, :hits=>8}, {:name=>"ロペス", :bats=>9, :hits=>6}, {:name=>"筒香", :bats=>9, :hits=>5}, ]
rubyでこんな風に書いた
records = [ { name: "筒香", bats: 5, hits: 3 }, { name: "ロペス", bats: 5, hits: 2 }, { name: "宮崎", bats: 5, hits: 4 }, { name: "筒香", bats: 4, hits: 2 }, { name: "ロペス", bats: 4, hits: 4 }, { name: "宮崎", bats: 4, hits: 4 }, ] ans = records.each_with_object([]) do |item, memo| if ev = memo.detect{ |ev| item[:name] == ev[:name] } ev.merge!(item.merge(bats: item[:bats] + ev[:bats], hits: item[:hits] + ev[:hits])) else memo << item.dup end end .sort_by{|h| -h[:hits] } p ans # [ # {:name=>"宮崎", :bats=>9, :hits=>8}, # {:name=>"ロペス", :bats=>9, :hits=>6}, # {:name=>"筒香", :bats=>9, :hits=>5} # ]
SQLのほうがシンプルに書ける。
# create table create table bayrecord ( name varchar(20), bats int, hits int ); # insert data insert into bayrecord values ('筒香', 5, 3); insert into bayrecord values ('ロペス', 5, 2); insert into bayrecord values ('宮崎', 5, 4); insert into bayrecord values ('筒香', 4, 2); insert into bayrecord values ('ロペス', 4, 4); insert into bayrecord values ('宮崎', 4, 4); # select select name, sum(bats), sum(hits) from bayrecord group by name order by sum(hits) desc;
Vue.jsの何が嬉しいのか?
前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVue.jsの書き方になじめず苦労をしたが、慣れてくるにつれその良さや、使われる理由が身をもってわかるようになってきた。
実感したのは以下の点
- DOMとデータが分離されているので両者を完全に分けて考えることができる。
- グローバル汚染が起こらない。
- 適切にコンポーネント化しておけば後の案件でも使いまわせる。
- 役割がコンポーネント単位ではっきりしているので機能拡張がしやすい。
jQueryはちょっとしたDOM操作を手軽に行えるが、今はDOM操作もプレーンなjsで十分に行えるようになったし、規模の大きいものをjQueryだけで書くと途端にスパゲティになってしまう。Vue.jsとjQueryでは提供してくれるものが違うので優劣をつけるものでもないけれど。
今後も遊びで作るものなどにもjQueryの代わりに使って更に体に覚え込ませでいく。
2016年オリックス・バファローズの勝率とポンタの歩み
高校野球の優勝回数を県別にまとめてみた
県別甲子園優勝回数
D3.jsで日本地図を描き、県別の優勝回数データと連携させビジュアライズしてみた。
こうしてみると優勝旗が白河の関を越えていないのがはっきりわかる。
(東北勢の優勝が条件なので北海道の優勝は入れないらしい)
また開催地である兵庫県に近い地域に優勝が集中しているのもわかる。(滋賀県頑張れ)
九州では宮崎県だけ春夏ともまだ優勝がない。
【参考】
D3.jsで日本地図を作成しデータを反映するサンプル(コロプレス地図) | Tips Note by TAM
また、これを作るにあたってweb上のデータを色々見たが、「朝鮮、台湾、満州」という地域があり驚いた。
戦前は外地からも甲子園に参加していたのは知らなかった。
台湾代表の活躍を描いたこちらの映画、見てみよう。
kano1931.com