なんで Vuex はなるべく避けるの？ | 民主主義に乾杯
# Vuex はなるべく避ける Vuex は、グローバル変数 state を使うために使います。 actions, mutations でグローバル変数 state を変更し、getters でグローバル変数 state を参照します。 たかだかグローバル変数 state を変更するだけで、こんなに大きな Vuex というライブラリがあるのか、疑問でした。 Vuex は、「いつ」、「どこで」、「だれが」、変更したのかを監視するためのライブラリです。 また Vue.js devtools を使えば、「いつ」、「どこで」、「だれが」 グローバル変数 state を変更 mutation したかを確認することができます。 Vue.js devtools - Chrome ウェブストア (opens new window) これら、いつ、どこで、だれが、変更したのかを監視したいという「気持ち」と、
Vue3の仕組み | Recruit Tech Blog
こんにちは、Airレジのバックエンド(Java、Kotlin)を開発しているキョ シイです。 Vue3はまだリリースされていないですが、公開された設計思想から先に内部の構造や仕組みなどを解析したいと思います。 Vue3のdata binding方法はObject.definePropertyを代わりに、ES６の特性に基づき、Proxyを使っています。 Vue3は前のVue2バージョンアップデートよりほぼ根本的にTypescriptで書き換えられたものです。 Vue2に比べて、Vue3は以下の特徴があります： もっと早い、もっと軽量的に 中身はTypeScriptで全部書き換えました function-based apiなどの新機能の追加 今回はProxyをベースにして、Vue3のミニ版を実現してみました。 開発は、TDD(Test Driven Development)という開発手法を使っ
もうprettierで消耗したくない人へのvueでのeslint設定 - クソ雑魚エンジニアのメモ帳
タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 構文チェック・自動フォーマット 対象ファイル npmライブラリ(package.json) .eslintrc.jsでのextends .vue(<template>) eslint-plugin-vue plugin:vue/recommended .vue(<script>) eslint eslint:recommended . js eslint eslint
Unit testing Vuex actions with Jest mocks
Accessing an external service is something frequently done within SPAs, and often critical to your application’s core functionality — so in this article I’ll take a look at how to unit test Vuex actions, and the components that dispatch them. The full source code for this article can be found here. Check out my Vue.js 3 course! We cover the Composition API, TypeScript, Unit Testing, Vuex and Vue R
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
@storybook/vue を TypeScript で使う
最近 @types/storybook__vue が DefinitelyTyped/DefinitelyTyped に追加されたので、まともに storybook/vue を TypeScript で使えるようになりました。 とはいえ Vue の場合 React と違い awesome-typescript-loader が使えない関係でちょっとゴリる必要があるので、需要は分かりませんが紹介しておこうと思います。 Storybook が何かとか、何に使うものかとかはスキップします。 設定 Custom Webpack Config が必要になります。.styrobook とかディレクトリ作って webpack.config.js とかをごちゃごちゃやるパターンですね。Quick Start とか Custom Babel Config では無理だと思います。 Slow start gui
実践StorybookでVuexに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。最近熱があるのはSVGと相変わらずにStorybookです。あと弁当男子始めました。 前置きStorybookとはいわばコンポーネントのカタログを作成することができる開発ツールです。 今回は実践の紹介ということで詳細は省略しますが、VueやReactを導入したコンポーネント指向な開発をしているのであれば、開発効率の向上は間違い無しなので是非とも取り入れてみていただきたいです。 実践Storybook vs Vuexコンポーネントの複雑さの基準storyの作りやすさは、当然のことですが、コンポーネントの複雑さに応じて変化します。大雑把ですが私はstoryの作りやすさの基準として、作り易い順に以下のような基準を設けています。 外部とのインタフェースがない親コンポーネントとのインタフェースは存在するがstoreにアクセスしないstoreにアクセ
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuetify — A Vue Component Framework