kitak blog

Kみたいなエンジニアになりたいブログ

Vue

RxJS を使って、Vuex のようなものを書いた

散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外…

Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更

この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [</script>…

Vue.js v2 で揮発性の現象を扱う(ダイアログ等を実装する)

同僚に題の相談を受けていたんですが、そのときに「あんまりこの話、ググっても見かけないね」という話になったのでブログに書いておきます。 SPA でダイアログを実装する機会があると思うんですが、よくある事前にコンポーネントツリーのルート直下にダイア…

Vue v1.x から v2.x へアップデートした

Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。 全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration…

Vue.js Tokyo v-meetup="#3" で発表しました

発表しました。 vuejs-meetup.connpass.com 発表 去年の Vue.js Advent Calendar で書いた記事( Vue.js 2.0 の算出プロパティ周辺のコードリーディング - kitak.blog )の内容について、@kazupon さんに「話しませんか?」と声をかけていただいたのがきっかけ…

Vuex でのエラーの扱いについての個人的な考え

最新の dex.fm — Development at Mercari US で、Redux でのエラーの扱いについての言及があって、自分は Vuex (Redux インスパイアな Vue の状態管理ライブラリ)でどうやっていたっけな、というのを文章で簡単に書いておきます。あくまで個人の考えです。 …

Vue.js 2.0 の算出プロパティ周辺のコードリーディング

この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(…

vue-templatify という Browserify プラグインを作った

2016/2/1 追記: 単一ファイルコンポーネントでも、JSとテンプレートを分けて書くこと自体はできるので(refs: https://jp.vuejs.org/v2/guide/single-file-components.html#関心の分離について)、このプラグインは基本的に不要かもしれません。 作った。 gith…

Vuex のドキュメントを翻訳した

Vuex は、Redux インスパイアの Vue.js の周辺ライブラリ。各言語の翻訳があるんですが ( http://vuex.vuejs.org/ )、日本語のドキュメントが v0.8 から更新されていなかったので、v1.0.0-rc.2 を対象に @ktsn さんとドキュメントを翻訳し直しました。読みづ…

Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした

数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書い…

Vue.jsで filterBy フィルタの結果の件数を取得したくなったら

filterBy フィルタで絞り込んだ結果の件数を表示したり、0件の時にメッセージを表示したいということはままある。が、以下のように普通にfilterBy フィルタを使っても、絞りこまれた結果の件数は取得できない。 <div v-for="item in items | filterBy 'hello'"> 似たようなことを考える人はいるもので、issu</div>…