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;

参考 ja.stackoverflow.com

Vue.jsの何が嬉しいのか?

前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVue.jsの書き方になじめず苦労をしたが、慣れてくるにつれその良さや、使われる理由が身をもってわかるようになってきた。

実感したのは以下の点

  • DOMとデータが分離されているので両者を完全に分けて考えることができる。
  • グローバル汚染が起こらない。
  • 適切にコンポーネント化しておけば後の案件でも使いまわせる。
  • 役割がコンポーネント単位ではっきりしているので機能拡張がしやすい。

jQueryはちょっとしたDOM操作を手軽に行えるが、今はDOM操作もプレーンなjsで十分に行えるようになったし、規模の大きいものをjQueryだけで書くと途端にスパゲティになってしまう。Vue.jsとjQueryでは提供してくれるものが違うので優劣をつけるものでもないけれど。

今後も遊びで作るものなどにもjQueryの代わりに使って更に体に覚え込ませでいく。

See the Pen yXRJzK by tamoriinu (@yokoyama) on CodePen.

2016年オリックス・バファローズの勝率とポンタの歩み

去年から始まったオリックスとポンタのtwitterコラボ、好評につき本来一年だった契約が更新され、今年も続いている。
勝った時より負けたときの方がリアクションが面白いので有名。特に去年は借金26と、負けが込んだため、愉快なポンタを堪能できた。

そこで2016年のオリックスの勝率とポンタのtwitterでのリアクションをグラフにしてみた。
グラフのポイントにホバーするとその日のポンタのリアクションが見れる。
右肩下がりの連敗時の画像を連続でみると面白くて、やがて悲しい。

2016年オリックスの勝率推移とオリックスポンタのリアクション

高校野球の優勝回数を県別にまとめてみた

県別甲子園優勝回数
D3.jsで日本地図を描き、県別の優勝回数データと連携させビジュアライズしてみた。
こうしてみると優勝旗が白河の関を越えていないのがはっきりわかる。
(東北勢の優勝が条件なので北海道の優勝は入れないらしい)
また開催地である兵庫県に近い地域に優勝が集中しているのもわかる。(滋賀県頑張れ)
九州では宮崎県だけ春夏ともまだ優勝がない。

【参考】
D3.jsで日本地図を作成しデータを反映するサンプル(コロプレス地図) | Tips Note by TAM

また、これを作るにあたってweb上のデータを色々見たが、「朝鮮、台湾、満州」という地域があり驚いた。
戦前は外地からも甲子園に参加していたのは知らなかった。

台湾代表の活躍を描いたこちらの映画、見てみよう。
kano1931.com

vue.jsによる絞り込み

See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.