概要 Jestでaxiosの処理をモック化する方法。 モック化の方法 テスト対象の関数(axiosGetTest, axiosPostTestData) <template> <div> <div>{{ axiosGetTestData }}</div> <div>{{ axiosPostTestData }}</div> </div> </template> <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator'; @Component({}) export…

概要 JestでVuexの処理をモック化する方法。 モック化の方法 テスト対象の関数(vuexTest) <template> <div> <div>{{ vuexTestData }}</div> </div> </template> <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator'; import { clientStore } from '~/store'; @Component({}) export default clas…

概要 Jestでマウントせずに、関数のみ実行してテストする方法。 方法 基本形 import 任意の名前1 "@/pages/ファイル名"; describe("任意の名前2", () => { it("任意の名前3", () => { const thisVal = {}; 任意の名前1.options.methods.テスト対象の関数名.c…

概要 injectを利用すると関数を共通化することが出来る。 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 injectの利用方法 共通化する関数を作成する ~/plugins/utils.ts import {…

概要 Vuexのデータは、永続化対応をしないとページ更新などをするとデータがなくなってしまう。そのため、「vuex-persistedstate」を使用して永続化の対応をする。 Nuxt + TypeScriptで、Vuexを扱う方法はこちら 環境 名称 Version Node 14.10.1 Nuxt 2.14.5…

概要 公式に記載があるvuex-module-decoratorsを使用して、Nuxt + TypeScriptの環境でVuexを扱う方法。 ストア - Nuxt TypeScript 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 v…

概要 nuxt-property-decoratorを使用して、NuxtをTypeScript化する。 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 TypeScript化 パッケージをインストールする npm i nuxt-prope…

環境 macOS Catalina 10.15.6 前提 Docker for Macをインストール済みであること。 インストールをしていない場合は、こちらからインストール。 ディレクトリ構成 |-- src |-- docker-compose.yml |-- Dockerfile Dockerコンテナの作成 必要なファイルを準備…

環境 Nuxt 名称 Version Node 14.5.0 Nuxt 2.13.3 Vue 2.6.11 TypeScript 3.8.3 Vuetify 2.3.3 nuxt-property-decorator 2.7.2 ブラウザのJavaScript 名称 Version jQuery 3.5.1 Bootstrap 4.5.2 使用する拡張機能 Nuxt crypto Nuxtで暗号化する方法 const S…

環境 名称 Version Node 14.5.0 Nuxt 2.13.3 Vue 2.6.11 TypeScript 3.8.3 Vuetify 2.3.3 nuxt-property-decorator 2.7.2 使用する拡張機能 crypto ハッシュ化と暗号化 ハッシュ化 元となるデータをハッシュアルゴリズムによって、固定長の値に不可逆変換を…

事象 Amazon S3 + Amazon CloudFrontの構成で、Nuxtで静的化したコンテンツをS3に配置した際に、 ルート(/index.html)以外のページで、更新すると404エラー「NoSuchKey」が発生する。 構成 前提 Nuxtで静的化を行うと、以下のようなフォルダ構成となる。 /pa…