[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
244
質問
8
票
1
回答
4,340
閲覧数
仮想DOMを使うと早くなる理由がいまいちわかりません
実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、...
6
票
1
回答
167
閲覧数
static x = ( { y } ) => { ... }の仕組みについて
https://www.youtube.com/watch?v=JbaZs1dzsVo
上記react native参考動画の
static navigationOptions = ({navigation}) => {...}
の部分なのですが、navigationを引数に受け取れる仕組みが理解出来ません。
そもそも変数を{}で囲むとどういった動きをするのでしょうか。
...
6
票
1
回答
276
閲覧数
仮想DOMについての疑問
jQueryとかでDOMを操作すると、reactjs側で保持している仮想DOMと差が生じると思います。そうすると、レンダリング時に差分が反映され、jQueryとかで行った操作が消えてしまうような気がしてなりません。
大丈夫なんでしょうか?
5
票
1
回答
1,701
閲覧数
text/babel とはなんですか?
Reactのドキュメントを読み始めました。
Getting Started – React に
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
とあるので、「このHTMLファイル」...
5
票
1
回答
2,898
閲覧数
なぜReactを実行するときlocalhostのサーバーが必要ですか?
create-react-appのGetting Startをよんでいたところ、npm startでlocalhostサーバーが立ち上がるようでした
https://facebook.github.io/create-react-app/docs/getting-started
https://facebook.github.io/create-react-app/docs/deployment
...
4
票
1
回答
134
閲覧数
React で prop 受け渡しの shorthand はありますか?
例えば Component の extra という props を固定したコンポーネントを作るときに
const HogeComponent = props => <Component {...props} extra='hoge' />
と書けますが、以下のように省略して書く方法はありますか?
const HogeComponent = Component.bind({ ...
3
票
1
回答
1,699
閲覧数
React.DOM が undefined でエラーになる
基礎的なことを学びたいので、まずはJSX無しで動かしたいと思い、React.DOM.div を使用すると以下のエラーが出ます。
build.js:20123 Uncaught TypeError: Cannot read property 'div' of undefined
コード
const React = require('react');
// 略
const HelloWorld ...
3
票
1
回答
920
閲覧数
Java8のNashornでrequireしたい
現在React.jsを使用してアプリケーションを作成しています。
ブラウザ側ではwebpackを使用してコンポーネントをrequireして使用しています。
React.jsのサーバサイドレンダリングを使用してレスポンスを返したいと考えているのですが、Nashornにはrequireが存在しないようなので、https://github.com/nodyn/jvm-npm ...
2
票
1
回答
715
閲覧数
reactのチュートリアルはなぜポート番号を指定?
ポート番号指定について
reactチュートリアルのサーバサイドが分からないので教えてください。
・最終的に下記へアクセスして確認するみたいですが、なぜポート番号を指定しているのでしょうか?
And visit http://localhost:3000/.
・server.phpを見るとポート処理が書いてあるのですが、これは何のため?
・ないとセキュリティ的にマズい?
・...
2
票
1
回答
638
閲覧数
react内のimg srcにてテキストと変数を連結したい。
以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
2
票
3
回答
143
閲覧数
関数の引数内で実行される関数??
下記のコードの意味がよく分からないです。この strs は一体どこから来たのでしょうか?
setStreams(strs => {
strs[streamId].removed = true
return { ...strs }
})
これステートのStreamsを呼び出して渡しているんですね。
参照
https://github.com/yassun-youtube/nextjs-...
2
票
1
回答
3,497
閲覧数
React Hooksでは非同期処理はuseEffect内で行うことと言われていますが、必ずそうしなければならないのでしょうか?
useEffectを使用する理由としては下記があると思います。
①レンダリング後に処理を行うことができる
②useEffectの第2引数で実行タイミングを制御できる
③アンマウント時のキャンセル処理を設定できる
しかし、逆に言えば上記のいずれも必要ない場合はuseEffectを使用せずに非同期処理を実行してよいということでしょうか?
例えば、...
2
票
2
回答
930
閲覧数
@types/reactとreactのversionが違うと問題でしょうか
create react appで作られたversion 16のreact applicationにtypescriptを追加しています。
@types/reactと@types/react-domのversionについて、最新のv.18をインストールしたのですが、本体とversionが異なることが問題となるか教えていただきたいです。
2
票
1
回答
702
閲覧数
next.jsのAPI Routeの意義は?
現在、next.jsでSSRを利用した開発していますが、下記の疑問に回答いただけないでしょうか。
SSRを実装する中でgetServerSidePropsを記述しておくとサーバー側で処理が行われ、非同期にデータを取得して、取得データをpropsに突っ込めるということはわかりました。
getServerSidePropsのドキュメントを読むと注意書きに、...
2
票
1
回答
7,598
閲覧数
Reactでinput type="text"のvalueをボタンを押すことでリセットしたい。
Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。
下記は動作デモです。
demo
テキストフォームに「ok」を入力し「check」ボタンを押すことで"ok"というアラートが表示されます。
テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、"no"というアラートが表示されます。
デモにおいて、「clear」ボタンを押すことで、...
2
票
2
回答
2,616
閲覧数
ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい
実現したいこと
現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。
開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。
...
2
票
1
回答
822
閲覧数
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
生のJSのDOM操作がしんどいです。
下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
2
票
1
回答
3,301
閲覧数
es6のmodulesでglobalにimportとするベストプラクティスを知りたい
babelifyを利用してjsを実装しています。
その中で、reactやunderscore、jqueryといったライブラリを使用するとき、アプリケーション全体で使用することが多いと思います。
このようにグローバルで使用するものは、どう扱うのが適切でしょうか。
Reactで実装する場合、使用するファイルで都度、下記のようにimportしています。
import Reacr from '...
2
票
1
回答
540
閲覧数
Next.jsやGatsbyのSSGは何をしているのか?
Next.jsやGatsbyのSSGに関する私の認識が合っているかどうか、お伺いしたいです。
SSGすると静的サイトが出力できる、という話をあちらこちらで耳にします。
それで私は、SSGではReactを含まないピュアなHTMLが出力されるのだと思っていたのですが、最近これは間違っているのではないかと思うようになりました。
実際には
①ビルド時には通常のReactアプリケーションと、...
2
票
1
回答
568
閲覧数
TypeScriptのgenericsを使ったReactコードのコンパイルが通らなくて困っています
再現コードは最小限にシンプルにしたので、意味自体はありません。
interface TextProps { data: { text: string }; }
interface ObjProps { data: object; }
const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</...
2
票
1
回答
86
閲覧数
webpackのパッケージ依存について
こんにちは、初めまして。
今Reactで開発を始めようと環境を作っているところですが、
npmでwebpackをインストールするところでバージョン依存ではまっています。
最新の [email protected] を使いたいのですが、
インストールしようとすると以下が出ます。
webpack4.8.3 => UNMET PEER DEPENDENCY [email protected]
上記が出たので、
ajv@6....
2
票
1
回答
658
閲覧数
react nativeのwebviewでlocalのhtmlを読み込む方法を教えてください
<WebView url='./web/webview.html' style={{flex: 1}} />
上記のような形で表示したいのですが。。。
2
票
1
回答
3,113
閲覧数
bind(this)とは
React.jsのチュートリアル(https://facebook.github.io/react/docs/tutorial.html)をやっていた所、以下のようなコードが出てきました。
// tutorial13.js
var CommentBox = React.createClass({
getInitialState: function() {
return {data: [...
2
票
1
回答
97
閲覧数
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。
学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。
// --snip--
export abstract class Piece {
position: ...
2
票
0
回答
121
閲覧数
prettierにて、printWidthを300くらいにしているにも関わらず改行される
react、typescript, jsxといった技術スタックです。
prettierにて、printWidthを300くらいにしているにも関わらず、
jsxが以下のようになってしまいます。
<text>foo<text/>
↓
<text>
foo
<text/>
typescript自体のコードはしっかり300になるのですが、
...
2
票
1
回答
278
閲覧数
useSWRとuseMemoを組み合わせたい
next.jsでページネーションを実装しています。
「{page}ページ目/{max_page}ページ中」と表示したい箇所があります。
max_pageはSWRでデータ件数をフェッチしてきた後に Math.floor(データ件数/1ページあたりの表示件数)という風に計算しています。
max_pageについてはページネーション遷移しても値は変わらないので、固定化したいところですが、...
2
票
0
回答
385
閲覧数
React.jsをnpm startでブラウザに反映させていたのですが、誤ってcontrol + cをせずにVScodeごと切ってしまいました
React.jsをnpm startでブラウザに反映させていたのですが、誤ってcontrol + cをせずにVScodeごと切ってしまいました。
その後また別のReact.jsをnpm startしたら写真のようなエラーが発生しどのようにすれば消える(npm start出来る)かわかりません。
npm cache clean --force や rm -r node_modules の後再度 ...
2
票
1
回答
777
閲覧数
renderが2度呼ばれるため、rows.push()の際にundefinedエラーが出る
react.jsとjqueryでサーバーから複数のオブジェクトが入った配列を取得し、
全てのオブジェクトの値をHTMLに表示したいのですが、
ajaxで取得する前に一度renderが読まれてしまいます。
var test = React.createClass({
getInitialState: function() {
return {data: []};
},
...
1
票
1
回答
472
閲覧数
縦に積み上がる要素の削除したときに、下にガタっと落ちてしまうのを滑らかにアニメーションしたい
material-uiの下記リンクスナックバーのようなものを作成しようとしています。
https://material-ui.com/ja/components/snackbars/#complementary-projects
その際のアニメーションで、要素が削除されたときに縦に移動するアニメーションの実装方法がわからず困っています。
理想↓↓
現実↓↓ ...
1
票
2
回答
534
閲覧数
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる
Reactを始めたばかりで質問がおかしければ申し訳ございません
単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです
import React, { useState } from 'react'
import axios from 'axios';
const searchGoogleBooks = async (searchString: string) =&...
1
票
1
回答
775
閲覧数
typeやinterfaceを使用せず、複数ある引数に型を付与したい。
typeやinterfaceを使用せず、複数ある引数に型を付与しする方法をご教示いただけないでしょうか。
下記は子コンポーネントにstateとsetStateを渡しているデモです。
demo
デモでは子コンポーネントの引数の型はtypeで記述しています。
引数が複数の場合かつ少ない場合だとtypeやinterfaceで定義するのは冗長かと思い、...
1
票
2
回答
2,729
閲覧数
react functional component 再レンダーされない
react のhooksを使ってsetStateを呼びだしたときに、再レンダリングが走りません。
なぜでしょうか?
todoアプリのdeleteを押したときに、stateの値は更新されているようですが、再描画が走りません。
stateには配列を入れて、更新をしているはずなのですが。。
以下、コードです。
// app.txs
const App = () =>{
const [todo, ...
1
票
1
回答
1,267
閲覧数
ReactHooks 二次元配列のstateの更新による再レンダリングが行われない
下記のようなコンポーネントで board という二次元配列のstateを持っており、
それをArray.mapを二回使って描画しています。
クリック時にその座標の値を変更したく、handleClick でstateの更新をしていますが再描画されません。
setBoard 前後の console.log では newBoard,board 共にちゃんと更新されているのですが、...
1
票
1
回答
271
閲覧数
Reactのstateに格納するデータは表示に関係するものだけを格納するべきなのでしょうか?
現在Reactを使っているのですが、stateに格納するデータは表示に関係するものだけ入れるべきなのでしょうか?
なぜこのような質問をするかというと、私が調べた限りsetStateで値を設定した場合、再描画が走るという認識です。
であれば設計方針としては、描画に直接的に関係ないデータはstateに格納するのではなく、インスタンス変数などに格納するべきなのでしょうか?
...
1
票
1
回答
76
閲覧数
useEffectの挙動について
useEffectの挙動について質問させていただきます。
console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。
import { useEffect, useState } from "react";
type inputSetting = {
player : number;
wolves : number;
...
1
票
2
回答
505
閲覧数
オブジェクトが格納された配列の内、ボタンを押すことで任意のオブジェクトを配列の中で1つ前または1つ後ろに移動させたい
demo
↑
追加、削除、値の編集が可能な配列があります。
React.jsで実装しています。
Upボタンを押下で1つ前に、Downボタンを押下で1つ後ろに移動させたいです。
例えばリストが下記になっている場合、
・hoge
・fuga
fugaのUpボタン押下で下記の並び順に変更したいです。
・fuga
・hoge
コードは下記の通りです。
const rowdefaultItem = {
...
1
票
1
回答
726
閲覧数
umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法
React.js を用いて Web サイトを開発しています。
モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。
たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の ...
1
票
1
回答
1,305
閲覧数
Reactのイベントハンドラに引数を渡す場合について
質問
React公式ガイドの6.イベント処理の最後の項目に以下のようなコードがありました。
ループ内では、イベントハンドラに追加のパラメータを渡したくなることがよくあります。例えば、id という行の ID がある場合、以下のどちらでも動作します:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</...
1
票
1
回答
953
閲覧数
Reactにおけるファイル間の値のやり取り
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう!
を参考にTODOアプリを作成しようとしています。
以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。
よろしくお願いします。
Home.js
...
1
票
1
回答
380
閲覧数
React Hooksの繰り返し内での使用
React Hooksはifやforの内部では使用できないという制約があります。
そうすると、検索結果を一覧表示するようなテーブルの行の中ではReact Hooksを一切使用できないということになるのでしょうか。
テーブルの各行がコンポーネントになっている場合、各行に表示するデータおよびそれを更新するための関数を与えるためにはprops経由で渡す必要があるのでしょうか。
1
票
1
回答
178
閲覧数
発行されたActionをどうやって対応するReducerに渡しているのか
はじめて、質問を投稿させていただきます。
4月から新卒としてWeb系企業に勤めています。
幸運なことに新規案件に携わることができ、とても楽しくエンジニア生活をスタートさせることができました。
今現在はReactとReduxを使って開発を行っていますが、そこでどうしても理解できないことがありましたので、それをご質問させていただきたいです。
複数のActionと複数のReducerが存在する場合、...
1
票
1
回答
556
閲覧数
Gatsby, Stripe: 決済ボタン実装をしようとしたら 'Uncaught TypeError: Cannot read property 'configure' of undefined'と出る
Gatsby公式ドキュメントにて、ECサイト構築チュートリアルに沿って開発をしています。
ただ、checkout.jsをチュートリアルの通りに書くと、以下のエラーが出て、画面全体が真っ白になります。
Uncaught TypeError: Cannot read property 'configure' of undefined
The above error occurred in the &...
1
票
1
回答
166
閲覧数
ReactのRenderに利用したい関数が文字列になっている場合の呼出し方
React のRender処理で困っていることがあります。
func1という関数があり、renderする際に呼び出します(例: return (`<func1/>`))。
例えば、下記のようなJSONの値にあるfuncNameにある文字列から 実際の関数名としてrenderしたいのですが、どうすればよろしいでしょうか?
{funcName:"func1"}
上記の値だった場合、
...
1
票
1
回答
126
閲覧数
LinkedStateMixinでsetStateのコールバックを指定する方法はありますか?
React.jsのsetStateメソッドにコールバックを渡すと、Stateの更新が終わった時にそのコールバックを実行してくれます。
しかしsetStateを抽象化したLinkedStateMixinにはコールバックを指定する方法を見つけられませんでした。
どうにかしてLinkedStateMixinを利用しつつsetState後の処理を渡すことはできないでしょうか?
1
票
0
回答
58
閲覧数
ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法
タイトルが分かりにくくて申し訳ありません。
useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。
useStateの更新はすぐに実行されないというのは知っています。
やりたいこと
イベント内でuseStateの更新後の値をすぐに参照したいです。
概要
イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
1
票
0
回答
181
閲覧数
Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。
Reactで作成したSPAをNginxでホスティングしたいです。
その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。
現在以下のように設定を行ったのですが、うまくいきません。
default.conf
server {
listen 80;
location ...
1
票
0
回答
301
閲覧数
Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0
データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。
Next13, prisma, postgreSQL, railway, tailwind で作りました。
レポジトリはこちらです。
https://github.com/satoshi02198/Task-maker
...
1
票
0
回答
37
閲覧数
redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか
現在Reactで開発をし、redux-toolkitでstate管理をしています。
そこで質問なのですが、例えば下記のようなsliceがあったとします。
sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています)
testslice.js
import { createSlice }...
1
票
0
回答
328
閲覧数
React+FastAPIでのCORSエラーの対処について
React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか?
特徴
1.POST送信時のみエラーが出る。(GETメソッドでは起きない。)
2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。
3....
1
票
1
回答
123
閲覧数
MUIのYearPickerのSelectedカラーを変更する方法はありますか?
muiのDatePicker APIを使用しています。
年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。
日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。
方法をご存知の方、よろしくお願いいたします。