Open3

りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React 基礎編】を読んだ記録

SaeSae

第 5 章 JSX で UI を表現する

5-1. なぜ React では JSX を使うのか

5-1-1. JSX はどのように変換されるか

JSXの由来JavaScript Syntax Extension、JavaScript XML
XMLライクに記述できるようにした構文拡張。

React17でJSXトランスフォームに改良があった。

新版のトランスフォームでは、React をインポートせず JSX を使用できます。
セットアップによっては、コンパイル後のバンドルサイズをわずかに改善できる可能性があります。
将来的に、React を学ぶために覚える必要がある概念の数を減らすような改善が可能になります。
https://ja.legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

以前のトランスフォームでは下記のコードが

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

下記のJavaScriptに裏側で変換されていた。

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

JSX が React.createElementへコンパイルされるためReactのimportが必要だったが、React17ではBabelやTypeScriptのようなコンパイラのみが使用することを意図した方針に変わる。

JSX を React.createElement に変換する代わりに、新しい JSX トランスフォームは、React パッケージのこれらの新しいエントリポイントから特別な関数を自動的にインポートし、それらを呼び出します。

function App() {
  return <h1>Hello World</h1>;
}

👇

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

5-1-3. なぜ React はテンプレートを使わないのか

AngularやVueはHTMLの記述を通常のJavaScriptから隔離しフレームワーク独自のテンプレート構文を埋め込む方法で実装する。
それらとは対照的にReacでは一貫してViewのレンダリングをJavaScriptの枠組みの中で行う。JSXも実際にはオブジェクトを生成するためのJavaScriptの式であるのがそれを表している。これの思想を採用した理由をReactの初期メンバーのPate Huntは下記の様に語っている。

  • Templates separate technologies, not concerns.
    （テンプレートは技術を分離するのであって、関心を分離しない）
  • Display logic and markup are inevitably tightly coupled.
    （表示のロジックとマークアップは否応なく密接に結びついてる）

ReactはJavaScriptファーストの思想を貫いたことでJavaScriptの高い表現力を活用して実装できる。

https://legacy.reactjs.org/blog/2013/06/05/why-react.html

5-2-3. React の組み込みコンポーネント

  • ユーザー定義のコンポーネント
    コンポーネントの名前を大文字から始める必要がある。JSXでは小文字で始めるコンポーネントを組み込みコンポーネントだと判断する。
  • 組み込みコンポーネント
    -TypeScript環境ではJSX.IntrinsicElementsにてHTMLタグ、SVGタグがキーとして型定義されている。
SaeSae

第 6 章 進化したビルドツールを活用する

6-1. コンパイラとモジュールバンドラ

6-1.1. フロントエンド開発に使われるコンパイラ

コンパイラ

ある言語で書かれたプログラムを低水準の言語に変換すること

6-1-2. モジュールバンドラの登場

bundle = 束にする
複数のモジュールに分割されたプログラムを1つにまとめること。それらを担うのがモジュールバンドラー。
現代のフロントエンドのモジュールバンドラーの役割は、モジュールをまとめるだけではなく、Minify(圧縮)やTree Shaking (参照されていなモジュールを検出しバンドル対象から除外し出力ファイルの容量を削減する)、画像データのインライン埋め込み、コード分割、キャッシュ管理なども行っている。