個人的なVue.jsコンポーネント設計のベストプラクティス
Vue.jsを使ったフロントエンド開発において、コンポーネント設計は常に悩ましい課題です。単一責任の原則やAtomicデザイン、細かい分割の是非など、多くのアプローチがありますが、正解はありません。しかし、ルールがないとプロダクトの品質が低下するリスクがあるため、「指針」が求められます。
Vue.js
記事数
31
【CloudFront×Lambda】WordPressをヘッドレスCMSとしてNuxt3でブログを構築する
WordPressをヘッドレスCMSとして利用し、フロントエンドにNuxt3を採用してブログを構築した。この記事では、そのシステム構成やディレクトリ構成、使用したライブラリについて詳しく解説する。さらに、NuxtアプリケーションをAWS Lambdaにデプロイし、静的ファイルをS3にアップロードし
Vue3 Composition APIで「Vue I18n」を使用する方法
Vue I18n は、Vue.js アプリケーションにおいて国際化（i18n）を実装するためのプラグイン。国際化とは、アプリケーションを多言語化し、異なる地域や文化に適応させるプロセスのこと。Vue I18n を使用すると、アプリケーションのテキストコンテンツを動的に変更でき、ユーザーのロケール設
【Vue3】Piniaを使用して状態管理を実現する方法
当記事では、Vue.jsの状態管理ライブラリである「Pinia」を使用して状態管理を行う方法について解説する。筆者は以前「Vuex」を使用して状態管理を行なっていたが、Vue3のプロジェクトに関わるようになり「Pinia」を使用して状態管理を行うようになったため、知識の整理を兼ねてアウトプットする
Vue.js 3「Extraneous non-emits event listeners」警告に対処する
Vue 3における以下の警告について原因と解決策を提示する。Extraneous non-emits event listeners (emitFunc) were passed to component but could not be automatically inherited b
【Vue3&TypeScript】ismobilejsでモバイルデバイス判定
Web開発において、モバイルデバイスやブラウザの種類に応じた挙動の制御は一般的な課題であり、端末の種類に基づいた特定の処理が必要な場合もある。特にiOSとAndroid端末での挙動の違いは顕著である。そこで、ismobilejsを使用して、モバイル端末の判定処理を実装することにした。ism
【Vue3】watchとwatchEffectの違いと使い方をサンプルコードで解説
Vue 3 はリアクティブなデータを監視するために watch と watchEffect の二つの主要なメソッドを提供している。この記事では、それぞれのメソッドがどのように動作するのか、そしてどのようなケースでそれぞれを使用すべきかについて解説する。watch の基本的な使い方w
Vue 3とTypeScriptで仮想スクロールを実装: 「vue-virtual-scroller」の使い方
Vue 3とTypeScriptを使用したvue-virtual-scrollerライブラリの使い方と実装方法を解説する。仮想スクロールの基本から、DynamicScrollerとRecycleScrollerの違い、さらには動的なアイテムサイズへの対応方法まで、実用的なテクニックも紹介している。
Google Maps JavaScript APIでアプリ内に地図を表示する
本記事では、Google Maps Platformを使用してアプリケーション内に地図を表示する方法を解説している。大きく分けて以下の3つの手順で実装することができる。Google Maps Platformにアクセスしプロジェクトを作成するAPIキーを発行する使用するA
【Vue3×TypeScript】画像プレビューをPhotoSwipeで実装してみた
PhotoSwipeは、高性能な画像ギャラリーライブラリで、モバイルやデスクトップ、様々なブラウザで高いパフォーマンスと使い勝手を提供するライブラリである。当記事では、いくつかの主要な特徴と実装方法について解説する。また検証環境だが、Vite×Vue3×TypeScriptで構築された環境
TypeScript×Vue3×Vite開発環境構築
当記事では、Viteを使ってVue3アプリケーションの開発環境構築手順を紹介する。そもそもViteとは何か？Viteは、Vue.js の作者 Evan You によって開始された次世代のフロントエンドビルドツール。一言で言えば、Vue.jsの開発効率を向上させるためのツール
【Vue 3】Composition APIでテンプレート参照する方法
Vue.jsのテンプレート参照は非常に便利であり、Options APIではthis.$refs.xxxという形式で参照が行えた。しかし、Composition APIではOptions API形式の記述法ではテンプレート参照ができなくなったため、Composition APIに則した形で記述を行
【Vue Test Utils】コンポーネントテストでVeeValidateを使用する
今回はVue.jsのバリデーションライブラリである「VeeValidate」とコンポーネントテストライブラリの「Vue Test Utils」を使用してコンポーネントテストでバリデーションエラーを検証します。「VeeValidate」を「Vue Test Utils」で使うためにはいくつか
【Vue Test Utils】overwriting methods via the methods property is deprecatedの対処法
開発環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1発生条件createdフックなどで初期化処理などを
【Vue Test Utils】Unknown custom element: router-viewの解決法
テスト環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1テスト実行とエラー処理コンポーネントテストを実行
【Vue.nextTick】DOMの変更を検知して処理を行う方法
Vue.nextTick( [callback, context] )Vue.nextTick()を使用すると、Vue.jsがデータの変更に基づいてDOMを更新した後に、何らかの処理（コールバック）を行うことができます。例えば、特定要素のclass名やテキストが変わったタイミングな
【Vue.js】provide/injectでデータバインディングする
※ 当記事はvue@2.7.4で動作確認を行なっています。provide/injectの仕組み従来のVue.jsでは、コンポーネント間のデータバインディングにはPropsを用いてきましたが、大規模なアプリケーションでは大量のデータバインディングが発生し、コードのメンテナンスが大変で
【Firebase×Vue】signInWithRedirectで正常に画面遷移させる方法
signInWithRedirectは、Firebase Authenticationで外部認証(Google, Facebookログインなど)を実装する際に使用するメソッドだ。公式ドキュメントではsignInWithPopupというホップアップ形式の認証方式も紹介されているが、モバイルデバイス対
VeeValidateでVue.jsアプリのバリデーションを実装
「VeeValidate」は、Vue.jsアプリケーション用のバリデーションライブラリです。今回は、VeeValidateの導入手順と使い方について解説します。当記事の開発環境は以下の通り。vue@2.7.4vue-cli@5.0.8vuetify@2.6.7実
【Vue.js】ApexChartsでグラフやチャートを生成する手順
アプリケーションを開発していると、様々なデータをグラフで表現する場面があるかと思います。今回は「ApexCharts.js」というグラフ用のライブラリを使用してドーナツチャートを生成します。Chart.jsなどのライブラリと比較しても、かなりシンプルに実装できるのでおすすめです。管
