ログインしてない状態で、ログインが必要なページが要求された場合にログイン画面へリダイレクトさせたい。 Vue RouterのGlobal Before Guardsという仕組みで実現できるようなのでやってみた。 Navigation Guards | Vue Router src/router/index.ts import {…

エラーメッセージを日本語にしたい main.ts import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import ElementPlus from "element-plus"; import "element-plus/lib/theme-chalk/index.css"; import { setLoca…

vee-validateはバリデーション処理を行うためのライブラリ。 インストール yarn add vee-validate@next yarn add yup ※yupは必須チェックや桁数チェックなど、チェック処理をまとめたライブラリ Element+と組み合わせて使う バリデーションは、各項目へのバ…

ログイン画面はヘッダー、フッターを表示。それ以外の画面ではヘッダー、サイドメニュー、フッターを表示といった形で画面ごとにレイアウトを切り替えたい。 Nuxtだとlayout プロパティを使って切り替えれるみたいだけどVue.jsではそのような仕組みがないよ…

カスタムコンポーネントのv-modelは下記の通りと説明されているがどうも動作がおかしい、、、 <ChildComponent v-model="pageTitle" /> <ChildComponent :value="pageTitle" @input="pageTitle = $event" /> どうもVue 3になって仕様が変わったらしい。詳細は、、、 v-model | Vue.js <ChildComponent v-model="pageTitle" /> <…</childcomponent></childcomponent></childcomponent>

input, radio, select, checkboxあたりの部品に触ってみる Element Plus - The world's most popular Vue 3 UI framework <template lang="pug"> el-form el-form-item(label="Text") el-input( placeholder="Email Address" name="email" v-model="formModel.email" clearable ) </template>…

UIライブラリを探していたらまだVue.js 3系に対応しているものが少ないようで、その中でも比較的Element+が良さそうだったので触ってみた。 インストール Element Plus - The world's most popular Vue 3 UI framework yarn add element-plus ※例によってプ…

標準のSuspense機能では、下記のようなちょっと不便な点があるようなので他サイトを参考に独自のSuspense機能を作成する コンポーネント化する必要がある 初回のロードのみで再ロードに対応していない components/MySuspense.vue <template lang="pug"> div template(v-if="status</template>…

Suspenseとは？ コンポーネントを非同期で読み込むための機能らしい。 非同期で読み込む部分を<Suspense>でラップし、読み込むコンポーネントを<template #default>に定義し、フォールバックコンテンツを<template #fallback>に定義する service/UserService.ts /* eslint-disable require-jsdoc */ import axi</template></template></suspense>…

スロットとは？ 親コンポーネント側で子コンポーネントの表示内容をガチャガチャやるための仕組み 名前付きスロット 子コンポーネント <template lang="pug"> div slot(name="header") p header（slotの中身はフォールバックコンテンツ・指定がなければこの内容を表示） slot(name</template>…

リクエスト中にページ遷移すると、もう必要ないのにバックエンドでは実行中のリクエスト達がひたすら応答を待ち続けていました。 あまり好ましくないのでページ遷移の際にこいつらを駆逐することにしました。 ポイントは3つ！！！ リクエストの際、CancelTok…

router/index.ts このパラメータ「id」を取得したい { path: '/users/:id', name: 'UserDetailPage', props: true, component: () => import('@/views/UserDetailPage.vue'), }, ↑で「props: true」を定義した上で、以下のように取得した ※props引数から取得…

インストール yarn add vue-router@^4.0.3 src/router/index.ts を作成 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", component: () => import("@/views/Home.vue"),</routerecordraw>…

Mapped Typesについて 既存の型を元に動的に新しい型を作る方法を提供する 構文 {[P in K]: T} P はこのMapped Typeの引数型 (parameter type) K はこのMapped Typeの制約型 (constraint type) T はこのMapped Typeのテンプレート型 (template type) 下記の…

keyofについて keyofにオブジェクトを指定すると、そのオブジェクトのいずれかのキー（プロパティ名）を許容するUnion Typeが返却される interface SampleInterface { a: string; b: number; c: boolean; } type Keys = keyof SampleInterface; const aKey: …

継承 abstract class Horse { private jockey: string; constructor(private jockey: string) { } run() { console.log(`${this.getName()}が${this.jockey}を乗せて走る`); } abstract getName(): string; } class MihonoBourbon extends Horse { construct…

Type Alias 再利用したい型に対して名前をつけて管理するための仕組み type User = { id: number, name: string }; const u: User = { id: 1, name: "Jack" }; 交差型で拡張 交差型を使えばインタフェースの継承のようなことができる type GooType = { goo: …

インタフェース interface SquareConfig { color?: string; width?: number; } function execute(config: SquareConfig): void { console.log(config); } // implementsする必要はなくて、型チェッカーはプロパティが一致してるかをチェックする execute({ c…

thisパラメータがイマイチよくわからなかったのでもうちょい調べた。。 thisパラメータ function f(this: void) { } 下記のような関数の場合、呼び出し元（コンテキスト）によってthisの参照が変わる為、正しく動作しない場合がある。 const obj = { name: "…

基本的な関数 // 名前付き関数 function add(x: number, y: number): number { return x + y; } // 無名関数 let myAdd = function(x: number, y: number): number { return x + y; }; 関数の型 type FuncType = (x: number, y: number) => number; const fu…

分割代入 配列やオブジェクトの中身を別の変数へ分割して代入する仕組み 配列の分割代入 const input = [1, 2]; const [first, second] = input; console.log(first); // 1を出力 console.log(second); // 2を出力 let [first, ...rest] = [1, 2, 3, 4]; con…

交差型(Intersection Types)と共用体型(Union Types)について 交差型(Intersection Types) T & U TとUの両方を満たす型を動的に生成できる type T = { foo: string }; type U = { bar: number }; type I = T & U; // fooまたはbarのいずれかが未定義の場合は…

セットアップ yarn add axios vue-axios /main.ts import {createApp} from 'vue'; import router from './router'; import App from './App.vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; createApp(App).use(router).use(VueAxios,…

下記のようなエラーが発生した Uncaught TypeError: (intermediate value)() is undefined コード: <template lang="pug"> div table tr th ID td input(type="text" v-model="model.id") tr th Password td input(type="password" v-model="model.password") tr td(colspan="2") </template>…

Providerパターンとは？ provide/inject APIを利用して、「状態やロジック」をコンポーネント間で共有する components/SimpleStore.ts import {ref, inject, provide} from 'vue'; const key = Symbol(); const createStore = () => { const count = ref(0);…

インストール yarn add -D pug pug-plain-loader yarn add -D sass node-sass sass-loader ※sassは不要かと思ったら、エラー（Preprocessor dependency "sass" not found. Did you install it?）が発生したので追加 使ってみる template、styleタグにそれぞ…

パッケージのインストール $ yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next セットアップ $ yarn eslint --init yarn run v1.22.5 warning package.json: No license field √ How would you like to use ESLint? · style √ Wh…

Viteとは？ ViteはVue.jsの作者のEvan You氏が作成したビルドツール。 開発時は ES モジュールをそのままインポートするため、バンドル処理が不要で高速に動作するらしい。 インストール～開発サーバの起動 yarn create @vitejs/app vite-sample --template …

①プラグインを作成する プロジェクト/src/plugins/MomentPlugin.ts import Moment from "moment"; export const MomentPlugin = { install: (_Vue: any, options: any) => { // globalPropertiesは、Vue 2.x における Vue.prototype _Vue.config.globalPrope…

Docletでクラス名とフィールド名をCSVに出力する。 package sample; import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import com.sun.javadoc.ClassDoc; import com.sun.javadoc.FieldDoc; import com.sun.javadoc.RootDoc…