リファクタ目的のVue + Storybook で Injectが便利 - Qiita
前回 Vue + Storybook + reg-suit で VisualRegressionTestのフレームワークを構築しました。 https://qiita.com/kozayupapa/items/0099cea005b3ce0b6274 そのstoryを拡充していきたいと思います。 何がしたい？ 前提としては、今回StorybookのStoryを追加したいのは、 リファクタリングが必要なくらいvueのcomponent,ページが巨大になってしまっているケースです。すべての変数がpage のdataとして定義されているような例です。 prop になっていれば、storyからのテストデータ設定も楽なのですが、 dataのなかみをtest story側から好きな値に書き換える方法がないかを検討していました。 Vue Provide/Injectとは？ 地道にvueのドキュメントを読み
【Vue3】Composition APIと新機能 - Qiita
はじめに Vue2からVue3に変わるとともに、Composition APIの導入、ライフサイクルの変更、v-modelの仕様変更など、構成や記述が大きく変更されました。 この記事ではComposition APIの導入について触れ、Vue3で何が変わったか紹介します。 まずはComposition APIの記述を見てみよう options APIとは違い、Compotion APIでは今までのdataやmethods, computed, ライフサイクルフックはすべてsetup関数内で定義します。 dataはreactiveもしくはrefを使い、methodはfunctionで定義します。 <template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} <
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
7 Vue Patterns That You Should Be Using More Often
Let’s be honest, reading documentation is not something that most of us enjoy, but when working with a modern front-end framework like Vue, which is constantly evolving, a lot of things change with every new release and you might have missed some of the new and shiny features that were later introduced. Let's take a look at those interesting but not so popular features. Keep in mind that all of th
VuejsとTypeScriptで快適にコーティングをするTips
こんにちは。 現役の教員エンジニアを名乗っています。りゅーそうと申します。 普段わたしは、React.jsを使ってフロントエンドのコードを書くことが多いのですが、今回Vue.jsに初めて入門してみました。その際に心がけたことやTipsを紹介したいと思います。 何か間違っていることを書いていたらぜひ教えていただけると嬉しいです。 やりたいこと Vue.jsではスタンダード(とされているような気がする)SFCを使用して書きたい。 TypeScriptを使用してなるべく型安全なプログラミングを導入したい。 templatesにも型の情報を元に補完を聞かせたい。 Vue3を対象に解説していきます。 使用エディタはVSCodeです。 Veturを使用してtemplatesでも型チェックをする 早速ですが、VueのSFCではReactのJSX記法とは異なり、templates部分では型の情報を与えるこ
Vue.js から考えるアクセシビリティについて - 2019
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル 近年大きな注目を集めるフレームワークとなったVue.js。その発展の裏には、開発コミュニティをストレスなく駆動させる、コミッターたちのさまざまな工夫がありました。黎明期からVue.jsを支える、コミッターの川口和也（kazupon）さんに、フレームワークを躍進させるために必要なことを聞きました。 WebアプリケーションのUI実装を簡単に行える、オープンソースのJavaScriptフレームワーク・Vue.js。利便性の高さと導入の容易さから、近年サービスに採用されるケースが増えています。 そして、Vue.jsの黎明期から、コミッターとしてフレームワークの成長を支えてきたエンジニアがいます。Vue.js日本ユーザーグループの運営に携わるkazuponこと川口和也（かわぐち・かずや／ @kazu_po
「レストランボード」における大規模フロントエンドの漸進的なVueリプレイスの取り組み
はじめに こんにちは、レストランボード（以下、RB）のフロントエンドチームの石亀です。担当していた規模の大きめなプロジェクトでVueを結構触っていまして、設計含め困難と向き合いながら色々取り組ませてもらったのでそれをナレッジとして残そうと思い記事を書くことになりました。エモいですね。 RBは現在自社のフレームワークで構築されていて、徐々にVueでリプレイスをかけています。 今回、大規模なプロジェクトにてVueでさらなるリプレイスを実行しましたが、プロダクト自体がとても大きく且つ限られたリソースの中でいかに負債化させずにできるだけ安全に移行させるかを検討しました。 そこで実際に実施した施策や検討内容などを紹介します。 おそらく、多くのサービスやプロダクトで既存のコードを新しいライブラリ・フレームワークで書き換えているかと思います。 背景だったり関わる規模・コンテキストが異なるとは思いますが、
Vue.js developers' guide to React
If you already learned one language or framework, it's easier to learn similar ones. Instead of reading docs from top to bottom, you just think, "how to do X with Y?". In this article, I introduce React way of implementing Vue.js features for Vue.js devs who want to learn React as well. (I don't encourage anyone to switch from Vue.js to React! It's better -- and also fun -- to getting to know both
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building a VS Code Extension Using Vue.js
Dependency Injection with Vue 3
Vue JS 3 Composition API → Registration Form Validation [2023]
No Transpiler? No problem: Integrating Vue with ASP.Net Razor Pages - rhzo.me
How to use Google One Tap in your React or Vue project?
vue-axe
Vue + Quasar: desktop app and browser extension | Vue Mastery
Have you tried Parcel for your Vue projects?
Domain-Driven Design in Vue.js - Vue School Articles
Quasar vs. Vutify vs. Bootstrap Vue: Choosing the Right Vue.js UI Library
