You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

こんにちは、生形です。 先般開催されましたVue Fes Japan 2018のために、JavaScriptフレームワーク「Vue.js」の生みの親であるEvan Youさんが来日されました。 この機会を逃す手はない！ということで、Evanさんへの質問をTwitterで公募し、インタビューした様子をライブ配信しました。インタビュアー兼通訳を担当したのは、Vue Fes Japanのスタッフでもある、弊社代表の田中です。 左：Evan Youさん／右：アシアル 田中正裕 当日、Evanさんは温泉で日本を堪能していたようです。なんとライブ配信は箱根の旅館から！浴衣がお似合いですね。 はじめはSublime Textをずっと使っていて、次にAtomに切り替えましたが最近はもっぱらVS Codeを使っています。 VS CodeはTypeScriptのサポートが強力なので便利ですね。ちなみに、VS

ESLint プラグインを作って公開するときにドキュメントに組み込んでおくと、ブラウザ上で動作確認できて便利です。例えば、eslint-plugin-es や eslint-plugin-eslint-comments のドキュメントではこのコンポーネントが使われています。 例: eslint-plugin-es/no-optional-catch-binding 💿 インストール npm 等を使ってインストールします。

Vueにはmixinという機能がある。 同一の機能を複数のコンポーネントに適応させるというものだ。 共通の機能を提供する便利なものだが、あまり楽観的に使えるものではない。 例えばReactでも過去には存在していたが、既に廃止されている。 なぜ廃止されたかは理由を読めばmixinのどのような点が危険な点かが見えてくるだろう。 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 ざっくりと要約するとこのへんが上げられている 暗黙の依存関係を導入してしまう 名前の衝突を起こす 複数のmixinがあり、それらがプロパティを上書きす

こんにちは。転職によりReact畑からVue畑に乗り換えることになったフロントエンドエンジニアです。 Vueでも描画関数使ってればRender Propsも使えるじゃんと思ったところ、Vue.js 作者のEvan You曰く「Render PropパターンはVue.jsにおけるScoped Slotsと同じ」とのこと。 In case you are wondering what’s the equivalent pattern in Vue, it’s called scoped slots (and if using JSX it works the same as React) — Evan You (@youyuxi) 2017年9月25日 本当にそうなのか簡単な実装例を用意してみました。 まず、そもそものRender Propを使う目的としては 「コードの再利用性を高めるための実

TypeScript + VueなプロジェクトでESLintを使ってみて、現状必要なモジュールが複数あって少し複雑だったのでまとめておきます。 サンプルは以下です。 github.com 内容はどうでも良いんですが、こんな感じのすごく簡単なTODO風のアプリケーションです。 なぜEslintを使うか JavaScriptのためのLintingツールはたくさんありますが、Vueのroadmapにもある通り、Vueの公式スタイルガイドをサポートするESLintプラグインがESLintのメンテナによる公式プラグインとして作られています。 GitHub - vuejs/roadmap: Roadmap for the Vue.js project これからもVueの公式としてサポートされていくと思うので、特にこだわりがなければESLintを使うのが良いかと思います。 ESLint for Type

✨実験用の小さなコードを公開するのに、jsfiddleはとても便利ですよね。 📄vueは、単一ファイルコンポーネント（SFC)の仕組みがとても気に入っています。 この２つを組み合わせたものが欲しくて、VueFiddleなるものを密かに開発を進めています。 About VueFiddle WIP vueに特化したオンラインIDE 単一ファイルコンポーネントの記述対応 templateは HTML / PUG　対応 styleは　CSS / LESS 対応 scriptは javascript / TypeScript 対応 URLシェアに対応 サポートブラウザ(PC版 Chrome/Firefox) Usage 基本的には、jsfiddleと似せています。 左上のtemplate(HTML)パネルに、templateを記述し、 左下のscript(JAVASCRIPT)パネルに、scrip

背景 Vue.js本家からは公式のテストライブラリは提供されておらず、非公式でvue-test, avoriaz, vue-testing, revue, vue-unit等が公開されています。それらの中で一番Star数が多いavoriazついて調査した内容をまとめます。 前提 Karma + Mocha + Chaiを利用する 以下のHelloコンポーネントをテスト対象とする <template> <div id="hello"> <img src="http://vuejs.org/images/logo.png"> <h1>{{ msg }}</h1> <h2 class="subtitle">Essential Links</h2> <h2>Ecosystem</h2> <h3>nickname: {{ user.nickname }}</h3> </div> </template

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(省けるところは都度省いたのですが、けっこう長いです…)。対象の Vue のバージョンは v2.1.6 です。 そもそも算出プロパティとは そもそも算出プロパティとはなんぞや、という話から。Vue には算出プロパティという機能があり、以下のように data の状態から派生した値をプロパティとして定義できます。 var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar' },

$ ./node_modules/.bin/eslint src/* /my/impressive/path/08-vue-lint/src/App.vue 8:40 error Extra semicolon semi 11:3 error Expected indentation of 2 spaces but found 1 tab indent 12:4 error Expected indentation of 2 spaces but found 2 tabs indent 13:3 error Expected indentation of 0 spaces but found 1 tab indent 13:4 error Unexpected trailing comma comma-dangle 14:3 error Extra semicolon semi /my/i

Vetur Project status issue: https://github.com/vuejs/vetur/issues/3476 New official vue editor support: Volar VSCode extension: https://marketplace.visualstudio.com/items?itemName=Vue.volar Project: https://github.com/johnsoncodehk/volar LSP: https://github.com/johnsoncodehk/volar Vue tooling for VS Code. vls: Vue Language Server vti: Vetur Terminal Interface Docs 🎉 VueConf 2017 Slide & Video 🎉