React と React Native のスレ

**デフォルトの名無しさん** · 2019/03/09(土) 21:29:27.97

Q. Reactってなんですか？
A. ブラウザで動くウェブアプリを作るJavaScriptフレームワークです

Q. React使えば、iOSやAndroidアプリも作れるのですか？
A. 作れません。（ブラウザでなら動きます）

Q. でも動くってきいたんだけど？
A. それはReactではなくReact Nativeです。

Q. React と React Native は同じようなものじゃないの？
A. 設計思想が同じなだけで、中身は全くの別物です。

Q. React Nativeで作ればブラウザで動くの？
A. 動きません。（動くようにするサードパーティ製のライブラリならあります）

Q. React と React Native でソースコード共通化できるの？
A. UIの部分は共通化出来ません。UI以外の部分なら頑張れば

Q. このスレはどっちの話題のスレなの？
A. 両方です。どっちの話題をしているかは文脈で判断してください

**デフォルトの名無しさん** · 2022/02/06(日) 15:17:45.09

(´Д`)

**デフォルトの名無しさん** · 2022/02/06(日) 15:52:20.16

GETとPOSTの違いを質問するだけで、
アレな人を面接から排除できるし、簡単だな
これで95%ぐらい排除できるし

**デフォルトの名無しさん** · 2022/02/06(日) 16:34:57.86

いやいや、この場合はクライアントとサーバの違いを質問するところからだろ……

**デフォルトの名無しさん** · 2022/02/06(日) 16:41:29.09

まずネタかどうか...

**デフォルトの名無しさん** · 2022/02/06(日) 16:52:26.30

□私はロボットではありません

**デフォルトの名無しさん** · 2022/02/06(日) 21:41:04.19

あれ？Reactってサーバーサイドで動く処理は一切かけないの？？
Next.jsとかあるから、かけるもんかと思ってたけど。

**デフォルトの名無しさん** · 2022/02/06(日) 22:13:46.32

Next.jsってそれっぽい処理あるのね
React勉強中でAPIサーバ別で作るかって思ってたけどNext.jsで事足りそう

**デフォルトの名無しさん** · 2022/02/06(日) 22:34:10.48

Next.jsのサーバサイドはpages以下のページコンポーネントに対応するGETリクエストを受けたときだけそのページコンポーネントをレンダリングする(SSRの場合)
POSTを処理するにはAPIルートを使えるがこれはReactコンポーネント関係ない

**デフォルトの名無しさん** · 2022/02/07(月) 16:33:13.54

Ruby on Rails は、React, Bootstrap が多い

他には、Vue.js, Stimulus, jQuery
Bulma, Tailwind

Rails にはHTML ではなく、JSON を返す、API モードもある

**デフォルトの名無しさん** · 2022/02/07(月) 16:54:59.57

ウザ

**デフォルトの名無しさん** · 2022/02/08(火) 16:28:11.87

prettier以外でReact hookでつかえる
フォーマッターで何か良いの無いでしょか？

**デフォルトの名無しさん** · 2022/02/15(火) 22:42:35.11

eslint

**デフォルトの名無しさん** · 2022/03/16(水) 12:08:38.94

webサイト作っててログイン名とか持ち回りたいんですけど、usestateとかpropsとかで持ち回るよりlocalstorageとかsessionstorageとか使えば良いのでは？と思うのですが何か問題あったりする？

**デフォルトの名無しさん** · 2022/03/16(水) 15:24:22.47

なぜその程度の情報をそこに保存しようと思ったのかを知りたいね

**デフォルトの名無しさん** · 2022/03/16(水) 21:21:30.66

もち回るのが面倒だからこれでいいかなって、、

**デフォルトの名無しさん** · 2022/03/16(水) 21:24:39.33

どうせ他にも持ち回る情報はあるのだからちゃんと管理した方がいいよ
どっちしろuseLocalStorageみたいなフック作ることになるんだし

**デフォルトの名無しさん** · 2022/03/17(木) 01:04:21.86

Ruby on Rails では、セッション情報を何を使って実現しているかは、あまり意識しない。
各デバイスを自分でコーディングする事もない

4KB までなら、ブラウザのcookie だし、
それ以上なら、Rails のキャッシュか、データベースとか

フレームワークを使わない人は、自分で調べてコーディングするから、
何十倍も時間が掛かって、なおかつ低品質な実装しかできない

**デフォルトの名無しさん** · 2022/03/17(木) 23:27:53.87

>>311
氏ね

**デフォルトの名無しさん** · 2022/04/01(金) 10:10:23.98

React初心者だけど画面のDevelper ToolsからReactコンポーネントが
どれなのかってわかりにくいよね？
ブラウザからHTMLを見るとどれがReactコンポーネントの塊なのかわかりにくいし
Reactコンポーネントを組み込んだHTMLのビューファイルのソースコードを見ると
配置されているコンポーネントが何なのかわかりにくい

**デフォルトの名無しさん** · 2022/04/01(金) 11:23:42.76

React DevToolsというのがありましてん

**デフォルトの名無しさん** · 2022/04/01(金) 18:54:14.92

Reactってちょっとした実装するとすぐパフォーマンス悪くなって
不要なれだリングを抑制するのに苦労するじゃん

これ逆にで、全て手動でレダリング指示する方式には出来なかったん？

**デフォルトの名無しさん** · 2022/04/01(金) 19:46:55.68

それなんてjQuery

**デフォルトの名無しさん** · 2022/04/03(日) 15:55:17.06

>>307
recoil使えばええんやない？それで足りんかったらrecoil-persistも

**デフォルトの名無しさん** · 2022/04/13(水) 00:17:55.41

react-bootstrapの"esm"ってどこの馬鹿が付けたんだ？
RowとかColとかを自動インポートするたびにesmが付きやがる・・・（怒
それならreact-bootstrap-esmにでもしてreact-bootstrapとは分けろよ
とんでもねえ馬鹿野郎が作っちまったな

**デフォルトの名無しさん** · 2022/04/15(金) 18:52:04.48

スマホアプリと連動するWebアプリを開発するために
html, css, js, ts, react, redux, material-uiなどについて現在勉強中
「組み込みの経験値があるから、Webアプリ開発なんて楽勝でしょwwwww」とか思ってたけど
技術選定を含めて二週間かかってもまだ開発に着手できてない
もう1週間はかかりそう。かなり敷居が高いな

**デフォルトの名無しさん** · 2022/04/15(金) 18:53:13.67

バックエンドはfirebaseとapp engineを使うつもりだから簡単なはずなんだけど

**デフォルトの名無しさん** · 2022/04/16(土) 10:36:16.56

Material-UIもv5になってv4の頃より大分使いやすくなったし選択肢に入れてもいいんじゃない？

**デフォルトの名無しさん** · 2022/04/26(火) 03:06:09.90

>>319だけど、やっとまともに開発を進められるようになった
まだ手が早く動かなくて辛いわ

**デフォルトの名無しさん** · 2022/04/28(木) 12:12:12.35

新規でreduxとか茨の道じゃない？

**デフォルトの名無しさん** · 2022/04/29(金) 18:12:15.81

比較的簡単なツールだから茨の道ということはない

**デフォルトの名無しさん** · 2022/04/30(土) 08:55:59.74

>>323
recoil使え

**デフォルトの名無しさん** · 2022/04/30(土) 20:24:57.68

recoilいいね
わかりやすいわ

**デフォルトの名無しさん** · 2022/05/05(木) 11:51:03.63

reduxを使うにしても、UI側だけで使用する状態の保持はcontextでやった方がいい感じかな
あくまで個人的感想の落書き

**デフォルトの名無しさん** · 2022/05/22(日) 20:06:50.28

gifjsってライブラリをReactNativeでも使えるようにしようと色々いじくってます。canvasが必要なのでreact-native-canvas入れてみたけどgetImagedataが遅すぎる...
webviewで実行したら改善するかな？？もしくはなんか違うやり方あるかな？？

**デフォルトの名無しさん** · 2022/05/29(日) 18:03:59.58

組込みやってて流れでreactで自社内で使うwebアプリのフロント側
作らされる羽目になったのですが素人がreactとjs学ぶのに
定番みたいな書籍やコンテンツありますか？
バックエンドはやりませんがpythonのfastapiです。

**デフォルトの名無しさん** · 2022/06/07(火) 16:32:08.16

reactとかってソースにコメントって
あまり書かないほうがいい的な暗黙のルールってあります？
読まれちゃうから？

今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。

**デフォルトの名無しさん** · 2022/06/09(木) 19:17:56.70

ないです
トランスパイルしたら消えるのでしっかり書きましょう

**デフォルトの名無しさん** · 2022/07/01(金) 09:49:56.08

ありがとう

**デフォルトの名無しさん** · 2022/08/20(土) 11:13:41.79

propsで受け取ったデータを
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか？

**デフォルトの名無しさん** · 2022/08/25(木) 12:56:19.31

ここReactの本スレ？

過疎ってるの？

**デフォルトの名無しさん** · 2022/08/25(木) 17:55:45.09

過疎ってるのは明白やろ

**デフォルトの名無しさん** · 2022/08/25(木) 17:58:32.30

ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな

**デフォルトの名無しさん** · 2022/08/30(火) 00:50:56.99

reactはtypescriptが必須なのでしょうか？

**デフォルトの名無しさん** · 2022/08/30(火) 03:03:46.27

>>337
いらん

**デフォルトの名無しさん** · 2022/08/30(火) 03:55:25.12

Reactが流行っていないから、過疎っているんだよ

**デフォルトの名無しさん** · 2022/08/30(火) 18:08:40.22

reactの求人は多いですけど、実際にはどうなのでしょうか。

**デフォルトの名無しさん** · 2022/08/30(火) 19:28:11.75

Reactできる人は全然足りてない

**デフォルトの名無しさん** · 2022/08/30(火) 19:53:41.07

>>341
そうなのですか。
今、javascriptとjQueryの勉強をしてますが、この2つだけでも大変ですね。

**デフォルトの名無しさん** · 2022/08/30(火) 20:28:20.43

数年Web屋やって引退するつもりならそれでもいい

**デフォルトの名無しさん** · 2022/08/30(火) 21:03:00.66

Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる

**デフォルトの名無しさん** · 2022/08/30(火) 22:54:29.99

JavaScript関連技術でwebアプリを作るならreactは便利でしょうか？

**デフォルトの名無しさん** · 2022/08/30(火) 23:14:38.13

便利さでいうならAngularがいいよ

**デフォルトの名無しさん** · 2022/08/30(火) 23:44:08.14

満足度が底辺のangularがなんだって？
https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks

**デフォルトの名無しさん** · 2022/08/31(水) 01:59:04.53

>>345
できる人は、何でもできる

**デフォルトの名無しさん** · 2022/08/31(水) 11:44:05.05

Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる

**デフォルトの名無しさん** · 2022/08/31(水) 12:36:45.93

ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ

**デフォルトの名無しさん** · 2022/09/01(木) 05:11:23.04

vue.jsよりreactの方が優れてますよね？

**デフォルトの名無しさん** · 2022/09/13(火) 16:36:34.31

test

**デフォルトの名無しさん** · 2022/09/26(月) 01:00:41.00

最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい

・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね？recoilに比べてどういうメリットがあるの？
・クラスベースの記述って殆どしないの？ベストプラクティスは関数ベース？

**デフォルトの名無しさん** · 2022/09/26(月) 20:02:50.86

toolkitはReduxで使い勝手が悪かった機能を改良したもの。(asyncに対応させるためにthunkとかsagaが必要だったりとかの)
recoilのほうが新しく記述もシンプルで見通しが良くなる。stateのset/get両方に対応。ただしまだexperimental

https://www.npmjs.com/package/recoil
Recoil is an experimental state management framework for React.

公式は関数コンポーネント+フックを推奨

https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。

**デフォルトの名無しさん** · 2022/09/26(月) 22:42:27.40

>>354
ごめんクラスコンポーネントと関数コンポーネントの違いは分かってるんだ
例えば、1+1を計算する関数をクラスベースで定義すべきか関数ベースで定義すべきか
的なことを知りたかった！

**デフォルトの名無しさん** · 2022/09/26(月) 22:56:01.37

JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数

**デフォルトの名無しさん** · 2022/09/26(月) 22:59:55.62

>>355
書いてくれてるだろ
ちゃんと読もうよ

**デフォルトの名無しさん** · 2022/09/26(月) 23:21:54.38

ああ、ごめんコンポーネントの話じゃなかったのか

**デフォルトの名無しさん** · 2022/09/26(月) 23:22:50.91

React実践の教科書、2021

この本には、クラスは出てこない。
すべて関数

**デフォルトの名無しさん** · 2022/09/27(火) 12:54:00.07

なるほどなるほど
仕事でcobolとvbaしか使ったｂｱとなかったかｂ辜Iブジェクト試w向的な記述自荘ﾌ馴染みなかっｂｽわ

Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな

**デフォルトの名無しさん** · 2022/09/27(火) 13:46:50.26

JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる？

ちなみにReactのクラスコンポーネントはオワコンだけどね

**デフォルトの名無しさん** · 2022/09/27(火) 14:04:56.54

>>361
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。

こんなイメージだけど合ってる！？

**デフォルトの名無しさん** · 2022/09/27(火) 15:39:04.72

>>362
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ

JSの方は好みだな

**デフォルトの名無しさん** · 2022/09/27(火) 15:58:48.85

>>360
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ

**デフォルトの名無しさん** · 2022/09/27(火) 16:41:51.18

Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない

**デフォルトの名無しさん** · 2022/09/27(火) 16:48:43.98

>>364
頭ごなしに否定する気はないんだけど
（jsの）クラスベースの記述するメリットってどういうとこがあるの？
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ

**デフォルトの名無しさん** · 2022/09/27(火) 17:25:00.79

Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……

**デフォルトの名無しさん** · 2022/09/27(火) 17:28:55.43

プロジェクトメンバーにどうして混在してるのか聞いてみた？

**デフォルトの名無しさん** · 2022/09/27(火) 17:29:21.69

jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。

**デフォルトの名無しさん** · 2022/09/27(火) 18:13:32.56

クラスコンポーネントは公式に非推奨扱いじゃね

**デフォルトの名無しさん** · 2022/09/27(火) 18:15:33.41

話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ

**デフォルトの名無しさん** · 2022/09/27(火) 18:20:28.32

Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う

**デフォルトの名無しさん** · 2022/09/27(火) 20:04:34.40

>>368
うん
「本当はよくないんですけどね～～」
的なことを言ってたよ

他にも
・propsのバケツリレー
・コールバック関数使って子→親へのprops逆流（これが一番酷い）
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成

等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね

**デフォルトの名無しさん** · 2022/09/27(火) 20:20:13.86

プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて

**デフォルトの名無しさん** · 2022/09/27(火) 20:22:10.28

>>373
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。

**デフォルトの名無しさん** · 2022/09/27(火) 20:39:34.88

>>374
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。

>>375
アジャイルってこんなもんなんじゃないの？知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ

**デフォルトの名無しさん** · 2022/09/27(火) 22:23:16.69

>>362
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。

**359** · 2022/09/27(火) 23:17:49.69

>>373
React実践の教科書、2021
基礎はこの本で良い。3日で読める

propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある

これ以上に複雑なものは、Redux, Recoil, Apollo Client など

useMemo など、use何々にはどういう機能があるか、すべて見た方がよい

**359** · 2022/09/27(火) 23:29:13.30

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている

var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});

**デフォルトの名無しさん** · 2022/09/27(火) 23:53:21.49

なんでそんなにクラスコンポーネントの話にこだわるの？

**デフォルトの名無しさん** · 2022/09/28(水) 20:45:18.22

presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。

で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？

**デフォルトの名無しさん** · 2022/09/28(水) 21:57:59.16

プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート

**デフォルトの名無しさん** · 2022/09/28(水) 22:11:03.79

グローブステートにRxで変更通知でどうですか？

**デフォルトの名無しさん** · 2022/09/28(水) 22:46:08.76

>>382
へー！なるほど！
その経緯は知らんかったわ！ありがとう

propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね

**デフォルトの名無しさん** · 2022/09/28(水) 23:33:30.69

え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの？

**デフォルトの名無しさん** · 2022/09/28(水) 23:38:10.61

ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？

**デフォルトの名無しさん** · 2022/09/29(木) 01:06:57.42

>>385
ロジックはhooks

データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる

**デフォルトの名無しさん** · 2022/09/29(木) 01:29:18.28

>>387
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん？

presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？

…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど

**デフォルトの名無しさん** · 2022/09/29(木) 07:28:27.58

>>386
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……

**デフォルトの名無しさん** · 2022/09/29(木) 07:40:58.14

>>388
いやいやいやロジックはhooksって書いたじゃん
複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う

**デフォルトの名無しさん** · 2022/09/29(木) 08:51:14.08

Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した

そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた

また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た

**デフォルトの名無しさん** · 2022/09/29(木) 08:54:50.37

>>390
コンポーネントにロジックを記載するのではなく
カスタムhooksとして切り出すってこと？
理解力乏しくてすまん

**デフォルトの名無しさん** · 2022/09/29(木) 09:34:16.50

>>392
そういうこと

**359** · 2022/09/29(木) 09:39:43.34

React実践の教科書、2021

この本には、カスタムフック・自作のHooks も書いてある

ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック