[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
248
質問
0
票
0
回答
43
閲覧数
React+FastAPIでのCORSエラーの対処について
React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか?
特徴
1.POST送信時のみエラーが出る。(GETメソッドでは起きない。)
2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。
3....
0
票
0
回答
24
閲覧数
Reactでロードした後、Firebase/Firestore の情報を表示する実装方法がわからない
ReactでTrello風アプリの実装をしています。
ロードした後、Firebase/Firestore の情報を表示する実装方法がわからない為ご協力頂きたいです。
参考にした動画:
ReactでTrello風タスク管理アプリの作り方【Reactアプリ開発】 (YouTube)
現時点で実装済みの内容
・ドラッグ&ドロップの実装
・タスクの追加・削除
・タスクカードの追加・削除
・...
0
票
0
回答
18
閲覧数
React router v6 useLocation stateの保存について
useNavigateとuseLocationで、一度発行したapiの情報を保存して、一度取ってきたことのあるapiの情報であれば、apiから取得せず保管されているものを利用するということを実現したいです。
0
票
0
回答
23
閲覧数
redux-toolkitのextraReducersでaction.payloadのprepareをするにはどうしたらよいか
今、Reactで開発をしており、そのステート管理としてredux-toolkitを使用しております。
下記は自分が作成しているsliceですが、下記のようにprepareで指定すれば、reducersのaction.payloadをカスタマイズできるところまでは理解しております。
しかし、非同期で通信し、その返却値であるaction.payloadをカスタマイズしたい場合、...
0
票
1
回答
43
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
-1
票
0
回答
68
閲覧数
Marvel.comのAPIを呼び出したい
実現したいこと
Marvel .comのAPIを呼び出し、キャラクターのJSONデータを取得したいです
(勉強を始めたばかりで、まだこの他にAPIを取得する経験をしたことがありません)
試したこと
https://developer.marvel.com/documentation/getting_started
に従って、まずはアカウントとAPI KEYを発行しました。
https://...
2
票
1
回答
106
閲覧数
react内のimg srcにてテキストと変数を連結したい。
以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
0
票
1
回答
42
閲覧数
Reactで既存の処理をカスタムフックに分離させる方法を知りたい
目的
作成したカウント機能を使ってカスタムフックの作り方を学びたい。
状況
現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。
次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。
聞きたいこと
下記のコードのカウントダウン機能・...
-1
票
0
回答
13
閲覧数
Materialiconをクリックしてポップアップを地図上(mapbox)に表示させたい
function App() {
const handleMarkerClick = (id) =>{
setCurrentPlaceId(id);
}
const [pins,setPins] = useState([]) //データ取得、マーカー表示
const [currentPlaceId,setCurrentPlaceId] = ...
0
票
0
回答
30
閲覧数
ReactPlayer(hls.js)でHLS配信を実現 CloudFrontエラー「The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'」
ReactPlayer(hls.js)を用いて、HLS配信を行おうと考えています。
HLS配信を行う為に必要なS3やCloudFrontの設定は一通りしたつもりですが、動画配信画面でエラーが出ています。
Access to XMLHttpRequest at 'https://cdn.hogehoge.com/movies/hogehoge.m3u8' from origin 'https://...
0
票
0
回答
41
閲覧数
githubからcloneしたreactプロジェクトでnpm startができない。
環境
ProductName: macOS
ProductVersion: 12.6.1
BuildVersion: 21G217
node: v19.3.0
npm: 9.2.0
前提
現在、reactの学習を始めたプログラミング初学者です。
課題
create-react-appで作成したreactのプロジェクトをgithubで管理していました。
...
0
票
0
回答
28
閲覧数
KeyOfを使ったInterfaceの複数の実装
export interface Alarm {
shopNumber?: number;
shopName?: string;
daiNo?: number;
errorCode?: number;
errorContents?: string;
occurrenceDateTime?: string;
};
export interface ...
0
票
0
回答
56
閲覧数
直接importしたjsonはサーバ・フロント間でどのように扱われますか?
Next.jsを用いてフロント開発を行っております。
ホスティング先はVercelを用いています。
下記コードのように、表示したいデータが詰まったjsonファイルをimportした時、
サーバ・フロント間での扱われ方、パフォーマンスに関する認識について質問させて下さい。
import datalist from '.master/datalist.json';
export default ...
0
票
0
回答
30
閲覧数
Headerコンポーネントでmicrocmsから記事データを取得をしたい
next.js microcmsでサイトを作成しており、index.jsxでは「getStaticProps」を使ってfiledのjsonのデータを
取得できますが、Headerコンポーネントでは受け取ることができません。
index.jsxでは受け取れて、なぜHeaderコンポーネントでは受け取ることができないのか理解ができないので
解決方法がわからず困っております。
...
0
票
1
回答
76
閲覧数
React の datepicker で月の選択画面で数字表記にするには?
React-datepickerを使用して年月のみのカレンダーを実装中です。
月の部分が1月ならJan、2月ならFebというように表示されてしまっているのですが、月の部分を英語ではなく数字表記にしたいです。
どなたか方法をご存知でしたら教えていただきたいです。
0
票
0
回答
32
閲覧数
POSTした後、mutateでデータが更新されない swr fetcher
何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。
データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。
一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。
import { useState } ...
0
票
1
回答
95
閲覧数
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
回答
117
閲覧数
Reactのコンポーネントが制御か非制御かはどのようにして決まる?
Reactについて勉強中です。
Reactの制御コンポーネントと非制御コンポーネントについてわからない点があります。
Reactのあるコンポーネントが制御か非制御かはどのようにして決まるのでしょうか?
公式ドキュメントをみるとrefを使用するかどうかで決まるのかという印象を受けました。
他にも何か基準があれば教えていただきたいです。
0
票
0
回答
59
閲覧数
react-playerを用いて、動画が再生できない場合にメッセージを表示させたい。
初学者につき、不躾な質問を失礼いたします。
ただいま、react-playerを用いて、元々タグで実装していた動画プレイヤーの置き換えを行っています。
元のコードは以下のようになっており、動画が再生できなかった場合などにタグ内の文言が表示されるようになっています。
<video
className="media video"
...
0
票
0
回答
114
閲覧数
Reactでリロードをするとエラーが出る
前提
現在ポートフォリオを作成しています。
この質問は複数サイトに投稿しています。
回答が得られた場合は、回答されてない投稿を削除します。
URL
https://manga-kousatu-net.vercel.app/
id sample123@gmail.com
pass sample345!
github
https://github.com/takoyan33/manga-kousatu....
1
票
1
回答
46
閲覧数
MUIのYearPickerのSelectedカラーを変更する方法はありますか?
muiのDatePicker APIを使用しています。
年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。
日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。
方法をご存知の方、よろしくお願いいたします。
1
票
1
回答
106
閲覧数
rails, react-playerとhls.jsを用いてHLS再生の実装をしたい
バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。
現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。
react-playerはhls.jsとも互換性がありそうですが、...
0
票
2
回答
283
閲覧数
React のルーティング設定で真っ白な画面が表示されてしまう
Reactの画面遷移のためにルーティングを学習中です。
下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。
ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎
最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。
そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。
...
0
票
2
回答
186
閲覧数
ローカルで作成したReactアプリを起動して、 他のPCのブラウザからアクセスして表示する設定方法について
ローカルで作成したReactアプリを、他PCのブラウザから表示する設定方法を教えていただけますでしょうか。
自身のPCでReactアプリを作成して、自身PC(ローカル)から起動する手順は学習しました。
コマンドプロンプトを起動すると下記が表示されます。
Compiled successfully!
You can now view login in the browser.
...
0
票
1
回答
116
閲覧数
フロントエンドから法人番号APIを使用した際のcorsエラーについて
フロントエンド側で国税庁が提供する法人番号APIを使用し、企業情報の取得を試みたところ、ブラウザのコンソールにて以下のcorsエラーが発生しました。
こちらの解決策をお伺いしたく存じます。
Access to XMLHttpRequest at '[https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&...
0
票
0
回答
31
閲覧数
npm workspace利用時にuseContextが動かない
以下のような構成でnpm workspaceを利用しています
.
├── package.json
└── packages
├── app
│ ├── application1
│ │ └── package.json
│ └── application2
│ └── package.json
└── modules
└── ...
1
票
1
回答
62
閲覧数
useEffectの挙動について
useEffectの挙動について質問させていただきます。
console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。
import { useEffect, useState } from "react";
type inputSetting = {
player : number;
wolves : number;
...
0
票
1
回答
113
閲覧数
docker-composeで作成したReactアプリがlocalhost以外の任意のホスト名から接続できる。
create-react-appで作成されたReactのアプリに localhost:3000 と app.hoge.hoge:3000 というホスト名で同じページに接続出来ます。
reactアプリの環境変数HOSTやpacakege.json にホスト名を変更するような記述が見られないのにどうしてこのような動作をするのか不思議でたまりません。
...
0
票
0
回答
35
閲覧数
ReactのComponent作成時の質問
React初学者です
Reactでコンポーネントを作成するときに下記の方法で作成可能だと知ったのですが、文法以外で違いがわからないです。
それぞれに適した用途があるのでしょうか。
React.FC
React.Component
JSX.Element
0
票
0
回答
44
閲覧数
nextjs ssr GetServerSideProps サーバー
GetServerSidePropsを使用しているファイルをbuild → exportするにはどうすればいいのでしょうか?
/
┗/test/[id].tsx
┗/test/index.tsx
/out/
┗/test/[id]
┗index.html
のようになってますが、[id]フォルダの中身は空です・・・
0
票
1
回答
154
閲覧数
Next.jsで上手くreact-draft-wysiwygが動かない
下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。
ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する
実現したいこと
react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("&...
0
票
0
回答
139
閲覧数
XAMPP環境でReactを使いたい
現在自分のローカルにXAMPPをインストールしており、C:\xampp\htdocs 配下にあるファイルがブラウザ上でhttp://localhost/ のURLで見れる状況です。
それとは別に ローカルで Create React App を使って、Reactが使える環境が用意できました。(npm startを実行するとブラウザ上でhttp://localhost:3000となる環境のことです。)...
0
票
0
回答
96
閲覧数
Reactとfirebaseを使っていいね機能を実装したい
前提
現在漫画考察サイトを作成しています。
https://manga-kousatu-net-takoyan33.vercel.app/
github
https://github.com/takoyan33/manga-kousatu.net
実現したいこと
firestoreを使っていいね機能を実現したい
(likesというレコードを作り、そこを+1して更新する)
発生している問題・...
0
票
0
回答
48
閲覧数
Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには
ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
0
票
1
回答
56
閲覧数
Docker npx create-react-app .ができない
目的
Docker環境でfrontend直下に create-react-app .でアプリを作成したいです。
ディレクトリ構成
backend
frontend
- Dockerfile
Dockerfile
FROM node:18.7.0-alpine3.16
WORKDIR /frontend
RUN npm i -g create-react-app
docker-compose....
1
票
0
回答
121
閲覧数
Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない
前提
バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。
発生している問題・エラーメッセージ
$ docker-compose exec ...
0
票
0
回答
93
閲覧数
react-bootstrapのCard.imgでローカルに保存された画像を使うにはどうしたらいいでしょう?
ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function BasicExample() {
return (
<Card style={{ width: '...
0
票
1
回答
63
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
0
票
0
回答
132
閲覧数
Next.jsのjest+firebaseのテストが通らない
Github https://github.com/takoyan33/manga-kousatu.net
現在Next.jsで、Jestを用いてコンポーネントがrenderできるかどうかのテストをしています。
ですが、firebaseを用いているコンポーネントだとエラーが出てしまいます。
● Test suite failed to run
Jest encountered an ...
0
票
1
回答
79
閲覧数
ParameterMissingエラーを解決したい
解決したいこと
railsのパラメータのエラーを直したいです。
発生している問題・エラー
ActionController::ParameterMissing: param is missing or the value is empty: learning_material
from /usr/local/bundle/gems/actionpack-7.0.3.1/lib/...
0
票
1
回答
1,464
閲覧数
Next.jsでJestを使用したテストを行うとエラーがでる
Next.js(TypeScript)にJestを設定する方法 という記事のテストコードを参考にしたのですが、下記のエラーが出ました。
FAIL src/lib/__tests__/example.test.ts
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to ...
0
票
0
回答
24
閲覧数
reactのアニメーションするコンポーネントの進行度を同じにしたい
eactでtimerコンポーネントの実装をしています。
+でtimerコンポーネントが1つ増え-ボタンでtimerコンポーネントを1つ減る物と作っています
したい事
+で増やしたtimerコンポーネントを増やす前に動いているアニメーションと同じ進行度にしたい
現在の問題
増やした時にタイマーの進行度が0から始まってしまう
App.tsx
import { useState } from &...
0
票
0
回答
53
閲覧数
TypeScriptでaccessTokenの型エラーが出る
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://manga-kousatu-net.vercel.app/
実現したいこと
現在Next.jsでポートフォリオで作成していおり、
TypeScriptで型付けをしたいと考えています。
発生している問題・エラーメッセージ
現在Firebase ...
0
票
0
回答
40
閲覧数
Reactで記事の削除ができない
前提
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://mangakousatunet.vercel.app/
実現したいこと
現在ポートフォリオで作成しているカード部分をコンポーネント化までできたのですが、削除したおができず、写真のようなエラーが出ます。
[![画像の説明をここに入力][1]][...
1
票
1
回答
64
閲覧数
Reactの処理のコンポーネント化に失敗する
前提
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://mangakousatunet.vercel.app/
実現したいこと
現在ポートフォリオで作成していおり、
登録処理をコンポーネント化したいと考えています。
https://mangakousatunet.vercel.app/...
0
票
1
回答
79
閲覧数
Reactのコンポーネント化がされない
前提
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://mangakousatunet.vercel.app/
実現したいこと
現在ポートフォリオで作成している
このカード部分をコンポーネント化したいと考えています。
https://mangakousatunet.vercel.app/home
...
0
票
0
回答
70
閲覧数
2カラム構成の場合のページ内スクロール
このようなライブラリを利用して、
ページ内スクロールを実現したいのですが、どれも動きません。
原因はHTMlが2カラム構成(それぞれスクロールが独立)しているためと思われます。
試しにこちらで試したところ、
右カラムの最下部にあるTOP1ボタンは動作しませんが、TOP2ボタンは動作しました。
このようなライブラリはターゲットがwindow.に固定されているのだと思いますが、
解決する方法、...
0
票
0
回答
236
閲覧数
Reactのグラフライブラリ「react-chartjs-2」を使ってグラフが表示されない
以下のReactのグラフライブラリ「react-chartjs-2」を使って棒グラフを表示する処理が作れず、エラーで表示が真っ白になり困っています。
解決のためのアドバイスを頂けましたら幸いです。
表示されたエラーコード
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of ...
0
票
1
回答
184
閲覧数
ReactでuseStateが更新できない
以下のuseStateのsetpopulationCompositionObjでpopulationCompositionObjが更新できずに困っています。
解決のためのアドバイスを頂けましたら幸いです。
開発環境
・Reactのバージョン:React18
・OS:Windows10
・エディタ:VSCode
・ブラウザ:Chrome(バージョン: 103.0.5060.66(Official ...
0
票
0
回答
25
閲覧数
React.js firebaseにテキスト情報などが送れません
エラーメッセージ
TypeError: _FirebaseConfig__WEBPACK_IMPORTED_MODULE_1__.db.collection is not a function(sentMoney.js:10 )
ソースコード
//sentMoney.js
import React, { useState } from "react";
import {...