※スマホ対応はしてません。

タグ: Advent Calendar 2016

(ビルトインの)フィルターは衰退しました。(Vue.js始めるおれおれアドベントカレンダー2016 – 13日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 13日目

簡単なフィルタは自作しなくても最初から用意されてたりしないかな、と思ったんだけど、v1にはあったものの現在v2では削除されたとか。

テキストを展開するためのフィルタは、現状はまだ利用できますが、すべてのフィルタが削除されました。それらの代わりに、(例えば日付のフォーマットには date-fns 、通貨処理には accounting と言った形で) より専門的なライブラリの使用を推奨します。

いや「vue フィルタ」とかで検索したら公式ドキュメントが出てきたんだけど、よく見たら古い版のドキュメントでした。

それでも使おうとすると

開発用(vue.js)の場合は警告が出ます。本番用(vue.min.js)では何も出ません。

[Vue warn]: Failed to resolve filter: capitalize
(found in anonymous component - use the "name" option for better debugging messages.)

エラーにはならないけど、フィルターがないので元の内容がそのまま出てきます。

自分で作ろう

同じ名前でカスタムフィルタを作って登録すれば良いらしい。

先のガイドに、一通りのフィルタの代替コードが掲載されてます。

つくりかた

こんな感じで、 Vue.filter に名前と実装を教えてあげる感じらしい。

Vue.filter('uppercase', function (value) {
  return result.toUpperCase()
})

あとコンストラクタ?コンポーネント?何と呼ぶの? まあこんな感じで指定することもできた。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  filters: {
    uppercase: function (value) {
      return value.toUpperCase()
    }
  }
})
<div id="app">
  <h1>{{message | uppercase}}</h1>
</div>

昔あったフィルタの一覧

あんまり歴史を知らないけれどもこれで大丈夫ですか?

文字列以外のフィルタ

今回は自分の目的ではないんだけれども、例えば繰り返し時の並び替えなんかのフィルタも、前はあったけどv2でなくなったそうです。

よくわからないこと

キャッシュ

とかどうなってるんだろ? やっぱり {{theValue | myFilter}} みたいな書き方したら、 theValue 変更まで結果を確保して再計算しないようになってるんだろうか。

調べてない。

おしまい

観たことなかったけど面白いじゃないか。四年前かあ。

ファイルを読み込んでプレビュー表示してみる。(Vue.js始めるおれおれアドベントカレンダー2016 – 12日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 12日目

昨日のフォームのやつで「ファイルはアレだよ」という話になってたので、アレするのを試してみました。

コードは抜粋しか記載してないのでGitHubの方で確認してください。

選択したファイルをプレビュー表示

ファイル情報の取得

  • App.vue
<input @change="file_change" ref="file" type="file" multiple />

<ul v-if="form.files.length > 0">
  <li v-for="(file, index) in form.files">
    #{{index + 1}}
    <ul>
      <li>名前: {{file.name}}</li>
      <li>サイズ: {{file.size.toLocaleString()}} bytes</li>
      <li>種類: {{file.type}}</li>
    </ul>
  </li>
</ul>
file_change (event) {
  const elFile = this.$refs.file
  const files = elFile.files
  form.commit('setFiles', files)
}
  • form.js
mutations: {
  setFiles (state, files) {
    state.files = Array.from(files).map(file => {
      const data = {
        name: file.name,
        size: file.size,
        type: file.type
      }

      state.files.push(data)
    })
  }
}

情報の所在

<input type="file"> の要素オブジェクトの files プロパティに格納されてます。

change イベントのタイミングで ref を使って参照します。でもってStoreに格納しました。

情報の形式

elForm.files は配列じゃなくてFileListなので、情報を配列に変換しました。

FileListをそのまま突っ込むと二度目以降の change イベントが発火しなくなった。

あ、あと multiple の有無によらずFileListなので、ひとつだけ選択してもらう場合は el.files[0] でアクセスします。

ファイル情報を純粋なオブジェクトへ変換

この例では単純に state.files = Array.from(files) だけでも間に合うんだけど、これから処理を足すので map() も併せて使ってます。あ、でもFileオブジェクトを突っ込むのも良くないのかな。なら今回みたいにして正解だ。

表示

v-for でくるくる出力。

というわけで、名前とか出すだけならこれで終わり。

画像を表示する

プレビュー機能を追加します。

state.files = Array.from(files).map(file => {
  const data = {
    name: file.name,
    size: file.size,
    type: file.type
  }

  if (file.type.startsWith('image/')) {
    data.previewImageSrc = window.URL.createObjectURL(file)
  }

…
<li v-if="file.previewImageSrc">
  <img :src="file.previewImageSrc" :alt="`${file.name}のプレビュー画像`" class="form-files-imagePreview" />
</li>

画像かどうかの判定

file.type に種類が格納されていて、例えば image/png とか text/html とか。

これが "image/" で開始していれば画像と判断します。

画像URLの作成

createObjectURL() を使ってFileオブジェクトから特殊なURLを作成します。あんまりよくわかってない。

本当は使用後に revokeObjectURL() で解放してやるのが良いらしい。

オブジェクト URL が不要になった場合にはこれらを逐一 window.URL.revokeObjectURL() で削除するのが望ましいでしょう。ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、パフォーマンスとメモリ使用を考慮し、明示的にアンロードできる安全な機会があるならば、そうするべきです。

テキストを表示する

ついでにテキストも。

state.files = Array.from(files).map(file => {
  const data = {
    name: file.name,
    size: file.size,
    type: file.type
  }

…

  if (file.type.startsWith('text/')) {
    data.textContent = 'loading...'

    const reader = new window.FileReader()
    reader.onloadend = event => {
      const text = event.target.result
      data.textContent = text
    }
    reader.readAsText(file)
  }

…
<li v-if="file.textContent">
  ファイル冒頭:
  <pre>{{file.textContent | textPreview}}</pre>
</li>
Vue.filter('textPreview', function (value, length = 128) {
  let result = value.slice(0, length)
  if (value.length > 128) {
    result += '…'
  }
  return result
})

テキストかどうかの判定

画像と同じく "text/" で開始するかどうかで判定しました。

ただし、 *.js ファイルが application/javascript だったり *.csv が application/vnd.ms-excel だったりもするので、もうちょっとうまくやった方が良いかも。

テキストの内容を取得

ファイルの内容を読み込んで表示します。

読み込みにはFileReaderを使います。

読込処理が終了すると readyState は DONE に変わり、loadend イベントが生じます。それと同時に result プロパティにはファイルの内容が文字列として格納されます。

だそうです。

カスタムフィルターで冒頭だけ表示

冒頭部分に必要なら "…" を付けて抜き出してくれるフィルターを用意しました。

よくわからないこと

mutationの処理の中の非同期処理

良くないと聞いた。actionを通すとか?

まだそこらへん知らないので愚直にここに書いた。々ドキュメントを読もう……。

Bootstrapと <input type="file">

Vue関係ないんだけど。

ドキュメントの例だと何もしてない。

<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
</div>

こんなもんか?

あとファイル情報の表示はもうあきらめてあんなになりました。 Thumbnail コンポーネント(?)を使うと良さそうだろうか。でも三種類あるんだよなー。

おしまい

デザインェ……。

Vueでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。(Vue.js始めるおれおれアドベントカレンダー2016 – 11日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 11日目

昔書いたjQuery版の真似をして一通りやってみます。と言ってもVueはまだよくわかってない感じがあるので何か違う感じあったら教えて欲しい感じです。

前提

  • Vue v2.1.4
  • Vuex v2.0.0

Vuexの state で情報を持ちます。ただの data でもいいよね。

  • state.js
const Vuex = require('vuex')

module.exports = new Vuex.Store({
  state: {
    // ここに値を記述
  }
})
  • App.vue
<form @submit.prevent="form_submit">
  <!-- ここにコントロールを記述 -->
</form>
var store = require('./store.js')

module.exports = {
  data: function () {
    return store.state
  },
  methods: {
    form_submit (event) {
      // …
    }
  }
}

なんか状況によってはめんどくさい場合もあるみたいだけど、今回はそういう状況ではないとします。

凡例

これから記述する各項は

  1. Store
  2. HTML
  3. 情報受け取り

の順にコードを記載します。受け取りはだいたいただ = でもらうだけだけど。

選択肢の持ち方

値はもちろんStoreに持つんだけど、選択肢の方も一緒に管理したいなあと思って、HTMLじゃなくてStoreの方に書いた。(各項参照。)

これってどうだろう? 大丈夫かな?

何かあれば追記します。

(さらに…)

Vueで「スクロールに合わせて何かする」のってどうするんだろ。(Vue.js始めるおれおれアドベントカレンダー2016 – 10日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 10日目

作れないことはないんだけど、どうするのが最良なんだろうか。とりあえず作ってみた。

スクロールを拾う

方々でスクロールを監視する必要はないので、偉い部品に任せる。それが main.js なのか App.vue なのか。今回は試しに main.js でやってみた。

  • main.js
const app = new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App)
  },
  methods: {
    startWatchingScroll: function () {
      document.addEventListener('scroll', () => {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log(scrollTop)
        store.commit('updateScrollTop', scrollTop)
      })
    }
  }
})
app.startWatchingScroll()

removeEventListener() の事は今回はさておく。

  • App.vue
<style>
  …
</style>

<template>
  <div class="scrollTop">Top: {{scrollTop}}</div>
</template>

<script>
  var store = require('./store.js')

  module.exports = {
    data: function () {
      return store.state
    }
  }
</script>

もらって表示するだけ。

よくわからないこと

スクロール監視を行うひと

main.js か App.vue か?

App.vue の方が実質的な本体感があるのでこっちらでやるべきなような。あるいは App.vue は各コンポーネントの取りまとめ役だけになってもらって、その外側に触れるのは main.js の方にするか。今回は後者の方が良いかなーと思ったんだけどあまり自信がない。

他の選択肢として、 main.js 内に app の関数ではなくて直接イベント監視する方法もありそう。

new Vue({
    …
})

document.addEventListener('scroll', () => {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    store.commit('updateScrollTop', scrollTop)
})

こっちの方が良いかな。あーなんかこっちの方が良い気がしてきた。いやどうなんだろ。

scrollTop を格納する場所

これはたぶんStoreで良いんだと思う。

ただの文字列をコンポーネントに渡す話。(Vue.js始めるおれおれアドベントカレンダー2016 – 9日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 9日目

今まで二重引用符 "…" の中に一重引用符 '…' を書かないと駄目かなって思ってたんだけど。

<my-component v-bind:message="'Hello World!'"></my-component>
or
<my-component :message="'Hello World!'"></my-component>
MyMessage = {
    template: '<p>{{message}}</p>',
    props: ['message']
}

v-bind ではないHTMLの属性の書き方でいけることに気が付いた。

<my-component message="Hello World!"></my-component>

JS側は一緒。

そうだったのか!

デモ

よくわからないこと

仕様なの?

どこに書いてあるのかよくわからない。あるならここら辺だと思うんだけど。

いや考え方の順序が違うのかな。 props のところに『親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュです。』とあるので、そもそもこれは「属性」を受け取るものであると。一方の v-bind もコンポーネントに渡す値を云々じゃなくて、あくまで「属性」を束縛するものであると。結果的にコンポーネントに情報を渡せるけど。

あ、合点がいったわ。