Vue Fes Japan 2018 に行ってきた

Event detail 2018.11.3 (Sat.) Akihabara UDX 4F / UDX Gallery タイムテーブルはこちら Keynote by @youyuxi Vue3.0 の話 TL;DR; 速く,小さく,メンテしやすく,ネイティブ向け,保守性 速く Virtual DOM 実装をフルスクラッチから作り直し mount と patch 処理が最大100%向上 言語標準の最適化によって速度向上 Map/Set/WeakMap/WeakSet Class プロパティプロキシの高速化 Object.definePropertyは使わなくなる ネイティブプロキシ 実行時オーバーヘッド削減のため,コンパイル時にヒントを追加 React の JSX に似ている lazy function Reactではこの仕組みを使っていない Static Tree Hoisting 変更がなかったとしてもそれを調べる必要があった コンポーネントのインスタンス化の効率化 速度2倍,メモリ使用量半減 小さく Tree-shakingへの対応 使われない処理を,バンドルから取り除く機能 webpackとかにもこの機能はある ランタイムサイズ10kb以下(GZip) メンテしすく よりネイティブ向けにつくりやすく カスタムレンダラAPI 保守性向上 リアクティビティAPI Observer メソッドが追加される Render Track 再描画の仕組みが分かりづらかった renderTriggered callback が追加される 保守性 TSX TS Support の強化 Warningもわかりやすくなる 実験的なHooks API 実験的なTimeSlicing 必要なくなった処理を間引く 同じcallbackが連続で実行されたとき,古い方は実行する必要がなくなる これによって,60fps に最適化 Platinum Sponsor Session PLAIDさんのプラチナスポンサー枠発表...

November 3, 2018

【2018/09】tanaka.world バージョンアップのお知らせ

色々バージョンアップしました👾 色の切り替え + アニメーションスキップ機能を追加 👉 https://tanaka.world/ 色の切り替え+アニメーションスキップ機能を加えた 👾🚀 https://t.co/vCVJp9G8qh #tanakaworld pic.twitter.com/cPngyAUx36 — tanakaworld 🧢 (@_tanakaworld) September 16, 2018 色の切り替え クエリパラメータ color にカラーコード16進数を指定すると,その色で描画されます 例: https://tanaka.world/?color=4d1d9b 左上のカラフルボタンをクリックすると,ランダムでカラーを割り当て カラーの生成には randomColor を使用 アニメーションスキップ 右上の Skip ボタンでアニメーションスキップされます 服を脱がされると,寒いので震えます アイコンが新しくなりました 左: 旧,右: 新 ピクセル数を半分に減らし,シンプル化しました 48x48 → 24x24 使っているツールは aseprite 色味を微調整 ...

September 23, 2018

vue-i18n の簡易入力補完を実装してみた雑感

vue-i18n の入力補完を実装してみた.久々に業務で i18n 対応をするようになって,若干ツラさを感じているところもあるので,併せて記す. はじめに断っておくが,ツラさを感じているのは vue-i18n に対してではなく,i18n 全般に対してのこと. 文字列指定を入力補完したい エディタでvue-i18nの入力補完したい — tanakaworld 🧢 (@_tanakaworld) August 30, 2018 vue-i18n に限らず i18n 系を扱うときは $tc('home.title') のような感じで文字列をキーとして指定することになる. 文字列キーのタイポしなくしたい 文字列キーのパス入力をカンタンにしたい これらを入力補完でなんとかしたい. 普通に vue-i18n を使った場合 普通に実装するとこういう感じになる. import Vue from "vue"; import VueI18n from "vue-i18n"; Vue.use(VueI18n); const messages = { en: { message: { hello: "Hello World!" }, home: { title: "Home" }, about: { title: "About" } }, ja: { message: { hello: "こんにちは,世界!" }, home: { title: "ホーム" }, about: { title: "アバウト" } } }; const locale = "ja"; const i18n = new VueI18n({ locale, messages }); export { i18n }; <template> <div class="home"> <h1>{{ $tc('home....

September 22, 2018

Vue.js Tokyo v-meetup 8 に登壇しました

2018年8月27日に開催された v-meetup #8 に登壇しました. 約150の募集枠は,募集開始数分で埋まるほどの人気イベント.v-meetup の参加は初めてだったのですが,スタッフを始め参加者の方々の熱気に圧倒されました. Replace View of Backbone.js with Vue.js 2年半くらい運用していた Backbone.js SPA の一部を Vue.js でリニューアルしたときの話をしました.コアフレームワークが Backbone.Model に依存していて,Backbone.js から逃れられないプロジェクト,View 周りがツラいので組み合わせてみたら幸せになったという話です.どうしてもフルリプレイスが難しいプロジェクトとかで,小さく薄くはじめられるのが Vue.js のいいところ.2018年現在に使うのは色々ツラいところあるけど,Backbone.js 自体は嫌いではない(使いたいとは言っていない) そもそもbackboneがつらい…#vuejs_meetup8 — ほんだし (@hondash918) August 28, 2018 backbone.js、繋ぎ先がhtmlである必要がないのでcocos2d-jsと組み合わせて使ったりしてた。今も結構好き。 #vuejs_meetup8 — hadakadenkyu (@hadakadenkyu) August 28, 2018 Vue コンポーネントの中で jQuery ライブラリ使うのあるある。 #vuejs_meetup8 — katashin (@ktsn) August 28, 2018 mountedでjqueryやるの親近感。#vuejs_meetup8 — Keima Kai (@keimakai1993) August 28, 2018 backboneとvueで共存キメラはすごい... #vuejs_meetup8 — イカID: Toshiwo (@toshiwo) August 28, 2018 サンプルプロジェクト サンプルプロジェクトを地味にちゃんとつくった.Realm つかってみたくて,サーバのデータストアに Realm Node....

August 30, 2018

Vue.js と At.js を組み合わせる

jQuery 製の AutoComplete を提供する At.js を,Vue のコンポーネントと組み合わせて使ったときのメモ. 完成イメージ 完成版ソースコードはこちら. At.js を使うと次のような挙動が実現できる.WYSIWYG 内で @ を入力すると,入力候補が一覧が表示され,選択すると任意の要素が追加できる. vue-at は使わなかった At.js の Vue 版 vue-at もあるが,At.js の全機能に対応していなかった.(検証当時) 具体的には insertTpl で挿入する HTML を定義する機能が正式リリースされておらず,結局は jQuery 版をそのまま使うことにした. ベースとなる WYSIWYG コンポーネント contenteditable で WYSIWYG を自作する. <template> <div> <div class="WYSIWYG" contenteditable="true" @focus="handleFocus" v-html="content"></div> </div> </template> <script> export default { props: { value: { type: String, default: '' }, disabled: { type: Boolean, default: false } }, data() { return { content: this....

August 16, 2018