Writable Computed を活用して読みやすいVueコードを書くためのTips - ANDPAD Tech Blog

2022/05/24 12 users Tips ANDPAD Vue 小泉 入社当初

こんにちは、ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。 ANDPADでは入社当初からずっとVueでの開発を行っており、特に直近2年はComposition APIで開発しています。 今回は、Vueでの開発を続けている中で、個人的に最近気に入って積極的に使っている、Writable Computedの話をしたいと思います。 この... 続きを読む

Vue.js は Reactivity Transform でさらに進化する

2022/02/13 23 users Vue.js experimental ref 変換 コード

Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要なポイントを解説したいと思います[2]。 ref の変換 今まで Composition API ... 続きを読む

Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog

2021/08/20 11 users Jest Vuex ANDPAD コンポーネント チーム

どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + witho... 続きを読む

ep.82 Vue 3のためのTSXという新しい選択肢 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

2021/04/09 10 users TSX Setup Podcast TypeScript 最新

新規プロジェクトでVue 3とTSXを導入した感想について、@spring_raining が @changhee.kim と @daisuke.yamamoto に聞きました。 Vue 3にTSXを導入した経緯 TSXとは？ TypeScript + JSX Vue 3では特に追加のプラグイン無くTSXが利用できる Composition APIのsetupで、TSXで書いたRender functionを返す 参考: ep.39 Vue ... 続きを読む

2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita

2020/08/27 22 users Qiita inject コード 書き方

まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソ... 続きを読む

Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO Technologies TECH BLOG

2020/08/21 14 users Tips Options API 移行 Vue 2.x 長澤

こんにちは。ECプラットフォーム部のMA（マーケティングオートメーション）アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤（@sh_ngsw）です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking ch... 続きを読む

新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」 (1/2)：CodeZine（コードジン）

2020/07/20 15 users CodeZine ユーザーインタフェース コードジン うち

「Vue 3」は、JavaScriptフレームワーク「Vue.js」の次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。本記事では、Vue 3で導入される新機能のうち、新しいコンポーネント記述形式「Composition API」を説明していきます。 はじめに Vue.jsは、Webページのユーザーインタフェース... 続きを読む

【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた - Qiita

2020/06/20 134 users ロジック React Hooks API Qiita 書き方

Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。 しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。 本記事では Composition API... 続きを読む

【Vue3に備える】実務で使うComposition APIについて考える - Finatext - Medium

2020/03/11 22 users Finatext medium Vue プレ 待望

◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレ... 続きを読む

Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog

2019/12/19 27 users SMARTCAMP Engineer Blog リリース

スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユ... 続きを読む