Skip to main content

次のタグが付いている話題の回答:

7

仮想DOMを使うと早くなる理由がいまいちわかりません

ぐぐってみると、この言葉の出所としては「リアルな DOM はなぜ遅いのか」という記事あたりではないかと思います。 仮想DOMを使っても、仮想DOMから実DOMを操作しているわけで、最適化されたJavaScriptを使って実DOMを操作するよりも速くなることはありません。 この言葉の意味は、仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。...
Yasuhiro Niji's user avatar
7
承認済み

text/babel とはなんですか?

MDNの<script>要素のドキュメントを読むと type スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。 省略または JavaScript の MIME タイプ: これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。...
hinaloe's user avatar
  • 4,751
6

webアプリの通信をhttps化したい

ちょっとXY問題になっていると思われます。一つ一つ説明していきます 通常、開発環境ではlocalhostへのHTTPアクセスで行い、ほとんどの場合で問題が発生することは無い HTTPアクセスであるためマイクが有効にならないと困っているようですが、そもそも開発用Webサーバーへのアクセス方法が間違っています。npm startの時に下記のようなメッセージがでたと思います。 <i> [...
raccy's user avatar
  • 8,272
5

なぜReactを実行するときlocalhostのサーバーが必要ですか?

「できあがったReactを使ったサイトを確認するだけなら、HTMLをローカル上で直接開いて見ればいいじゃ無いか?」 たぶん、そう思ったのででしょう。しかし、このローカルで直接HTMLを開く事にはいくつかの問題があります。 1. 絶対パスがあると、正しく表示できない。 最近のWebサイトはCSS、JavaScript、アイコンなどの画像、他ページへのリンク等について絶対パスを使う傾向があります。...
raccy's user avatar
  • 8,272
4
承認済み

Reduxの言葉、日本語で何という?

React, Reduxは固有名詞で翻訳はできません。 Actions、Action Creator等についてもReduxで使うActionであり、Reduxで使うAction Creatorなので、日本語の単語への翻訳(活動、アクション生成器とか縮約器)はなじまないでしょう。見たことはないし、違和感があります。 React →そのまま Redux →そのまま Actions →そのままか、...
uehaj's user avatar
  • 66
4
承認済み

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

波括弧{}の中は式として評価されるので、文字列の結合を行うことができます。 <td><img src={url + product.image}></img></td>
puzzle's user avatar
  • 56
3

react functional component 再レンダーされない

useState hookでは、同じ値で更新した場合、子のレンダリングを回避します。ここで "同じ値" の意味はObject.is(古いstate, 新しいstate)がtrueという意味です。 出典: https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update state 更新の回避 ...
h-kanazawa's user avatar
3
承認済み

typeやinterfaceを使用せず、複数ある引数に型を付与したい。

つまり実現されたいことは以下のようなコードでしょうか? React.FC<>を使わない場合 const Child = (props: { toggle: boolean, setToggle: (value: boolean) => void }) => { const { toggle, setToggle } = props; return ( &...
harry0000's user avatar
  • 2,800
3

縦に積み上がる要素の削除したときに、下にガタっと落ちてしまうのを滑らかにアニメーションしたい

左右にスライドするアニメーションが期待通りの動きであるならば、縦方向の動きも横方向と同様、 transitionY に適切な値を投入すれば上下方向のアニメーションができるはずです。 また、画面外に消えたスナックバーをDOMからremoveするのであれば、アニメーションが終わったタイミングを見計らう必要もあるでしょう。 ...
haruyan-hopemucci's user avatar
3
承認済み

React Hooksでは非同期処理はuseEffect内で行うことと言われていますが、必ずそうしなければならないのでしょうか?

訂正アンサー 更新日2022年7月17日 useEffect を使う必要はありません。 もともと useEffect が奨励されていた理由の一つに、メモリリーク警告が挙げられますが、この警告は誤解を招くとして React18 で削除されました。 コンポーネントがアンマウントした後に、setState などしたときに出るメモリリーク警告は、多くのケースでは実際にはメモリリークには繋がりません。 ...
smagch's user avatar
  • 206
3

関数の引数内で実行される関数??

=>はアロー関数式と呼ばれ、関数オブジェクトを構築します。一旦、変数に格納した場合 var lambda = strs => { strs[streamId].removed = true return { ...strs } }; setStreams(lambda); であり、function関数式を使って書くと var lambda = function (strs) {...
sayuri's user avatar
  • 4.3万
2

Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?

JSX JSX は JavaScript や TypeScript の構文を拡張する物です。 基本的には、トランスコンパイラなどと呼ばれるツールで、(仮想)DOMを構築する関数の呼び出しに変換されます。 JSX を使用せず、直接これらの関数を呼び出すコードを書いてもかまいません。 https://facebook.github.io/react/docs/react-without-jsx....
mjy's user avatar
  • 1.2万
2

setState後、render()が更新されない

react-nativeは知らずreactだけ知っててお答えしますが、 setState()を実行すれば、そのコンポーネントと子コンポーネントのrender()が実行されるという認識なので この認識は間違っていないと思います。 App Component内で <Sub2 method={this.changecount}/> としていますが、...
sigh's user avatar
  • 628
2

SyntaxError: Unexpected token

インデントを合わせてみたところ、Appクラス定義の中で、const location = results.geometry.location;の行から、renderメソッド定義の前の行までの記述が、メソッド定義の外に出てしまっているようです。 class App extends Component { constructor(props) { // 略 } ...
sakmas's user avatar
  • 323
2

React.DOM が undefined でエラーになる

React.DOM はReact 15.xで廃止が予告され、16.0で実際に廃止されました。 同じAPIを使い続けたい場合は、パッケージ react-dom-factories が利用できます。 現在、公式ドキュメントで紹介されているのは、React.createElement を使う方法です。
mjy's user avatar
  • 1.2万
2
承認済み

IE11でarrow関数の変換ができない @babel/plugin-transform-arrow-functions が機能しない

問題はreact-global-configurationが依存しているパッケージであるserialize-javascript内でアロー関数が使用されている点にあります。ご提示のbabel-loaderの設定にexclude: /node_modules/とありますから、node_modules内にある依存モジュールに対してはbabelの処理が行なわれていません。 実は、...
Faily Feely's user avatar
  • 2,883
2
承認済み

React公式サイト「MAIN CONCEPTS」内、「Lists and Keys」の例「Keys Must Only Be Unique Among Siblings」で「posts」ではなく「post」となっているのはなぜでしょうか。

簡単なお返事 post は引数で、 新しく、名前付けした物 です。 この引数には、 map 関数により posts の要素が1つずつ渡されます。 詳細なお返事 4行目の props.posts.map つまり props.posts に対する map 関数の呼び出しから来ています。 map 関数は、そのリストの中身を、1つずつ処理して、別のリストに変えるための関数です。 map ...
rugamaga's user avatar
  • 915
2
承認済み

ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい

PDFの編集は非常に手間の係る作業になります。既存のPDFをフォーマットに使う場合、その編集は注釈(Annotation)で値を入力して表示するのが一番楽だと思います。その場合でも、各々の値ごとに出力する位置を0.1mm単位で決める必要があります。もし、フォーマットが少しでも変更になれば、位置がずれてしまうため、位置を全部修正する必要があるのでメンテナンスも大変です。 そのため、...
Yasuhiro Niji's user avatar
2
承認済み

Reactのstateに格納するデータは表示に関係するものだけを格納するべきなのでしょうか?

想定されているケースを私が正しく認識できていないかもしれないので、一様に state に入れるべきではない or 入れてもよい、とは回答できませんが、参考になる情報を記載します。 そのデータが、描画を含む React コンポーネントのライフサイクルに関係しないなら state に含める必要はありません。React 公式ドキュメントでも state を使っていない例がありますし、 ...
h-kanazawa's user avatar
2
承認済み

Reactでinput type="text"のvalueをボタンを押すことでリセットしたい。

この場合に一般的な方法は、input要素のDOMオブジェクトを取得して直に操作する方法です。変更箇所にコメントを付けてあります。 import React, { useRef } from "react"; let text = ""; const App = () => { // input要素のDOMオブジェクトを入れておく用のrefを作成 const inputRef = ...
Faily Feely's user avatar
  • 2,883
2
承認済み

React で prop 受け渡しの shorthand はありますか?

High-Order Component(通称HoC)を利用する方法があります。書き方は独特ではありますが、デザインパターンのFactory Methodパターンとやっていることは変わりません。コンポーネントを作る関数を定義してあげればよいのです。 例えば、コメントを投稿するユーザー名を固定するコンポーネントを使いまわしたいとき、次のようのにかけます。 import React from "...
himenon's user avatar
  • 1,362
2
承認済み

NuxtとReactには、Vue CLI 3のような、便利な雛形作成ウィザード 兼 ビルドボタンを含むGUIは存在しますか?

雛形作成ツールに関しては以下のものが対応するでしょう。 nuxt: create-nuxt-app - https://github.com/nuxt/create-nuxt-app react: create-react-app - https://github.com/facebook/create-react-app ファイル名の付け方、ファイルの配置について自由度が高いことを、...
himenon's user avatar
  • 1,362
2
承認済み

ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる

searchResult.mapをラップしている({})が不要ですね。 <ul></ul>の中身を次のように置換すると良いでしょう。 {searchResult !== null && searchResult.map((item: any) => { return <li>{item.volumeInfo.title}</li&...
himenon's user avatar
  • 1,362
2
承認済み

javascriptでwidgets.js(外部の.jsファイル)読み込み完了を検知するには?

Twitter Developer Platformでは、「最も信頼できる方法」としてwidgets.jsロード用のサンプルコードが紹介されています。 https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites <script>...
haruyan-hopemucci's user avatar
2
承認済み

いずれか必須の部分を(※)で表現したい

一般的には小さなコンポーネント(例のMyLabel)を作って共通化することが多いのではないでしょうか function MyLabel({ name, required, children }) { const getLabel = () => { if (required) { return `${children}(※)`; } else { ...
sugumura's user avatar
  • 871
2
承認済み

react-router-domのuseLocation()でprotocolとhostを取得する方法

Collaboratorによると、React Routerはそうした機能をサポートしていないようです。 useLocationという名前がややミスリードなのですが、 ここでいうLocationはLocationオブジェクト(つまりドキュメントの位置を表すURL)ではなく、 React RouterがSPAで擬似的なルーティングを行うにあたっての内部的なロケーション情報、という意味合いのようです。 ...
Sei Sato's user avatar
2
承認済み

next.jsのAPI Routeの意義は?

API Route を使うケース 主に2つあります。 SSR しなくてもよいコンテンツのためのデータ取得 データ更新のための API エンドポイント SSR しなくてもよいコンテンツのためのデータ取得 初期レンダリングコストを減らすために、クライアントサイドでレンダリングするときに使います。クリックやスクロールといったアクションに応じて API リクエストをして結果を表示します。 SEO ...
smagch's user avatar
  • 206
2

React,TypeScriptでuseContextを使いたいがエラーを解決できない

ファイルの拡張子が.tsになっているという凡ミスでした。正しくは.tsxでした。
uyugineer's user avatar
2
承認済み

ReactHooks 二次元配列のstateの更新による再レンダリングが行われない

handleClick 内の const newBoard = board を const newBoard = [...board] に変えてください。 "board" と "setState に渡された newBoard" は同じオブジェクトなので、再描画が回避されます。[...board] は新しいオブジェクトを作成します。これによって ...
h-kanazawa's user avatar

無効化に投票