【Reactを0から学ぶ】React で使う JSX とは何か

公開日:2018-11-01
最終更新:2018-11-01
※この記事は外部サイト(https://mittsu-blog.com/learn-react-on-0ba...)からのクロス投稿です

React は Facebook 謹製の JavaScript ライブラリです。

React で作られたアプリケーションは動作が素早く、小さなモジュールを作ることで保守管理性・再利用性を高められる、とされています。

また、Vue や Angular などと並んで人気が高いライブラリです。

今回から React を学んでいきます。まずはじめに JSX という特徴的な概念からスタートします。

JSX ってなんだ?

JSX の定義

JSX は React でアプリケーションを作るために生み出された JavaScript 文法のひとつです。

しかし、JavaScript の正しい文法ではなく、あくまで React の中で使うために用意された文法のため、そのままではブラウザは認識しません

そのため、開発者は Babel という JSX Compiler ( JSX を 素の JavaScript に変換するソフトウェア )を使って、ブラウザに配信する前に処理を施す必要があります。

JSX の使い方

JSX はこのような見た目をしています。

let url = "path/to/image";

const hello = <p>Hello world</p>;

const world = (
  <div className="class_name">
    <p>this is p tag!</p>
    <img src={url} />
  </div>
);

const wrong = (
  <p>this is p tag!</p>
  <img src={url} />
);

ほとんどふつうの HTML に見えますが JavaScript 扱いです(Markdown でうまく色付けされてないですごめんなさい)。

JSX と呼ばれる部分は

<p> Hello world </p>

のような HTML で表現された箇所です。
逆に言うと、それ以外の部分は素の JavaScript として解釈されます。

JSX は HTML タグで表現された部分なので、それを JavaScript の要素のひとつとみなして色々なことができます。

変数に代入する

まず変数に代入することができます。3行目がもっともシンプルな例になっています。

複数行になる JSX を変数に代入することもできます。このとき、全体を "()" で囲います。また、代入できる JSX はひとつのタグで全体が囲まれているものに限ります。

5行目の world のようにすれば正しく解釈されますが、12行目の wrong のようになっているとエラーが発生します。

JavaScript を使う

"{}" で囲まれた部分は素の JavaScript として解釈されます。

14行目の img タグには src={url} という記述がありますが、ここでは url という1行目で定義された変数を参照してくれています。

細かな規定

他にも、タグに class を付与するとき、冒頭でお話ししたコンパイルの関係から className という属性で指定しなければならないとか、

img や br などのタグを使う場合には、忘れずに閉じる "/" をつけなければならない、などの規定があります。

まとめ

JSX は React でアプリケーションを書くために作られた JavaScript の拡張文法

実際に配信する前に Babel という JSX コンパイラを使って処理しておく必要がある

変数への代入や JSX の中で JavaScript を実行させられるなど様々なことが柔軟にできる

次回は、React Component という React でアプリを作る際に中心的な役割を果たす概念について学びます。

https://mittsu-blog.com/learn-react-on-0base-react-component

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@edihasamの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする