JSXをReactなしで使ってみた

いろいろ実験したレポジトリはこちら

シンプルなページ

できたバンドルはこちら

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My App</title>
        <script defer="defer" src="bundle.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
        <div id="root"></div>
    </body>
</html>

bundle.js

(()=>{
    "use strict";
    const e = (t,n)=>{
        Array.isArray(n) ? n.forEach((n=>e(t, n))) : ((e,t)=>{
            e.appendChild(t?.nodeType ? t : document.createTextNode(t))
        }
        )(t, n)
    }
      , t = (t,n)=>{
        const {children: r} = n;
        if ("function" == typeof t)
            return t(n, r);
        const o = document.createElement(t);
        return Object.entries(n || {}).forEach((([e,t])=>{
            e.startsWith("on") && e.toLowerCase()in window ? o.addEventListener(e.toLowerCase().substr(2), t) : o.setAttribute(e, t)
        }
        )),
        e(o, r),
        o
    }
      , n = ({children: e, onClick: n})=>t("button", {
        onClick: n,
        children: e
    });
    document.getElementById("root").appendChild(t((()=>t("div", {
        children: t(n, {
            onClick: ()=>alert(1),
            children: "Click 1"
        })
    })), {}))
}
)();

２つのファイルあわせて801バイトで収まりました！軽いですね。

GoogleのPageSpeed Insights だと100点です！

jsxのランタイムは参考URLからお借りしました。

jsx-runtime.js

const add = (parent, child) => {
  parent.appendChild(child?.nodeType ? child : document.createTextNode(child));
};

const appendChild = (parent, child) => {
  if (Array.isArray(child)) {
    child.forEach((nestedChild) => appendChild(parent, nestedChild));
  } else {
    add(parent, child);
  }
};

export const jsx = (tag, props) => {
  const { children } = props;
  if (typeof tag === "function") return tag(props, children);
  const element = document.createElement(tag);
  Object.entries(props || {}).forEach(([name, value]) => {
    if (name.startsWith("on") && name.toLowerCase() in window) {
      element.addEventListener(name.toLowerCase().substr(2), value);
    } else {
      element.setAttribute(name, value);
    }
  });
  appendChild(element, children);
  return element;
};

export const jsxs = jsx;

ちょっと複雑なページ

200件のTODOリストを表示するだけのページ。

pagespeedも問題なさそう。

import { Button } from "./Button";
import { todos } from "./data";

const App = () => {
  // 代入だと動かない。fetchしたものを代入するにはdocumentAPI使うしかない？
  // let todo = [];
  // fetch("https://jsonplaceholder.typicode.com/todos")
  //   .then(response => response.json())
  //   .then(json => {
  //     console.log(json);
  //     todo = json;
  //   })
  return (
    <div>
      <Button onClick={() => alert(1)}>Click 1</Button>
      {todos.length > 0 && <table>
        {todos.map((item) => {
          return <tr><td>{item.id}</td><td>{item.title}</td></tr>;
        })}
      </table>}
    </div>
  )
}

const rootElement = document.getElementById("root");
rootElement.appendChild(<App />);

export default App;

ただ fetch とかして見て動かす方法がない・・・？

既存データだけをいれる静的なページなら問題ないかも。
useState()とか代入する手段がわからなかった。

React

$ npx create-react-app react-app

Reactの一番シンプルな構成で作ったページ

buildフォルダのサイズは518kbでしたがパフォーマンスは満点でした。

ここからいろいろ追加したときにパフォーマンスが悪化するんですね。。。すべては人の手によるもの。

結論

518キロバイトが801バイトになるのでためしてみてもよいかも・・・？
setStateとかが使えなくなるので本当に静的なページなら問題ないと思うが、reactとreact-staticとかで吐き出すとかでも軽いと思うし、なんならpreactとか使ってもよいかもしれない。

参考資料

import { Page } from '@nakedjsx/core/page'

上記でSimpleにかけそうと思ったが結局トランスパイルやバンドル周り云々をしないとQiita用にソースコードのアップロード(GitHub Pages)できなさそうだったので参考だけに使った

babel/webpack周りはこの資料を参考にした。

react/jsx-runtimeの周りの理解は旧公式ドキュメントを参考にした。

素のReactにWebpack導入するやり方の参考

ReactなしでJSXを使う / JSX without React

JSXをReactなしで使ってみた

シンプルなページ

ちょっと複雑なページ

React

結論

参考資料