Get back the future
最近の日本製品の品質不正を踏まえてバック・トゥ・ザ・フューチャーの以下のシーンを御覧ください。
1955年のドク「故障するのも不思議じゃない。日本製だ」
1985年から来たマーティ「どういう意味？日本製は最高さ」
1986年の私「せや！日本製最高や！」
2017年の私「ドクの方が正しいのでは？」
30年経って観ると何とも悲しい気分になるシーンだ。日本ブランドがこんなに強かったのも今の子供には信じられなくなっているのかもしれない。
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の代わりに使って更に体に覚え込ませでいく。
