質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

ReactとJavaScriptの違いについて

shunta80
shunta80

総合スコア95

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

1クリップ

479閲覧

投稿2023/01/29 05:44

前提

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の場合どのようにして関数を任意のタイミングで複数回呼び出すのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2023/01/29 07:34

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

2023/01/29 08:25

> Reactで実装したものをJavaScriptのみで書く場合どのくらいの記述量になるかのか知りたい 実際に自分でまずは書いてみてはいかがでしょうか。 (今回の要件なら少し行数は多くなるかもしれない)

回答1

0

ベストアンサー

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

投稿2023/01/29 22:07

編集2023/01/29 22:09
int32_t

総合スコア17794

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。