【入門編】 jsxオプションの全設定とReact/Vue/SolidJSへの対応 – TypeScript実践ガイド

こんにちは！TypeScriptの世界へようこそ。
フロントエンドの最前線で日々コードを書いていると、時折「魔法のような設定」に遭遇して頭を抱えることがありますよね。その中でも、特に初心者さんが躓きやすいのが`tsconfig.json`の`jsx`周辺の設定です。

「ReactなのかVueなのか、それともSolidJSなのかで設定が変わるって聞いたけど、結局何をどうすればいいの？」

そんな不安を抱えているあなたへ、今日はこの「JSXの裏側」を、身近な例え話でスッキリ紐解いていきましょう。大丈夫、仕組みさえわかれば、これらはただの「翻訳のルール」に過ぎません。

—

まず、JSX（`

`のような構文）を想像してみてください。あれは、私たち人間が読みやすい「料理のレシピ」です。でも、ブラウザ君は残念ながらそのレシピをそのままでは理解できません。

そこで、TypeScriptという「優秀なシェフ（翻訳機）」が、レシピをブラウザが食べられる形（JavaScriptの関数呼び出し）に翻訳してあげる必要があります。

`tsconfig.json`にある`jsx`関連の設定は、「どのフレームワークという流派のレシピを、どんな風に翻訳してほしいか」をシェフに指示する注文書なんです。

—

まずは一番大切な`jsx`オプションです。ここには主に3つの選択肢があります。

`react`: 古き良きReactのスタイル。`React.createElement`という関数に変換します。
`react-jsx` / `react-jsxdev`: 最近のReact（17以降）のスタイル。わざわざ`import React from ‘react’`を書かなくてもいいように、自動で必要な部品を呼び出してくれる賢いモードです。
`preserve`: 「翻訳しないで！」という命令。BabelやViteなどの別のツールに翻訳を任せたい時に使います。

{
“compilerOptions”: {
// React 17以降のモダンなプロジェクトならこれ！
“jsx”: “react-jsx”
}
}

—

Reactの古いバージョンや、Preactのような軽量ライブラリを使っていると、「React.createElementじゃなくて、別の関数を使ってほしい！」という場面が出てきます。

そんな時、「この道具を使って料理してね」と指定するのがこの二つです。

例えば、Preactを使うならこんな感じです。

{
“compilerOptions”: {
“jsxFactory”: “h”, // React.createElementの代わりに「h」という関数を使う
“jsxFragmentFactory”: “Fragment” // フラグメントには「Fragment」を使う
}
}

—

これが最近の主流です。Emotion（CSS-in-JS）や、SolidJS、あるいはReactの最新設定を使いたい時に使います。

「どのライブラリの魔法の粉を使うか」をパスで指定するイメージです。例えば、SolidJSならこんな設定になります。

{
“compilerOptions”: {
“jsx”: “react-jsx”, // 基本はreact-jsxの仕組みを借りる
“jsxImportSource”: “solid-js” // 翻訳のルールは「solid-js」から持ってきて！
}
}

—

現場でよく使う構成を、カンニングペーパーとして残しておきますね。

{
“compilerOptions”: {
“jsx”: “react-jsx” // 自動でimportしてくれるので楽ちん！
}
}

{
“compilerOptions”: {
“jsx”: “preserve”, // 変換はVite(SolidJSのツール)に任せる
“jsxImportSource”: “solid-js”
}
}

{
“compilerOptions”: {
“jsx”: “preserve” // Vueのプラグインがよしなにやってくれるので、TSには手を出させない
}
}

—

もし、コードを書いていて「関数が見つかりません！」というエラーが出たら、それはシェフ（TypeScript）が「レシピの書き方はわかったけど、使う道具がどこにあるかわからないよ！」と困っている証拠です。

1. `jsx`の設定は合っているか？（`preserve`にするべきか、`react-jsx`にするべきか）
2. `jsxImportSource`や`jsxFactory`で、使うライブラリを正しく指定できているか？

この2点を確認するだけで、トラブルの9割は解決します。

最初は難しく感じるかもしれませんが、これらはすべて「ブラウザという食卓に、最高の料理を届けるための工夫」です。一つひとつ、パズルのピースを埋めるように設定してみてください。

あなたの書いたコードがブラウザの上で軽やかに動く瞬間、きっと今日の苦労は「なるほど！」という自信に変わっているはずです。応援していますよ！