流暢なReact

第2章. JSX

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

第1章では、Reactの基礎とその起源について、当時人気のあった他のJavaScriptライブラリやフレームワークと比較しながら学んだ。Reactの真の価値提案と、なぜReactなのかを学んだ。

この章では、JSX について学ぶ。これはJavaScriptの構文拡張で、JavaScriptコード内にHTMLライクなコードを記述できるようにするものだ。Reactが2013年に発表されたとき、最初に注目され、酷評されたので、この本のこの早い段階で取り上げるのは理にかなっている。 この言語拡張を深く掘り下げ、どのように機能するのか、概念的にはどのように独自のコードを作ることができるのかを見ていこう。

議論を始めるにあたって、JSXが何の略かを理解しよう。JSがJavaScriptであることはすでに知っている。ということは、JSXはJavaScriptのバージョン10ということだろうか？Mac OS Xのようなものか？JS Xtraなのか？私たちはJSXのXが10やXtraを意味すると考えるかもしれない！しかし、JSXのXはJavaScript Syntax eXtensionの略である。JavaScript XMLと呼ばれることもある。

JavaScript XML？

ウェブに長く携わっている人なら、2000年代頃からAJAX（非同期JavaScriptとXML）という言葉を 、覚えているかもしれない。AJAXは本質的に、既存の技術を使用して、非同期でその場で更新される高度にインタラクティブなWebページを作成する新しい方法だった。

ブラウザでXMLHttpRequest のようなツールを使い、HTTP（HyperText Transfer Protocol）上で非同期（つまり非ブロッキング）リクエストを開始する。このリクエストに対するレスポンスは、伝統的にはXMLであった。今日では、代わりにJSON で応答することが多い。これは、fetch がXMLHTTPRequest を追い越した理由の一つであろう。XMLHttpRequest は名前付けにXMLを持つからである。

JSXはJavaScriptの構文拡張であり、開発者はJavaScriptコードの中でHTMLのようなコードを書くことができる。もともとはReactで使用するためにMeta によって開発されたが、その後他のライブラリやフレームワークでも採用されるようになった。JSXは独立した言語ではなく、コンパイラやトランスパイラによって通常のJavaScriptコードに変換される構文拡張である。JSXコードがコンパイルされると、プレーンなJavaScriptコードに変換される。これについては後で詳しく説明する。

JSXの構文はHTMLに似ているが、いくつかの重要な違いがある。 例えば、JSXは波括弧 {} を使って、HTMLのようなコードの中にJavaScript式を埋め込む。さらに、JSXの属性はHTMLの属性の代わりにキャメルケース で記述される：HTMLのonclick はJSXのonClick である。HTML要素は、カスタムJSX要素やコンポーネントのように、タイトル・ケース の代わりに小文字で記述される：div はHTML、DivはReactコンポーネントである。

さらに、JSXなしでReact アプリケーションを作成することは可能だが、コードが読みづらくなり、推論しづらくなり、保守しづらくなる傾向があることにも触れておく。それでも、やろうと ...