読者です 読者をやめる 読者になる 読者になる

映画忘備録

映画を見た感想を、ひたすらメモっていくブログです。

VueJS の v-for で filterBy された結果件数を取得する

VueJS(現在のバージョンは1.0.17)でv-forを使用してfilterByしてる場合、その結果件数を知りたい時があると思う、例えば動的にページングしたいとか検索結果がないときに「検索結果がありません」とかメッセージを表示したい場合とか。

そういうシチュエーションはそれほど珍しいものだとも思えないので「$results」とか特別な変数で簡単に取得できても良さそうなものなのだけれども、なぜかVueJSでもangularJSでもそういった特別な変数などは用意されていないので、カスタムフィルタを自作するなどして無理矢理実装するしかない。

そんななかVueJSでv-forでfilterByした結果件数を取得するスマートな方法が見つかったので、ここにメモっておく。

VueJSのfilterByを直接叩いて結果を取得

とりあえず先に回答を書いてしまうと以下のようなコードで、これはVueJSのfilterByフィルタにテンプレートからではなく、JSから直接アクセスしてfilterByした結果オブジェクトを取得している。

this.$options.filters.filterBy(v-forするオブジェクト, フィルタリング条件, 検索するプロパティ);

より具体的に書くと

<input v-model="searchText" type="text">
<ul>
  <li v-for="item in dataItems | filterBy searchText in 'name"></li>
</ul>

これと

computed: {
    filteredResults: function () {
        return this.$options.filters.filterBy(this.dataItems, this.searchText, 'name');
    }
},

これはテンプレートに書いているか、JSの方で直接呼び出してるかというだけで内容は同じものになる。

そして上記の「filteredResults」はfilterByされた結果がreturnされているため、「filteredResults.length」でv-forをfilterByした結果件数が得られる。


この手法の優れているところは

  • computedで取得できるので使いまわしがしやすい
  • 書く内容がシンプルである
  • VueJSのフィルタを直接使用しているため、バージョンが上がったりしても比較的安全そう
  • filterBy以外のフィルタに対しても応用が効きそう

というところにあるが、正常な使い方とも言い難いので、使用する際には留意していただきたい。

マネー・ショート 華麗なる大逆転:スコセッシ風ドキュメンタリータッチのブラックコメディ

f:id:hate_miyo:20160312222515j:plain

「マネー・ショート 華麗なる大逆転(原題:The Big Short)」はアダム・マッケイ監督、クリスチャン・ベール主演の実話を元にしたドキュメンタリータッチの作品で、第88回アカデミー賞脚色賞を受賞している。

ドキュメンタリータッチのため、「マネー・ショート 華麗なる大逆転」には明確な主人公が存在せず、一応クリスチャン・ベール主演となっているが内容的にはスティーブ・カレル、ストーリー的にはライアン・ゴズリング*1が主人公ともいえる。

ちなみに「ショート」とは金融用語で”売り”のことであり、そのため「The Big Short」という映画と同名の原作は「世紀の空売り*2」という邦題になっているのだが、映画の方の邦題である「マネー・ショート 華麗なる大逆転」だともはや意味がよく分からないが気にしないように。

*1:見た目がいつもと違うので、しばらく気が付かなかった

*2:マイケル・ルイス作、文藝春秋社刊

続きを読む

ヘイトフル・エイト:ミステリ感のまったくない、やや冗長ないつものタランティーノ映画

f:id:hate_miyo:20151230170610j:plain

ヘイトフル・エイト(原題:the hateful eight)は、クエンティン・タランティーノ監督、サミュエル・L・ジャクソン主演のミステリ風西部劇である。

ちなみに”「密室」ミステリー”とあるが、確かに閉じ込められてはいるものの別にミステリーというわけではない、もし仮にそうだとしたら”ドアのカギが壊れて板で打ち付けてある密室”という結構斬新な密室ミステリと言えただろう。

続きを読む

ジョン・ウィック:プロレスかと思って観に来たら総合格闘技だった

f:id:hate_miyo:20151018203751j:plain

「ジョン・ウィック」はチャド・スタエルスキー監督、キアヌ・リーブス主演のアクション映画で、 マトリックスなどでアクション・スタントを担当していたチャド・スタエルスキーの初監督作品である。

「ガン=フー」と呼ばれる、近接格闘技とガンアクションをミックスしたアクションが行われるのが最大の特徴であり、本作の監督主演がともに参加している「マトリックス*1」や、近接格闘技とガンアクションをミックスした先駆者である「リベリオン*2」などとの関連性を喧伝している作品でもある。

*1:1999年公開、ウォシャウスキー兄弟監督の全3部作のSFアクション映画

*2:2002年公開、カート・ウィマー監督のSFアクション映画

続きを読む

天空の蜂:観客をイライラさせる演出の繰り返しに耐える強い心が試される映画

f:id:hate_miyo:20150922224650p:plain

「天空の蜂」は東野圭吾の同名小説*1を原作とした、江口洋介主演、堤幸彦監督の日本映画である。

いつもの日本映画の病理が炸裂する前半

この「天空の蜂」はジャンルとしては”社会派サスペンス映画”で、防衛庁が新規開発した軍用輸送ヘリ「ビッグB」が、「高速増殖炉もんじゅ」そのまんまの設定の、試験稼働中の新型原発「新陽」に遠隔操作されて飛んでいき、ヘリの燃料が切れる8時間以内に強奪犯の要求を受け入れなければ爆薬を搭載して「新陽」にそのまま墜落する、との脅迫を受ける…

*1:講談社文庫、本作の公開に合わせて新装版が発売されており、合わせて猫田ゆかりによるコミカライズ版も制作されている。

続きを読む