[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
78
未回答やベストアンサーなし質問
1
票
0
回答
51
閲覧数
prettierにて、printWidthを300くらいにしているにも関わらず改行される
react、typescript, jsxといった技術スタックです。
prettierにて、printWidthを300くらいにしているにも関わらず、
jsxが以下のようになってしまいます。
<text>foo<text/>
↓
<text>
foo
<text/>
typescript自体のコードはしっかり300になるのですが、
...
1
票
1
回答
87
閲覧数
useSWRとuseMemoを組み合わせたい
next.jsでページネーションを実装しています。
「{page}ページ目/{max_page}ページ中」と表示したい箇所があります。
max_pageはSWRでデータ件数をフェッチしてきた後に Math.floor(データ件数/1ページあたりの表示件数)という風に計算しています。
max_pageについてはページネーション遷移しても値は変わらないので、固定化したいところですが、...
1
票
0
回答
168
閲覧数
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 の後再度 ...
1
票
0
回答
281
閲覧数
javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象
Reactを用いて以下のようなコンポーネントを作成しました。
文字が入力された際、それが数字であるなら半角化して反映します。
全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。
const InptArea:FC=()=>...
1
票
0
回答
65
閲覧数
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
...
1
票
0
回答
52
閲覧数
react typescript materialUIを使ったスタイルの当て方
環境
・reactとTypescriptを使っています
・デザインはmaterial UIを使っています。
・スタイルlはstyled-componentsで当てています。
わからないこと
Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。
しかし下記のようなエラーが出てしましました。
...
1
票
1
回答
412
閲覧数
Reactにおけるファイル間の値のやり取り
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう!
を参考にTODOアプリを作成しようとしています。
以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。
よろしくお願いします。
Home.js
...
1
票
0
回答
521
閲覧数
react nativeでpretterとeslintを使用するときのコード整形について
解決したいこと
拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について
typescriptで書くときに悩まされる下記のerrorについて
前提
react native を書いています。コード整形でpretterとeslintを使用しています。
問題
ここでうまく行かないことがあります。
ファイルの拡張子を.js でreact ...
1
票
1
回答
121
閲覧数
react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う
reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。
NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、
入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。
App....
1
票
0
回答
628
閲覧数
react,material-uiのselectにて、labelと要素が重なって表示される
以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。
しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。
どのような観点で修正を実施すればよいかご教示いただければ幸いです。
componentWillMount() {
navigator.mediaDevices.enumerateDevices()....
1
票
0
回答
82
閲覧数
オプティマイズリー (Optimizely A/B テスト)でのReact.jsの記述
ターゲットにしたいページが、React.jsで動いている為 JQueryやVanila JS での記述ではなく全てReact での記載でエレメントを書き換えたいと考えております。今まで、cssとjQueryでの記載しかしたことがなく、React.jsで全て動いているページをターゲットにしてオプティマイズリー上で上書きしたくてもできません。HTMLの削除、css追加なども全く効かない状態です。
...
1
票
0
回答
250
閲覧数
Firebase Hostingでリダイレクト処理ができない
Firebase Hostingを用い、React(ルーティングにはreact-router-domを使用)にてWEBアプリを公開しようとしています。basic認証を行いたいのですが、index.htmlを起点としたSPAなので、cloud functionsを通してルーティング処理をしようとしていますが、うまくいきません。
実装の内容としては以下リンクにあるような「basic-auth-...
1
票
1
回答
202
閲覧数
redux-form(v6)をtypescriptで使いたい
redux-formをtypescriptで利用しているかに質問です。
やりたいことは「redux-form(v6)をtypescriptで使いたい」です。
typescriptはv2を利用。
redux-formの型定義を@typesで取得するとv4のものが取得されます。
https://gist.github.com/rluiten/...
1
票
2
回答
95
閲覧数
jsファイルの読み込みについて
プログラミング学習初心者です。
Create React Appにおいてプロジェクトを作成し,実行しました。
ReactのTutorialに従い,src/index.js,public/index.htmlの2つのファイルを作成しました。
index.htmlファイルはindex.jsファイルをコードのどのように読み込んでいるのか教えていただきたいです。
以下にコードを記載します。
index....
0
票
1
回答
46
閲覧数
Invalid Hook Call Warning を解決したい
解決したいこと
Invalid Hook Call Warning を解決したいです。
railsのapiモードとreactを利用してポートフォリオを作ろうとしています。dockerを使って環境構築を行い、バックエンドとフロントエンドを分離して開発を行っています。
練習として、教材を使用して勉強中なのですが以下の3つのエラーが複数出てしまい、詰まってしまいました。
#1つめ
react....
0
票
0
回答
37
閲覧数
Typescript による ラジオボタンの値を取得したいです
Typescript による ラジオボタンの値を取得したいです
typescript
const [condition, setCon] = useState("");
const loading = (execute: () => void, infinit?: boolean): (() => void) => {
return ...
0
票
0
回答
40
閲覧数
axiosによる非同期処理
フロントはReact+Typescriptでaxiosを用いて非同期処理で、AWSのAPI GatewayからLambdaの処理を呼び出したいです。
実装したコード
axiosで実現させたいのは以下のコードと同じ処理です。
typescript
const req = new XMLHttpRequest();
req.open('GET', "APIGatewayのURL", ...
0
票
0
回答
59
閲覧数
Laravel を SPA 化するには?ウェブアプリを改修したいと思っています
タイトルにSPA 化するにはと書きましたが、実際にはそれ以前の段階の「どの技術・ライブラリを使用すべきか?」が質問の趣旨となります。
現在、ウェブアプリとして掲示板サービスを運営しています。
いわゆる従来型のMPA(multi page app)なのですが、以下のように変更を加えたいと考えています。
① 投稿をAjax で行う
② 新しい投稿があったら差分のみを取得し画面を自動更新する(...
0
票
0
回答
30
閲覧数
Reactでスワイプしたら下から飛び出るフォームをtouchendとclickで作成したい
JavaScriptにあるtouchstart, touchmove, touchendを使用してスワイプしたら下から表示される下記のようなフォームを作成しました。下から上にスワイプすると出現する。そこに追加でグレーの横棒がButtonタグになっていてクリックでも開閉をしたいのですが、touchendの処理タイミングが被るのか、上手く現在のフォームの状態を持つ事が出来ないです。
どなたか詳しい方、...
0
票
0
回答
61
閲覧数
dockerでのrails,react(APIモード)の環境構築でエラー(M1 mac)
環境
M1 mac
$ docker-compose run api rails new . --force --no-deps --database=postgresql --api を行うとエラーが発生
フォルダ構成
./api/Dockerfile
FROM ruby:2.7.5
RUN apt-get update -qq && apt-get install -y ...
0
票
0
回答
111
閲覧数
Next.jsプロジェクトを本番環境へデプロイするとCSSが効かない
React + Next.jsでWebシステムを作っています。
create-next-app@latestコマンドでサンプルプロジェクトを作成し、Docker,Nginxを使用し本番環境へデプロイすると、ブラウザで表示を確認した際にCSSが効かない状態となります。
どのように設定を行えば、CSSが反映された状態での表示となるでしょうか?
ソースコードとデプロイの工程は以下のとおりです。
1....
0
票
1
回答
56
閲覧数
WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい
前提
teratailでも同様の質問をさせていただきました。
WordPressのブロック開発を行っています。
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています。
実行環境:
WordPress 5.9.2
npm 8.1.2
node.js 16.13.1
実現したいこと
投稿の情報を取得してコンポーネントで複数選択可能なブロックを作成する。
...
0
票
0
回答
59
閲覧数
ReactNative で登録済みのユーザーか否かで画面の表示を区別したい
現在、APIの結果によって表示するコンポーネントを切り替える処理を実装しています。
useEffectを使って画面をロードするタイミングで、
APIを呼び出しJsonオブジェクトとして結果を受け取っていますが、
該当データがない場合はオブジェクトが空で返ってきます。
その結果に応じて、return内で三項演算子を使って表示を切り替えたいと思っておりますが、該当データがある場合も『無い』...
0
票
0
回答
46
閲覧数
react-scripts v5 が正しく機能しない
以前はCRA4を使用していましたが、CRA5にupdateしました。その時に問題となったのは、react-scripts4から5に変更したときです。5にして、react-scripts startをするとサイトは表示されますが、cssがぐちゃぐちゃになります。
antdを使用しているので、antdやcss周りのreact-scriptsのwebpackのcss-...
0
票
0
回答
53
閲覧数
StorybookのsnapshotsテストをmultiSnapshotWithOptionsで実行した結果、__snapshots__フォルダーの位置がずれる
実現したいこと
storybookのSnapshootsテストを実行した際、実行結果である__snapshots__フォルダーを各stories.jsファイルと同じディレクトリに生成させたいです。
現在の結果
以下の通り、src配下に新しく、src/component/~ フォルダーが作成されます。結果、__snapshots__フォルダーが各stories.jsファイルと1階層分ずれています。
...
0
票
1
回答
40
閲覧数
Twitter の「検索結果に対応するツイート一覧」を React に埋め込む方法
お世話になります。
Twitter の検索結果に対応するツイート一覧を、できるだけ快適に React に埋め込みたいと思っているのですが、良い方法をご存じの方はいらっしゃいますでしょうか?
動作のイメージとしては、Twitter で hoge と検索した場合に、 https://twitter.com/search?q=hoge に対応する検索結果が描画されることを期待しています。
...
0
票
1
回答
62
閲覧数
stripeのpaymentIntent.statusに上手く型が当てられない。
stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか?
エラー内容
(parameter) paymentIntent: any
Argument of type '({ paymentIntent }: PaymentIntent) => void' is not assignable ...
0
票
0
回答
64
閲覧数
react-dndの縦の並び替えを理解したい
縦の並び替えの際にホバー中に要素が入れ替わる処理があるのですが、そこの計算が全然分からないです。
特にここの処理がどうしたらreturnしているのかわからないです。
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
console.log('通る')
return;
}
...
0
票
1
回答
81
閲覧数
react-dndで一度ドラッグしたアイテムを再びドラッグ出来ないです。
react-dndを使いたいと思って書いたのですが、一度ドラッグして移動した後に再びドラッグする事が出来ないです。
詳しい方見て頂けないでしょうか?宜しくお願い致します。動く物はcodesandboxに上げてあります。
App.js
import React, { useRef, useState } from "react";
import { DndProvider, ...
0
票
0
回答
79
閲覧数
react-railsでstyled-componentsをimportするとサーバーサイドレンダリング(prerender: true)が出来ない。
railsでreact-railsを使用しています。
viewファイルにてview helperのreact_componentの引数に{prerender: true}を渡した際に問題なくサーバーサイドレンダリングが行われ画面が表示されますが、jsファイルでstyled-componentsをimportすると以下のようなエラーが出ます。
Encountered error "#<...
0
票
0
回答
99
閲覧数
Notion API のエディターで型補完にエラーが出てしまう
Notion APIを使用してブロックを取得する際に下記のエラーが発生し、正しくプロパティを取得できません。
型はanyとして扱われるため、エディタではエラーになりますが、ブラウザでは正しく取得できます。
どうすればエディタでのエラーをなくすことができますか?
この問題は、エディタやtypescriptの問題である可能性もあります。
ヒントをお願いします🙇️。
Property '...
0
票
0
回答
39
閲覧数
別のページに飛ぶボタンをReactとBootstrapを使って作成したい。
ReactとBootstrapを使用してPFを作成しています。 別のページにジャンプできる2つのボタンを作成したかったのですが、行き詰まってます。
import React from "react";
import { Button } from "react-bootstrap"
import { BrowserRouter as Router, ...
0
票
0
回答
56
閲覧数
スクリプトモードでenvの型を定義することと、モジュールモードでenvの型を宣言することの違い
※前提が間違っていたらすいません
型定義において、以下の2つは同じ意味を持ち、別ファイル上でインポートなしで window.env.REACT_APP_HOGE を参照できるようになると理解しているのですが、
この2つの違いや、どちらのほうが良いというのはあったりするのでしょうか。
スクリプトモードでの型定義:
interface Window {
env: {
...
0
票
0
回答
77
閲覧数
データベースの内容をブラウザに表示させたい。
グループでウェブページの制作をしています。
検索画面で条件を入れるとそれに該当する結果がブラウザに表示されるようにしたいのですが、データベース(SQL)の設定があまり良く解らず検索内容を入れても表示されません。
バックエンドのターミナルをにはpassword authentication failed for user "postgres"と出てます。...
0
票
0
回答
58
閲覧数
検索バーで頭文字を入れたら都市の名前が、数字を入れたら郵便番号が予測で表示されるようにしたい
検索バーに頭文字を入れたら、入れた頭文字の街が、数字を入れればその番号から始まる郵便番号を持ったお店が表示されるというものです。
どちらも現れた結果から検索をかけられるものを作りたいのですが、検索バーはできたもののそれ以降が詰まってしまっています。
現在のSearchBarのコードは以下の通りです。
import React, { useState } from "react";...
0
票
1
回答
166
閲覧数
cloud firestore でのuseSWRの使用についての質問
CloudfirestoreにuseSWRでクライアントサイドのfetchを行いたいのですが、そのAPIの指定の書き方がうまくわからず質問しました。
といいますのも、現在NextJSを用いてTodoアプリを作成しているのですが、その際にSWRをもちいて、データを持ってきたいです。
SWRでは下記のようにして記述しています。
const { data: tasks, mutate } = ...
0
票
0
回答
84
閲覧数
React.JSでAppを作っているのですが、App内で使う画像が表示されない
現在、React.JS でAppを作っているのですが、その中に画像を入れたいのですが画像をインポートするとURLが表示され内容が表示されません。
画像はimport blueCandy from "./Images/Candy_Blue.png"という形でApp.jsにインポートをしているのですが上手くいっていない様子です。
どなたかお力添えしていただけませんでしょうか。
...
0
票
0
回答
48
閲覧数
jwtをtureにした状態でNextAuthのsessionに任意のプロパティを追加したい
概要
NextAuthのsessionに任意のプロパティを追加したいです。
Credentialsを使用するため、jwtをtrueに設定しています。
しかしjwtをtrueに設定しているため、callbacksでsessionを操作することが出来ません。
コード
[...nexauth].ts
const options = {
providers: [
//省略
],
...
0
票
0
回答
29
閲覧数
setStateと再レンダリングの挙動について
以下のようなソースでsetCount(count+1)のようにしてレンダリング回数を見ていました。
countが増加しないのはわかるのですが、以下の画像のように、'rendered timer'の回数が1回多いように思います。
import { useEffect, useState } from 'react';
export const Timer = () => {
const ...
0
票
0
回答
46
閲覧数
firestoreへのGetStaticPropsでデータの取得ができない
Next.jsとFirebaseを用いて、Todoアプリを制作中です。
現在見た目の部分はある程度完成しているのですが、GetStaticPropsを用いたデータの取得がうまくいきません。
自分のコードをチェックして、何が問題なのかご指摘をいただけないでしょうか??
import { NextPage } from "next"
import { db } from "...
0
票
1
回答
321
閲覧数
React 子コンポーネントから親コンポーネントのuseState書き換え時の警告
Reactで子コンポーネントから親コンポーネントのuseState書き換え時の警告の修正方法がわかる方
ご教示いただけますと幸いです。
実行画面がエラーになりませんが、コンソールを開くと警告が出ていますこれを修正したいです。
コンソールの警告文
Warning: Cannot update a component (`App`) while rendering a different ...
0
票
0
回答
49
閲覧数
Reactを下層ページに配置するには?
React初心者です。優しく教えていただけると嬉しいです。
yarnを使ってReactをインストール、問い合わせ機能を実装でき、これがindex.htmlに反映されています。
ですが実際に問い合わせがあるのは「コンタクトページ」等の下層ページ(https:// ~~~/◯◯/)で、トップページであることは少ないはずです。
この場合、この機能を下層ページに実装する方法を教えていただきたいです。
...
0
票
1
回答
832
閲覧数
reactで複数のチェックボックス(全選択・全解除)実装したい
現在、next.jsで実装を進めているのですが、上記にある通り、複数のチェックボックスのチェック状態をstateで管理、また違うコンポーネントにあるボタンを押すとチェック状態が全選択もう一度押すと全解除というような実装をしたいのですが、どのようにすれば良いのか見当がつきません。
また、複数のチェックボックスというものはapiのデータから作られており、子コンポーネントでmapで回している状態です。
...
0
票
1
回答
848
閲覧数
MUIのDatePickerの言語を日本語にする方法は?
MUIのDatePickerの言語を日本語にする方法はありますでしょうか?
下記のようなコードを書いたところ、ブラウザにTypeError: Cannot read properties of undefined (reading 'date')というエラーが表示されました。
locale="ja"を削除するとDatePickerは表示されますが、英語表示となります。
/* ...
0
票
0
回答
58
閲覧数
Mateiral uiをVite環境で利用した場合にコンソールのエラーがchunk fileで表示される
コンポーネントの warningや errorなどはsourmapがうまく動いているため、minify前のソースコードの箇所をコンソールに表示してくれます。
しかしMateiral-uiが絡む場合はchunkfileで表示されるため、デバッグがしづらい状況です。
こちらMaterial-uiの場合もminify前のソースコードの箇所を指定してらうようにしたいです。
...
0
票
0
回答
54
閲覧数
条件付きチェックボタン
自社をチェックボタンで使用した時のみ、預かり倉庫をチェックできるようにしたいです。
それ以外の時は預かり倉庫は非活性でチェックできないようにするにはどのようにすればいいでしょうか?
<Row>
<Label className="w-12/60">自社</Label>
<...
0
票
0
回答
84
閲覧数
一部の文字列をマスク表示したい
10桁の数字を 123456**** のように一部だけマスク表示させたいです。
inputType="password" のようにpasswordではすべてがマスク表示になります。
あとでマスク表示できる桁数を自由に変えることもできるようにするにはどのようにすればいいでしょうか
0
票
0
回答
60
閲覧数
FLIP手法を用いたページレイアウトの作成
こんにちは、プログラミング初学者です。ReactでFLIP手法を用いたページレイアウトを作っているのですが、手詰まりなのでご教授願いたいです。FLIP手法については参考URLを参照願います。
早速ですが、私が作りたいと思っているものは、下記の画像のように1つのメインコンテンツと複数のサブコンテンツで構成され、...
0
票
0
回答
53
閲覧数
plotly dash JSONエラー
作成したプログラムは、動くのですが、ブラウザでランダムにエラーが発生します。
開発者ツールで調べると、
になっており、error.jsのコードは
callbacks.tsは
このエラーは、無視してもいいものなのかが分かりません。
よろしくお願いします。
0
票
0
回答
60
閲覧数
reactの学習手順について
reactの修正をしているのですが、経験がないため、とあるタスクに手を付けられず困っています。
具体的には(getBoundingClientRect())と言う関数を用いて、
配置した座標の要素を取得してカレンダーに存在する予定をブロックとして表示する機能があります。
その各予定ブロックに特定の予定が存在した場合、予定ブロックの下にブロックを追加表示させる必要があります。
...