Vue.js は Reactivity Transform でさらに進化する
2023 年 1 月 26 日追記 Reactivity Transform は Vue 3.4 でコアから削除されることになりました。 https://twitter.com/danielkelly_io/status/1618256962776600576 ただ完全になくなる訳ではなく、Vue Macros という Vue 向けマクロ集のパッケージが引き継ぐようです。 https://twitter.com/sanxiaozhizi/status/1618290614306746371 Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
2020/07/28 時点の Vue 2.x + TypeScript について言える確かなこと - potato4d
できる・できないをまとめておく。 なお、 Class Component の記法は Vue 3 の仕様から Drop されたので、そこについて言及する場合はその旨を明確にする。 this の型について 基本的に全て有効化できる。 Vue 2.5 より this の型が正しく使えるようになっている。しかし、いくつかの条件がある tsconfig.json において、 noImplicitThis が true である必要がある 既存プロジェクトからの移行でない限りは strict: true であるはずなので、問題ない 逆に、既存プロジェクトの TS 化については、 noImplicitThis を false として Vue Template 以外の純粋な JavaScript 部分から段階的に移行できる。 computed などについて、戻り値を明示的に指定する必要がある これは Vet
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
CSS Architecture on Vue.js
Open standards for building event-driven applications in the cloud
VuexのStore設計のTips - 薄いGetter
Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
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
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が他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
JavaScript/Vue.jsアプリのパフォーマンス改善 一休.comスマートフォンサイトを高速化するためにやったこと
2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、
「Vueコンサルが教えたくない７つの真実」を勉強してみた - Qiita
Vueの便利なテクニック７つ Youtubeで見つけたので勉強ついでにまとめてみる。 出展 Chris Fritz さん Youtube https://www.youtube.com/watch?v=7YZ5DwlLSt8 資料（Github） https://github.com/chrisvfritz/7-secret-patterns まとめ - 動画とはバージョン違い（英語） https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/ Productivity Boost - 生産性向上 1. Smarter Watcher 元のコードはこれ。生成時になにかしてアップデート時にもなにかする。よくやる。
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
Vue.jsで style scoped な単一ファイルコンポーネントのcssをオーバーライドする
https://medium.com/vuejs-tips/override-scoped-css-de4275119b87 単一ファイルコンポーネントを作る時、 style scoped として CSSの影響範囲をコンポーネント内に収めるわけですが、 コンポーネント外部から内部のスタイルを変更したい場合があります。 <template> <div class="box"> <div class="message"> <slot></slot> </div> </div> </template> <script> export default { name: 'box' } </script> <style scoped> .box { display: inline-block; } .box .message { background-color: orange; padding: 1
Vue.js が data に渡した値を激しく書き換える件について
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita