ReactとJavaScriptの違いについて

Question

前提

Reactで実装したものをJavaScriptのみで書く場合どのくらいの記述量になるかのか知りたい

実装内容→選択された要素のみ色を変える処理
CSSはTailWindを使用

実現したいこと

以下Reactで実装したクラスの付け替えの処理をJavaScriptのみで書く場合どうすればいいでしょうか？

該当のソースコード

import React, { useState } from 'react'

export const Tab = () => {
  const [state, setState] = useState([
    { name: 'アイウエオ', active: true },
    { name: 'かきくけこ', active: false },
    { name: 'サシスセソ', active: false },
  ])

  const check = (value: React.MouseEvent<HTMLElement>) => {
    const selectState = state.map((data) => {
      return {
        name: data.name,
        active: value.currentTarget.dataset.id === data.name,
      }
    })
    setState(selectState)
  }

  // stateを更新する度にこの関数が呼ばれてclassを付け替える
  const chengeStyle = (value: boolean) => {
    return value ? 'bg-red-300' : 'bg-gray-200'
  }

  return (
    <ul>
      {state.map((data) => {
        return (
          <li
            key={data.name}
            onClick={check}
            className={chengeStyle(data.active)}
            data-id={data.name}
          >
            {data.name}
          </li>
        )
      })}
    </ul>
  )
}

疑問点

Reactの場合stateが更新される度にレンダリングが走るので定義した関数を再度呼び出すことが可能ですが、JavaScriptの場合どのようにして関数を任意のタイミングで複数回呼び出すのでしょうか？

Comments

[maisumakun]

Reactなしにしたくなった理由はどのようなものでしょうか？

[miyabi_pudding]

> Reactで実装したものをJavaScriptのみで書く場合どのくらいの記述量になるかのか知りたい

実際に自分でまずは書いてみてはいかがでしょうか。
（今回の要件なら少し行数は多くなるかもしれない）

Answer 1

• 元のコードのように JavaScript のオブジェクトの active プロパティを更新してそれに基づく画面を作る方針だと、おそらくJavaScript (Reactなし)で書いたほうが長くなります。
• active プロパティの更新をなしにして、アクティブ状態を<li>要素から取るように変更すると JavaScript (Reactなし)の方が短くなるかもしれません。
• HTMLの構造を変更して隠しラジオボタンと<label>のテクニックを使うとJavaScriptなしで同じような動作を実現できます。