Skip to main content

[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を取得したいと考えています。 しかしながら、特定条件の場合、...
Muramura Muramura's user avatar
0
0 回答
32 閲覧数

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

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

create-react-appを使用するのではなくReact フレームワークを使用してReactのプロジェクトをつくるとは?

React公式を参考に簡単なプロジェクトを作成してみようと思っています。 https://ja.react.dev/learn/start-a-new-react-project こちらを見ると「React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします」とあり、 create-react-app ...
kanko's user avatar
  • 927
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 回答
128 閲覧数

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

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

yarnをインストールしようとするとエラーが出力されます。しかし、yarn --versionというコマンドを打ち込むとバージョンが出力されます。

タイトルの通りになります。yarnをインストールしようとすると下記のようなエラーが出力されます。 私はReactのインストールのためにyarnをインストールしようとしていますが、 npm install --global yarn コマンドをターミナルに入力するとエラーが出ます。 しかし、yarnは yarn --version コマンドを打ち込むと 下記のようにバージョンが出力されます。 「1....
taisei's user avatar
  • 23
2
1 回答
95 閲覧数

ReduxのHooksのテストでrenderHook自体が「Invalid hook call.」というエラーが出て原因がわかりません

この質問はteratailでもポストしています https://teratail.com/questions/mfj85hj9a39su1 概要 クラスコンポーネントで使っていたReduxをhookで書き換えをしています。そこで次のように、Reduxのアクションをディスパッチしたかどうかをテストしたいと思っています(元々あったテストをhooksを使うように書き換えしています) ...
ゴンザレス's user avatar
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 ...
mitu's user avatar
  • 21
1
1 回答
97 閲覧数

useEffectを実行させたくない

機能概要 以下の機能をReactで作成しています。 詳細モーダルを開いた際にバックエンドからの取得データを表示したい 詳細モーダルでは「粗利」という項目があり「売り上げ」と「コスト」を入力すると自動計算されるようにしたい 困ってること 上記で、自動計算の値と違う粗利を保存したい際に、手入力でDBに保存しますが、...
ryoya's user avatar
  • 21
1
0 回答
102 閲覧数

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

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

reactで作成したアプリケーションをアップルストアを介さずに直接iPhoneにインストールすることは可能ですか?

reactを勉強中ですが、アップルストアを介さずに直接iPhoneにアプリケーションをインストールしたいのですが、何か方法はありますか?
ムナンチョ鈴木's user avatar
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' 発生したタイミングが定かではないのですが、...
adsjrr_32lgdf's user avatar
1
1 回答
267 閲覧数

本番環境でリクエストへのレスポンスが返ってこない

本番環境へnode.jsとreact.jsで構成されたアプリを載せたところ、フロントからリクエストは送れるものの、レスポンスがない状況です。 corsのアクセスが原因だと思いますが、エンドポイントは問題なく設定できていると思います。フロントエンドはvercelで、バックエンドはherokuにデプロイをしています。どのようにすればレスポンスを得られるでしょうか?...
Aki's user avatar
  • 11
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 回答
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-...
n_k's user avatar
  • 85
0
0 回答
78 閲覧数

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

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

reactのuseContextについて

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

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
1
1 回答
94 閲覧数

react クライアント側でパラメータを取得し、それをもとにサーバーにリクエストするのは冗長ですか?

タイトルだと分かりづらいという方が多いと思いますので説明します。 const [article, setArticle] = useState([]); const params = useParams().id; useEffect(() => { axios.get(`/api/article/${params}`).then((response) => { ...
apolli's user avatar
  • 13
1
0 回答
285 閲覧数

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

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

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 回答
89 閲覧数

Reactのstateが更新されない

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

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

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

nextjs上のサーバーサイドでsupabaseのデータをフェッチする方法について

supabase上にpostsというテーブルを作成し、3つデータを追加しました。 そのうえでsupabase上でpostsのデータをすべて取得したいと思い以下のコードを実行すると取得したデータが空になってしまします。 const { data: posts } = await supabase.from("posts").select("*"); ...
Y0J1R0's user avatar
  • 1
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 回答
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ページとして利用するらしいです。 ...
Lyydia Ekroos's user avatar
0
1 回答
883 閲覧数

reactにおけるprocessのエラー

現在,reactを用いて,Webサイト開発を行っているものです. コード内でnedbを用いてデータベースを構築しています.コマンドラインで,$ node "path名"として,実行すると可能なのですが,localhost:3000の方で見ると,以下のエラーが発生しています. Uncaught runtime errors: ERROR process is not ...
mksmkss's user avatar
0
1 回答
100 閲覧数

Reactのフックについて

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

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

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

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

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

webpackをesbuildに変更した時のreact-railsで実装しているReactの修正方法を教えていただきたいです。

実現したいこと react-railsを使って部分的に読み込んでいるReactを、esbuildに変更した時に正常に読み込めるようにしたい 前提 Rails6、webpacker、react-railsで実装していたシステムをRails7にアップデートすることになり、それに伴いwebpackerからesbuildに変更することになりました。 Reactの知識が乏しく、調べてもreact-...
maru_katy's user avatar
0
1 回答
45 閲覧数

DispatchでStoreに変数を作り、その変数をさまざまなコンポーネントで使用できるようにしたい。

実現したいこと Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。 前提 ユーザーがログインすると、下記のようなデータが取得できます。 Json { "hubs": [ "111.com", "222.com", "333.com",...
lion-react's user avatar
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 | |- ...
taddy's user avatar
  • 73
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 回答
421 閲覧数

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 回答
104 閲覧数

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 回答
485 閲覧数

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

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

Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?

実現したいこと Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。 キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
鉛筆と紙's user avatar
2
1 回答
1,051 閲覧数

react内のimg srcにてテキストと変数を連結したい。

以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
baseballjapan's user avatar
0
1 回答
74 閲覧数

Reactで既存の処理をカスタムフックに分離させる方法を知りたい

目的 作成したカウント機能を使ってカスタムフックの作り方を学びたい。 状況 現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。 次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。 聞きたいこと 下記のコードのカウントダウン機能・...
takuma's user avatar
  • 33
0
1 回答
717 閲覧数

React の datepicker で月の選択画面で数字表記にするには?

React-datepickerを使用して年月のみのカレンダーを実装中です。 月の部分が1月ならJan、2月ならFebというように表示されてしまっているのですが、月の部分を英語ではなく数字表記にしたいです。 どなたか方法をご存知でしたら教えていただきたいです。
taiko-tatsujin's user avatar
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/...
mkmk's user avatar
  • 21
0
2 回答
235 閲覧数

Reactのコンポーネントが制御か非制御かはどのようにして決まる?

Reactについて勉強中です。 Reactの制御コンポーネントと非制御コンポーネントについてわからない点があります。 Reactのあるコンポーネントが制御か非制御かはどのようにして決まるのでしょうか? 公式ドキュメントをみるとrefを使用するかどうかで決まるのかという印象を受けました。 他にも何か基準があれば教えていただきたいです。
carenm's user avatar
  • 21
1
1 回答
279 閲覧数

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

muiのDatePicker APIを使用しています。 年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。 日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。 方法をご存知の方、よろしくお願いいたします。
teidlldga's user avatar
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とも互換性がありそうですが、...
Kazk's user avatar
  • 13
0
2 回答
1,619 閲覧数

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

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