WordPressにアップロードされたメディアをS3に保存する手順
環境WordPressホスティングLightsailドメイン管理Route53画像コンテンツ管理S3AWS S3側の設定S3のバケット作成S3権限のIAMユーザーを作成1. S3のバケット作成S3コンソールにアクセスし「バケットを作成」をクリック
tech
78【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.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を使えば、た
