2017/10/4に開催されたVue.js Tokyo v-meetup #5 - connpassに参加してきました。 まずはスタッフの皆様お疲れさまでした。最高の誉め言葉としての「滞りなく」を贈りたいと思います。 その競争率の高さゆえ参加機会に恵まれなかったv-meetupですが、今回「ブログ書く枠」がたまたま空いたので参加できることに。以下はそのレポートとなります。 なお、当日のツイートは@kazuponさんが既に昨日のVue.js Tokyo v-meetup #5のTweetまとめました！を作ってくれていますので、そちらも合わせて参照ください。 今回は発表の多くがNuxt.jsがらみでしたが、ほぼ満員（一般参加枠80名）の会場で「Nuxtで作っている人？」という問いかけに手を挙げた人は10名程度。 自分もNuxt.jsは Next.jsのVue版 SPA/SSR案件で使うと便利

前回の続き。 vue-touch-keyboardでカスタムキーボードを作るには、ソースコードのlayouts.jsを見ればわかります。 特にシフトキーやCapsキー用のレイアウトが必要ない場合は_metaとdefaultを定義すればOKです。 defaultは表示通りの入力で良い場合は単にその文字、特殊キーは{}で括ったうえで_metaに定義を記載します。 key: 入力文字列 text: 表示文字列 classes: DOMのclass width: DOMのwidth func: 押下時に実行される関数名 funcは任意の関数名が使えるわけではなく、ソースのkeyboard.vueのpropsで定義されている以下のもののみです。 [onClickイベント発生時] accept: 確定 cancel: キャンセル next: フォーカス移動 [onChangeイベント発生時] chan

Vue.js v2でソフトウェアキーボードを使おうとすると、vue-touch-keyboardが第一候補に挙がるわけですが、公式のREADMEやJSFiddleのサンプルだけではイマイチピンとこないところがあるわけです。 その典型例が「どうやってv-modelでのdatabindと共存するの？」なわけですが、今回はそれをテーマにしたいと思います。 まず、オリジナルのJSFiddleサンプルをforkして、3つあるinputに同じ変数（ここではvm.data.value）をv-modelでdatabindさせたものがこれです。 vue-touch-keyboard + v-model（動かない） 試してみるとすぐわかりますが、ソフトウェアキーボードから入力した値がclose（またはnext）キーの押下で消えてしまいます。 これはvue-touch-keyboardが入力対象のDOMに対して

この記事はVue.js Advent Calendar 2016の7日目（代打投稿）です。 Vue.jsも2.0になってVirtual DOMが採用されたので、改めてVirtual DOMについてMVVMとの比較で考えてみます。 いきなり結論っぽい図ですが、これが分かればもうVirtual DOMは理解したといっても過言ではないかと。 MVVM(2-way data binding) ObjectとDOMはそれぞれ独立した状態（値）を持っており、それを双方向に同期する。 キー入力に起因するDOMの更新はDOMが自律的に行う。 Virtual DOM(1-way data flow) DOMはObjectの射影であり、DOMが自律的に更新することは無い。 キー入力はイベントの形でObject側に通知され、Objectの値が変更されることによって、その射影という形でDOMが更新される。 ただ、

この記事はhttps://benjaminlistwon.com/blog/vue-20/の翻訳です。翻訳を快諾してくれたBenjaminさん、ありがとうございました。 原文のくだけた感じを残しつつ翻訳するように努めましたが、日本語がこなれていない部分もあるかと思います。そのような箇所を見つけた場合はコメント欄にて指摘してもらえると幸いです。 自分のVueアプリを2.0に移行し始めた件、及びこれまでに私が見つけたリソースに関する短い投稿 2016/9/14 数週間前に私は休暇から戻り、息子は新学期が始まったので、再び自宅オフィスは平穏で静かになりました。私が留守の間、VueのアプリでHandsontable（HOT）を使うために私が書くと言及していたVueコンポーネントに誰かが着手していました。私は素晴らしい将来のために、それをVue 2.0に書き換えようとしており、それが済んだら喜んでG

以下はvuejs-jp slackに投稿したネタですが、ここのブログにも書いておきます。 先日正式リリースされたVue.js 2.0では、React.jsと同様のVirtual DOMやOne way data flowが採用され高速描画が可能となった反面、ディレクティブは大幅に機能縮小され、"twoWay: true"による双方向データ同期機能は無くなってしまいました。 migration方法としては「コンポーネントで書き直してください」が公式回答なわけですが、正直言うとその辺の辛さがあってReactではなくVueを使っていた人間としては「うーむ」という感想なのです。ダッタラ初めからReactで良くね？… というわけでいろいろ試行錯誤したところ、実はちょっとしたテクニックで2.0でも依然としてtwoWayなカスタムディレクティブを実装可能なことがわかりました。 ポイントはv⇒vm方向のデ

Vue.js が templateURL をサポートしない理由というVue.js作者自身の記事があるように、本来Vue.jsでテンプレートやWebComponent開発を行うには.vue形式でソースを記述し、vueify(browserify)かvue-loader(webpack)といったビルドツールを使うのが筋です。 そして、これらツールを使いこなすためにはツールの実行環境であるnode.jsエコシステムも理解する必要があります。しかもnode.jsエコシステムは流行り廃りが激しく、その流れをキャッチアップし続けるのも正直しんどいです。 そうなると、本人の努力で何とでもなる趣味のプログラムや個人プロジェクトならともかく、特に企業内でのチーム開発プロジェクトにこれらの仕掛けを導入するのはなかなか骨が折れるのではないでしょうか。 いくら「Vue.jsの学習コストは低い」と言っても、「エディ

WEBのチェックボックスは通常チェック有・無の2-stateですが、HTML5からは中間（不定）状態を加えた3-stateのチェックボックスを簡単に作ることができます。 中間状態にするにはチェックボックスの"indeterminate"プロパティをtrueにすればよいのですが、このプロパティはJavascriptのコードからでないと設定できません。 具体的にはこんな感じです。これで画面のクリック操作ではちゃんと3-stateが実現できています。 3-stateチェックボックス 一方、WEBアプリを含むGUIを持つプログラムの設計パターンとして"MVVM"というものがあります。 MVVMはモデル(M)とビュー(V)を「データバインド」機能で同期することによりコードの記載量や複雑性を減らしたり単体テストがしやすくなるというデザインパターンですが、先ほど作った3-stateチェックボックスのまま