[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
249
件の質問
0
票
1
回答
63
閲覧数
dnd-kitで複数エリアの双方向のDNDでドラッグエリアのコンテナIDが正しく取得できない
react18
typescript
dnd-kit/core 6
複数コンテナで双方向のドラッグ&ドロップを作ろうとしています。
どこにドラッグされているかを判断するためhandleDracgOverで over.idまたはover.data.current.sortable.indexを取得したいと考えています。
しかしながら、特定条件の場合、...
0
票
0
回答
32
閲覧数
React.jsのアプリケーションにアイモバイル様の広告を統合する方法を教えていただけますでしょうか?
自社のReact.jsのアプリケーションにアイモバイル様の広告を統合しようとしているのですが、上手くプラットフォームに広告を表示することができません。
https://www.i-mobile.co.jp/index.html
以下は、アイモバイル上で作成したネイティブSP広告に関連するコードです。
※コード
scriptsAdded.current = true
setTimeout(() =&...
1
票
1
回答
64
閲覧数
create-react-appを使用するのではなくReact フレームワークを使用してReactのプロジェクトをつくるとは?
React公式を参考に簡単なプロジェクトを作成してみようと思っています。
https://ja.react.dev/learn/start-a-new-react-project
こちらを見ると「React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします」とあり、 create-react-app ...
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("&...
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 ...
0
票
0
回答
34
閲覧数
googlempasのfromLatLngToPointで期待する位置が取得できない
マーカーの下ににカスタムinfoを表示したいのですがfromLatLngToPointで取得できるx,y座標が期待値と異なります。
地図のサイズ・マーカーの位置を変更してみてもだいたい同じような座標が返却されてしまいます。
fromLatLngToPoint()...
0
票
1
回答
128
閲覧数
VScodeでの.tsxの言語モードがプレーンテキストになってしまう
VScode上で一部の.tsxおよび.tsのファイルの言語モードがプレーンテキストになってしまう問題が発生しています。
自身の持っているデスクトップPCではそのような問題は起こらないのですがVScodeの設定を共有していないノートPCでは、WSL上、Windows上関わらず、.tsxおよび.tsの言語モードがプレーンテキストになってしまう上、VScodeの言語モードからtypescript、...
0
票
1
回答
187
閲覧数
yarnをインストールしようとするとエラーが出力されます。しかし、yarn --versionというコマンドを打ち込むとバージョンが出力されます。
タイトルの通りになります。yarnをインストールしようとすると下記のようなエラーが出力されます。
私はReactのインストールのためにyarnをインストールしようとしていますが、
npm install --global yarn コマンドをターミナルに入力するとエラーが出ます。
しかし、yarnは yarn --version コマンドを打ち込むと
下記のようにバージョンが出力されます。
「1....
2
票
1
回答
95
閲覧数
ReduxのHooksのテストでrenderHook自体が「Invalid hook call.」というエラーが出て原因がわかりません
この質問はteratailでもポストしています
https://teratail.com/questions/mfj85hj9a39su1
概要
クラスコンポーネントで使っていたReduxをhookで書き換えをしています。そこで次のように、Reduxのアクションをディスパッチしたかどうかをテストしたいと思っています(元々あったテストをhooksを使うように書き換えしています)
...
1
票
1
回答
262
閲覧数
webアプリの通信をhttps化したい
ローカルの開発環境でwebアプリを作成しているが,デプロイした時にも通信がhttpsになるような環境を作りたい
例)
アプリ開発環境
言語:react,typescript
パッケージバージョン管理:node.js
webAPI:react-speech-recognition
言語等使用バージョン
react:18.3.1
typescript:5.4.5
node:20.12.8
npm ...
1
票
1
回答
97
閲覧数
useEffectを実行させたくない
機能概要
以下の機能をReactで作成しています。
詳細モーダルを開いた際にバックエンドからの取得データを表示したい
詳細モーダルでは「粗利」という項目があり「売り上げ」と「コスト」を入力すると自動計算されるようにしたい
困ってること
上記で、自動計算の値と違う粗利を保存したい際に、手入力でDBに保存しますが、...
1
票
0
回答
102
閲覧数
Firebaseのエラー: auth/admin-restricted-operation
Firebaseのメールとパスワードでログイン認証機能を実装しています。
なんとかログインできるようにはなったのですが、ログインできてもできなくても以下のエラーが出ます。何が悪いのかいまいちわからないのでご教授願います。
Firebase: This operation is restricted to administrators only. (auth/admin-restricted-...
0
票
1
回答
186
閲覧数
reactで作成したアプリケーションをアップルストアを介さずに直接iPhoneにインストールすることは可能ですか?
reactを勉強中ですが、アップルストアを介さずに直接iPhoneにアプリケーションをインストールしたいのですが、何か方法はありますか?
1
票
0
回答
253
閲覧数
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'
発生したタイミングが定かではないのですが、...
1
票
1
回答
267
閲覧数
本番環境でリクエストへのレスポンスが返ってこない
本番環境へnode.jsとreact.jsで構成されたアプリを載せたところ、フロントからリクエストは送れるものの、レスポンスがない状況です。
corsのアクセスが原因だと思いますが、エンドポイントは問題なく設定できていると思います。フロントエンドはvercelで、バックエンドはherokuにデプロイをしています。どのようにすればレスポンスを得られるでしょうか?...
0
票
0
回答
14
閲覧数
ReactPixiでの動画ボリュームの変更の仕方
@pixi/reactを用いて動画の再生を試みています。
動画の再生と停止自体は下記のコードで動作しましたが、ボリューム変更の方法がわかりません。
const videoRef = useRef(null);
...
if(...){ //when click "close"
videoRef.current.destroy(true); // stop ...
0
票
0
回答
102
閲覧数
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-...
0
票
0
回答
78
閲覧数
react-datesのDateRangePickerでminDate,minDateが効かない
minDate,minDateが効きません
また、DateRangePickerを読み込むとwarningが発生するのですがこちらも解消できません。
DateRangePickerの開発が止まっているようなのですが、現在のバージョンと合わなくなってしまっているのでしょうか?
'use client'
import moment from 'moment'
import React, { ...
0
票
0
回答
51
閲覧数
reactのuseContextについて
特に決まったシチュエーションも無いため画像なども添付することができないのですが、ご了承下さい。
react初心者ではありますが、コードのコンポーネントに分割した際に、それぞれのコンポーネントを連携させていく作業が複雑で訳が分からない。(例えば、constで新たな関数を定義するときなど)
Udemyのreact入門編で学習をしているのですがなかなか心が折れてしまいます。
そこで何か、...
0
票
1
回答
237
閲覧数
Reactでpeformance.getEntriesByTypeを利用してブラウザの戻るボタンが押されたときにリロードしようと考えたが、前述の関数の戻り値が想定されるものと異なっている
下記のようにすると perfEntries に PerformanceNavigationTiming クラスのオブジェクトが格納されるはずだが、 PerformanceEntry クラスのオブジェクトが格納されてしまい、2行目で "type属性は存在しません" というエラーが出ています。
環境はTypeScript+Reactです。
const perfEntries = ...
0
票
1
回答
57
閲覧数
netlifyにCloud Firestoreの環境変数が反映されない
ReactとmicroCMSとCloud Firestoreを使用してcafeサイトを作りました。 netlifyに使用している環境変数を設定してデプロイをしましたが、microCMSの環境変数は反映されていますが、Cloud Firestoreの環境変数が反映されません。
コードはgithubにのせています。(https://github.com/ookuraseiya/cafe)
...
1
票
1
回答
94
閲覧数
react クライアント側でパラメータを取得し、それをもとにサーバーにリクエストするのは冗長ですか?
タイトルだと分かりづらいという方が多いと思いますので説明します。
const [article, setArticle] = useState([]);
const params = useParams().id;
useEffect(() => {
axios.get(`/api/article/${params}`).then((response) => {
...
1
票
0
回答
285
閲覧数
Reactのinputタグで一文字ずつ確定され「テスト」が「tえst」と入力される
Reactで下記のようなinputを作成し、入力値をオブジェクトの状態変数で管理しています。
ただ、inputタグに「テスト」と入力すると「tえst」と入力され、一文字入力するたびに確定されるためカタカナや漢字への変換ができません。
何か考えられる原因等ご存知の方がいらっしゃいましたら、ご教授いただけたら幸いです。
コード
const [userParams, setUserParams] =
...
0
票
2
回答
230
閲覧数
React Routerを使ってログインボタンを押したら別のコンポーネント ページに遷移する書き方について教えて頂きませんか?
現在Reactを勉強中の者ですが最近Reactでログインページを作成して例えば登録ボタンを押すと別のコンポーネント
ページに遷移できることを実行したいのに書き方が分からずエラーでつまずいてしまいます。
例えば Signin.jsに以下を定義してもページ遷移できずいろいろ調べても解決できずこまっています。
import { BrowserRouter as Router, Route, Routes ...
0
票
0
回答
37
閲覧数
Material TailwindのProの利用可能コンポーネント数
Material TailwindのProはどれくらいの数のコンポーネントを利用できますか?
0
票
0
回答
89
閲覧数
Reactのstateが更新されない
やりたいこと
Reactを使ったWebアプリのフロントエンド部分で、ユーザーがformに入力した値でstateを更新したい。
状況
ユーザーがformに入力してもsubmitを押してもstateが更新されない。
useStateを別のstateの中に入れたことが原因と推測していますが、解決策が分かりません。
ディレクトリ構成
front
├── node_modules
│ └── ...
├─...
0
票
0
回答
122
閲覧数
react,muiで汎用性の高いButton+Popoverを作りたい
react,typescriptでMUIを用いたソフトを開発しています。
その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。
普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して~となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。
...
0
票
0
回答
120
閲覧数
nextjs上のサーバーサイドでsupabaseのデータをフェッチする方法について
supabase上にpostsというテーブルを作成し、3つデータを追加しました。
そのうえでsupabase上でpostsのデータをすべて取得したいと思い以下のコードを実行すると取得したデータが空になってしまします。
const { data: posts } = await supabase.from("posts").select("*");
...
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 ...
0
票
0
回答
190
閲覧数
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ページとして利用するらしいです。
...
0
票
1
回答
883
閲覧数
reactにおけるprocessのエラー
現在,reactを用いて,Webサイト開発を行っているものです.
コード内でnedbを用いてデータベースを構築しています.コマンドラインで,$ node "path名"として,実行すると可能なのですが,localhost:3000の方で見ると,以下のエラーが発生しています.
Uncaught runtime errors:
ERROR
process is not ...
0
票
1
回答
100
閲覧数
Reactのフックについて
現在、Reactベースのアプリ開発をしています。
多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか?
const ComponentA = () => {
const [value, setValue] = ...
1
票
0
回答
154
閲覧数
ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法
タイトルが分かりにくくて申し訳ありません。
useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。
useStateの更新はすぐに実行されないというのは知っています。
やりたいこと
イベント内でuseStateの更新後の値をすぐに参照したいです。
概要
イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
0
票
0
回答
109
閲覧数
sendgridを利用したお問い合わせがvercelにデプロイすると送信されない
ローカルではメールが届いているが、デプロイして本番にあげた途端届かない事象が起きました。
vercelのログを見ると200は返してるので送信自体は成功しているっぽい。けど実際にメールが届かない...
sendgridのActivity見ても反映されていない...basic認証かけてたせいかと思ったけど無くしても意味なく...
同じ現象に遭遇した方いませんか?
一応参考にしたサイト
https://...
0
票
1
回答
284
閲覧数
webpackをesbuildに変更した時のreact-railsで実装しているReactの修正方法を教えていただきたいです。
実現したいこと
react-railsを使って部分的に読み込んでいるReactを、esbuildに変更した時に正常に読み込めるようにしたい
前提
Rails6、webpacker、react-railsで実装していたシステムをRails7にアップデートすることになり、それに伴いwebpackerからesbuildに変更することになりました。
Reactの知識が乏しく、調べてもreact-...
0
票
1
回答
45
閲覧数
DispatchでStoreに変数を作り、その変数をさまざまなコンポーネントで使用できるようにしたい。
実現したいこと
Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。
前提
ユーザーがログインすると、下記のようなデータが取得できます。
Json
{
"hubs": [
"111.com",
"222.com",
"333.com",...
0
票
1
回答
186
閲覧数
GitHub ActionsによるRSpecテストで発生する「undefined method `now' for nil:NilClass」エラーを解決したい。
現在、バック(Rails API)とフロント(react)を分けてSPA開発を行っており、下記がディレクトリ構成になります。
ディレクトリ構成
.
|- api(docker)
| |- .github/workflows/github-action.yml
| |- config/database.yml.ci
| |- Gemfile
| |- Gemfile.lock
| |- ...
1
票
0
回答
270
閲覧数
Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。
Reactで作成したSPAをNginxでホスティングしたいです。
その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。
現在以下のように設定を行ったのですが、うまくいきません。
default.conf
server {
listen 80;
location ...
1
票
0
回答
421
閲覧数
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
回答
104
閲覧数
redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか
現在Reactで開発をし、redux-toolkitでstate管理をしています。
そこで質問なのですが、例えば下記のようなsliceがあったとします。
sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています)
testslice.js
import { createSlice }...
1
票
0
回答
485
閲覧数
React+FastAPIでのCORSエラーの対処について
React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか?
特徴
1.POST送信時のみエラーが出る。(GETメソッドでは起きない。)
2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。
3....
0
票
1
回答
63
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
2
票
1
回答
1,051
閲覧数
react内のimg srcにてテキストと変数を連結したい。
以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
0
票
1
回答
74
閲覧数
Reactで既存の処理をカスタムフックに分離させる方法を知りたい
目的
作成したカウント機能を使ってカスタムフックの作り方を学びたい。
状況
現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。
次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。
聞きたいこと
下記のコードのカウントダウン機能・...
0
票
1
回答
717
閲覧数
React の datepicker で月の選択画面で数字表記にするには?
React-datepickerを使用して年月のみのカレンダーを実装中です。
月の部分が1月ならJan、2月ならFebというように表示されてしまっているのですが、月の部分を英語ではなく数字表記にしたいです。
どなたか方法をご存知でしたら教えていただきたいです。
0
票
1
回答
708
閲覧数
yarn dev が実行されない
Couldn't find a package.json fileと表示される
study-react % yarn dev
yarn run v1.22.19
error Couldn't find a package.json file in "/Users/kazu/study-react"
info Visit https://yarnpkg.com/en/docs/...
0
票
2
回答
235
閲覧数
Reactのコンポーネントが制御か非制御かはどのようにして決まる?
Reactについて勉強中です。
Reactの制御コンポーネントと非制御コンポーネントについてわからない点があります。
Reactのあるコンポーネントが制御か非制御かはどのようにして決まるのでしょうか?
公式ドキュメントをみるとrefを使用するかどうかで決まるのかという印象を受けました。
他にも何か基準があれば教えていただきたいです。
1
票
1
回答
279
閲覧数
MUIのYearPickerのSelectedカラーを変更する方法はありますか?
muiのDatePicker APIを使用しています。
年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。
日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。
方法をご存知の方、よろしくお願いいたします。
1
票
1
回答
542
閲覧数
rails, react-playerとhls.jsを用いてHLS再生の実装をしたい
バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。
現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。
react-playerはhls.jsとも互換性がありそうですが、...
0
票
2
回答
1,619
閲覧数
React のルーティング設定で真っ白な画面が表示されてしまう
Reactの画面遷移のためにルーティングを学習中です。
下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。
ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎
最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。
そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。
...