Vue.jsのユニットテスト環境作成方法と見るべきドキュメント | DevelopersIO
はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経緯 最近Vue.jsの基礎を勉強したので自主4連休中に、Techpitで販売されているVue.js/Vuexを使ってTrello風アプリを作成しよう！を買ってサンプルア
Nuxt.jsのベストプラクティスを考えてみる.pdf
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
処理の共通化とコンポーネントの分割/分類/粒度について
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 （元DMM.comラボ 7年前？
[Vue.js]Vue.jsでLocalStrageを使う - Qiita
export default { install(vue) { vue.prototype.$storage = { get(key) { // localstrageからとる return localStorage.getItem(key) }, set(key, value) { // localstrageへ保存 localStorage.setItem(key, value) }, } }, } <script> /////////////// 省略 /////////////// methods: { setLocalStrage(){ // ローカルストレージに値を保存する this.$storage.set('email', this.email) }, sgtLocalStrage(){ // ローカルストレージに値を取得する this.$storage.get('emai
![[Vue.js]Vue.jsでLocalStrageを使う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8648805582e8e876d6eccfc9261976af0715bc5f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJTVEVnVlLmpzJUUzJTgxJUE3TG9jYWxTdHJhZ2UlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTNmYWUxY2ZiOGU4NmJhZjgzZDk1YjcyNzBkOGEwNDk2%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWJhX3VuaV90b3JvXyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQwNTBhMzQ1ZTVmODlhMjY5MzE4MmRlMGMyYTk0YTg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3481c98f5edd10ae95897e05c4da16cc)
[Vue.js] Vueのイベントリスナの種類(v-on:??) - Qiita
Event listnerの種類 Vueの公式サイトを見たら上記のように書いてありました。 そうしたらJavascriptのonから始まるEventListnerを＠またはv-onで可能と思ってテストしました。 やぱりｗできました。 Vue Event Listnerの一覧 @abort @auxclick @beforecopy @beforecut @beforepaste @blur @cancel @canplay @canplaythrough @change @click @close @contextmenu @copy @cuechange @cut @dblclick @drag @dragend @dragenter @dragleave @dragover @dragstart @drop @durationchange @emptied @ended @error
![[Vue.js] Vueのイベントリスナの種類(v-on:??) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf15e153eab25a9b09bf04d9697ace9f3e9f89ba/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJTVEJTIwVnVlJUUzJTgxJUFFJUUzJTgyJUE0JUUzJTgzJTk5JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgyJUI5JUUzJTgzJThBJUUzJTgxJUFFJUU3JUE4JUFFJUU5JUExJTlFJTI4di1vbiUzQSUzRiUzRiUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzkwZTVkNWFhYjU0N2Y3NDg1MGQ4OTNjODIyN2Q4ZTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBqb29uNjEwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05Y2UyMjIwNzNlNjQyZTQ5MTM4ZGRlMTM4NzAxNThmMw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Oe44Kk44Kv44Ot44Km44Kn44O844OW%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3De8ef9860033184135fef3ca5bedcc230)
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
[Vue.js]改行された時に改行分の高さをとるテキストエリア - Qiita
やりたいこと 普段何気なくテキストエリアに文字を入れたり、改行したりしますが、 その際、改行分の高さをとってくれるようなテキストエリアのcomponentをつくりたかった ソース <template> <textarea ref="adjust_textarea" v-model="textareaVal" class="c-input-textarea" :placeholder="placeholder" @keydown="adjustHeight" /> </template> <script> export default { name: 'BaseTextarea', props: { placeholder: { type: String, required: true, }, }, data() { return { textareaVal: '', } }, method
![[Vue.js]改行された時に改行分の高さをとるテキストエリア - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8fba81e0ffb4d1940783301ecd341160a9f72486/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCVnVlLmpzJTVEJUU2JTk0JUI5JUU4JUExJThDJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJTlGJUU2JTk5JTgyJUUzJTgxJUFCJUU2JTk0JUI5JUU4JUExJThDJUU1JTg4JTg2JUUzJTgxJUFFJUU5JUFCJTk4JUUzJTgxJTk1JUUzJTgyJTkyJUUzJTgxJUE4JUUzJTgyJThCJUUzJTgzJTg2JUUzJTgyJUFEJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJUE4JUUzJTgzJUFBJUUzJTgyJUEyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00ZjA4MzlkOTIyOTFiYTZjN2RhYTI5MGIwMTBhZDFlZA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2FiYV91bmlfdG9yb18mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYyYjA1MmU5OWU2YTA4YTJiZGFmYmI4MWMwYTI2OGU0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D622bc5c7f9bc627a9af98aecb93b0d73)
非同期な処理をしている create Vue コンポーネントのテスト - Qiita
前提条件 バージョン情報 Vue 2.6.10 Jest 24.5.0 TL;DR DOMが絡むなら $nextTick , 絡まないなら setTimeout を使う。 実例 <template> <div id="piyo"> {{ hoge }} </div> </template> <script> export default { data() { return { hoge: '', }; }, async created() { this.hoge = await this.huga(); }, methods: { huga() { return new Promise((resolve) => { setTimeout(() => { resolve('it works'); }, 100); }); }, }, }; </script> import { shallow
Vue.jsを使いつつ、OpenStreetMap上にマーカーを表示する - Qiita
iOS専門で色々やってたはずが、万屋になってきた私です。 おはこんばんちわ。 前回、Vue.jsを使いつつOpenStreetMapを表示することをやってみました。 前回記事 Vue.jsを使いつつ、OpenStreetMapを表示する 今回は前回記事のコードを元にクリックしたポイントにマーカーを表示してみます。 Mapを表示する 今回使うコンポーネントは前回と同じく２つです。元のコンポーネントをそのまま記載します。 詳しい内容については、前回記事を参照してください。 前回はMapをクリックするとクリップしたポイントの緯度経度情報をconsole.logとして吐き出すということまで行っています。 <template> <div id='BaseView'> <MapView v-on:panretMessage="messageLog" ref="map"/> </div> </templ
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
Vue.js 2.6がリリースされた - Qiita
2019/02/05にVue.js 2.6 "Macross"がリリースされました。 そのうちもっと適切な日本語訳が出ると思いますが、まだ無いので紹介してみます。 以下はVueの作者Evan Youによる記事、Vue 2.6 releasedの日本語訳です。 Vue 2.6 released Vueは昨日、5歳の誕生日(Vueniversary)を迎えました。 そして本日、素晴らしいことにVue 2.6 "Macross"の発表を行うことができました。 この一年、我々は新しいCLIと3.0のプロトタイピングに多大な時間を費やしました。 その結果、Vue2.xはしばらくメジャーアップデートを行えませんでした。 しかし今こそ、その時です。 このリリースには、以下に解説する多数の大幅な改善、内部構造の変更、そして新機能が含まれています。 詳細についてはGitHubのリリースノートも参照してくださ
【Vue.js】imgタグのsrc要素は指定の仕方によって読み込み方が違う - Qiita
vue.jsのimgタグはsrcの指定の方法によって実は参照するファイルが異なるっぽい。 imgタグを並べて表示する場合この挙動を知らないとハマりそうなので、どのような挙動になっているのか調べたのでまとめました。 対象はVue CLI 3で生成したプロジェクトです。 例1: 普通にimgタグを並べる場合 例えば画像を並べて表示する場合、一番単純な実装はimgタグを並べるだけで良いです。 画像はsrc/assets/以下に置いてます。 シンプル。 <template> <ul> <li><img src="@/assets/img1.png"/></li> <li><img src="@/assets/img2.png"/></li> <li><img src="@/assets/img3.png"/></li> </ul> </template> 例2:v-forでimgタグを並べる場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Differences Between Vue 2 And Vue 3
https://certificates.dev/vuejs/
Practical usage of Mutation Types in Vuex
Setup Storybook • Storybook docs
まもなくやってくる Vue.js 3
vue-devtools/README.md at master · vuejs/vue-devtools · GitHub
D3.js and Vue.JS