【Vue.nextTick】DOMの変更を検知して処理を行う方法
Vue.nextTick( [callback, context] )Vue.nextTick()を使用すると、Vue.jsがデータの変更に基づいてDOMを更新した後に、何らかの処理（コールバック）を行うことができます。例えば、特定要素のclass名やテキストが変わったタイミングな
Ei2faJSDbTPC
記事一覧
記事数
156
【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
unable to access URL: Could not read from remote repositoryの対処法
実行環境AWS CodeCommit@vue/cli 4.5.15問題AWS CodeCommitで管理しているvueのソースをローカルリポジトリにpullした際に下記のエラーが発生$ git pullfatal: unable to access &
【npm】Does your workplace require a proxy to be used to access the internet?の対処法
npm install実行時に、下記のエラーが発生する際の対処法。自分用にメモ書き。Does your workplace require a proxy to be used to access the internet?if so you must configure the htt
Vue.jsアプリをFirebase Hostingにデプロイする手順【GitHub連携】
今回はVue.js(vue-cli)で作成したアプリケーションをFirebase Hostingにデプロイする手順をまとめました。開発環境Vue.jsvue-cliFirebase HostingGitHub手順Firebase Host
【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で構成されているので開発者向けにも使いやす
【Vue.js】vue-pdfを使ってPDFプレビューを表示する方法
開発環境@vue/cli 4.5.15vue@2.6.14vuetify@v.2.6.6vue-pdfとはvue-pdfは、vueコンポーネントを使ってPDFを簡単に表示・閲覧できるようにするためのVue.js用ライブラリです。vue-pdfを使えば、た
【JavaScript】unixtimeを日付・日時に変換する方法
アプリケーションを構築する過程で、データの保存日時や更新日時を保存したり、UI上に表示したりする場面があると思いますが、Unixタイムスタンプから「2022/05/17 10:00」のような見やすい形式に変換する必要があります。今回は、JavaScriptでUnixタイムスタンプを日時形式
【Vue.js】ファイルサイズのバイト数をKB・MB・GBに変換する方法
アプリケーションを構築する上でファイルサイズを表示する場面があるかと思いますが、全てのファイルがバイト数のまま表示されているとユーザービリティはとてつも無く下がります。KB・MB・GBなど適切な単位に変換して表示すればファイルサイズを把握しやすいと思います。今回は、JavaScriptでフ
【Vue.js】enter押出でフォームを送信する方法（全角入力・変換対応）
開発環境vue@2.xvuetify@2.x検証環境機種：Mac mini (M1, 2020)ブラウザ：Chrome, Firefox※safariは挙動が異なるので、動作検証中です。全角入力の変換完了と同時に送信されるアンチパター
