Vue Academy · レッスン

ViteでのVue 3 JSX

@vitejs/plugin-vue-jsx、JSX pragma、関数コンポーネント、JSXとtemplateのトレードオフ

「ViteでのVue 3 JSX」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Vue 3のJSX

JSXでは、JavaScript内にマークアップのような構文を記述でき、それがhの呼び出しにコンパイルされます。Vue 3は、Viteに組み込まれた専用のBabelプラグインによってJSXをサポートします。

プラグインのインストール

公式パッケージは@vitejs/plugin-vue-jsxです。通常のVueプラグインと併せて、開発用依存関係としてインストールします。

npm install -D @vitejs/plugin-vue-jsx

vite.config.tsの設定

vite.config.tsのplugins配列にvueJsx()を追加します。ViteがJSXファイルを変換できるよう、配列に含める必要があります。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

.tsxファイル拡張子

JSXで記述するコンポーネントには.tsx（または.jsx）拡張子を使います。プラグインが処理するのは、これらの拡張子を持つファイルだけです。

// Greeting.tsx
export default () => <div>Hello</div>;

関数コンポーネント

最も単純なコンポーネントは、JSX要素を返すアロー関数です。classとテキストはHTMLと同じように記述します。

const Comp = () => <div class="box">text</div>;

export default Comp;

classでありclassNameではない

Reactとは異なり、Vue JSXではclassを使い、classNameは使いません。ラベルのforも同様です。

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

動的な値

中括弧の中に式を埋め込みます。レンダー本体内では、リアクティブなrefを.valueで読み取ります。

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

camelCaseのイベントハンドラー

リスナーにはcamelCaseのonプレフィックスを使います。例としてonClick、onInput、onMouseenterがあります。ハンドラーは関数です。

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

条件付きレンダー

JSXにはv-ifがありません。三項演算子または論理式を使って、条件に応じて要素を生成します。

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

リストのレンダー

v-forをmapに置き換えます。テンプレートと同様に、各要素にkeyを指定します。

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

PropsにdefineComponentを使う

型付きpropsやライフサイクルを扱う場合は、ロジックをdefineComponentでラップします。setup関数はJSXを返すレンダー関数を返します。

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

理解度チェック

Vue 3のViteプロジェクトでJSXを有効にするプラグインはどれで、どこに追加しますか？

まとめ

Vue 3のJSXは、@vitejs/plugin-vue-jsxのvueJsx()をViteのplugins配列に追加し、.tsxファイルにコンポーネントを記述することで有効になります。classNameではなくclassを使い、イベントハンドラーにはcamelCaseのonClickを使います。型付きpropsが必要な場合はdefineComponentを使います。

よくある質問

「ViteでのVue 3 JSX」レッスンは無料ですか？

はい。「ViteでのVue 3 JSX」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「ViteでのVue 3 JSX」で何を学びますか？

@vitejs/plugin-vue-jsx、JSX pragma、関数コンポーネント、JSXとtemplateのトレードオフブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ViteでのVue 3 JSX」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る