実現したいこと

<!DOCTYPE html>のサイトをJSX記法で制作しています。

JSXはXML構文なのにdoctypeは<!DOCTYPE html>でいいのでしょうか？

発生している問題・分からないこと

HTML LSでは自己終了タグの半角スペースとスラッシュが不要ですが、JSXでは半角スペースとスラッシュがないとエラーになってしまいます。
JSXで出力されたタグはHTML LSのマークアップルールには乗っ取らなくても良いのでしょうか？

■2024.10.23追記
例えばhtml5(htmlLS)では自己終了タグは<br>のように半角スペースとスラッシュがない書き方が正しいですが、JSXでは<br />と書かないとエラーになってしまうので、出力されたhtml上では<br />が挿入されます。そうなるとdoctypeが<!DOCTYPE html>だとhtml5(htmlLS)的には正しくない書き方なので、XHTML用のDOCTYPE宣言をしないといけないのではないかと疑問に思いました。

該当のソースコード

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

https://html.spec.whatwg.org/multipage/syntax.html#elements-2
whatwgの仕様書でsvg内では自己終了タグ使用可なのは読み取れましたが、JSXについては読み取れませんでした。

https://ja.react.dev/reference/react-dom/server/renderToReadableStream#rendering-a-react-tree-as-html-to-a-readable-web-stream
reactの仕様書に<!DOCTYPE html>を見つけたので、doctypeはこれで合ってる...?JSXとマークアップルールについては見つけられませんでした。

補足

特になし

juner

2024/10/22 06:58

そもそも jsx は xmlっぽいコンパイル言語で js に変換された結果はxmlではないのではないでしょうか？ https://new-jsx-transform.netlify.app/

seshimo

2024/10/22 07:13

junerさんコメントありがとうございます！！そうですよね...ということはdoctypeはXHTML用のやつでないといけないのでは...?と思ったのですが検索しても具体的な答えがまだ見つけられてないです...> <

juner

2024/10/22 08:02 編集

いや、最終出力は XML 文字列ではなく javascript による DOM 操作なので xml 関係無いですよね！と言っています。

otn

2024/10/22 09:09

最終的にブラウザが認識するのは、HJML(HTML5)なので、「ブラウザに送る1行目に何と書くか？」であれば、<!DOCTYPE html>しかあり得ないです。「ブラウザに送る1行目に何と書くか？」以外の質問ならどこに書く話かを明記しましょう。

utm.

2024/10/22 10:00

コメントをしている人達は、逆の話をしているのでは？質問者は<!DOCTYPE html>をJSXで記載するとエラーになるので、 <!DOCTYPE html />のような形にすると、エラーは回避できるが、HTML LSのルールと違いますよね？と聞いているかと思います。なので、jsxをコンパイルしてもxmlは関係ないとかは別の話では？また、質問文にHTML LSと断ってるのに、HTML5と断りをいれるのも客観的に見て、よく分からない対応に思えます。質問者さんも初心者さんなんですから、知識に自信があるのであればもっと丁寧に対応してあげたらどうですかね。

juner

2024/10/22 11:29

index.html にコンポーネントをマウントするので doctype を jsx側に書く意味はないですね。

otn

2024/10/22 13:54

> コメントをしている人達は、逆の話をしているのでは？失礼しました。コードが無いので「実現したいこと」をキーに見てたのですが、質問ポイントを間違えてた気がします。先のコメントは無視して下さい。整理すると、・DOCTYPE宣言はHTMLタグではない・HTMLタグしか書けないところにDOCTYPE宣言を書いたのでエラーになっているのでは？対策としては、・junerさんの上記コメント・utm.さんの回答

seshimo

2024/10/23 02:23

>最終出力は XML 文字列ではなく javascript による DOM 操作なので xml 関係無いですよね！ DOM操作で出力されるものは関係ないんですね!ありがとうございます！！

juner

2024/10/23 02:47 編集

> DOM操作で出力されるものは関係ない厳密に言うと既に document がある前提なので設定できないが正しいかもしれません。（既にある document に生成したDOMを挿入する形なので

seshimo

2024/10/23 03:03

>質問者は<!DOCTYPE html>をJSXで記載するとエラーになるので、 <!DOCTYPE html />のような形にすると、エラーは回避できるが、HTML LSのルールと違いますよね？と聞いているかと思います。質問の仕方が悪く申し訳ありません> < 例えばhtml5(htmlLS)では自己終了タグは<br>のように半角スペースとスラッシュがない書き方が正しいですが、JSXでは<br />と書かないとエラーになってしまうので、そうなるとdoctypeは<!DOCTYPE html>だからhtml5(htmlLS)的には正しくない書き方なのではないかと疑問に思いました。

seshimo

2024/10/23 03:14

>厳密に言うと既に document がある前提なので設定できないが正しいかもしれません。なるほど！！！！ありがとうございます！とても納得できました！！

seshimo

2024/10/23 03:21

>コードが無いので「実現したいこと」をキーに見てたのですが、質問ポイントを間違えてた気がします。先のコメントは無視して下さい。質問の仕方が悪く意図がうまく伝えられず申し訳ありませんでした> < 意図としては2個前のコメントに記載した事になります。

juner

2024/10/23 04:08

むしろコメントで固まったことを質問本文に反映した方があとで見やすいまであるのでやっていただきたいところ。

seshimo

2024/10/23 07:47

なるほど！ありがとうございます！！反映します！

行動規範の内容に同意します

回答3件

ベストアンサー

jsx というのは javascript の構文に xml っぽい構文を取り入れたjsにトランスパイル必須の言語です。

例えばこういうコードがあった場合

jsx
1<div></div>;
2<h1>hi</h1>;
3<Component/>;
4<Component {...props} />;
5<Component {...props} prop="a"/>;
6<Component prop="a" key="b" />;
7
8const profile = (
9  <>
10    <img src="avatar.png" className="profile" />
11    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
12  </>
13);

こういうコードになるので

js
1import { jsxs as _jsxs } from "react/jsx-runtime";
2import { Fragment as _Fragment } from "react/jsx-runtime";
3import { jsx as _jsx } from "react/jsx-runtime";
4
5// change the code here!!
6// runtime "automatic" adds imports, will be default in Babel 8
7// importSource defaults to "react"
8
9/*#__PURE__*/
10_jsx("div", {});
11
12/*#__PURE__*/
13_jsx("h1", {
14  children: "hi"
15});
16
17/*#__PURE__*/
18_jsx(Component, {});
19
20/*#__PURE__*/
21_jsx(Component, { ...props
22});
23
24/*#__PURE__*/
25_jsx(Component, { ...props,
26  prop: "a"
27});
28
29/*#__PURE__*/
30_jsx(Component, {
31  prop: "a"
32}, "b");
33
34const profile = /*#__PURE__*/_jsxs(_Fragment, {
35  children: [/*#__PURE__*/_jsx("img", {
36    src: "avatar.png",
37    className: "profile"
38  }), /*#__PURE__*/_jsx("h3", {
39    children: [user.firstName, user.lastName].join(" ")
40  })]
41});

最終結果には全くxml構文は出てきません。 javascript からの DOM操作です。
その為DOM操作のできる html であれば XHTML でも HTML でも問題無いかと思われます。

参考:
New JSX Transform Playground
https://new-jsx-transform.netlify.app/

追伸1

jsx は XML like な記法なので最終結果としては DOMを生成して既にある document にマウントするものでしかないので挿入先の document が SGML ベースとか XML ベースとかは DOMが使えるか使えないかでしかないので関係無いと思われます。（ html でも xhtml でも DOM は使える為）

追伸2

https://ja.react.dev/reference/react-dom/server/renderToReadableStream#rendering-a-react-tree-as-html-to-a-readable-web-stream
reactの仕様書に<!DOCTYPE html>を見つけたので、doctypeはこれで合ってる...?JSXとマークアップルールについては見つけられませんでした。

とありますが、その参照しているのは

React は doctype とあなたが指定した ブートストラップ <script> タグ を結果の HTML ストリームに注入します。
html
1<!DOCTYPE html>
2<html>
3 
4</html>
5<script src="/main.js" async=""></script>

と jsx ではなく html です。それはマウント先の html の話です。

投稿2024/10/22 08:06

編集2024/10/23 07:55

juner

総合スコア483

エラーになるなら回避するしかないのでは。
https://qiita.com/twinemarron/items/0021297065229f7e9109

追記。
シンプルに文字列として出す方法もあるようです。

jsx
1const App = () => (
2  <>
3    {"<!DOCTYPE html>"}
4    <html>
5      <head>
6        <title>My App</title>
7      </head>
8      <body>
9        <div id="root">Hello, World!</div>
10      </body>
11    </html>
12  </>
13);