タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた - Qiita
Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。 しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。 本記事では Composition API 時代の便利ライブラリ VueUse を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。 Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。 VueUse とは？ VueUse は Anthony Fu さん1が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。 例えば、ブラウザ上のマウ
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog
どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + without Vuex のパターンへ書き換えを行っています。 Composition APIへ書き換える最大のメリットは、コンポーネントのロジック部分の多くを単なるJavaScript関数として切り出せるので、コンポーネントとロジックを疎結合な状態に分離でき、単体テストが恐ろしく書きやすくなるという点です。 そんなわけで、コンポーネントを一切マウントせずに書けるフロントエンドあるあるテストパターンを紹介していこうと
Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部のMA（マーケティングオートメーション）アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤（@snagasawa_）です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。 この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0への
RustでGraphQLやってみる番外編(Vue+composition APIでGraphQLを使う) - 虎の穴開発室ブログ
皆さんこんにちは。とらラボのY.Fです。 前回までの記事ではRust+actix-web+juniperでGraphQLサーバーを作ってきました。 前回の記事の段階で一旦参照、更新処理はできたので、今回は番外編として呼び出し側となるクライアント側について記事を書いていこうと思います。 (前回の記事はこちら) toranoana-lab.hatenablog.com この記事ではcomposition APIに関する細かい説明はしません。以前書いた記事があるので、そちらを御覧ください。 また、利用するライブラリがVue3にまだ対応していないので、下記記事で作ったプロジェクトをベースに作っていきます。 toranoana-lab.hatenablog.com 環境 サーバー側の環境は前回と同様なので割愛します。 React+GraphQLのサンプルは世にあふれているので、今回はVue+comp
概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多
はじめに Vue.js はバージョン 3 がリリースされたこともあり、バージョン 2.x 系を使っていてもプラグインを利用して composition-api を使った開発をしている人が多いと思います。 私も composition-api が公開されて比較的早い段階から利用してきました。結果、使い方が私の中で固まったので共有したいと思います。 なお、比較的大規模かつ、長期的にメンテナンスしたいようなプロダクトを想定しています (大体そうだと思いますが)。 プロトタイピングや寿命の短いソフトウェアなら、ここで説明することはあまり合わないかもしれません。 また、Typescript の利用を前提としています。 composition-api と Options API について composition-api 自体についてを知りたい場合は以下を御覧ください。 私が composition-a
Vue 3 に向けて Composition API を導入した話 - MicroAd Developers Blog
システム開発本部アプリケーションエンジニアの Edy です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 その Vue.js ですが、「Vue 3 is now in RC! (Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub)」が公開され、version 3 ( Vue 3 ) が盛り上がりを見せています。 今回は、Vue 2 から 3 へ移行する理由と、 2 から 3 へ version up するために行なっている Composition API の導入 についてお話していこうと思います。 そもそも Vue.js とは ? SFC TypeScript Vue 2 の限界 大規模なプロジェクトになるほど開発効率が落ちる ロジックの再利用にかかるコストが大きい 単
Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in
Remote.vue#2 2020/07/31 スライド補足情報を加えた勉強会登壇レポートはこちらにまとめてます。 https://qiita.com/ryo2132/items/f4e78dbadd9368c91add
Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。 この記事は以下バージョン時点の情報です。 vuejs/composition-api: v1.0.0-beta.1 vuejs/vue-next: v3.0.0-beta.17 Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。 そのAPIについては マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。 reactive 引数に渡したオブジェクトのリアクティブなプロキシを返します。 Vue2系のVue.observable()と同等の機能です
Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？ コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ
One of the first questions that arise when starting with the new Vue Composition API is ref() or reactive()? The initial instinct is to use ref() for primitives (Boolean, String,…) and reactive() for objects. But there is more to it. When to Use ref() and When to Use reactive()?The Downside of Using ref()Is Mixing ref() and reactive() a Good Idea?When to Use ref() and When to Use reactive()?Let’s
なぜ、Vue Composition APIを使うのか、理解する【メリット/デメリットまとめ】 - Qiita
はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに
この記事についてこの記事はbosyu Advent Calendar 2019の5日目の記事です。 昨日のめろたんのVue Composition APIで型がぶっ壊れて楽しかったですに引き続きVue Composition APIのお話です。 僕はComposition APIのコラムっぽいものをいくつか書いてみた記事です。 ちなみにサムネイルは@murokacoさん作です！ ⚠️注意Vue Composition API自体はまだ正式なリリースがされていない実験的なAPIです。 Vue Composition APIのサイトにも記載されていますが、まだ破壊的な変更がされる可能性もあり、プロダクションでの利用は推奨されていません。 bosyuでなにやってるの？あんまり表立って言ったりしてなかったんですが、夏頃から業務委託でbosyuの開発をしています。 具体的にはbosyuのフロントエン
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 - Qiita
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。JavaScriptTypeScript設計Vue.jsNuxt はじめに Composition APIで、Providerパターン(provide/inject)が、なぜ重要なのでしょうか。 Composition APIを使えば「状態やロジック」を簡単にコンポーネントの外に切り出すことができます。 しかしながら、Composition APIだけでは「ロジックや状態は切り出せても、複数コンポーネント間で共有できない」からです。 Composition APIによって、荷物をダンボールに梱包はできても、運ぶ人がいない状態です。 みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか? https:/
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 以前から紹介していますが、MisskeyはフロントエンドのUIフレームワークとしてVue 3を採用しており、そのVueの新しい機能であるComposition APIも活用しています。 今回はそのComposition APIについて解説します。 Composition APIとは 簡単に言うと、Vueのコンポーネントには以下の2通りの書き方があります。 Options APIを使った今までの書き方 Composition APIを使った新しい書き方 Composition APIのほうが新しいですが、現時点では従来のOptions APIが非推奨になったりはしておらず、Vueのドキュメントを見てもどちらも同じくらい「推して」いるようです。 (個人的な意見では、書き
// MyTodo.vue <template> <todo-list v-for="todo in sortTodo" :todo="todo" :key="todo.id" @toggle="toggleTodo" @remove="removeTodo" /> <add-todo @add="addTodo" /> </template> <script lang="ts"> import { computed, defineComponent, reactive, watchEffect, onMounted } from 'vue' import TodoList from '@/components/TodoList.vue' import AddTodo from '@/components/AddTodo.vue' import { fetchTodo } from '@/
初めに こんにちは、アジアクエスト株式会社でフロントエンドエンジニアをしていますかめぽんです。初めてZennの記事を書きます！がしかし、なんの記事を書こうかな迷っていまして、最近VueのComposition APIを業務で触ることがあったので、そこでの知見とかちょこっと考察してみたのでそれを書き留められればと思います。この記事で扱う機能はまだ改善の余地が含まれるため、一つの参考として捉えてもらえればと思います。 Composition APIについて Vue3にも搭載されたことでも話題のComposition APIですが期待値の高さから見るに、知っている人も聞いたことある人も多いと思います。3.0だけでなく2.x向けのpluginも配布されているので手軽に触ることができると思います。 Vueと言えば、Options APIでSFCを書くことがほとんどかと思いますが、今回用意されたAPI
Vue3リリース直前！導入されるcomposition APIを使ってみよう - 虎の穴開発室ブログ
皆さんこんにちは虎の穴ラボのY.Fです。 最近のWebフロントエンド界隈の話題を追っていると、フレームワークの勢力図的にはReactとVueの2大巨塔という感じがします。 特にVueに関してはメジャーバージョンアップであるVue3のリリースが迫っている状況です。 今回のブログ記事ではVue3で導入され、既存のVueコンポーネントの書き方をがらっと変える可能性がある composition API について書いてみようと思います。 Vue3について Vue3は2020年の第1クォーターにリリースが予定されている、Vue.jsのメジャーバージョンアップです。以下のような追加、変更が見込まれています。 コードベースをTypeScriptに composition api の追加 パフォーマンスの向上 Time Slicingをサポート slotsの扱いを変更 etc... 現在はα版がリリース済
今月初めにリリースされた Vuex4 を Composition API + TypeScript で試してみたのでそのメモです。 この記事は以下バージョンにて検証しています。 vuejs/vue 3.0.5 vuejs/vuex 4.0.0 Vuexとは？ Vuex は、Vue.js 公式の状態管理ライブラリです。 Vue アプリケーション内に、どの階層のコンポーネントからでもデータを取得・更新できる単一のデータストアを作ることができます。Vuex を使うことで複数のコンポーネントで使う共有データの Props/Emit による過剰なバケツリレーが不要になります。 また、複雑になりがちな状態管理において以下の図のように特定のルールで制約を与えることでデータの流れを一元化して、コードの構造と保守性を向上させることができます。 （What is Vuex?） 使い方 Vue CLI で Vu
【Vue 3】Composition API の基本
はじめに※ Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
Vue Composition APIとReact HooksとSvelteの違い - console.lealog();
について、Vue Composition APIのDocsに記載があったので、自分用にメモ。 Composition API RFC | Vue Composition API このRFCが出たのは2019年の7月なので、ぜんっぜん目新しい情報はないです。 React Hooksとの比較 Composition APIで関数ベースでロジックを記述できるようになる ロジックを合成できるという書き味は、React Hooksと同等であろう ただし、大きな違いもいくつかある まず`setup()`は、本当に1度しか呼ばれない これはつまり より直感的にJavaScriptを記述できる 呼び出し順序も、条件分岐も気にしなくてよい 呼ばれる回数が減るのでGCにも優しい `useCallback()`を使ったインラインハンドラーの最適化などが不要 `useEffect()`や`useMemo()`に正
概要 vue/composition-apiの登場によって, Vue.js でも React の Custom Hook のような関数を簡単に作成できるようになりました. 本記事では, vue/composition-apiで作る API 呼び出し用の Hook として「useApi」を紹介しながら, 作成のコツや考え方を説明していきます. また, 最後には useApi 単体でのテストコードも添付しています. Hook のテストコードが気になる方もぜひ読んでください. 対象読者 vue/composition-apiの存在は知っている, または軽く使ったことがある React の Hook の存在は知っている, または軽く使ったことがある useHoge で表される最近のフロントエンドのコードがよくわかっていない といったステータスの方に, useHoge を作成する狙いと compos
Nuxt で Vue 3.0 (Composition-API) を使いたいとき - ハードルを下げ続けるブログ@task
ja.nuxtjs.org composition-api.nuxtjs.org Vue3.0 がリリースされてからしばらく立ちましたが、Nuxt において Vue3.0 がサポートされた v3.0 がリリースされるのはもうちょっとかかりそうです。 とはいえ、v3.0 がリリースされるのを待って、無理やりバージョンをあげようとしてもおそらく、かなりの痛みを伴うことが、他の皆様のVue3.0移行記事からも読み取れます。 そこで、Vue 3.0 リリースより少し前から、既存の Nuxt Project に composition-API を導入した所感と、導入方法を記録しておきます。 というか、この過渡期においてNuxtへの Composition-API 導入についての日本語記事があまり見当たらなかったので、少しでも参考になれば幸いです。 なお、バージョンは記事公開時点の最新とします。 Nu
iCARE Dev Meetup #19 https://icare.connpass.com/event/204553/ https://www.youtube.com/watch?v=2D_dXnaP6yI
Vue2 の Options API で書かれたコンポーネントを、composition API を使った書き方に自動変換したくてツールを作った。 左：Options API / 右：Composition API リポジトリ デモ なにがしたいのか VueUse のような composition 用の便利なライブラリを使いたいし、とりあえずコンポーネントからロジックを分離したいというモチベーションがあったため、いくつか既存コンポーネントを人力で書き換えてみるのを試してみた。 しかし手作業でやってみると作業量が多く、これは自動化しないときついと思ったのでツール化することにした。 デモを見ると分かるが、Vue2 から Vue3 への移行ツールではなくて、Vue2 のまま Composition API プラグインを用いた記法に書き換えるものになっている。 これは現状の自分のプロジェクトを完全
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
GitHub - vuejs/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 この記事では、Vue.js ver 3.0 で採用予定の Composition API (https://vue-composition-api-rfc.netlify.com) を使って、このRFCの動機のひとつである「Code Organization」がどのようにして実現可能なのかを試しに実装してみた結果をまとめました。 はじめに100行超の単一のSFCでデモアプリを実装し、そのあとに「Function -> Module -> Component」の順番で機能単位での分割を進めた前後のコードを比較しています。 Composition APIでどのように実装すべきかを模索されている方にとっての参考になれば幸いです。 Logic Reuse & Code Organization The APIs proposed in this RFC provide the users w
[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO
t_o_dと申します。 フォーム検証は非常に重要な処理ですが、厳格かつ適切に実装しようとなると相応の知識が必要となり、大抵の開発ではライブラリを用いることが多いです。 今回はYupというライブラリを利用してVue.js(Composition API)で実装する方法を記録いたします。 結果 今回は以下のバリデーションができる入力フォームを作成していきます。 テキストボックス セレクトボックス ラジオボタン 必須入力だけではなく、形式チェックもYupの機能を利用いたします。 全て通ったらエラーメッセージが消え、送信処理が送れます。 環境 mac OS Monterey 12.2 Node.js v18.0.0 Vue 3.2 手順 Vue3 + yup環境構築 以下のコマンドをうち、Vue3及びyupを利用できるサンプルプロジェクトを作成 # サンプルプロジェクト作成 npm init vi
![[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b6a8966a1dd73d823a42e9559be0cc1bcdb76ea/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F08%2Fvuejs-logo.jpg){kind=logo}
Nuxt + Composition-API のコンポーネント設計について考えたことなど - ハードルを下げ続けるブログ@task
急にブログを書く気になったのでいっぱい更新してます。 前回の記事で Nuxt に Composition-API を導入する方法を書きました。 task-kawahara.hatenablog.com 今回は、半年間 Composition-API をつかってきて、どのように コンポーネント設計を行ってきたのかについての記事になります。 Motivation Vuex 辛い問題 Atomic Design よくわからん問題 Clean Architecture のエッセンス コンポーネント設計の方針 ディレクトリ構成 Composables Components あとがき Motivation Vuex store での Global state 管理をやめたい UIとビジネスロジックを切り離して柔軟に設計したい Clean Architecture を読んだから実践したい まずは、Vue
今回使った技術 Vue3 Nuxt3（ベータ版） TypeScript ある日の我が家 娘「ねぇ、パパ！」 娘「Vue3の、Composition APIの使い方を教えて！」 ワイ「おお、ええで〜」 ワイ「ほな、試しにこんな感じのページを作っていくで！」 娘「わー、数をカウントできるページなんだ！」 娘「便利そう〜！」 娘「しかも、2倍の数も確認できるんだね！」 ワイ「げへへ、照れるでぇ」 ワイ「ほな、さっそく作っていくで〜」 カウンターを作っていく ワイ「まずは、カウンターの数値が今いくつなのか」 ワイ「その状態管理をせなあかんから」
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
![DeNA ネットワーク運用監視ツールの紹介 [DeNA インフラ SRE] | BLOG - DeNA Engineering](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b9acf5c47daa7b9d974947691fc12da8b40f44f/height=288;version=1;width=512/https%3A%2F%2Fengineering.dena.com%2Fblog%2F2024%2F10%2Fdena-network-monitoring%2Fcover.png)
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
【Vue3に備える】実務で使うComposition APIについて考える
React HooksとVue Composition APIの比較
Vue.js composition-api を使った開発でおすすめしたいこと
Vue Composition APIで使えるリアクティブ関連のAPI一覧 - Qiita
VueUseで極めるVue.jsとComposition API - ICS MEDIA
Vue 3 Composition API: ref() vs. reactive()
Vue Composition APIのコラムっぽいもの集 - mya-ake com
MisskeyにおけるVueのComposition APIの活用 | gihyo.jp
Vue 3 Composition API を使ってみよう - Qiita
Vue Composition API時代のUI状態管理と設計で気をつけたいこと
Vuex4 を Composition API + TypeScript で入門する
vue-composition-apiで作るカスタムHook入門〜useHoge()を自作してみよう〜
Pros and Cons で考える Vue 2 Composition API
Vueコンポーネントをcomposition APIに書き換えるやつを作っている
vue-composition-apiを使って機能単位のコード分割と合成を試してみた - Qiita
6歳娘「パパ、Vue3のComposition APIってどう使うの？」 - Qiita
Release v1.0.0 · vuejs/composition-api
www.asahi.com
www.vogue.co.jp
www.pixiv.net
www.pixiv.net
jazzguitar251.hatenablog.com
www.pixiv.net