【Vue3×TypeScript】画像プレビューをPhotoSwipeで実装してみた
PhotoSwipeは、高性能な画像ギャラリーライブラリで、モバイルやデスクトップ、様々なブラウザで高いパフォーマンスと使い勝手を提供するライブラリである。当記事では、いくつかの主要な特徴と実装方法について解説する。また検証環境だが、Vite×Vue3×TypeScriptで構築された環境
JavaScript
WEB制作で使用するDOM操作から、開発で使用するサーバーサイドとの通信、配列操作などJavaScript全般の技術を解説しています。筆者のコアになる言語です。
記事数
74
TypeScript×Vue3×Vite開発環境構築
当記事では、Viteを使ってVue3アプリケーションの開発環境構築手順を紹介する。そもそもViteとは何か？Viteは、Vue.js の作者 Evan You によって開始された次世代のフロントエンドビルドツール。一言で言えば、Vue.jsの開発効率を向上させるためのツール
TypeScript Tips
実務で学んだTypeScriptの使い方まとめ。Extract<T, U>で特定の方を抽出するユニオン型TからUで指定した型だけを抽出した型を返すユーティリティ型https://typescriptbook.jp/reference/type-reuse/uti
【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を用いてきましたが、大規模なアプリケーションでは大量のデータバインディングが発生し、コードのメンテナンスが大変で
【cypress-file-upload】ファイルアップロードのテスト
e2eテストを実施する際に、ファイルアップロードをテストしたいケースもあると思う。特にシステムの場合は必ずと言っていいほどファイルのアップロード機能は存在する。今回はcypressでファイルアップロードをテストする方法を解説する。結論、cypress-file-uploadというライブラリ
【Firebase×Vue】signInWithRedirectで正常に画面遷移させる方法
signInWithRedirectは、Firebase Authenticationで外部認証(Google, Facebookログインなど)を実装する際に使用するメソッドだ。公式ドキュメントではsignInWithPopupというホップアップ形式の認証方式も紹介されているが、モバイルデバイス対
【Jest】非同期関数(Promise,async await)のテスト
今回はJavaScript テスティングフレームワーク「Jest」を使って非同期関数をテストします。テストの基礎的な概念は公式ドキュメントで十分なのですが、公式ドキュメントには実際にデータを取得する非同期関数がなかったので実用的なサンプルコードを用意しました。公式ドキュメント：非同
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などのライブラリと比較しても、かなりシンプルに実装できるのでおすすめです。管
【Vue.js】特定要素以外のクリックを検知して処理を行う方法
実装イメージ今回は、「メニューボタン」と「選択肢メニュー」以外がクリックされた際に、選択肢メニューを非表示になるように実装します。動作実際の動作は「Result」タブからご確認ください。ボタンと選択肢メニュー以外がクリックされた際に、選択肢メニューを非表示にするよう
CSSファイルにパラメーターを付与してキャッシュを自動削除する方法
WEBサイトの〇〇を修正しましたので、ご確認ください！変更されていませんキャッシュを削除してご確認ください。mac: command + shift + rwindows: ctrl + F5確認できました。このやりとりが無駄すぎる！ということで今回は、WE
git cloneしたvueのソースをローカル環境で起動する手順
開発環境@vue/cli 4.5.15vue@2.6.14AWS CodeCommit手順git cloneでリポジトリを複製cd コマンドで対象のcloneしたディレクトリに移動node_modulesのインストール依存関係を
【vue-router】NavigationDuplicated Avoided redundant navigation to current locationの対処法
開発環境vue-cli 5.0.4エラー内容このエラーは、vue-routerでの遷移時、現在いるrouteと同じrouteに移動しようとすると発生する。NavigationDuplicated: Avoided redundant navigation to
【JavaScript】時間(hh:mm)をソート(sort)する方法
JavaScriptで「12:30」などの時間をソートする場合に正常にソートできない方は、記事で問題を解決できます。大事なポイントは、コロンを除去した上でソートしているのかどうかです。これから解説するソースコードはVue.jsを使って記述していますが、Vue.jsを知らなくても理解できる内
【Vue.js】リッチテキストエディタ「vue-quill-editor」の使い方
「vue-quill-editor」はVue.js製のリッチテキストエディタを実装するライブラリです。その内部構造は、GitHubで★32,685を誇る有名なテキストエディタライブラリ「Quill」で構築されています。Quillは、シンプルなAPIで構成されているので開発者向けにも使いやす
