deve.K

エンジニアが未来を切り開く。

English

React JSXとは その構文の必要性


スポンサーリンク

f:id:dev04K:20211226230840j:plain

本日はJSX構文とはなんなのか?そしてなぜJSXを使用するのかを解説していきたいと思います。

当ブログの記事ではReactを学ぶ際のJSXの理解が難しいと感じる方々向けになりますのでご了承下さい。

React.jsのJSXとはなんですか?

JSXはJavaScriptXMLの略となり

Reactで使用される『XML / HTML』に似た構文となり、コンポーネント指向の開発に従います。

ECMAScript』ES6に基づくJavaScriptを拡張したものであり、XML / HTMLに似たテキストをJavaScript &Reactコードと共存できるようにしJSXを使用すると

ReactでHTMLの記述と追加する事が簡単になります。

この構文では、BabelのようなトランスパイラーがJavaScriptファイルで見つかったHTMLに似たテキストを解析しJavaScriptオブジェクトに変換する為に使用されます。

簡単に言ってしまえば

ブラウザはJSXをネイティブに理解しないため

JSXはHTMLのタグをReact要素に変換し HTMLをJavaScript内に入れることができます

HTMLとJavaScriptブレンドです

JSXは通常のJSではないことに注意してください。

ブラウザはJSXコードを含むJSファイルを実行させる事はできません。

scriptタグでReactを使用している場合は『Babel』を必ずプロジェクトに追加しなければいけません。

前の記事でも言ったのですが、JSXはHTMLに似ていますがまったく同じではありません。主な違いについてはこちらへ

React【基礎で絶対に欠かせないポイント】まとめ - deve.K

ReactでのDOM、ブラウザ描画はどうなっているのか気になった方はこちらへ

React 基礎 仮想DOM【Virtual DOM】の仕組み - deve.K

なぜJSXなのか?

JSXはReactの『要素』を生成し『マークアップ』と『ロジック』を別々のファイルに入れ、両方を含む『コンポーネント』と呼ばれる結合されたもので分離します。

なぜJSX構文を使用するかは、JSXを使用するとReactアプリケーションを簡単に作成できるからです。

ですが、必ずしもJSXを使用する必要性はありません。

必須ではないと言う事です。

JSX なしで React を使用するのは、貴方のビルド環境で JSX のコンパイル設定をしたくない時には非常に役立ちます。

ReactではJSXを使用する必要はないと言いましたがなぜ使用するのか

ほとんどの方々は、JavaScriptコード内で『UI』を操作するときに視覚的な補助として役立つと感じているからです。

ReactはJavaScriptの単なるライブラリなのでJSXとJSのどちらを選択したとしても、違いはありません。

ネットでの教材やYouTubeでの講座動画、様々なチュートリアルでファイルの拡張子が『.js』ファイルを使用する例が沢山あります。

Reactでのアプリケーションのエントリポイントは

通常ではファイルの拡張子が『◯◯◯.jsx』ではなく 『◯◯◯.js』です。

これは『◯◯◯.jsx』でも構いません。

つまりbabelのようなトランスパイラーがJSXである限りは、沢山のファイルをしっかり読み込んでくれる為、最終的にはファイルの拡張子はそれほど重要ではありません。

『◯◯◯.jsx』拡張子は大規模なプロジェクトでは、すべてのReactコンポーネントに『.jsx』拡張子を設定すると、プロジェクト全体でJavaScriptファイルに移動するのが容易になる為です。

先程もおっしゃいましたが、Reactでのコードを書く際、JSXは必須ではありませんが

公式ではJSX構文は強く推奨されています。

通常のJSよりJSXは視覚的な補助として役立ちます

Reactコミュニティの多くの開発者は、JSXの読みやすさには価値があると考えてる方々が多くいます。

そしてより有用なエラーおよび警告メッセージを表示できコードの保守は楽となります。

JSXなしでReactを使用することに興味がある方がいらっしゃると思いますので、そちらも近いうちに記事にしていきたいと思います。

最後まで読んで頂きありがとうございました。

ご不明な点がございましたら、コメント欄もしくはお問い合わせまでお知らせ下さいませ。

当ブログでの記事が貴方に役立つ情報になっている事を願います。

プライバシーポリシー