Skip to main content

[reactjs] タグが付いた質問

Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。

82 未回答やベストアンサーなし質問
絞り込み
並べ替え
タグ付けされた
2
1 回答
98 閲覧数

Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。

学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。 // --snip-- export abstract class Piece { position: ...
user53251's user avatar
2
0 回答
215 閲覧数

prettierにて、printWidthを300くらいにしているにも関わらず改行される

react、typescript, jsxといった技術スタックです。 prettierにて、printWidthを300くらいにしているにも関わらず、 jsxが以下のようになってしまいます。 <text>foo<text/> ↓ <text> foo <text/> typescript自体のコードはしっかり300になるのですが、 ...
thesnowman's user avatar
2
1 回答
355 閲覧数

useSWRとuseMemoを組み合わせたい

next.jsでページネーションを実装しています。 「{page}ページ目/{max_page}ページ中」と表示したい箇所があります。 max_pageはSWRでデータ件数をフェッチしてきた後に Math.floor(データ件数/1ページあたりの表示件数)という風に計算しています。 max_pageについてはページネーション遷移しても値は変わらないので、固定化したいところですが、...
redara's user avatar
  • 67
2
0 回答
516 閲覧数

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 の後再度 ...
Y.F's user avatar
  • 21
1
0 回答
103 閲覧数

Firebaseのエラー: auth/admin-restricted-operation

Firebaseのメールとパスワードでログイン認証機能を実装しています。 なんとかログインできるようにはなったのですが、ログインできてもできなくても以下のエラーが出ます。何が悪いのかいまいちわからないのでご教授願います。 Firebase: This operation is restricted to administrators only. (auth/admin-restricted-...
とんすけ's user avatar
1
0 回答
257 閲覧数

TypeScriptでimportのパスが認識されない

以下のエラー対処法がわからず困っています。 技術スタックはReact、TypeScript、node.js MacでVScodeを使用しています。 Module not found: Error: Can't resolve '../src/router' in '/Users/sumple/test/js_taskList/frontend/src' 発生したタイミングが定かではないのですが、...
adsjrr_32lgdf's user avatar
1
0 回答
290 閲覧数

Reactのinputタグで一文字ずつ確定され「テスト」が「tえst」と入力される

Reactで下記のようなinputを作成し、入力値をオブジェクトの状態変数で管理しています。 ただ、inputタグに「テスト」と入力すると「tえst」と入力され、一文字入力するたびに確定されるためカタカナや漢字への変換ができません。 何か考えられる原因等ご存知の方がいらっしゃいましたら、ご教授いただけたら幸いです。 コード const [userParams, setUserParams] = ...
ryoya's user avatar
  • 21
1
0 回答
156 閲覧数

ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法

タイトルが分かりにくくて申し訳ありません。 useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。 useStateの更新はすぐに実行されないというのは知っています。 やりたいこと イベント内でuseStateの更新後の値をすぐに参照したいです。 概要 イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
Tatsuya's user avatar
  • 11
1
0 回答
270 閲覧数

Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。

Reactで作成したSPAをNginxでホスティングしたいです。 その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。 現在以下のように設定を行ったのですが、うまくいきません。 default.conf server { listen 80; location ...
sasa1009's user avatar
1
0 回答
423 閲覧数

Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0

データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。 Next13, prisma, postgreSQL, railway, tailwind で作りました。 レポジトリはこちらです。 https://github.com/satoshi02198/Task-maker ...
Satoshi Okazaki's user avatar
1
0 回答
105 閲覧数

redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか

現在Reactで開発をし、redux-toolkitでstate管理をしています。 そこで質問なのですが、例えば下記のようなsliceがあったとします。 sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています) testslice.js import { createSlice }...
carenm's user avatar
  • 21
1
0 回答
489 閲覧数

React+FastAPIでのCORSエラーの対処について

React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか? 特徴 1.POST送信時のみエラーが出る。(GETメソッドでは起きない。) 2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。 3....
doraemon's user avatar
1
1 回答
283 閲覧数

MUIのYearPickerのSelectedカラーを変更する方法はありますか?

muiのDatePicker APIを使用しています。 年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。 日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。 方法をご存知の方、よろしくお願いいたします。
teidlldga's user avatar
1
0 回答
501 閲覧数

Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない

前提 バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。 発生している問題・エラーメッセージ $ docker-compose exec ...
senseIY's user avatar
  • 51
1
0 回答
1,340 閲覧数

javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象

Reactを用いて以下のようなコンポーネントを作成しました。 文字が入力された際、それが数字であるなら半角化して反映します。 全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。 const InptArea:FC=()=>...
A.takagi's user avatar
1
0 回答
86 閲覧数

webRTCアプリがHeroku上で動作しない(simple-peer、socket.io)

ローカルでは動作するwebRTCアプリがHeroku上では動作せず困ってます。 My Heroku App: https://rgvc-client.herokuapp.com/ Github client: https://github.com/sayagit/RGVC-client Github server: https://github.com/sayagit/RGVC-server ...
sayaka's user avatar
  • 13
1
0 回答
83 閲覧数

react typescript materialUIを使ったスタイルの当て方

環境 ・reactとTypescriptを使っています ・デザインはmaterial UIを使っています。 ・スタイルlはstyled-componentsで当てています。 わからないこと Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。 しかし下記のようなエラーが出てしましました。 ...
aahhuhuhu's user avatar
  • 111
1
0 回答
662 閲覧数

react nativeでpretterとeslintを使用するときのコード整形について

解決したいこと 拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について typescriptで書くときに悩まされる下記のerrorについて 前提 react native を書いています。コード整形でpretterとeslintを使用しています。 問題 ここでうまく行かないことがあります。 ファイルの拡張子を.js でreact ...
asai's user avatar
  • 11
1
1 回答
321 閲覧数

react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う

reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。 NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、 入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。 App....
森口万太郎's user avatar
1
0 回答
1,336 閲覧数

react,material-uiのselectにて、labelと要素が重なって表示される

以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。 しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。 どのような観点で修正を実施すればよいかご教示いただければ幸いです。 componentWillMount() { navigator.mediaDevices.enumerateDevices()....
thamada's user avatar
  • 37
1
0 回答
113 閲覧数

オプティマイズリー (Optimizely A/B テスト)でのReact.jsの記述

ターゲットにしたいページが、React.jsで動いている為 JQueryやVanila JS での記述ではなく全てReact での記載でエレメントを書き換えたいと考えております。今まで、cssとjQueryでの記載しかしたことがなく、React.jsで全て動いているページをターゲットにしてオプティマイズリー上で上書きしたくてもできません。HTMLの削除、css追加なども全く効かない状態です。 ...
GoroMktn's user avatar
1
0 回答
319 閲覧数

Firebase Hostingでリダイレクト処理ができない

Firebase Hostingを用い、React(ルーティングにはreact-router-domを使用)にてWEBアプリを公開しようとしています。basic認証を行いたいのですが、index.htmlを起点としたSPAなので、cloud functionsを通してルーティング処理をしようとしていますが、うまくいきません。 実装の内容としては以下リンクにあるような「basic-auth-...
oke's user avatar
  • 53
1
1 回答
211 閲覧数

redux-form(v6)をtypescriptで使いたい

redux-formをtypescriptで利用しているかに質問です。 やりたいことは「redux-form(v6)をtypescriptで使いたい」です。 typescriptはv2を利用。 redux-formの型定義を@typesで取得するとv4のものが取得されます。 https://gist.github.com/rluiten/...
yonaka's user avatar
  • 11
0
1 回答
69 閲覧数

dnd-kitで複数エリアの双方向のDNDでドラッグエリアのコンテナIDが正しく取得できない

react18 typescript dnd-kit/core 6 複数コンテナで双方向のドラッグ&ドロップを作ろうとしています。 どこにドラッグされているかを判断するためhandleDracgOverで over.idまたはover.data.current.sortable.indexを取得したいと考えています。 しかしながら、特定条件の場合、...
Muramura Muramura's user avatar
0
0 回答
34 閲覧数

React.jsのアプリケーションにアイモバイル様の広告を統合する方法を教えていただけますでしょうか?

自社のReact.jsのアプリケーションにアイモバイル様の広告を統合しようとしているのですが、上手くプラットフォームに広告を表示することができません。 https://www.i-mobile.co.jp/index.html 以下は、アイモバイル上で作成したネイティブSP広告に関連するコードです。 ※コード scriptsAdded.current = true setTimeout(() =&...
Business Idea's user avatar
0
0 回答
52 閲覧数

Zodライブラリで型を作成したのだが思った挙動と異なる。

Zodライブラリ(https://www.npmjs.com/package/zod)で以下のようにバリデーションルールを作成し、それに基づく型を定義しました。 const hoge = z.object({ hoge: z .union([z.enum(["a", "b", "c"]), z.literal("&...
K S's user avatar
  • 1
0
0 回答
52 閲覧数

react用にyarnでpackage.jsonを作成したい

yarnでpackage.jsonを作成する際にエラーが出る 実行したコマンド yarn init -y 表示されたエラーメッセージ yarn init v1.22.22 warning The yes flag has been set. This will automatically answer yes to all questions, which may have security ...
mitu's user avatar
  • 21
0
0 回答
34 閲覧数

googlempasのfromLatLngToPointで期待する位置が取得できない

マーカーの下ににカスタムinfoを表示したいのですがfromLatLngToPointで取得できるx,y座標が期待値と異なります。 地図のサイズ・マーカーの位置を変更してみてもだいたい同じような座標が返却されてしまいます。 fromLatLngToPoint()...
user16768's user avatar
0
1 回答
142 閲覧数

VScodeでの.tsxの言語モードがプレーンテキストになってしまう

VScode上で一部の.tsxおよび.tsのファイルの言語モードがプレーンテキストになってしまう問題が発生しています。 自身の持っているデスクトップPCではそのような問題は起こらないのですがVScodeの設定を共有していないノートPCでは、WSL上、Windows上関わらず、.tsxおよび.tsの言語モードがプレーンテキストになってしまう上、VScodeの言語モードからtypescript、...
watabegg's user avatar
0
0 回答
14 閲覧数

ReactPixiでの動画ボリュームの変更の仕方

@pixi/reactを用いて動画の再生を試みています。 動画の再生と停止自体は下記のコードで動作しましたが、ボリューム変更の方法がわかりません。 const videoRef = useRef(null); ... if(...){ //when click "close" videoRef.current.destroy(true); // stop ...
stack_user's user avatar
0
0 回答
103 閲覧数

laravel + inertia.js + typescript + react + Material UI で、F5キーで画面ロードするとエラー(HTTP ERROR 500)になる場合があります。

laravel + inertia.js + typescript + react + Material UI で、F5キーで画面ロードするとエラー(HTTP ERROR 500)になる場合があります。 Code splittingでうまくいっていないと思いますが、エラーになる場合とエラーにならない場合の基準がわかりません。 https://inertiajs.com/code-...
n_k's user avatar
  • 85
0
0 回答
80 閲覧数

react-datesのDateRangePickerでminDate,minDateが効かない

minDate,minDateが効きません また、DateRangePickerを読み込むとwarningが発生するのですがこちらも解消できません。 DateRangePickerの開発が止まっているようなのですが、現在のバージョンと合わなくなってしまっているのでしょうか? 'use client' import moment from 'moment' import React, { ...
user16768's user avatar
0
0 回答
52 閲覧数

reactのuseContextについて

特に決まったシチュエーションも無いため画像なども添付することができないのですが、ご了承下さい。 react初心者ではありますが、コードのコンポーネントに分割した際に、それぞれのコンポーネントを連携させていく作業が複雑で訳が分からない。(例えば、constで新たな関数を定義するときなど) Udemyのreact入門編で学習をしているのですがなかなか心が折れてしまいます。 そこで何か、...
GEN KIMURA's user avatar
0
1 回答
245 閲覧数

Reactでpeformance.getEntriesByTypeを利用してブラウザの戻るボタンが押されたときにリロードしようと考えたが、前述の関数の戻り値が想定されるものと異なっている

下記のようにすると perfEntries に PerformanceNavigationTiming クラスのオブジェクトが格納されるはずだが、 PerformanceEntry クラスのオブジェクトが格納されてしまい、2行目で "type属性は存在しません" というエラーが出ています。 環境はTypeScript+Reactです。 const perfEntries = ...
JunkTok's user avatar
  • 11
0
1 回答
57 閲覧数

netlifyにCloud Firestoreの環境変数が反映されない

ReactとmicroCMSとCloud Firestoreを使用してcafeサイトを作りました。 netlifyに使用している環境変数を設定してデプロイをしましたが、microCMSの環境変数は反映されていますが、Cloud Firestoreの環境変数が反映されません。 コードはgithubにのせています。(https://github.com/ookuraseiya/cafe) ...
せいーや's user avatar
0
2 回答
233 閲覧数

React Routerを使ってログインボタンを押したら別のコンポーネント ページに遷移する書き方について教えて頂きませんか?

現在Reactを勉強中の者ですが最近Reactでログインページを作成して例えば登録ボタンを押すと別のコンポーネント ページに遷移できることを実行したいのに書き方が分からずエラーでつまずいてしまいます。 例えば Signin.jsに以下を定義してもページ遷移できずいろいろ調べても解決できずこまっています。 import { BrowserRouter as Router, Route, Routes ...
平田信一's user avatar
0
0 回答
37 閲覧数

Material TailwindのProの利用可能コンポーネント数

Material TailwindのProはどれくらいの数のコンポーネントを利用できますか?
Yodai's user avatar
  • 1
0
0 回答
91 閲覧数

Reactのstateが更新されない

やりたいこと Reactを使ったWebアプリのフロントエンド部分で、ユーザーがformに入力した値でstateを更新したい。 状況 ユーザーがformに入力してもsubmitを押してもstateが更新されない。 useStateを別のstateの中に入れたことが原因と推測していますが、解決策が分かりません。 ディレクトリ構成 front ├── node_modules │ └── ... ├─...
ryohassay's user avatar
0
0 回答
124 閲覧数

react,muiで汎用性の高いButton+Popoverを作りたい

react,typescriptでMUIを用いたソフトを開発しています。 その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。 普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して~となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。 ...
shino's user avatar
  • 11
0
1 回答
257 閲覧数

react 18.3.0 の `use` による再レンダリングが複数回発生してしまう

react 18.3.0 の use を使ったfetchとSuspenseを行いたいのですが、複数回(ときには無制限)の再レンダリングが発生してしまっています。 解決方法を教えてください。 react: 18.3.0-canary-3ff846d10-20230724 next: 13.4.12 以下のコードでトップページを開くと画面にDoneが表示されるまでの間、render ...
Isuke FUJIYAMA's user avatar
0
0 回答
192 閲覧数

GitHub Pagesで公開したサイトの404ページを自作のものに変更したい

基本的な方法は公式にある通りで、 https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site つまり公開したルートディレクトリに404.htmlがあればそれを404ページとして利用するらしいです。 ...
Lyydia Ekroos's user avatar
0
1 回答
100 閲覧数

Reactのフックについて

現在、Reactベースのアプリ開発をしています。 多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか? const ComponentA = () => { const [value, setValue] = ...
kuu13580's user avatar
0
0 回答
110 閲覧数

sendgridを利用したお問い合わせがvercelにデプロイすると送信されない

ローカルではメールが届いているが、デプロイして本番にあげた途端届かない事象が起きました。 vercelのログを見ると200は返してるので送信自体は成功しているっぽい。けど実際にメールが届かない... sendgridのActivity見ても反映されていない...basic認証かけてたせいかと思ったけど無くしても意味なく... 同じ現象に遭遇した方いませんか? 一応参考にしたサイト https://...
Dipitto's user avatar
0
2 回答
1,660 閲覧数

React のルーティング設定で真っ白な画面が表示されてしまう

Reactの画面遷移のためにルーティングを学習中です。 下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。 ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎 最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。 そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。 ...
tomo kuma's user avatar
0
1 回答
219 閲覧数

docker-composeで作成したReactアプリがlocalhost以外の任意のホスト名から接続できる。

create-react-appで作成されたReactのアプリに localhost:3000 と app.hoge.hoge:3000 というホスト名で同じページに接続出来ます。 reactアプリの環境変数HOSTやpacakege.json にホスト名を変更するような記述が見られないのにどうしてこのような動作をするのか不思議でたまりません。 ...
wataru's user avatar
  • 1,133
0
1 回答
440 閲覧数

Next.jsで上手くreact-draft-wysiwygが動かない

下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。 ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する 実現したいこと react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("&...
しゅんぺい's user avatar
0
0 回答
666 閲覧数

XAMPP環境でReactを使いたい

現在自分のローカルにXAMPPをインストールしており、C:\xampp\htdocs 配下にあるファイルがブラウザ上でhttp://localhost/ のURLで見れる状況です。 それとは別に ローカルで Create React App を使って、Reactが使える環境が用意できました。(npm startを実行するとブラウザ上でhttp://localhost:3000となる環境のことです。)...
carenm's user avatar
  • 21
0
0 回答
132 閲覧数

2カラム構成の場合のページ内スクロール

このようなライブラリを利用して、 ページ内スクロールを実現したいのですが、どれも動きません。 原因はHTMlが2カラム構成(それぞれスクロールが独立)しているためと思われます。 試しにこちらで試したところ、 右カラムの最下部にあるTOP1ボタンは動作しませんが、TOP2ボタンは動作しました。 このようなライブラリはターゲットがwindow.に固定されているのだと思いますが、 解決する方法、...
roki's user avatar
  • 29
0
0 回答
148 閲覧数

next.jsでfirebase認証のプロフィールを更新できない

firebaseの記事 のupdateProfileを使って、登録したnameを更新したいと考えています。 ですが、下記のエラーが出てしまいます。 Unhandled Runtime Error TypeError: Cannot destructure property 'displayName' of 'undefined' as it is undefined. Call Stack ...
しゅんぺい's user avatar
0
1 回答
221 閲覧数

ブラウザ、スマホアプリから利用できるサービスを作りたい

ブラウザ、スマホアプリから利用できるサービスを作りたい場合 SNSのようなサービスなのですが、 ブラウザ(Webアプリ)とスマホアプリ(iOS, Android)の両方から利用可能なサービスを開発したいと考えています。 スマホアプリはネイティブアプリにする予定です。ハイブリッドではありません。 イメージとしてはTwitterのようなものです。 Twitterもブラウザとアプリの両方がありますよね。 ...
ryo's user avatar
  • 13