()を使った代入について

Question

###前提・実現したいこと
renderにHTMLを出力したい
JavaScriptの初歩的な質問なのだと思うのですが
()で代入した際の扱いがよく分からなかったのでご質問させて頂きました。

###発生している問題・エラーメッセージ

①狙い通りオブジェクト扱いとなりHTMLで test と表示される

render(){
    var txt = (<b>test</b>);
    return(
        {txt}
    )
}

②変数を挟むと文字列扱いとなり <b>text</b> と表示される

render(){
    var str1 = "<b>";
    var str2 = "test";
    var str3 = "</b>";
    var txt = (str1 + str2 + str3);
    return(
        {txt}
    )
}

①のように変数を挟んでもHTMLで出力を出来ないでしょうか？

モジュールを使ってrenderにHTMLを記述する方法があるのは
調べて分かったのですが、上記の方法で出来ないかと考えております。

分かりにくい質問で申し訳御座いませんがよろしくお願いします。

Answer 1

JSX表記は変換によりJavaScriptのコードになります。<〜>の表記は単純なHTMLのテキストではありません。

具体的には、

var txt = (<b>test</b>);

は

var txt = React.createElement(
  "b",
  null,
  "test"
);

となります。文字列とは別扱いであり、文字列を結合して作成できる物ではありません。どのように変換されるかはBabelのTry it outで簡単に確認できます。

ReactのJSX表記は「HTML風に書ける」だけであり、HTMLとは全く違う方法で構成される物ですので、同じように考えてはいけません。DOMを直接要素レベルで構成していく物であり、HTMLを文字列で作って行くという古くさい方法とは一線を画します。

Comments

[Point]

ご返信ありがとうございます！

丁寧なご説明大変感謝します。
どうやら（）はJavaScriptの簡単な代入方法ではなく、DOM要素を構成するような
関数（createElement）を省略した感じになってたって感じなんですね。

BabelのTry it outの情報もありがとうございます。

どうやら根本的な考え違いをしていたようで、JSX表記…もっと勉強せねば…。

ありがとうございました！

[raccy]

違います。()ではなく<>の効果です。()は単に全体が式として解釈されるように(余計な暗黙のセミコロンが入らないように)するためです。ですので、

var txt = <b>test</b>;

とかいても動きます。しかし、return文で返す場合などは

return
<b>test</b>;

だとreturnの所に暗黙のセミコロンが入ってうまくいかないため、

return (
<b>test</b>
);

とする必要があるというだけです。暗黙のセミコロンが入らず、式として曖昧なところが無ければ、()は不要です。

[Point]

度々も申し訳ございません…。感謝です。

（）は関数も何も関係なく、くくる為に使用してるだけって事なんですね。
勉強になります！Babelの変換後とごっちゃになってました。

自分でも意味を把握した上で（）無しの場合など色々試してみたいと思います。
ありがとうございまっす！

Answer 2

Chromeのコンソール上で試してみましたが

var txt = (<b>test</b>);
> VM43:1 Uncaught SyntaxError: Unexpected token <
var txt = "<b>test</b>";
> undefined
txt
> "<b>test</b>"

この時の()は特に意味がないので、"ダブルコーテーションでHTML出力したい文字列を囲んであげるだけで大丈夫です。

計算式での()は処理順序を分けたりする場合に使用します。

例)

v1 = 100;
v2 = 1;
v3 = 0;
result1 = (v1 + v2) * v3;
result2 = v1 + v2 * v3;

Comments

[Point]

ご返信ありがとうございます！感謝です！

ただやはり、私の説明が悪かったのか伝わりにくいようで…。
申し訳ないです。

var txt = (<b>test</b>);
で記述した場合は、正常にrenderで出力されるのはobjectとして扱われているからだと
勝手に考えております。初心者の為、ReactでBableを通してるのでコードを完全に追えないですが
console.logでtxtをtypeofで出力するとobjectと表示されます。

ご指摘の方法の
var txt = ”<b>test</b>”;
ですとstringとしてあつかわれてhtmlタグまで文字列として出力されてしまいます。

私も色々調べていたのですが、（）を用いた代入はJavaScript独特の代入かと思ってたのですが
React,ES6とかに限った事なのでしょうか…。
一応codepenで上記の代入式を記述したのですが、何もエラーが出なかったのでJavaScriptでは
そのような代入方法があるんだと思ってました。

おっしゃる通り、代入時の小括弧は順序を決める時に使うのが普通で上記の書き方って普通ではないですよね。Reactのコンポーネント周りなど、もう少し調べてみます。

[tonarino210]

React.jsというものについて知識が不足しておりました。申し訳ないです。
軽く調べたところ、React.jsを用いるとコード中にHTMLタグっぽいものを記述可能になるようです。

これを鑑みると、str1+str2+str3の部分では単に文字列の結合として扱われてるみたいです。
代入する際に「str1 = "<b>"」ではなく「str1 = (<b>)」のようにオブジェクトとして扱ってみてはどうでしょうか？

[tonarino210]

上記の方法もダメですね・・・
raccyさんから適切な回答をして頂けているのでそちらを参照してください。

[Point]

ご返信ありがとうございます！

又、私からご返信に気づくのが遅くなり、申し訳御座いません。

結局まだ、実現出来ていないのですが、突破口は見つかったのでちょっと自力で解決して解決方法に記載出来たらと考えております。
理解した上で色々やってみても中々上手くいかないもので、根底から考え方を変えないと
いけないようです。

色々、お調べ頂いたようでお手数おかけ致しまして申し訳ございません。
初めてのコメント嬉しかったです。ありがとうございました！