型安全なVue.js：TypeScriptで実現する保守性の高いアプリケーション

(*) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
“`

2.2 既存プロジェクトへのTypeScript導入

既存のVue.jsプロジェクトにTypeScriptを導入する場合、以下の手順で設定を行います。

1. TypeScriptと関連パッケージのインストール:

   bash
npm install --save-dev typescript ts-loader vue-class-component vue-property-decorator
npm install --save @types/node

2. tsconfig.jsonファイルの作成:

   プロジェクトのルートディレクトリにtsconfig.jsonファイルを作成し、TypeScriptコンパイラの設定を記述します。

   json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

3. webpackの設定変更:

   webpackの設定ファイル(vue.config.jsまたはwebpack.config.js)に、TypeScriptファイルを処理するための設定を追加します。

   javascript
module.exports = {
configureWebpack: {
resolve: {
extensions: ['.ts', '.vue', '.js', '.json']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}

4. ファイルの拡張子変更:

   JavaScriptファイル(.js)をTypeScriptファイル(.ts)またはTSXファイル(.tsx)に変更します。

   • コンポーネントファイルは.vueのままですが、<script>タグにlang="ts"属性を追加します。

   “`vue
   

   
   “`

2.3 基本的な型定義

TypeScriptでVue.jsコンポーネントを記述する際に、よく使用する型定義を紹介します。

• interface: オブジェクトの型を定義します。props、data、computedプロパティなどの型定義に利用します。

  typescript
interface Props {
name: string;
age?: number; // オプションのプロパティ
}

• type: 型エイリアスを定義します。複雑な型やユニオン型を定義する際に便利です。

  typescript
type Status = 'pending' | 'processing' | 'completed' | 'failed';

• Vue.ComponentOptions: Vue.jsコンポーネントのオプションを型安全に定義します。Vue.extend()で使用します。

  “`typescript
  import Vue, { ComponentOptions } from ‘vue’;

  interface Data {
  message: string;
  }

  const Component: ComponentOptions = {
  data() {
  return {
  message: ‘Hello, TypeScript!’
  };
  }
  };

  export default Vue.extend(Component);
  “`

3. Vue.jsコンポーネントの型付け

3.1 Options APIでの型付け

Options APIは、Vue.js 2でよく使用されていたコンポーネント定義方法です。TypeScriptでOptions APIを使用する場合、vue-class-componentとvue-property-decoratorというライブラリを使用すると、より型安全に記述できます。

“`typescript
import { Component, Vue, Prop, Watch } from ‘vue-property-decorator’;

interface Item {
id: number;
name: string;
}

@Component
export default class MyComponent extends Vue {
@Prop({ type: String, default: ‘Guest’ }) name!: string;
@Prop({ type: Number, default: 0 }) age!: number;

message: string = ‘Hello, Vue.js!’;

items: Item[] = [
{ id: 1, name: ‘Item 1’ },
{ id: 2, name: ‘Item 2’ }
];

get greeting(): string {
return Hello, ${this.name}!;
}

@Watch(‘name’)
onNameChanged(newVal: string, oldVal: string) {
console.log(Name changed from ${oldVal} to ${newVal});
}

mounted() {
console.log(‘Component mounted.’);
}

greet() {
alert(this.greeting);
}
}
“`

• @Componentデコレータ: このクラスがVueコンポーネントであることを示します。
• @Propデコレータ: propsを定義します。typeで型を指定し、defaultでデフォルト値を設定できます。!は、初期化時に値が設定されることをTypeScriptに伝えます。
• @Watchデコレータ: ウォッチャを定義します。監視対象のプロパティ名と、変更時のコールバック関数を指定します。

3.2 Composition APIでの型付け

Composition APIは、Vue.js 3で導入された新しいコンポーネント定義方法です。TypeScriptとの相性が良く、より柔軟で型安全なコードを書くことができます。

“`typescript
import { defineComponent, ref, computed, watch } from ‘vue’;

interface Item {
id: number;
name: string;
}

export default defineComponent({
props: {
name: {
type: String,
default: ‘Guest’
},
age: {
type: Number,
default: 0
}
},
setup(props) {
const message = ref(‘Hello, Vue.js!’);

const items = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

const greeting = computed(() => `Hello, ${props.name}!`);

watch(
  () => props.name,
  (newVal, oldVal) => {
    console.log(`Name changed from ${oldVal} to ${newVal}`);
  }
);

const greet = () => {
  alert(greeting.value);
};

return {
  message,
  items,
  greeting,
  greet
};

}
});
“`

• defineComponent関数: コンポーネントの型を定義します。
• ref関数: リアクティブな値を定義します。ジェネリクスで型を指定します。
• computed関数: 計算された値を定義します。
• watch関数: ウォッチャを定義します。監視対象の値と、変更時のコールバック関数を指定します。

3.3 Propsの型定義

Propsの型定義は、コンポーネント間のインターフェースを明確にする上で非常に重要です。Options APIでは、@Propデコレータで型を指定します。Composition APIでは、defineComponentのpropsオプションで型を指定します。

“`typescript
// Options API
@Prop({ type: String, required: true }) title!: string;

// Composition API
props: {
title: {
type: String,
required: true
}
}
“`

より複雑なpropsの型を定義する場合は、PropTypeを使用します。

“`typescript
import { PropType } from ‘vue’;

interface User {
id: number;
name: string;
}

props: {
user: {
type: Object as PropType,
required: true
}
}
“`

3.4 Emitの型定義

Emitは、コンポーネントから親コンポーネントへイベントを発生させる仕組みです。TypeScriptでEmitを使用する場合、Emitされるイベントの名前と引数の型を定義することで、より型安全に記述できます。

“`typescript
// Options API (vue-property-decorator)
import { Emit } from ‘vue-property-decorator’;

@Component
export default class MyComponent extends Vue {
@Emit(‘custom-event’)
emitCustomEvent(payload: string) {
return payload;
}
}

// Composition API
export default defineComponent({
emits: [‘custom-event’],
setup(props, { emit }) {
const emitCustomEvent = (payload: string) => {
emit(‘custom-event’, payload);
};

return {
  emitCustomEvent
};

}
});
“`

Vue.js 3.3以降では、defineEmitsマクロを使用して、より簡潔にEmitの型を定義できます。

“`typescript
import { defineComponent, defineEmits } from ‘vue’;

export default defineComponent({
setup() {
const emit = defineEmits<{
(e: ‘custom-event’, payload: string): void
}>();

const emitCustomEvent = (payload: string) => {
  emit('custom-event', payload);
};

return {
  emitCustomEvent
};

}
});
“`

4. Vuexとの連携

Vuexは、Vue.jsアプリケーションの状態管理ライブラリです。TypeScriptと組み合わせることで、アプリケーション全体のデータフローを型安全に管理できます。

4.1 Stateの型定義

VuexのStateは、アプリケーションの状態を保持するオブジェクトです。TypeScriptでStateの型を定義することで、Stateにアクセスする際に型チェックを行うことができます。

“`typescript
// store/index.ts
import { createStore } from ‘vuex’;

interface State {
count: number;
message: string;
}

const store = createStore({
state: {
count: 0,
message: ‘Hello, Vuex!’
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit(‘increment’);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});

export default store;
“`

4.2 Mutationsの型定義

Mutationsは、Stateを変更するための関数です。TypeScriptでMutationsの型を定義することで、Mutationsの引数やStateの変更内容を型チェックすることができます。

“`typescript
// store/index.ts
import { createStore, MutationTree } from ‘vuex’;

interface State {
count: number;
message: string;
}

interface Mutations extends MutationTree {
increment(state: State): void;
setMessage(state: State, payload: string): void;
}

const mutations: Mutations = {
increment(state) {
state.count++;
},
setMessage(state, payload) {
state.message = payload;
}
};

const store = createStore({
state: {
count: 0,
message: ‘Hello, Vuex!’
},
mutations: mutations,
actions: {
increment(context) {
context.commit(‘increment’);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});

export default store;
“`

4.3 Actionsの型定義

Actionsは、Mutationsをコミットするための関数です。非同期処理を行う場合にも使用されます。TypeScriptでActionsの型を定義することで、Actionsの引数やコミットするMutationsを型チェックすることができます。

“`typescript
// store/index.ts
import { createStore, ActionTree } from ‘vuex’;

interface State {
count: number;
message: string;
}

interface Actions extends ActionTree {
incrementAsync(context: { commit: Function }): Promise;
}

const actions: Actions = {
incrementAsync(context) {
return new Promise((resolve) => {
setTimeout(() => {
context.commit(‘increment’);
resolve();
}, 1000);
});
}
};

const store = createStore({
state: {
count: 0,
message: ‘Hello, Vuex!’
},
mutations: {
increment(state) {
state.count++;
}
},
actions: actions,
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});

export default store;
“`

4.4 Gettersの型定義

Gettersは、Stateから値を計算して返す関数です。TypeScriptでGettersの型を定義することで、Gettersの戻り値の型をチェックすることができます。

“`typescript
// store/index.ts
import { createStore, GetterTree } from ‘vuex’;

interface State {
count: number;
message: string;
}

interface Getters extends GetterTree {
doubleCount(state: State): number;
}

const getters: Getters = {
doubleCount(state) {
return state.count * 2;
}
};

const store = createStore({
state: {
count: 0,
message: ‘Hello, Vuex!’
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit(‘increment’);
}
},
getters: getters
});

export default store;
“`

5. Vue Routerとの連携

Vue Routerは、Vue.jsアプリケーションのルーティングを管理するライブラリです。TypeScriptと組み合わせることで、URLとコンポーネント間の整合性を保つことができます。

5.1 ルートパラメータの型定義

ルートパラメータは、URLに含まれる変数です。TypeScriptでルートパラメータの型を定義することで、コンポーネントでルートパラメータを使用する際に型チェックを行うことができます。

“`typescript
// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from ‘vue-router’;
import UserDetail from ‘../components/UserDetail.vue’;

interface RouteParams {
id: string;
}

const routes: Array = [
{
path: ‘/user/:id’,
name: ‘UserDetail’,
component: UserDetail,
props: (route) => ({ id: route.params.id as string })
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

export default router;
“`

“`vue
// components/UserDetail.vue

“`

5.2 ナビゲーションガードの型定義

ナビゲーションガードは、ルート遷移を制御するための関数です。TypeScriptでナビゲーションガードの型を定義することで、ルート遷移時の引数や戻り値の型をチェックすることができます。

“`typescript
// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw, NavigationGuardNext, RouteLocationNormalized } from ‘vue-router’;
import Home from ‘../components/Home.vue’;
import Login from ‘../components/Login.vue’;

const routes: Array = [
{
path: ‘/’,
name: ‘Home’,
component: Home,
meta: { requiresAuth: true }
},
{
path: ‘/login’,
name: ‘Login’,
component: Login
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next(‘/login’);
} else {
next();
}
});

function isAuthenticated(): boolean {
// 認証ロジック
return false;
}

export default router;
“`

6. 実践的なテクニック

6.1 asキーワードの活用

asキーワードは、TypeScriptで型のキャストを行うために使用します。型推論がうまくいかない場合や、より具体的な型を指定したい場合に便利です。

typescript
const el = document.getElementById('my-element') as HTMLInputElement;
console.log(el.value);

6.2 ジェネリクスの活用

ジェネリクスは、型をパラメータ化するために使用します。再利用可能な関数やコンポーネントを作成する際に便利です。

“`typescript
function identity(arg: T): T {
return arg;
}

const myString: string = identity(“hello”);
const myNumber: number = identity(123);
“`

6.3 ユニオン型の活用

ユニオン型は、複数の型のいずれかである可能性を表すために使用します。

“`typescript
type Result = string | number;

function processResult(result: Result) {
if (typeof result === ‘string’) {
console.log(‘Result is a string: ‘ + result);
} else {
console.log(‘Result is a number: ‘ + result);
}
}
“`

6.4 Null許容型の活用

Null許容型は、値がnullまたはundefinedである可能性があることを表すために使用します。

“`typescript
let name: string | null = null;

if (someCondition) {
name = “John”;
}

console.log(name?.length); // Optional Chaining
“`

6.5 ESLintとPrettierの設定

ESLintとPrettierは、コードの品質を維持するために使用します。TypeScriptプロジェクトでは、TypeScriptに対応した設定を行う必要があります。

bash
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.jsファイルを作成し、ESLintの設定を記述します。

javascript
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
rules: {
'prettier/prettier': 'error'
}
};

.prettierrc.jsファイルを作成し、Prettierの設定を記述します。

javascript
module.exports = {
semi: false,
singleQuote: true,
trailingComma: 'all',
printWidth: 120
};

7. まとめ

この記事では、TypeScriptをVue.jsプロジェクトに導入するメリット、具体的な実装方法、そして実践的なテクニックについて解説しました。TypeScriptを導入することで、Vue.jsアプリケーションの型安全性を高め、より堅牢で保守性の高いコードを書くことができます。

TypeScriptは、学習コストがやや高いですが、大規模なアプリケーションやチーム開発においては、その恩恵を十分に受けることができます。ぜひTypeScriptをVue.jsプロジェクトに導入し、より高品質なアプリケーション開発を目指してください。