はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで

JavaScriptのdebounceの仕組みがよくわかっていないで理解したいという人向けに PureなJavaScript(Vanilla JavaScript) だけでなくReact, vue.jsではどのようにdebounceを利用することができるのか解説しています。lodashライブラリのdebounceを利用すれば簡単に設定できますが本書では自作のdebounceを作成することでdebounceの仕組みを理解してReact, Vue.jsでの設定方法を確認していきます。lodashライブラリを利用した場合の設定方法も合わせて説明を行なっています。 作成するdebounce関数はReact, vue.jsで共通なのでReact, Vue.jsで設定を行う前にPureなJavaScript(Vanilla JavaScript)でコードの説明と動作確認を行います。 Debounceと

結構悩みましたが擦りに擦られているネタだと解決後に判明しましたw vue3プロジェクトを作成してそのままbuildするとdistに成果物が発生しますが、それって… サブディレクトリでは動かないのですよ！ その対策を考えたいともいます Vue3プロジェクトの作成 vue3プロジェクトの作成はコマンド一発で作成されます $ npm init vue@latest Vue.js - The Progressive JavaScript Framework - Project name: … vue-sample - Add TypeScript? … No / Yes - Add JSX Support? … No / Yes - Add Vue Router for Single Page Application development? … No / Yes - Add Pinia for

カレンダーを作る際にテーブルを作るのも何なのでグリッドレイアウトを使ったらコードもシンプルになりました。 import dayjs from 'dayjs' // 月末の日にち const endDate = dayjs().endOf('month').get('date') // 月初の曜日 const startWeekday = dayjs().startOf('month').get('day') //　配列を作ります。 const dates = computed(() => { let data = [] //月の初めの日までは何もなし for (let i = 0; i < startWeekday; i++) { data.push('') } //日付を追加します。 for (let h = 1; h <= endDate; h++) { data.push(h) }

ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置

はじめに こんにちは。 今回はVue3で親子間のコンポーネント内メソッドの発火方法を紹介していきます。 子から親のメソッドを発火させる方法はご存知の方多いと思いますが親から子のメソッドを直接発火させる方法も紹介していますので参考になれば幸いです。 #注意：Vue3 composition apiの記法で紹介しています。 前提：親と子コンポーネントを作成 まずは親コンポーネントと子コンポーネントを作成していきます。 今回は分かりやすいようシンプルなものにしています。 <template> <button @click="emitEvent" > 子コンポーネント </button> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default de

これまでのparamsの渡し方 これまではcreateRouterで指定した各遷移先にpropsを定義し、画面遷移の際に指定した値をparamsに入れてpushしてあげれば十分だった。 export const router = createRouter({ history: createWebHistory('/'), routes: [ { path: '/', name: 'first', component: FirstPage, }, { path: '/second', name: 'second', component: SecondPage, // ここで遷移元から受け取る変数を定義する。 props: route => ({id: route.params.id, text: route.params.text}), } ] }) しかし現在のVue Router（4.1

Composition APIとは Vue.jsの３系から導入された、新しいコンポーネント作成手段です。 React Hooksのように、ロジックや状態を切り出すことを可能にします。 一方、従来からあるSFCファイルにコンポーネントの見た目/状態/ロジックをまとめて記述する作成手段をOptions APIと言います。 Options APIはコードをまとめて書けるが故に、それ以上分割できない不便さがありました。 Composition APIではロジックや状態に関するコードを切り出すことができるため、Options APIの不便さを解消できます。 また、見た目に関するコードとは別々に管理されることにより、ロジックの再利用性が高まります。 とはいえComposition APIはOptions APIを代替えしたり非推奨とするわけではなく、使い分けることが可能です。 Composition

やりたいこと ブラウザで録音するアプリケーションを作ります。 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-simple-suggestのサジェストをカスタマイズする 使っていたのは、vue-simple-suggestでした。既にスタイルが当たっていたのでどうにかしてこれを使いたかったです。 https://github.com/KazanExpress/vue-simple-suggest 結論としては、display-attributeと、filterを指定すれば実装できました。 （ドキュメントに書いてあるけど、filterの指定はわからなさすぎてソースコード読みました ） display-attributeで、どのkeyの値をサジェストのリストに表示するかを指定できます。 filterは入力された値に対してリストの値をどう返すか処理が書けます。 以下

はじめに 業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。 とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。 （間違いなどあれば、コメントにてご指摘いただければ幸いです。） Vue Selectとは Vue.jsで利用可能なセレクトボックスコンポーネント。 公式サイト 曰く Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component. (HTMLの要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。) この記載通りで、とても手軽にセレクトボックスを実装できる。 さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。 筆者環

環境 Nodeコンテナ：16.16.0-bullseye npm 8.15.1 @vue/cli 5.0.8 前提 npm run devでサーバーが立ったとか、サーバー再起動すればソース更新分は反映されるとかそういう状態。 対処 プロジェクトフォルダのてっぺんにあるvue.config.jsに、以下を追記する。 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 以下を追記 configureWebpack: { watchOptions: { aggregateTimeout: 300, ignored: /node_modules/, poll: 1000 } } // ここまで }) 参考 If wat

これは何？ 画像がフェードイン&フェードアウトするサンプル。 作った経緯 勉強のため。 かつ、ネットには動かないサンプルが大量に転がっていて腹がたったから。 今回重視したのは以下２つです。 v-for と v-if を同時に使いたい時にどうするか理解する transition によるアニメーション挙動を理解する そもそも、v-for と v-if を同時に使うことは非推奨だとドキュメントに書いてあるのに、 ネットでは同時に使っているサンプルが出てくるので、ドキュメントのことを思い出すまでに時間がかかりました。 スタイリングガイドによると、要は フィルタ済みの Object で for を回す template 構文を使って、 for と if を分ける このどちらかにしなければいけないので、今回は後者を選びました。 コード <template> <div class="slider-out

はじめに 普段、BEとWebのFEを体感8:2くらいの割合でやっているので、ガッツリFEをやると、そのたび浦島太郎状態になので、そこでの発見を小出しに書いてみようと思います Vue3でvue-slickがサポートされていなかった Vue3は2020年9月リリースということで特段新しいというわけでもないのですが、新しいものを作るならばと使ってみることにしました。 で、Webサービスでよく見かけるカルーセルを例によって作ることになり「まぁ、vue-slick使えばできるからいいだろう」とたかを括っていたのですが、Vue3はサポート対象外。。。 そこで代案として探していた中で扱いやすそうだった vue3-carousel を触ってみることにしました。（ vue3 と関するだけあってちゃんとVue3で使えます） cf. https://www.npmjs.com/package/vue-slick

概要 [2022年決定版] Vue3 x Typescriptによるアプリケーションづくりでは、<script setup>構文が使用されています。 一方、Vue.js公式ドキュメントのサンプルコードでは使用されていない箇所がほとんどです。 混乱しそうになったので、<script setup>に関して調査してみました。 結論 <script setup>とは？ <script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）です。 糖衣構文とは、読み書きのしやすさのために導入される構文です。通常よりシンプルで分かりやく記述できるというメリットがあります。 実際にソースコードを比較してみましょう。 また、他にも以下のような利点がありますが、こちらは後ほど解説します。 SFC と Composit

最近、Vue3 (Composition API)のreactiveがどういったものなのか、ようやくわかったので整理。 refとreactive Vue3(Composition API)でリアクティブな値を用意する方法として、以下2通りがある。 refを使用

やりたいこと Vue.jsで個人開発しているSPAアプリケーションにLP(ランディングページ)を埋め込むことがありました。 実現したいこととしては、 静的にHTMLを読み込んでほしい(SEO的に、jsなしでも動くことが条件) 同じドメイン下に置きたい できればVueだけで解决したい(LPのためだけにNuxtやGridsomeで書き直すようなことはしたくない) 調べてみた 最初にたどり着いた方法が、 リバースプロキシ を使ってURLでレスポンスを変える方法でしたが、Vue単体で解決できてないのでとりあえず保留。 色々情報を漁っていると… Vue.jsには MPA を構築する機能が標準で搭載されているらしい…？ MPAとは (知っている方は読み飛ばしてください) VueやReactなど、モダンなフロントエンドフレームでは SPA (シングルページアプリケーション)として開発するのが主流です。つ

<script setup> import { ref } from 'vue'; const stream = ref(null); const startCapture = async () => { console.log("startCapture!"); try { stream.value = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false, }); dumpOptionsInfo(); } catch (err) { console.error(err); } return stream; } const stopCapture = () => { console.log('stopCapture'); const tracks = stream.value.getTracks(

vueで作った一覧をハンドル付きでドラックドロップできようにして、アニメーション付きでね。 Sample http://www.mztm.jp/kawamura/qiita/vue-vuetify-draggable-test/index.html Github https://github.com/kawamurashin/vue-vuetify-draggable-test vue3はvuedraggable@nextを使う <template> <div> <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id" v-bind="dragOptions" handle=".handle"> <template #item="{element}"> <di

NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その1：画面の説明とSDKの導入）monacaNCMBFramework7DeepL NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。 今回は画面の説明とSDKの導入までを進めます。 コードについて 今回のコードはNCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリですにアップロードしてあります。実装時の参考にしてください。 利用技術について 今回は次のような組み合わせになっています。 Monaca NCMB JavaSc