EY-Office ブログ

Preactという軽量のReactサブセットのライブラリーがあることを知り少し使ってみました。Preactの特徴は、

• ライブラリーサイズがReactの1/10程度と小型です
• Reactのいくつかの機能が使えませんが、あまり困らない部分です
• HooksやContextなども使えます
• 日本語ドキュメントもあります

Preact対応

以下のような小さなReactアプリをPreactで動かしてみました。そのままでは動きませんでしたが僅かな変更で動きました。変更点は、

• importするのがreactではなくprecat
• 関数コンポーネントの型がReact.FCではなくFunctionalComponent
• useState等はpreact/hooksモジュールにある
• JSXのフラグメントが<>ではなくFragment（ホームページには<>が使われているので何らかな設定で使えるのかも？）

Reactでも、FunctionalComponentやFragmentは使えるの、これらを使っていればばimportの変更のみです。

import { FunctionalComponent, h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import './index.css'

export const App: FunctionalComponent = () => {
  const [human, setHuman] = useState<number>(0)
  const [computer, setComputer] = useState<number>(0)

  const pon = (humanHand: number) => {
    const computerHand = Math.floor(Math.random() * 3)
    setHuman(humanHand)
    setComputer(computerHand)
  }

  const judge = ():number =>  (computer - human + 3) % 3

  return (
    <Fragment>
      <h1>じゃんけん ポン！</h1>
      <JyankenBox actionPon={(te) => pon(te)} />
      <ScoreBox human={human} computer={computer} judgment={judge()} />
    </Fragment>
  )
}

type JyankenBoxProps = {
  actionPon: (humanHand: number) => void
}
const JyankenBox: FunctionalComponent<JyankenBoxProps> = (props) => {
  return (
    <div>
      <button onClick={() => props.actionPon(0)}>グー</button>
      <button onClick={() => props.actionPon(1)}>チョキ</button>
      <button onClick={() => props.actionPon(2)}>パー</button>
    </div>
  )
}

type ScoreBoxProps = {
  human: number
  computer: number
  judgment: number
}
const ScoreBox: FunctionalComponent<ScoreBoxProps> = (props) => {
  const teString = ["グー","チョキ", "パー"]
  const judgmentString = ["引き分け","勝ち", "負け"]
  return (
    <table>
      <tbody>
        <tr><th>あなた</th><td>{teString[props.human]}</td></tr>
        <tr><th>Computer</th><td>{teString[props.computer]}</td></tr>
        <tr><th>勝敗</th><td>{judgmentString[props.judgment]}</td></tr>
      </tbody>
    </table>
  )
}

本当に生成されたJSは小さいのか？

Preactの最大の特徴は、ライブラリーの小ささです。どれくらい小さいのでしょうか？
今回のアプリをbuildした結果は以下のような大きさになりました、Minifyは行われていますが圧縮は行ってない状態です。

React版はReactライブラリー等が132KbyteでJyankenアプリが4Kbyteで、Precat版ではPreactライブラリー＋Jyankenアプリのファイルが生成されていて16Kbyteでした。確かに小さいです！

• React

  132K	static/js/2.ea5614be.chunk.js
  4.0K	static/js/main.570b3956.chunk.js
  136K	total

• Preact

   16K bundle.096fc.esm.js

まとめ

Preactを使うと軽量なコードが生成できるので、SPAではなく従来のjQueryを使って作っていたような小規模のAjaxアプリを作るのに使えそうです。

そういえばjQueryの大きさはどれくらいだろうと思って調べてみたところ、最新のV3.5.1はMinify＋非圧縮版で88Kbyteもありました !!
jQueryにはAjax通信やユーティリティ的な関数も含まれているので単純には比較できませんが、いまどきのブラウザーでは不用なものばかりなのですね。

適当なきかいがあればPreactを使ってみたい気になりました。