Vue.jsエコシステム動向2023決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
Vue.js Performance Tips / #v_kansai 11
v-kansai Vue.js/Nuxt Meetup #11 (京都Devかふぇ共催)でVue.jsのパフォーマンスに関する発表を行いました。 https://vuekansai.connpass.com/event/144194/ # 参考にした記事 - 超速! Webページ速度改善ガイド(WEB+DB PRESS plus) - https://www.amazon.co.jp/dp/477419400X - Web Fundamentals | Google Developers - https://developers.google.com/web/fundamentals - Vue.js App Performance Optimization – A Tutorial Series - https://madewithvuejs.com/blog/vue-js-app-pe
vue-loaderのScoped CSSのスタイルが子コンポーネントのルート要素に効いてしまって辛い - Qiita
vue-loaderのScoped CSSには、1つ辛い点がある。それは、スタイルが子コンポーネントのルート要素に効いてしまうことである。だから、意図せず子コンポーネントのスタイルを崩してしまう危険性がある。 次のような場合、page.vueの.containerのスタイルは、page-header.vueの<div class="container">...</div>にも効いてしまう。 <template> <div class="container"> <page-header date="2017-12-07" heading="Hello!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </template> <script> import PageHeader from '.
Cloud Functions for FirebaseでVue.jsのSSRを試してみる - ajishixoの日記
Firebaseがcloudfunctions.netと連携したことにより、Javascriptを使って動的にHTMLを構築して返すことが出来るようになりました。 さらに流行りのVue.jsによるサーバサイドレンダリングが出来れば最高です。試してみます。 ※以下はfirebase上にprojectを作成済みであるとして記述しています。 init&deploy まずは動的にHTMLを返すまでの手順を確認します。 $ firebase init functions $ tree -L 2 . ├── firebase.json └── functions ├── index.js ├── node_modules └── package.json functions/index.jsを開いてコメントアウトされている行を有効にします。 var functions = require('fireb
CloudFunctionsでDatabaseの値を使ってHTMLをレスポンスする[BitScheduler開発日誌] - Qiita
BitScheduler開発日誌、３回目の投稿です。 今回はBitSchedulerのシステム構成を検討し、かねてより興味のあった「Firebaseをガッツリ使ってWebアプリを作ってみる」にチャレンジしてみようと思います。 Firebaseは「アプリ開発のプラットフォーム」という認知が一般的です。ランディングページのコピーでも "App success made simple" と書かれていますしね。 ところがギッチョンチョン、Webのライブラリ(JavaScript)も充実しており、Webアプリでの利用も十分想定されています。 SPAでの課題 FirebaseでWebアプリを作成する際のアーキテクチャーはSPA(Single Page Application)の採用が想定されています。なぜならHostingでは静的なファイルしかホストできませんし、サーバーサイドのモジュールはAuthe
![CloudFunctionsでDatabaseの値を使ってHTMLをレスポンスする[BitScheduler開発日誌] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b25d104175ef318fa19d6ef7ef31adbf02bac3de/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q2xvdWRGdW5jdGlvbnMlRTMlODElQTdEYXRhYmFzZSVFMyU4MSVBRSVFNSU4MCVBNCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNkhUTUwlRTMlODIlOTIlRTMlODMlQUMlRTMlODIlQjklRTMlODMlOUQlRTMlODMlQjMlRTMlODIlQjklRTMlODElOTklRTMlODIlOEIlNUJCaXRTY2hlZHVsZXIlRTklOTYlOEIlRTclOTklQkElRTYlOTclQTUlRTglQUElOEMlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWQ4NzM3NDRhNjMxNjA3ZmMyZGExYzBjNTVjMTZhMzI0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpc2F0YW4lNDBnaXRodWImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI1ZGMwYjM5ODA1ZjdhMDlmYzJlYTI0YzE5NzdkZTY1%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df85c4546e117f5667258159fac9d9ae5)
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Vue.jsを使う際のベストプラクティスについて考える - Qiita
Vue.jsは公式のドキュメントが非常に充実しており、またフォーラムでの議論やコミュニケーションもとても活発です。開発中に何か問題に遭遇した際には、ドキュメントやフォーラムに載っている情報を参照することで、多くの問題は解決できるといって差し支えないでしょう。しかしながら、現実世界のアプリケーションを開発していると、そういった情報だけでは解決が難しい個別具体的な問題や、そもそもどう実装すれば良いのかわからない、といった場面に遭遇することも多々あります。 筆者自身がVue.jsを利用してフロントエンド開発をしてきた経験に加え、Vue.jsの公式のドキュメントやサンプルプロジェクト、そしてVue.jsを利用しているOSSのプロジェクトやVue.jsのプラグインなどのソースを読んで蓄えてきたノウハウを本資料にまとめました。 「ベストプラクティス」と銘打ってはいるものの、筆者の好みや開発経験に依存す
Vue.js + Vueify + Babel + Chart.js でサンプル実装 | mediba Creator × Engineer Blog
制作部フロントエンドエンジニアの金森です。 この記事は Vue.js Advent Calendar 2016 の6日目です。 2014、2015 ときて 2016 はついに埋まりましたね！ 少しでもサンプルソースが増えれば、と Vue.js + Vueify + Chart.js で書いてみました。 書いたもの オプションを全部使うような例が書ければよかったんですが、最終的にはライフサイクルフック 1 から created と mounted の2つしか使っていません。 棒グラフと線グラフが描かれた canvas が1つと button が2つのシンプルな構成です。 グラフの下に設置した button と canvas が連動します。 ソースは GitHub 2 に、成果物は GitHub Pages 3 に置きました。 Vueify の導入Vue.js のデフォルト配信方法が変わったの
簡単にVue.jsでサーバーサイドレンダリングを試してみた - Qiita
Vue.js 2からはVirtualDOMになったのでサーバー側でHTMLを組み立てられます。 サーバーサイドレンダリング(SSR)のメリットとしてjsを実行してくれないクローラー向けのSEO対策だったり、スペックがあまり高くない端末向けにjsの実行部分を減らしたいと言った用途に使います。 今回はvue-cliのwebpack-simpleをSSRで実行してみたいと思います。 環境 Macです。 $ uname -mprsv Darwin 16.1.0 Darwin Kernel Version 16.1.0: Thu Oct 13 21:26:57 PDT 2016; root:xnu-3789.21.3~60/RELEASE_X86_64 x86_64 i386 $ node -v v7.0.0 $ npm -v 3.10.8 雛形を作る vueには雛形を作るためのツールとしてvue-
Vue.jsでvue-routerを使ってルーティングする時にGoogle AnalyticsでPage Viewを取る - visible true
ググってもパッとでてこなかったので。 前提条件 index.htmlなどにGoogle Analyticsを初期化するコードが埋め込まれていて、グローバルにga関数にアクセスできる vue-routerを使っている コード main.jsとする。VueRouterのafterEachにコールバックをセットしてga関数を呼び出せばよい。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({/*省略*/}) // これ router.afterEach(function (to, from) { ga('send', 'pageview', to.path) }) // 省略 おわりに vue-reportingというのもあるらしい。
Vue.js componentでvue-router,vue-resourceを利用したメソッドのUnitTestを書く方法 | hypermkt blog
始めに 最近vue-resource・vue-routerを使ったSPAウェブサービスを開発・運用しており、ふとそろそろUnit Testを書いてみたいな〜と思い、ググってみたのですが思っていた以上に情報が見つからず・・・。ネット上で見つけたのは下記の３つのみ。 公式サイトのUnit Testing Vuejs testingのスライド Rails + Vue.jsなアプリケーションではじめてのフロントエンドのユニットテスト - Qiita 公式サイトを見ながら見よう見まねで書いてみたが、ハマりにハマってしまいもう無理だーとVue.jsコミュニティの方々に助けを求めました。皆さんから多数の提案を頂き、無事に解決しました。本当にありがとうございます！ 今回はVue.jsコミュニティの方々に教えて頂いた、Vue.js componentのUnitTestを書く方法をまとめます。 前提 下記ライ
Vue.js 2.0 でログイン (vue-router で認証が必要な URL を定義) - Qiita
認証が必要な URL にアクセスした時に、まだログインしていない場合にはログインボタンを表示します。 作成にあたって以下の知識が必要になるので、順に試していきます。 コンポーネント vue-router ルートメタフィールド、ナビゲーションガード Playground として http://codepen.io を使用します。できあがったコードは http://codepen.io/takatama/pen/zoNeWP です。 Vue.js 2.0.7 と vue-router 2.0.2 で動作を確認しました。 なお、Vue.jsについて体系的に学ぶには「Vue.js入門」が超絶オススメです。ログイン、ログアウトについても丁寧に解説されています。 コンポーネント ドキュメントは https://vuejs.org/v2/guide/components.html です。 User コン
Vue.jsで10万件のリストを表示する - Qiita
はじめに Vue.jsは軽量ですが、数万件のリストを並べるとそりゃ普通につらい。 だから目に見えるとこ以外はdom描いてもらうのやめるってコードです。 デモ デモ(jsfiddle) コード <div id="app"> <div style="overflow:auto;height:170px;" @scroll="getScrollParam"> <ul :style="listStyle"> <li style="height:17px" v-for="num in displayList">{{num}}</li> </ul> </div> </div> new Vue({ el: '#app', data: function(){ return { list:list, scroll:0,//スクロール量 scrollMax: (list.length - displayRow
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
Vue.js Progressive Framework - Qiita
Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「Progressive Framework」の概念が非常に刺さる所があったのでVue.jsの紹介と合わせて、まとめておきます。 本家資料 本稿は下記Evan氏によるスライド資料をベースに、独自解釈のもと意訳したり加筆したりして作成したものです。 Progressive Framework についての解説 2.0の流れも含めたVue.jsの紹介 道具と道具のコスト フレームワークはアプリケーションの複雑さを解決するために設計されているが、一方で道具は道具固有の複雑さを持っている。 技術選択においては、このアプリケーション固有の複雑さと、道具の複雑さとに向き合わなければならない。 複雑なアプリケーションに対して、簡素な道具を以って挑むのは効果が薄いし、簡単なアプリケーションに複雑な道具を持ち出すのは大げさに感じる。
vue.jsでDrag and Drop - Qiita
vue.jsでdrag and dropやりたかったけどこれぐらいしかサンプルが見つからず、割りと苦戦したのでメモ できたもの 動くやつ：http://suisho.github.io/example-vuednd/ ソース：https://github.com/suisho/example-vuednd browserifyも利用。楽しい ２つリストが並んでいてアイテムをリスト感で移動できるようなやつ 今回はitemとlistというコンポーネントをつくる 感想 vue.jsちょこちょこ触ってはいたけど、DnDの場合そこまで恩恵が大きくなかったかも？ vueはそんなに色々めんどうみてくれるわけではないので、HTML5のふつーのDnDの知識が普通に必要 以下細かいところ どんな感じで設計するか 大きく下記３つのコンポーネントができる item ドラッグ対象なる要素 list itemを内包す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 2.3 CheatSheet
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
Vue.js 2.0 Server Side Rendering
Vue.js 大規模アプリケーションの構築
