vue-jsx-best-practices は何をしますか？
VueにおけるJSX構文のベストプラクティス（例：class vs className、JSXプラグイン設定）。
概要
このドキュメントでは、Vue.jsプロジェクトでJSX（またはTSX）を使用する際の推奨される方法と設定について説明します。
主な違い
class vs className
- Vueのテンプレートでは、クラスを指定するために
class属性を使用します。 - JSXでは、
classNameを使用します（Reactと同様）。
例:
// Vueテンプレート
<template>
<div class="foo"></div>
</template>
// Vue JSX
const element = <div className="foo"></div>;
style の扱い
- テンプレートでは、
styleにオブジェクトまたは文字列をバインドできます。 - JSXでは、常にオブジェクトを使用します（キャメルケースのプロパティ名）。
例:
// Vueテンプレート
<div :style="{ color: 'red' }"></div>
// Vue JSX
const element = <div style={{ color: 'red' }}></div>;
JSXプラグイン設定
ViteプロジェクトでJSXを有効にするには、@vitejs/plugin-vue-jsx プラグインをインストールして設定します。
インストール
npm install @vitejs/plugin-vue-jsx -D
Vite設定 (vite.config.js)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
})
型定義
TypeScriptを使用する場合、型定義が正しく設定されていることを確認してください。
// tsconfig.json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue"
}
}
推奨事項
- 一貫性を保つ: プロジェクト全体でテンプレートかJSXのどちらかに統一することを推奨します（状況に応じて混在も可能）。
- スロットの使用: JSXでは、スロットを
v-slotsまたはslotsプロパティとして指定します。 - ディレクティブの代替:
v-ifは三項演算子、v-forはmap()メソッドに置き換えます。