【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
【Vue3】親<->子間のコンポーネントメソッド発火方法 - Qiita
はじめに こんにちは。 今回はVue3で親子間のコンポーネント内メソッドの発火方法を紹介していきます。 子から親のメソッドを発火させる方法はご存知の方多いと思いますが親から子のメソッドを直接発火させる方法も紹介していますので参考になれば幸いです。 #注意：Vue3 composition apiの記法で紹介しています。 前提：親と子コンポーネントを作成 まずは親コンポーネントと子コンポーネントを作成していきます。 今回は分かりやすいようシンプルなものにしています。 <template> <button @click="emitEvent" > 子コンポーネント </button> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default de
【Vue.js】Composition APIについて - Qiita
Composition APIとは Vue.jsの３系から導入された、新しいコンポーネント作成手段です。 React Hooksのように、ロジックや状態を切り出すことを可能にします。 一方、従来からあるSFCファイルにコンポーネントの見た目/状態/ロジックをまとめて記述する作成手段をOptions APIと言います。 Options APIはコードをまとめて書けるが故に、それ以上分割できない不便さがありました。 Composition APIではロジックや状態に関するコードを切り出すことができるため、Options APIの不便さを解消できます。 また、見た目に関するコードとは別々に管理されることにより、ロジックの再利用性が高まります。 とはいえComposition APIはOptions APIを代替えしたり非推奨とするわけではなく、使い分けることが可能です。 Composition
【Vue3】ブラウザでマイク音声を録音する(Composition API) - Qiita
やりたいこと ブラウザで録音するアプリケーションを作ります。 Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。 基本 ブラウザでの録音はMediaStream Recording APIを使います。 基本的には以下のソースコードと解説を参考にしました。 MediaStream Recording API の使用 - Web API | MDN 全コード 短いので、テンプレートの全コードを掲載します。 <template> <button @click="startRecording()" v-if="!record.state"> 録音 </button> <button @click="stopRecording()" v-if="record.sta
【Vue.js】<script setup>って何がいいの？ - Qiita
概要 [2022年決定版] Vue3 x Typescriptによるアプリケーションづくりでは、<script setup>構文が使用されています。 一方、Vue.js公式ドキュメントのサンプルコードでは使用されていない箇所がほとんどです。 混乱しそうになったので、<script setup>に関して調査してみました。 結論 <script setup>とは？ <script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）です。 糖衣構文とは、読み書きのしやすさのために導入される構文です。通常よりシンプルで分かりやく記述できるというメリットがあります。 実際にソースコードを比較してみましょう。 また、他にも以下のような利点がありますが、こちらは後ほど解説します。 SFC と Composit
vue と react の DOM の再レンダリングの実行タイミングの差 - Qiita
はじめに 私自身、vue は 2019 年頃から書いており、今年で 3 年目くらいです。たいして vue に詳しくもないですが、それなりのコード量を書いてきたので、フレームワークとして愛着はあります。今年から react を触る機会が増えそう、ということで、ちょっとづつ react の勉強をはじめていたのですが、vue との明確な違いとして「DOM の再レンダリングの実行タイミングの差」が気になっています。react はドキュメントを読んでいると、「不要な再レンダリングを防ぐ」というトピックを扱うドキュメントが多いように思いますが、vue を勉強しているときは、正直、あまり意識をしていなかった領域です。なぜ、vue を書いているときは意識していなかったのか、どういう差があるのか、などちょっと気になったベースで調べて、記事にしています。 react と 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+Router】CompositionAPIのナビゲーションガードの書き方 | TekRog
Vue Router4.x系のナビゲーションガードではVue3のComposition API用に新しいものが提供されています。だけどbeforeRouteEnterに該当するガードが無い…と少し戸惑ったので備忘録を残します。この記事ではComposition API用の関数の紹介、beforeRouteEnterに該当するガードが無い理由とその対処方法について説明しています。 新旧コンポーネントガード Vue Router4.x系ではコンポーネントガードをsetup()内で使えるように、onXXX()形式で新しい関数が提供されています。対応表は以下のようになります。 Options API(今まで)Composition API
Vue3 Composition API でのVue Routerの使い方 - Qiita
<script lang="ts"> import { defineComponent } from 'vue' import { useRoute, useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const route = useRoute() const fetch = () => { const { id } = route.params store.getTodo(id) } const goHome = () => { router.push('/') } return { goHome, } }, }) </script> useRoute()関数から取得できるrouteオブジェクトは、リアクティブとなっています。 なお、テン
Vue3 の CompositionAPI で p5.js を動かす - Qiita
この記事は、ニフティグループ Advent Calendar 2021 6日目の記事です。遅くなりすみません！ 最近はシミュレーションの描画にハマっており、p5.js 触ってみたいなということで今回のネタにしました。 Vue.js のコンテナ内で、CompositionAPI の記法で p5.js を動かしたので紹介します。 CompositionAPI についての説明は割愛します。以下の記事を参考にさせていただきました。 Vue 3 Composition API を使ってみよう 作ったもの 振動するボールを作って動かすことができます。 マウスをクリックするとその位置にボールが集まってきます。 丸い物体が絶妙に揺れながら近づいてくるの可愛すぎる。 p5.js の紹介 p5.js はクリエイティブコーディングのための JavaScript のライブラリです。 アートやシミュレーションの描画
Vue2のtodoリストのチュートリアルをVue3で作ってみた - Qiita
Vueをやることになったので、チュートリアルをやってみました。 どうせなので、Vue３で始めようと思ったのですが、Vue3のチュートリアルが見つからなかったので、「基礎から学ぶ Vue.js」にて公開されているToDoリストのチュートリアルをVue3で書いてみました。 最終的なコードはGitHubにおいてあります。 基本的には以下の手順でおこないました。 vue3 + Typescript + vite で環境を構築 上記チュートリアルのコードをなるべくコピペして動作するようにする。 composition APIで書き換える。 Element-plusで見栄えを整える。 vue-routerを入れる。 見栄えをお手軽に良くしたかったので、UIのフレームワークを入れる予定でしたが、 Vue3に対応しているElement-plusを入れてみました。 Element-plusを入れるとnpm
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください！ まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前：</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
Vue3のComposition APIを試してみる
前回、Rails + vue3 + Typescriptの導入をしました。 そのコードをComposition APIを使って書き直していきます。 前回の記事 前回までのソースコード Composition APIとはなんぞや？という方は、こちらの記事がわかりやすかったので読んでみてください。 この記事では、既存のコードをどのようにComposition APIに置き換えたかをまとめます。 コードの書き換え dataやmethod、watchで定義していたものは全部setupに定義します。 watchはこの記事では扱ってないので、ドキュメントをみてください。 data -> setup に変更 一番ここでつまずきました。 refとreactiveというメソッドを使って書き換えるのですが、使い分けがよくわからなかったです。 vueのドキュメントからref、reactiveの説明を抜粋すると
Vue3のCompositionAPIがOptionsAPIよりも優れている理由をVue3エンジニアが解説！ | Ragate ブログ
import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { // data const name = ref('John'); // methods const doIt = () => console.log(`Hello ${name.value}`); // mounted onMounted(() => { doIt(); }); return { name }; } }); 実装上での大きな変更点はこちらでも挙げられている通り、以下になります。 data, computed, method 等の Vue 機能は全て setup 関数に定義ライフサイクルのフックは setup 関数に定義リアクティブ(変更検知)したい値は全て ref で指定必須暗黙的に動作していた部分を全
これならわかるVue3 Composition APIでのコード再利用の基礎 | アールエフェクト
Vue 3ではコードを記述する方法として大きくわけて2つの方法があります。従来の方法であるOptions APIとVue 3から利用することができるComposiont APIです。本文書ではComposition APIの利点の一つであるコードの再利用をどのように行うかを確認していきます。再利用できそうな機能を取り出すことで同じコードを何度も記述する必要がなくなり効率的にコードを記述することができる上他のプロジェクトでも利用することができます。本文書を読み終えるとcdnのVue 3を使ったComposition APIの記述方法とComposition APIではどのようにコードの再利用を行うのかの基本を非常にシンプルな例から理解することができます。cdnを利用しているのでVue環境を構築することなく動作確認も簡単に行うことができます。Composition APIではVue 2の時より
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue3】reactiveは『オブジェクトをリアクティブな値にするもの』ではない - Qiita
6歳娘「パパ、Vue3のComposition APIってどう使うの？」 - Qiita
Vue3, VTU, Jestで Composition API テストを導入 - Qiita
Vue3でComposition APIを使ってみよう
Vue 3 Composition API を使ってみよう - Qiita
