19/11/10 09:43:45.39 ZVDov6M9.net
ごめん自決して
カラーのimportミスってた
×import red from '@material-ui/core/colors/purple';
◯ import red from '@material-ui/core/colors/red';
スレ汚しすまん
51:デフォルトの名無しさん
19/11/28 18:27:49.62 GNo6CJtR.net
react-native doctor コマンド
URLﾘﾝｸ(facebook.github.io)
プロジェクト設定や開発環境の診断と修正
52:デフォルトの名無しさん
20/01/20 13:50:40 NblZ7u1g.net
初歩的な質問で申し訳ないのですが
リセットCSSを適用させようとすると、スタイルがリセットCSSのみしか適応されません。
具体的には・・・
App.js
import React from "react";
import { render } from "react-dom";
import "./reset.css";
import "./first.scss";
import { BrowserRouter, Switch, Route } from "react-router-dom";
こんな感じのをApp.jsに読み込ませているのですが、
reset.cssをインポートするとreset.cssのHTMLがリセットされたスタイルしか反映されず、first.scssは反映されません。
reset.cssを外しfirst.scssのみにすればちゃんとfirst.scssの内容がHTMLに反映されます。
HTMLのCSSをリセットしてから、オリジナル（first.scss)に変更といった事がしたいのですが、
どうすれば良いでしょうか？
reset.cssはこちらのHTML5 Doctor Reset CSSというのをreset.cssにコピペしてインポートしています。
URLﾘﾝｸ(html5doctor.com)
試しにfirst.scssの中身の最上部にHTML5 Doctor Reset CSSの中身を張り付けてみたのですが同じでした。
53:デフォルトの名無しさん
20/01/20 14:09:55 1C7qXqig.net
importされるのはcssじゃなくてjs(実質reset.css.js)だからね
問題はwebpackの設定じゃないの？
webpack entryでググってみたら？
54:デフォルトの名無しさん
20/01/29 20:07:56.78 kAGOnFqI.net
最近androidシミュでfetchが上手くいかなくなったけど何でだろ？
55:デフォルトの名無しさん
20/05/23 18:46:27 wT2dUHsh.net
useStateとReduxって共存していいの？
56:デフォルトの名無しさん
20/05/24 13:54:49 rk0sziuW.net
>>55
システム全体で必要なのはRedux
Postする為にそのFormだけで必要なものはuseState
って使い方してる
共存って点で言うならHooksか旧型式かを共存させなきゃ別にいいと思う
57:デフォルトの名無しさん
20/06/09 16:01:35.59 mEfhV+3L.net
React.ComponentとSuspenseを使ってリストを読み込んで表示するプログラムを書いているのだけど
renderでメンバ関数を呼んで読込するとthisがつく変数(stateとか)が全てリセットされるよどうして？
リセットされる変数をstaticにすると動くようです
58:デフォルトの名無しさん
20/07/25 07:59:44.00 e6nmtc2O.net
人工知能フレームワークのGpt-3がReact上で動くんだよなあ
59:デフォルトの名無しさん
20/07/25 14:10:16.00 ZlqyHRW3.net
>>57
まだそんな事やってるのか？
早くHooksに移行した方がシンプルで使いやすいよ
60:デフォルトの名無しさん
20/08/05 20:39:39.66 HaLefuVq.net
reactでフォームの連動させたいんだけど
良いチュートリアルやサンプルをおしえてください
調べ方でも大丈夫です
61:デフォルトの名無しさん
20/10/06 09:47:28.33 FaC1oBor.net
>>60
連動？
って具体的に何やりたいの？
62:デフォルトの名無しさん
20/10/06 15:47:26.50 3JbOTVG0.net
>>60
公式を嫁！
それか、オレの知り合いの本を嫁！
以上。
63:デフォルトの名無しさん
20/10/07 08:13:26.21 9X+ETi/j.net
他のフォーム要素を同時にどうかしたいって仮定するとonClickイベントやonChangeイベントのコールバックにメソッド噛ませればいいんじゃない？
64:デフォルトの名無しさん
20/10/11 20:19:56.38 /PPF0LFF.net
Html,Javascriptのソースコードをreact nativeに書き直してるけどDom要素のID管理していたのを書き直すのが辛すぎる
何かよいライブラリないかなぁ
65:デフォルトの名無しさん
21/01/04 01:07:02.79 EMrQXkgT.net
iOSやAndroidアプリを作りたくてprogateのhtmlとJavaScriptと reactまでやったんですが、次に何をすれば良いか分かりません。僕は次に何を学べばいいですか？
66:(u＿・y)
21/01/04 11:37:19.32 oZidFLop.net
(u＿・y)順序からしておかしくね
(u＿・y)Androidアプリ作るならまずAndroid上でハローワールドだろ
(u＿・y)Googleになんかアカウント作って登録あれこれやるんじゃねーの
(u＿・y)Win以外のアプリを作るので難関になるのはそういった手順と環境構築絡みなので、
(u＿・y)周りに先生がいない状況で独学初心者がいきなりAndroidアプリってのはハローワールドまでに時間かかるぞ
67:デフォルトの名無しさん
21/01/12 01:34:10.49 dF2LSabj.net
公式のドキュメントに全部書いてあるから全部読め
68:デフォルトの名無しさん
21/01/21 19:04:19.07 RZX+x1N+.net
Java から来て、最近 React はじめたんだけど、MVC 思想的なのは最近フロントエンドではなくなっていってる感じなん？
せめて View 部分は分けないと気持ち悪いんだけど、チュートリアルみても割とごちゃまぜなのよね…
69:デフォルトの名無しさん
21/02/14 03:47:14.57 wyKYn9A/.net
React の hookを初めてみてるんだけど、
これClassベースの機能で提供できないのかな？
functionなのに永続化を無理やりやってるようでコード読みづらい。
その永続化をuse接頭語のみで判断しなければならないという...
functionじゃなきゃhookの機能が提供できない？？というモヤモヤ感が払拭できないです。
70:デフォルトの名無しさん
21/02/14 04:24:42.10 qcnkr3Yb.net
元々はクラスベースで提供されてた機能を関数コンポーネントでも使えるようにしたのがhookやで
71:デフォルトの名無しさん
21/02/14 04:26:06.17 o9olz+i9.net
>>69
目に見える副作用をフレームワーク側に追い出して
ユーザーからは副作用がないようにしてる設計は素晴らしいと思うけどね
72:デフォルトの名無しさん
21/02/14 04:47:15.25 wyKYn9A/.net
>>71 副作用がないようにしてる設計
それがclassベースでは出来ない？？って疑問。
>>70
ならhookがclassより上という事ではなくなる。
でも公式コメントでもclassよりhookのモデルが優秀みたいな書き方。
ただclassは無くさずこのまま残しますみたいな。
なんかfunctionを無理やり生存期間拡張してるところが
感覚的に違和感モヤモヤ。
hookの機能をclassで実装するとやりづらい箇所って、
同名メソッドを複数定義できる箇所ぐらい？
73:デフォルトの名無しさん
21/02/14 04:59:08.67 o9olz+i9.net
>>72
もちろんできるしそれを手動でやってきたのがクラス
でもsetState呼ばなかったり状態にオブジェクトが必須だったりで色んなミスが起きやすかった
それをフレームワーク側で全部やって
ユーザーが書きやすくするのがHooks
人間がやるよりフレームワークがやる方が信頼性が高いし賢いからそこは任せた方が良いよねってことで生まれたと勝手に思っている
74:デフォルトの名無しさん
21/02/14 05:41:48.27 wyKYn9A/.net
>>73
だから、それ（hook）をclassべースで提供できないの？って言ってんの。
75:デフォルトの名無しさん
21/02/14 05:48:13.99 eZAyHvHf.net
クラスはhookなしで同じことができるから提供する必要がない
76:デフォルトの名無しさん
21/02/14 07:45:04.97 o9olz+i9.net
>>74
いやだからsetStateという汎用的な物しか提供できないっことね
stateを自分で好き勝手いじれるのに
それをライブラリが管理するって無理でしょ
hooksは内部で対応するコンポーネントとその状態を管理してるから
ライブラリとして提供できる
77:デフォルトの名無しさん
21/02/14 13:32:40.22 wyKYn9A/.net
>>76
分かんない人だな。
なんで今のclassベースの実装をこの話に持ち込むの。
hookの機能を”function”でなく、jsの”class”で実現できないの？っていう疑問なの。
78:デフォルトの名無しさん
21/02/14 14:00:51.86 +4ZWExbH.net
お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ
79:デフォルトの名無しさん
21/02/14 14:19:02.14 wyKYn9A/.net
hookを知らないやつだったか。アホらし。
80:デフォルトの名無しさん
21/02/14 14:34:40.65 kA8DCabn.net
時系列的には
クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える
と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし
クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する
という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント
81:デフォルトの名無しさん
21/02/14 14:46:29.94 wyKYn9A/.net
>>80
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか？向かないのか？
って事になる。ね。
82:デフォルトの名無しさん
21/02/14 15:15:15.08 kA8DCabn.net
クラスコンポーネントのインスタンスはthis.～で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる
83:デフォルトの名無しさん
21/02/14 16:39:29.19 DVWK/pJu.net
useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？
なんかそう言うパッケージ見たことあるぞ
84:デフォルトの名無しさん
21/02/14 16:59:03.97 FekQTk3J.net
classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ
class Foo extends React.Component {
handleClick = (ev) => {...}
85:デフォルトの名無しさん
21/02/14 21:01:15.04 K2VDjDyL.net
Ruby on Rails では、控えめなJS フレームワークのStimulu もある
規約で、HTML のdata-controller 属性で、JSファイル名・コントローラーが決まるので、
そこにイベント処理を書くだけ
DOM・コントローラーは、多対多
1つのDOMは、複数のコントローラーで処理できる。
HTML内で、同じコントローラーを複数定義できる
Stimuluは、this を使う。
同じコントローラーを複数定義したら、別のインスタンスを作る
<li data-controller="a">1</li>
<li data-controller="a">2</li>
86:デフォルトの名無しさん
21/02/14 21:03:03.46 NOmukaW1.net
ス・レ・チ
87:デフォルトの名無しさん
21/02/15 02:51:04.90 E7fw/gtI.net
マジで障害者かな？
この板に巣食ってる人がいるのは認識してたけど
88:デフォルトの名無しさん
21/04/22 04:19:05.03 vjCFYs66g
「社員全員が副業」を体現し普及するスタートアップ、売上前年比４倍が物語る今後
URLﾘﾝｸ(newswitch.jp)
「全員副業必須」型破りな経営がもたらした、社員の脱会社依存と幸せ
URLﾘﾝｸ(ix-careercompass.jp)
社長も社員も全員副業 ひとつの会社に頼らない働き方
URLﾘﾝｸ(style.nikkei.com)
「副業」社員で成り立つ会社登場 働き方改革の最先端
URLﾘﾝｸ(www.sankei.com)
仕事を「時間と場所」から解放せよ！ 週休3日、スーパーフレックス─新しい働き方は日本企業に通用するか
URLﾘﾝｸ(www.itmedia.co.jp)
週休3日なのに年収を3倍にした男性の「時短術」
URLﾘﾝｸ(news.yahoo.co.jp)
“週休3日制”導入で売上4割増の例も…日本企業で普及期に、週30時間が常識に
URLﾘﾝｸ(biz-journal.jp)
「 リモートワークで手放すべき7つのこと」働き方改革の先の世界
URLﾘﾝｸ(tebanasu-lab.com)
週休3日制をさらに進めた週休4日制
URLﾘﾝｸ(www.k-society.com)
89:デフォルトの名無しさん
21/06/18 09:52:07.92 IQL7BQ/N.net
React Hooks + Reduxの利点を述べた記事をいくつか読んだのですが、
MVCでだめな理由がよくわかりませんでした。
複数のModelがReduxのStoreに一本化される: Modelをシングルトンにして、
Storeの内部で区分するところをModelのメンバとして区分する。
ViewからはActionを発行してReducerを通さないとStoreを更新できない:
ViewはControllerに登録されたメソッドを通してしかModelを更新できない。
Storeの更新はViewに自動的に反映される。
Model(とそのメンバ、孫メンバ)がObservableであれば、Modelの更新を
自動的にViewに反映させることができる。
ではだめなんでしょうか。
90:デフォルトの名無しさん
21/08/10 10:10:26.07 0SSgF6Zh.net
Reactで関数コンポーネントで本気実装始めたんだが、
関数コンポーネント面倒くさ過ぎじゃね？
関数コンポネント入門位の実装なら問題なかったんだが、
ちょっと込み入ったの実装しようと思ったら
クラスじゃないんで、コンポーネントの自前メソッドを（子から親、親から子）公開するのとか
そのTS型定義をどうするのとかうまく解決できんのか？これwww
91:デフォルトの名無しさん
21/08/10 10:18:58.12 Yti8n+JL.net
込み入った実装ってだいたい設計から間違ってるよね…
92:デフォルトの名無しさん
21/08/10 10:22:58.46 0SSgF6Zh.net
>>91
あんたが考えてんの具体的にどのレベルだ？
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ
93:デフォルトの名無しさん
21/08/10 11:17:59.39 x9cqqxVb.net
奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ
推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね
94:デフォルトの名無しさん
21/08/10 11:27:05.53 0SSgF6Zh.net
>>93
！！
まだReact不慣れで困ってる
半年前にReact初めてそちはクラスベース（TS）だったので、
実装できない事は無かったのでこういった苦労はなかった
>>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
どうだろう？
あんまり業務的なことを書くわけにはいかんけど、
親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、
コンポーネントが今回クラスから関数に変わったんで、
コンポーネント側にコンポーネント固有の機能（クラスん時はメソッド）が実装しずらくなって困ってる
関数コンポーネントだとここにメソッドとか置かないもんなの？
95:デフォルトの名無しさん
21/08/10 12:03:49.33 0SSgF6Zh.net
関数なんだから、オブジェクト指向的な実装はムリなんだろうな
とりあえず、
・クラス → モジュール
・プロパティ → モジュールの関数の引数
・メソッド → モジュールの関数
に置き換えて実装してみるわ
96:デフォルトの名無しさん
21/08/10 12:28:03.76 dmkhwQTT.net
関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト
その超基本的なところをわかってなさそう
他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ
97:デフォルトの名無しさん
21/08/10 12:36:48.42 0SSgF6Zh.net
いや、アトミックデザイン的に機能分割して
その単位をオブジェクト指向的にデザインしてたわー－（前回プロジェクト）
でもRender()しかやらん関数と、
その外にはみ出た処理で細切れ関数だらけになって、
コード読みにくいは、実装も美しくならんわー－ ( ﾉД`)ﾄﾞｽﾙ
98:デフォルトの名無しさん
21/08/10 14:00:37.21 8kvO2lBn.net
Redux素晴らしいって言ってた人たちは今息してんのかな
99:デフォルトの名無しさん
21/08/10 14:08:07.90 UtkECLI3.net
>>97
この流れでアトミックデザインを出してくるのものすっごく薄っぺらい
100:デフォルトの名無しさん
21/08/10 14:15:30.49 i+IrTlV6.net
>>99
アトミックデザイン使わず
あなたが表現してあげたら？
101:デフォルトの名無しさん
21/08/10 14:57:48.57 UtkECLI3.net
>>100
単純にいらんやろ
「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん
102:デフォルトの名無しさん
21/08/10 15:49:45.99 LAvum0nL.net
>>101
コンポーネントの分割単位が伝わらんよ
103:デフォルトの名無しさん
21/08/10 16:58:18.35 UtkECLI3.net
>>102
この流れで分割単位の話なんかいらないじゃん
88から読み直してみ
104:デフォルトの名無しさん
21/08/10 18:51:43.55 M/It2Akn.net
> コンポーネント間のメソッド呼び出し
？？？？？？？？？？
105:デフォルトの名無しさん
21/08/10 19:15:22.44 Yh+H2qBA.net
データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか
両方使う例があるなら見てみたい
106:デフォルトの名無しさん
21/08/10 19:38:32.34 Qo7qEUjv.net
>>105
swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね
だからクライアントサイド固有の状態を
swrで扱おうとは俺は思わない
apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない
コンポーネントのローカルステート→useState, useReducer
クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る)
サーバーステート→swr, react query, apolloなど
と使い分けてる
107:デフォルトの名無しさん
21/08/10 20:04:49.62 Yh+H2qBA.net
>>106
参考になるありがとう
依存ライブラリ増加を嫌うことへの妥協案で >>105 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう
108:デフォルトの名無しさん
21/08/11 19:43:56.70 u2eXJHJo.net
>>90
ちゃんとhooks使ってるか？
109:デフォルトの名無しさん
21/08/11 20:53:01.89 UmYmX+C7.net
>>108
ぶっちゃけクラスの方が書きやすく
コードも綺麗だ（実力高い人の場合）
関数コンポーネントは
実装の自由度がhocksｂﾆその拡張ぐらｂ｢しかなく
フレームワーク的なのが造りづらく感じてる
110:デフォルトの名無しさん
21/08/12 03:09:43.60 YWc6Jioi.net
実力が高いw
本気でそう思ってるならqiitaでもzennでもどこでもいいから記事に書いてみろよ
間違いなく日本中からボロクソに叩かれるよ
111:デフォルトの名無しさん
21/08/12 03:23:50.10 c9YvWIsD.net
>>110
受け答えから見て実力が低そう
112:デフォルトの名無しさん
21/08/12 17:08:42.90 qp3m1ZO5.net
>>109
クラス記法はこういう欠点があるからなあ
URLﾘﾝｸ(speakerdeck.com)
113:デフォルトの名無しさん
21/08/12 17:57:27.67 /tY+Xjfe.net
大方の単細胞腦は、SQLDBとNoSQLDBの時がそうであったように
関数コンポーネントとクラスコンポーネントのどちらかに
絶対的な優劣をつけたがってんじゃね？
今回も関数コンポーネントがマッチする場合と、
そうでない場合がありそうに見える
とくに、関数コンポーネントは
コンポーネントのインスタンスが自由に扱えない（扱えなさそう）から
そういった処理の実装時に（React用で無いJSライブラリを無理やり動かしてたようなケースとか）
トラブりそうな気がする
114:デフォルトの名無しさん
21/08/12 18:16:18.47 mo2yl2b6.net
典型的な「分かってないことが分かってない」ヤツ
115:デフォルトの名無しさん
21/08/12 18:29:54.23 1fVVrAZN.net
優劣はどうでもよくてクラスコンポーネントは互換性のために残されてるだけってのがReactの立場
新しい機能の中には関数コンポーネントからしか使えないものが出てるしこれからも増える
そもそも対等な選択肢ではないから議論する価値がない
状況に合わせて適応するってのが一番大事
116:デフォルトの名無しさん
21/08/12 18:43:59.17 /tY+Xjfe.net
>>115
>> 互換性のために残されてるだけってのがReactの立場
なんと！(; ･`д･´)
117:デフォルトの名無しさん
21/08/12 18:53:29.47 1fVVrAZN.net
今の公式ドキュメントやチュートリアルは古くてクラスコンポーネントが大きく扱われてるのが本当に良くない
それはReactチームも分かってるからドキュメントを全面的に書き換えてる最中
もちろん関数コンポーネントとHooksメインで
118:デフォルトの名無しさん
21/08/12 19:01:46.19 /tY+Xjfe.net
>>117
なんと！(; ･`д･´)
119:デフォルトの名無しさん
21/08/26 15:41:55.94 CFvcLd/B.net
フック初心者ですが
「フックは関数のトップレベルのみで呼び出してください。」
とあります。この関数は関数コンポーネントの意味で合ってますでしょうか？
120:デフォルトの名無しさん
21/08/26 15:51:22.45 CFvcLd/B.net
<Button1>と<Button2>で
それぞれ内部でuseStateを使ってたら
<Button1>
<Button2/>
</Button1>
はNGになるのでしょうか？
121:デフォルトの名無しさん
21/08/26 16:38:00.65 gityixOl.net
>>119
> この関数は関数コンポーネントの意味
違う
ifやforなどの制御構造の内側から呼び出すなということ
要するに関数コンポーネントの呼び出しごとにhookが実行されたりされなかったりしてはいけない
なので?:や&&などと組み合わせるのもダメ
122:デフォルトの名無しさん
21/08/26 16:39:25.72 gityixOl.net
>>120
それはOK
それぞれのコンポーネントは独立してるから問題ない
123:デフォルトの名無しさん
21/08/26 16:45:57.37 KmLAFOYJ.net
>>122
有り難い！
しかし判り辛いですね
お題目だけだと
公式に具体例を上げてくれないと
勘違いしそう...
124:デフォルトの名無しさん
21/08/27 13:34:41.69 gabOubiT.net
hookの実行順でレンダリング毎の同一性を保証してるってわかってれば当たり前のことなんだけどね
125:デフォルトの名無しさん
21/08/27 13:54:27.15 KVovKrAi.net
順番で状態を管理してるって一昔前の考えだと
なんだそりゃって感じになるんだけど
そもそも自分で管理するのはクソだから
全部フレームワークに任せちゃえってなってる
React凄い
126:デフォルトの名無しさん
21/08/27 15:19:14.34 B8clkCSU.net
翻訳の問題かもしれんけど
「関数のトップレベル」という表現が判りずらい
「関数内部の最初の行あたり」で良くないか？
127:デフォルトの名無しさん
21/08/27 15:45:49.48 nZgJAtld.net
function Foo(props) {
if (props.flag) useEffect(...)
...
最初の行だけどアウト
128:デフォルトの名無しさん
21/08/27 15:48:30.00 KVovKrAi.net
「同じフックが常に実行されるようにすること」
これでよくね？
129:デフォルトの名無しさん
21/08/27 15:49:19.59 B8clkCSU.net
関数のトップレベルの訳としての話しだよ(´Д`)
130:デフォルトの名無しさん
21/08/27 15:57:29.79 rY0RNuZ6.net
モジュールのトップレベルもわからない？
それじゃトップレベルawaitも分からないしJSやるの無理やろ
131:デフォルトの名無しさん
21/08/28 04:17:28.74 5cd2kTad.net
useCallback これっている？
fnのMemoならMemoってキーワードも名称から抜けてるし
useMemo(() => fn, deps) と同じならなおさら...
132:デフォルトの名無しさん
21/08/28 04:35:56.44 52Q/kK4D.net
fnをファットアローでインラインに書いてみ
133:デフォルトの名無しさん
21/08/28 04:42:56.91 5cd2kTad.net
うー－ん！初学者だからなのか意味わからんです
134:デフォルトの名無しさん
21/08/28 04:46:30.48 5cd2kTad.net
useCallback(fn, deps) が useMemo(() => fn, deps) こう書けるって事なんじゃないですか？
135:デフォルトの名無しさん
21/08/28 04:54:08.75 aWJHFkdS.net
useCallback((event) => {...}, deps) を useMemo(() => (event) => {...}, deps) って書きたいかって話
136:デフォルトの名無しさん
21/08/28 05:10:24.97 5cd2kTad.net
>>135
良い！
そっちのが良い！
fnのメモなのに、useMemoCallback()になってないので直観的に思えない
初学者だと、ぱっと見CallbackするにはuseCallback()が必須に見える
理由はMemoの文字が入ってないから
137:デフォルトの名無しさん
21/08/28 06:24:50.37 P0+dXebs.net
それ言ったらuseMemoなんてuseState使えばいいし内部でstate使ってるのにuseNemoStateじゃないの直感的じゃないよね
138:デフォルトの名無しさん
21/08/28 08:24:29.02 5cd2kTad.net
useCallback だと名称から、
コールバック使いますよ！の宣言に見えると言っている
実際はコールバックをメモしますよ！だから
コード読むとき直感的でないと言っている
実際、初学者で関数コンポネント内でコールバックを定義するときは
useCallback()を使わなければならないと思いこんでいる人が少なからず居ると思う
139:デフォルトの名無しさん
21/08/28 10:18:42.44 rJz23Izt.net
Ionicと比べた場合のReact nativeのメリットはアプリの動作速度が速いところ？
140:デフォルトの名無しさん
21/08/28 10:19:30.77 rJz23Izt.net
ageてしまって申し訳ない
141:デフォルトの名無しさん
21/08/28 10:59:30.05 4fr1GGj/.net
>>138
初学者は
> useCallback()を使わなければならないと思いこんでいる
で丁度いい
142:デフォルトの名無しさん
21/08/28 11:35:50.02 5cd2kTad.net
>>141
その心は？
143:デフォルトの名無しさん
21/08/28 12:30:31.08 fYYl/4Rj.net
>>142
不要なuseCallbackを書いても実害はない
超大規模ならチリツモでパフォーマンスに影響あるかもしれないが初学者には関係ない
対して必要なuseCallbackを忘れるとuseEffectやReact.memoに影響しうるが初学者には気付きにくい
最初は愚直にuseCallback書いて後から不要なケースを学べばいい
144:デフォルトの名無しさん
21/08/28 13:47:14.15 17Xf1f5F.net
>>143
なるほど！
その意味であえて関数名もそうしたんだろうか...
145:デフォルトの名無しさん
21/08/28 23:14:15.55 5cd2kTad.net
URLﾘﾝｸ(medium.com)
"カスタムフックは技術的にはReact機能ではない" って
ステートレス関数に状態を保持する機能が
jsに元よりあるという事でしょうか？
146:デフォルトの名無しさん
21/08/28 23:39:41.08 tYNkdatt.net
カスタムフック===ユーザー定義フック
利用者(アプリケーション)で定義するものであってReactが提供する機能ではない
147:デフォルトの名無しさん
21/08/29 00:17:55.75 V85oGWwE.net
>>146
それは了解してた！（質問を間違えた！）
フックを実現する技術（ステートレス関数に状態を保持する機能）は
ＪＳに元からあるという記述が公式にあったようにおもうのだけれど、
それは何？って事が言いたかった...
148:デフォルトの名無しさん
21/08/29 01:51:35.47 V85oGWwE.net
>>147
前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく
JSのクロージャーと array.push と array.pop とかで実装できるって事かな？
誤りありましたらご指摘下さい
149:デフォルトの名無しさん
21/08/29 03:34:12.05 pzZWZODD.net
引用しろボケカス
150:デフォルトの名無しさん
21/08/29 12:10:00.26 OiCqCGE7.net
>>148
前のリンクの文意というのが
> Since Hooks are regular JavaScript functions, you can combine built-in Hooks provided by React into your own “custom Hooks”.
ら辺のことなら全然違う
Reactが提供する「組み込みフック」はJSの普通の関数だからそれを組み合わせて「カスタムフック」を作れると言ってるだけ
Reactが「組み込みフック」をどう実装しているかは触れてない
公式にあったという記述がなんのことかわからないがユーザー向けのドキュメントにReactの内部実装について書いてあるとは考えにくいので何か勘違いしてるんだろう
151:デフォルトの名無しさん
21/08/29 12:12:17.85 OiCqCGE7.net
もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実
詳しく知りたければソースを読めばいい
URLﾘﾝｸ(github.com)
152:デフォルトの名無しさん
21/08/29 13:18:38.44 V85oGWwE.net
>>150
>>147 で言ったように、それは最初から解ってる
聞きたかったのは、フック自体の実装方法だよ！
>>151
そりゃそーーだ
153:デフォルトの名無しさん
21/08/29 13:41:49.73 1XJvcbdc.net
>>152
お前さぁ・・・
フック自体の実装方法が知りたいならそう書けよ
無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ
つーか5ch開く前にすることあるだろ
154:デフォルトの名無しさん
21/08/29 14:30:21.63 LbdE2Z/6.net
>>152
preactのソースを読め
わずか400行そこらでhooksを実装してる
俺がここ数年で見たコードで最も美しいコードだ
型もついてるからめちゃくちゃ読みやすい
URLﾘﾝｸ(github.com)
155:デフォルトの名無しさん
21/08/29 21:46:55.62 V85oGWwE.net
>>154
(; ･`д･´)
156:デフォルトの名無しさん
21/09/18 13:05:29.83 ZtgFEKoc.net
reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？
157:デフォルトの名無しさん
21/09/20 00:13:37.74 fIDZ4k/Q.net
最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？
reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？
158:デフォルトの名無しさん
21/09/20 00:18:04.28 pwmEuNTH.net
>>157
keyを使え
チュートリアルにも乗ってたはず
159:デフォルトの名無しさん
21/09/20 01:13:11.44 GKDt5rSn.net
>>157
ならない
160:デフォルトの名無しさん
21/09/20 02:01:14.08 Rr9hULkc.net
>>157
要素を別コンポーネントにしてReact.memoする
その場合も156が書いてるようにkeyは必須
でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ
161:デフォルトの名無しさん
21/09/20 08:25:15.93 fIDZ4k/Q.net
>>158,159,160
㌧クス
もうちょい調べてみるわ
162:デフォルトの名無しさん
21/09/20 12:16:07.93 GKDt5rSn.net
>>161
リストの出力の場合
アイテム毎にkey必ず振らなければない
key無いのはバグだからね
コンソールにエラー出てるはず
163:デフォルトの名無しさん
21/09/20 12:53:40.75 2GdVuLmq.net
keyが必要なのは確かだがそれが影響するのはリアルDOMの更新
keyがないと
> reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど
が機能しなくなる
本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo
164:デフォルトの名無しさん
21/09/20 18:39:05.51 0kyk7DvV.net
ID:GKDt5rSn の的外れ感
165:デフォルトの名無しさん
21/09/20 19:00:16.83 wV0zqhwC.net
ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？
テストユーザーは50名程度の予定です
166:デフォルトの名無しさん
21/09/20 21:16:44.39 hoT+CjfW.net
それReact関係ないよね
167:デフォルトの名無しさん
21/09/22 02:10:39.83 LiQqK68K.net
うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー
168:デフォルトの名無しさん
21/09/22 15:53:36.27 LiQqK68K.net
>>167だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ
ありがとう
169:デフォルトの名無しさん
21/09/25 21:37:04.38 h7oOvGYh.net
Vue.jsだと公式サイトからリンクにawesome-vueってのがあって
URLﾘﾝｸ(github.com)
ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、
これのReact版とか無いですか？
170:デフォルトの名無しさん
21/09/25 21:39:38.06 h7oOvGYh.net
言った直後にまんまのがあった...
awesome-react
awesome-react-components
笑
171:デフォルトの名無しさん
21/09/25 23:03:28.71 PknKU9DC.net
awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス
172:デフォルトの名無しさん
21/09/27 11:55:16.25 DYuWVLW4.net
JSだとホットリロードが機能するけどTSだと機能しないのだけど
これはTSの自動トランスパイルが機能してないってことですかね？
173:デフォルトの名無しさん
21/09/27 11:57:06.64 ZRFQgXut.net
>>172
？
174:デフォルトの名無しさん
21/09/27 12:09:11.49 DYuWVLW4.net
再起動したら直ったわ
175:デフォルトの名無しさん
21/09/28 17:29:52.40 s3NqJ5bC.net
reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick＝｛clickHandler｝みたいに書くじゃない
このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ？
clickHandlerを関数を返す関数にして、
clickHandler ＝（props）＝＞ () ＝＞｛‥｝
コンポーネントにはonClick＝｛clickHandler(props)｝ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな
event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと
176:デフォルトの名無しさん
21/09/28 18:22:37.60 Tl6wB3bi.net
>>175
JSの基本機能にクロージャーというのがあってだな
なんと！clickHandlerの中から外(つまりコンポーネント)の変数を参照できるんだよ！
const clickHandler = () => {
console.log(props.xxx)
}
useCallback使ってるならdepsに並べる
const clickHandler = useCallback(() => {
console.log(props.xxx)
}, [props.xxx])
177:デフォルトの名無しさん
21/09/28 21:49:04.22 s3NqJ5bC.net
>>176
変数名をpropsにしたのが紛らわしかったかもしれんが
｛arr.map((v)＝＞｛
＜ComponentA key＝v.Id onClick＝｛clickHandler｝ /＞
｝)｝
みたいなことをやってるときにclickHandlerの処理の中でvを参照するにはどうしたらいいのかな？っていうのが聞きたいことなんだが、クロージャ？にあたるのか？
分かりにくくてスマン
178:デフォルトの名無しさん
21/09/28 22:23:47.81 yTRBGUiM.net
memo 化したコンポーネントで ComponentA をラップし props と clickHandler を受け取って onClick=｛() => clickHandler(props)} とする
179:デフォルトの名無しさん
21/09/28 22:25:37.88 84Zwu3SC.net
>>177
それならComponentAにvを渡してその中で
onXxx={(ev) => clickHandler(ev, v)}
180:デフォルトの名無しさん
21/09/28 23:04:47.64 s3NqJ5bC.net
>>178
なーるほどなぁ、面倒だけど確かにそれならできそう
>>179
おー？これはuseCallbackで包めるんか？ちょっと明日試してみるわ
おまえらthx
181:デフォルトの名無しさん
21/09/28 23:30:14.37 pKLoFE48.net
>>180
input等のdomにマップされるコンポーネントに直接渡す関数をuseCallbackする必要はない
182:デフォルトの名無しさん
21/09/29 23:01:40.05 lzBphG+K.net
>>179
あ、これ>>178と同じこと言ってるんか、勘違いしてたわ
このためにラップしたコンポーネントを作らなきゃいけないってのはなんかイマイチだけどそれくらいしかなさそうね。ありがとう
183:デフォルトの名無しさん
21/09/29 23:13:02.36 VRCLPgDh.net
>>182
え？177は俺だけどラップしたコンポーネントってなんのことかわからねーぞw
ComponentAもおまえが作ってるんならそんなのいらないだろ
184:デフォルトの名無しさん
21/09/30 12:42:41.23 TAcHeIwJ.net
componentAが自作かそうでないかに関わらず言ってることは同じだわな
どちらも子コンポーネント内で実装しないといけないことを言ってるんだから
185:デフォルトの名無しさん
21/09/30 14:23:21.02 uxDakMZz.net
質問主はどう見ても>>157なんだから自作前提でよくて余計なことは省いた方がいいと思うね
186:デフォルトの名無しさん
21/10/03 21:36:14.94 9xTT9AKy.net
material-uiのspeed dialをネストしたいんだけど無理かな？speed dial actionの代わりにspeed dialそのものを子に持ちたい
187:デフォルトの名無しさん
21/10/19 10:58:01.20 I/uBXkGk.net
VSCodeでsassファイル保存時に自動フォーマット掛けたいですけどそれ出来る拡張ありますか？
188:デフォルトの名無しさん
21/10/20 21:47:12.22 VGECjsMp.net
>>187
marketplace.visualstudio.com/items?itemName=BdSoftware.format-on-auto-save
標準搭載してほしいわ
189:デフォルトの名無しさん
21/11/09 10:45:02.06 tf9NUtHx.net
イベントと副作用フックどっちでもいい時に、どちらを優先して使うほうがより良いとかってある？
keyを入力するテキスト入力欄、valueを表示するテキスト表示欄がある
keyが変化するとデータを鯖から取ってきてvalueに設定したい
副作用フックでkeyを監視するか、key入力欄の変更通知イベントを使うか、どっちでもいいけど、どちらかというとどっちが良いか？
190:デフォルトの名無しさん
21/11/09 11:13:14.15 ppTxKkYh.net
入力欄の変更イベントで十分だろ
そしてuseDefferedValue経由の値でサーバを叩く
191:デフォルトの名無しさん
21/11/17 09:45:52.91 gjeYELEc.net
素朴な疑問
状態を持ったり副作用を持ったりするコンポーネントってぶっちゃけclassのほうが可読性いいよね？
フックは書く時は楽だけど後で見るとナンジャコラ？ってなる
192:デフォルトの名無しさん
21/11/17 10:40:45.63 yi3gjxGP.net
>>112を読んでないってわかんだよね
193:デフォルトの名無しさん
21/11/17 11:55:31.75 gjeYELEc.net
例えばの話、コンポーネントの初期化処理と終了処理はどこでやるの？って新人の疑問に対して
classコンポーネントなら
見たまんまcomponentDidMount、componentWillUnmountだよ
このメソッドを用意しとくとこのコンポーネントを持って管理してるフレームワークさんが、
いい感じのタイミングで呼び出してくれるよ
こう教えてやれば、直感ですぐさまなるほど、と理解して貰える
しかし関数コンポーネントでは純粋関数とは何か、副作用とは何か、フックとは何か、useEffectとは何か、useEffectの引数は何か、引数の戻りの関数は何か
ということをよく理解して頭の中で読み替えないといけない
なのでじっくり時間をかけて教えても、それでも理解するには時間を要する
関数コンポーネントはこんなのが無数にある
だから理解しにくい
タイピングの文字数は減るので書くのは楽だ、ということは確かだが
理解しやすさで言うと、ちょっとね、、、
194:デフォルトの名無しさん
21/11/17 16:48:12.54 QzSwOiy0.net
宣言的なReactを命令的に読み替えるんじゃ永遠に理解できないだろうな
そういう教え方をされる新人がかわいそうだし同情しかない
195:デフォルトの名無しさん
21/11/17 20:00:29.63 h3betjKK.net
reactでいくつかのファイルがあって保存(ctrl+s)すると
コンパイルしてくれるファイルとしてくれないファイルがあるんだけど違いってなんですか。。。
196:デフォルトの名無しさん
21/11/17 20:55:02.32 Wtj2hevs.net
使ってるide (vscodeとか) のスレで聞け
197:デフォルトの名無しさん
21/11/17 21:47:40.34 h3+MjybB.net
>>193
クラスって何？メソッドって何？継承って何？
198:デフォルトの名無しさん
21/11/17 22:25:06.52 N4+deCyE.net
>>193
クラスだとマウント／アンマウントじゃなくてpropsが変わるたびに開始処理終了処理するってなると全然違うこと教えなきゃダメだろ
199:デフォルトの名無しさん
21/11/18 00:22:44.81 3dlOBCKi.net
レアクトは宣言的だけど実用的なアプリケーションは全て有状態の手続きの塊じゃん？
ということはレアクトと「この不都合な現実世界」を上手いこと切り離して管理する方法が必要なんだよ
それがオブジェクト指向ってわけでね
関数コンポーネントは分離すべき手続きと宣言が渾然一体となっていてわかりにくい
オブジェクト指向を使えば
オブジェクトとオブジェクトを描画する純粋関数に分離することは容易い
それがrenderメソッドな訳だな
200:デフォルトの名無しさん
21/11/18 00:44:06.97 aYAbIgl/.net
レアクト
201:デフォルトの名無しさん
21/11/18 00:47:56.13 F8B2t3Oi.net
また知恵遅れクラス信者か
この流れ何度目だよw
202:デフォルトの名無しさん
21/11/18 01:15:46.87 3dlOBCKi.net
関数が優位に立つのはDOMのレンダリングだけ
状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい
関数は状態が無いものだけを扱うべき
203:デフォルトの名無しさん
21/11/18 07:26:11.67 sAyjJzQx.net
状態や手続きを分離する方法はオブジェクトだけじゃない
モナドもそれだしReactの場合は代数的作用が背景にある
204:デフォルトの名無しさん
21/11/18 07:56:21.14 JMkvun5L.net
>>71辺りからの話を繰り返してるな
高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに
205:デフォルトの名無しさん
21/11/18 08:07:20.27 3dlOBCKi.net
>>203
できる、と、簡単にできる、は全く違うからなぁ
モナドもあるしとか言っても、それはオブジェクト指向の簡単さ、理解しやすさ、使いやすさには到底及ばないわけだよ
206:デフォルトの名無しさん
21/11/18 08:56:13.25 O/tzCGdy.net
それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな
207:デフォルトの名無しさん
21/11/18 10:18:03.07 5if92K6E.net
理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない
それよりReact18がベータになったことだしConcurrent Renderingを知るべき
そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう
208:デフォルトの名無しさん
21/11/18 10:23:00.26 5if92K6E.net
Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる
いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる
だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する
それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう
そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな
クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題
そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね
209:デフォルトの名無しさん
21/11/18 10:29:08.68 5if92K6E.net
将来のReactではマウント・アンマウントも複数回行われるようになる
これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる
クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう
だから従来のライフサイクルという考え方だと破綻する
useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある
React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える
こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる
どちらが理解しやすいかという次元の話じゃないんだよね
210:デフォルトの名無しさん
21/11/18 13:11:55.12 3dlOBCKi.net
それはuseStateを使うかlet変数宣言を使うかってのと同じこと
行儀の悪いコードはファンクショナルでも好きなだけ書ける
ようするにプログラマの腕とモラルの問題
ファンクショナルがクラスに対して優位と示す証拠ではないな
Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら
新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ
そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう
実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは
initializeComponent
componentDidMount
componentWillUnmount
disposeComponent
この辺りだろう
なんてわかりやすいんだ！
そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな
仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前
進化しないならそれはベンダーの怠慢
211:デフォルトの名無しさん
21/11/18 14:18:18.92 I+5yMFIL.net
ライフサイクルが変わってもuseEffectは影響を受けない
なぜならライフサイクルを扱う機能ではないから
ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ
だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw
まぁ、取り残されたければそれでいいんじゃない？
ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ
本気で主張したけりゃここに行きな
URLﾘﾝｸ(github.com)
212:デフォルトの名無しさん
21/11/18 15:19:55.65 3dlOBCKi.net
本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない！ってんなら
useInitializer
useFainalizer
この２つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます！
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ？ 空配列ってさ
213:デフォルトの名無しさん
21/11/18 16:20:58.58 yPpHDEE/.net
本当に化石のような石頭だな
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して？
214:デフォルトの名無しさん
21/11/18 16:43:19.19 3dlOBCKi.net
>>213
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
215:デフォルトの名無しさん
21/11/18 17:09:36.68 tb6GSOae.net
ファンクショナルの限界じゃなくてお前の限界な
216:デフォルトの名無しさん
21/11/18 18:20:41.19 te8WLqUU.net
うわあ・・・
ID:3dlOBCKi
URLﾘﾝｸ(hissi.org)
217:デフォルトの名無しさん
21/11/18 18:34:14.46 3dlOBCKi.net
>>215
いや、ファンクショナルの限界
ファンクショナルでは本来の目的から外れた使い方をしなければない
初回だけ処理したいだけなのに、状態を維持するファンクションを強要される
218:デフォルトの名無しさん
21/11/18 19:03:14.82 wacBz6NM.net
使う人が増えると残念な人も増えるいつもの光景
219:デフォルトの名無しさん
21/11/18 22:26:22.51 fTWvydC+.net
こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
220:デフォルトの名無しさん
21/11/19 09:42:11.48 J0mGbVeO.net
>>196
webpack-dev-server知らんのは流石に論外やろ
221:デフォルトの名無しさん
21/11/21 14:16:11.00 knw1x1gk.net
関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
222:デフォルトの名無しさん
21/11/21 17:48:46.47 UWSF5n1L.net
お前がそう思うんならそうなんだろう お前ん中ではな
223:デフォルトの名無しさん
21/11/21 17:55:48.39 Wm1mwUDt.net
オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね！
224:デフォルトの名無しさん
21/11/21 20:40:46.53 1yBKup76.net
例えばさ、
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう？
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
225:デフォルトの名無しさん
21/11/21 20:55:13.47 SJq+O3t2.net
しつこい
226:デフォルトの名無しさん
21/11/21 21:04:01.25 5qd0Nwtv.net
ふむ、反論ができなくなったのかな？
227:デフォルトの名無しさん
21/11/21 21:16:31.74 zzbPLRQo.net
石頭の老害相手に反論しても無駄
228:デフォルトの名無しさん
21/11/21 22:35:19.11 UWSF5n1L.net
馬鹿は論破できない
229:デフォルトの名無しさん
21/11/22 10:00:05.25 HTg16b0P.net
今どきfunctionって書くか？
230:デフォルトの名無しさん
21/11/22 14:12:56.45 yxcpONXb.net
書かない
231:デフォルトの名無しさん
21/12/03 10:05:55.29 OvhoAu9V.net
ボタン連打するけしからん奴対策の定番ライブラリ教えてよ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
232:デフォルトの名無しさん
21/12/03 16:35:10.63 ZR9gqQ7Z.net
ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね？
233:デフォルトの名無しさん
21/12/03 18:25:47.16 C14FVshC.net
ボタンが押されたらボタンをdisabledにすればいいじゃん
234:デフォルトの名無しさん
21/12/03 19:41:18.43 L4TUqIiQ.net
わろた
235:デフォルトの名無しさん
21/12/03 19:41:36.25 50htZSL3.net
それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある
236:デフォルトの名無しさん
21/12/03 20:19:23.32 mMKMUGdN.net
JavaScriptはシングルスレッド
237:デフォルトの名無しさん
21/12/06 19:49:21.16 56/uA2M5.net
function useMyHook() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
return {
foo: () => a+b,
bar: () => a-b,
};
}
function MyComp () {
const myhook = useMyHook();
useEffect(() => {
if (myhook.foo() > 100 && myhook.bar() < 20)
hoge();
}
}, [???]);
return <Aaaaa />;
???はどう書くのが正解？
推移的に依存してるのはa, bだがa、bには直接アクセスできない
238:デフォルトの名無しさん
21/12/06 20:06:59.76 4QzxG6KH.net
useMyEffectもuseMyHookでやるべきじゃねーの
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
239:デフォルトの名無しさん
21/12/06 20:07:50.83 4QzxG6KH.net
とりあえずこれ読んどけ
URLﾘﾝｸ(blog.uhy.ooo)
240:デフォルトの名無しさん
21/12/06 20:11:27.69 4QzxG6KH.net
>>238
1行目訂正
useEffectもuseMyHookでやるべきじゃねーの
241:デフォルトの名無しさん
21/12/06 22:16:00.54 zN0DCcOz.net
>>238
thank you.
242:デフォルトの名無しさん
21/12/08 14:16:37.56 /W89KInL.net
function MyComp () {
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる？
つまりuseMyCompViewModelをインジェクトしたい時
243:デフォルトの名無しさん
21/12/08 15:51:56.43 5zVi58LJ.net
URLﾘﾝｸ(github.com)
244:デフォルトの名無しさん
21/12/08 19:22:47.15 /W89KInL.net
>>243
㌧
でもこれフックのテスト用なのでは？
そうじゃなくフックをモック化してコンポーネントをテストしたい
245:デフォルトの名無しさん
21/12/08 21:33:33.67 Rfcvtfm3.net
テストだけならこんなんで十分じゃね
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
246:デフォルトの名無しさん
21/12/08 21:48:07.68 lkzI+wPD.net
経年劣化に耐える ReactComponent の書き方
URLﾘﾝｸ(zenn.dev)
247:デフォルトの名無しさん
21/12/08 22:23:21.01 SYjhTw/G.net
>>245
なるぼどなぁ
これで少しやってみよかな
248:デフォルトの名無しさん
21/12/11 11:45:52.40 zttGewLv.net
サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい
どうすればいい？ソースコードを書き換えるのは無しで
249:デフォルトの名無しさん
21/12/11 11:52:28.47 GrxR7SwR.net
プルリクエスト
250:デフォルトの名無しさん
21/12/11 12:05:31.62 zttGewLv.net
function IWantEasyTestableComponent(props) {
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ？
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
251:デフォルトの名無しさん
21/12/11 12:21:22.59 GrxR7SwR.net
jest.mock('path/to/FackingStatefullComponent')
252:デフォルトの名無しさん
21/12/11 12:27:06.61 RI4P88iz.net
>>251
ソースコードの書き換えとどう違うんだそれ？
253:デフォルトの名無しさん
21/12/11 12:44:03.50 g9v4y15i.net
依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
254:デフォルトの名無しさん
21/12/12 21:59:15.39 wsjthnMX.net
LogBox邪魔すぎる
機能OFFにできんのかコレ
255:デフォルトの名無しさん
21/12/20 09:27:19.20 vskoYLeQ.net
状態、副作用は親コンポーネントに持たせるべきか
子コンポーネントに持たせるべきか
256:デフォルトの名無しさん
21/12/20 17:18:10.57 hUMHHR9z.net
コンポーネントの用途に依る
基本的にはコンポーネントで独立してる方がいいと思う
ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず
257:デフォルトの名無しさん
21/12/20 18:51:15.00 DVSwWolF.net
以前は
親(コンテナ)コンポーネントで状態管理
子(プレゼンテーショナル)コンポーネントは表示だけ
ってのが流行ってたが廃れたな
再レンダリングが発生しやすいせいかな
258:デフォルトの名無しさん
21/12/21 15:04:20.98 2tghIxun.net
まあケースバイケースになるか
そこそこ複雑な入力ページなんだけど
親に状態を持たせると不定個数の状態の扱いがやりにくい
子に状態を持たせると親への通知がやりにくい
どっちでやってもスッキリしない
259:デフォルトの名無しさん
21/12/21 15:13:11.31 YHqQ6+Ts.net
入力フォームなら素直にreact-hook-form使え
260:デフォルトの名無しさん
21/12/21 15:40:04.62 ESVu6HO8.net
ほぉん
なかなか便利そう
どこまで複雑な入力ページに耐えられるか気になるところだけど
単純なフォームならこれで良さそうだ
261:デフォルトの名無しさん
21/12/29 00:29:54.67 ceh8LJAo.net
React完全に理解したがパフォーマンスの上げ方がわからねえ
262:デフォルトの名無しさん
21/12/29 00:50:07.29 b+BxW/Al.net
>>261
理解出来てねーーじゃん！
263:デフォルトの名無しさん
21/12/29 01:49:18.73 CcYJF9F8.net
完全に理解した＝何もわからんだからな
チョットでかる＝世界一わかってるだし
264:デフォルトの名無しさん
22/01/04 12:28:56.67 LToZWYYj.net
ブラウザデバッガで見て出てるエラー消すところからかな
あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない
265:デフォルトの名無しさん
22/01/05 12:38:15.54 1AqA60VG.net
Reactの優れたイディオム、デザインパターンまとめたサイト、書籍、教えてよ
266:デフォルトの名無しさん
22/01/09 14:30:52.75 YbeZmiIg.net
react nativeのパーツかわからないんですけど
画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう？
URLﾘﾝｸ(i.imgur.com)
267:デフォルトの名無しさん
22/01/20 19:51:41.70 fJA5C2IK.net
reduxでプレーンな只の関数でstate参照したい時ってどうすれば良いの？
reducersでもactionsでも無いから直接stateは見えない。コンポーネントじゃ無いから
store.subscribeもuseSelectorも出来ないgetState()もない。
やりたいことは、Webの初期表示でstate.env{}の中にブラウザの種類・バージョンとかOSの種類とか入れてるけどそれを単純に参照する関数が書けない
stateはreadOnlyで更新しないから見えればOK
export const seeStateAndDoSomething() {
const { env } = getState() ; // これは出来ないけどコレっぽい処理したい
if ( env.browser == 'firefox' ) {
...何かの処理
} else if ( env.browser == 'chrome' ) {
}
);
どうすりゃ良いの？おそえて。
268:デフォルトの名無しさん
22/01/20 19:58:21.41 dHw5M9GX.net
store.getState()
269:デフォルトの名無しさん
22/01/22 01:00:33.62 Q6mU4pBx.net
React Nativeはオワコンらしいですが
Reactは使う価値ありますか？
教えてエロい人
270:デフォルトの名無しさん
22/01/22 01:02:15.28 VcaTUFKD.net
>>269
自分で見極められないの？
271:デフォルトの名無しさん
22/01/22 01:17:25.20 Q6mU4pBx.net
>>270
すいません。
パソコン初心者です。
アドバイスお願いします。
272:デフォルトの名無しさん
22/01/22 01:19:22.91 NdDHIpih.net
初心者はやめておいた方が良いです
273:デフォルトの名無しさん
22/01/22 01:25:12.66 Q6mU4pBx.net
これから勉強するならFlutterの方がいいですか？
274:デフォルトの名無しさん
22/01/22 10:04:33.20 Z1IOsfXg.net
シカトっすか？
275:デフォルトの名無しさん
22/01/22 11:17:22.76 N7C2miyW.net
まず上級者になることをおすすめします
276:デフォルトの名無しさん
22/01/23 11:01:19.74 5zqw2dvO.net
create-react-appで、npm run buildしたのですが
manifest.jsonのみがbuildフォルダーにコピーされないです・・・
回避方法ないでしょうか？
277:デフォルトの名無しさん
22/01/23 11:08:40.96 5zqw2dvO.net
>>276
解決しました！失礼しました・・・。
278:デフォルトの名無しさん
22/01/26 10:48:59.57 PJmPV3+3.net
Reduxのストアにクラスっぽいオブジェクト（プロパティ＋関数）入れようとしたら
non-serialize objectがどうのこうのとエラーになった。
そもそも何でシリアライズなんかやろうとするんだ？
279:デフォルトの名無しさん
22/01/26 10:59:34.07 0H2oAMTN.net
不変性を担保するためじゃね
280:デフォルトの名無しさん
22/01/26 11:35:00.62 SY+BWxpR.net
なんかもっと決定的な感じのフレームワーク出ないのエロい人？
281:デフォルトの名無しさん
22/01/26 17:40:44.17 kU7cNmd7.net
>>279
別にそんなもん担保する必要ないだろ。
282:デフォルトの名無しさん
22/01/26 18:01:16.43 +qGThwTi.net
reduxの根本が不変性をベースにしてるんだが
でないとシャロー比較とか成り立たない
たいして有用じゃないがタイムトラベルも不変性前提の機能
そのへんちゃんと理解してから使った方がいいよ
283:デフォルトの名無しさん
22/01/27 00:56:59.89 58xO6kDn.net
そんなどうでも良い概念を使用者全員に押し付けて来んなよ。
単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、
アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。
不変性?(w) プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろｗ
284:デフォルトの名無しさん
22/01/27 01:06:46.42 oXQnXbb3.net
ダメだこいつ…
285:デフォルトの名無しさん
22/01/27 01:39:30.37 58xO6kDn.net
何故それが必要と思うのか説明して見ろよｗ
286:デフォルトの名無しさん
22/01/27 05:05:01.32 kowYjA+c.net
Ruby on Rails の作者・DHH の動画では、
React, Vue.js とか、規約だけのフレームワーク・Stimulus も使う
287:デフォルトの名無しさん
22/01/27 10:03:38.14 QU6mkTFl.net
>>285
すでに280に書いただろが
もっともシャロー比較のために不変性が必要というのは話が逆で不変性が前提としてあるからシャロー比較が機能するんだが
もっと言えばreduxは関数型のスタイルを「選択」して全体が作られてる
だからステートやアクションは不変に、reducerやselecterは純粋にすべしってこと
それがreduxの設計意図
一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
288:デフォルトの名無しさん
22/01/27 10:51:15.03 zgsWbtRT.net
>>286
DHHってフロントエンドでは間違いしかしない人だからスルー推奨
289:デフォルトの名無しさん
22/01/27 11:28:21.68 58xO6kDn.net
>>287
だから全てのアプリがシャロー比較とかタイムトラベルしたい訳じゃないだろって話してんだがｗ？
まあ、余計な機能をテンコ盛りに詰めて利用者に強制したから、別の実装が出たりreactが自前実装して
見捨てられるんだろうけど。Reduxに期待する事はFluxのあの図を忠実に実装する事だけで余計な機能は付けるなよ
>一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
飛びついたのは俺じゃなくて俺が使ってるミドル作った人だけど、まあ、あのアプリの規模（デモレベル）
でそんな面倒臭いシステム使ったのなら、理由はそんなところだろうなと。
Reduxはマジあかんな。費用対効果が悪すぎる。
コスト意識の無い潔癖な学者か研究者が作ったシステムって感じがするね。
290:デフォルトの名無しさん
22/01/27 12:05:30.94 zgsWbtRT.net
>>289
全てのアプリがしたいかどうかじゃなくてredux使うアプリはその流儀に従うしかないって話なんだがわからず屋だな
それが嫌ならredux選ぶなっつーだけの話だ
ちなみにシャロー比較はreact.memoなどreactエコシステムの共通項だから全てのreactアプリ開発者が身につけておくべきことだけどな
だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
291:デフォルトの名無しさん
22/01/28 04:01:26.15 dtKXZRXN.net
Deanin, 1/10、15分の動画
Setup A Ruby on Rails 7 API With React JS
URLﾘﾝｸ(www.youtube.com)
WSL, Ubuntu 20.04, VSCode(Remote WSL)
Ruby 3, Rails 7 のAPI モード、React, Axios
Railsのscaffold で、簡単なデモ。
この兄ちゃんは、きれいな英語を喋るので、翻訳も分かりやすい
292:デフォルトの名無しさん
22/01/28 07:19:26.02 FbvuqA1u.net
Ruby はお呼びじゃないです
293:デフォルトの名無しさん
22/01/29 01:06:49.85 b1Z4prOk.net
>だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
害悪をまき散らした張本人だな。
マジであの生鮮性を何故実装して広めようとした事は理解に苦しむ。
J2EEとかhadoopとか(多分将来的にk8sも）生産性が超絶に低い潔癖システムが消えてなくなった事例から全く学ぼうとしないんだな。
294:デフォルトの名無しさん
22/02/06 05:24:52.64 ETpepHrW.net
ReactでPOSTメソッドだけを受けるアプリ作るのはどうすれば良いんでしょう？
"react POST method "でぐぐってもfetchを使えとか、何故か投げる側の処理ばかりが出ます。
webサーバーには何も入れてないので、npm start で動くサーバーと思しき物はreact-scriptsの筈です。
POSTメソッドだけに紐付いたコンポーネント書きたいのですが…
295:デフォルトの名無しさん
22/02/06 07:33:46.13 d9+JDYY/.net
>>294
(´Д`)
296:デフォルトの名無しさん
22/02/06 13:52:11.36 xkt5lO0Z.net
>>294
これネタじゃなくマジで言ってんの
297:デフォルトの名無しさん
22/02/06 15:17:45.09 d9+JDYY/.net
(´Д`)
298:デフォルトの名無しさん
22/02/06 15:52:20.16 YYEn69uQ.net
GETとPOSTの違いを質問するだけで、
アレな人を面接から排除できるし、簡単だな
これで95%ぐらい排除できるし
299:デフォルトの名無しさん
22/02/06 16:34:57.86 FsJSE82A.net
いやいや、この場合はクライアントとサーバの違いを質問するところからだろ……
300:デフォルトの名無しさん
22/02/06 16:41:29.09 d9+JDYY/.net
まずネタかどうか...
301:デフォルトの名無しさん
22/02/06 16:52:26.30 NfirkViC.net
□私はロボットではありません
302:デフォルトの名無しさん
22/02/06 21:41:04.19 g3gFasX1.net
あれ？Reactってサーバーサイドで動く処理は一切かけないの？？
Next.jsとかあるから、かけるもんかと思ってたけど。
303:デフォルトの名無しさん
22/02/06 22:13:46.32 akwTUDY3.net
Next.jsってそれっぽい処理あるのね
React勉強中でAPIサーバ別で作るかって思ってたけどNext.jsで事足りそう
304:デフォルトの名無しさん
22/02/06 22:34:10.48 hDdLDr4C.net
Next.jsのサーバサイドはpages以下のページコンポーネントに対応するGETリクエストを受けたときだけそのページコンポーネントをレンダリングする(SSRの場合)
POSTを処理するにはAPIルートを使えるがこれはReactコンポーネント関係ない
305:デフォルトの名無しさん
22/02/07 16:33:13.54 QUqmCtWk.net
Ruby on Rails は、React, Bootstrap が多い
他には、Vue.js, Stimulus, jQuery
Bulma, Tailwind
Rails にはHTML ではなく、JSON を返す、API モードもある
306:デフォルトの名無しさん
22/02/07 16:54:59.57 sj/r7l/l.net
ウザ
307:デフォルトの名無しさん
22/02/08 16:28:11.87 vHTqeH80.net
prettier以外でReact hookでつかえる
フォーマッターで何か良いの無いでしょか？
308:デフォルトの名無しさん
22/02/15 22:42:35.11 /0MPsAKI.net
eslint
309:デフォルトの名無しさん
22/03/16 12:08:38.94 5z0ayZzJ.net
webサイト作っててログイン名とか持ち回りたいんですけど、usestateとかpropsとかで持ち回るよりlocalstorageとかsessionstorageとか使えば良いのでは？と思うのですが何か問題あったりする？
310:デフォルトの名無しさん
22/03/16 15:24:22.47 QBH5mk3r.net
なぜその程度の情報をそこに保存しようと思ったのかを知りたいね
311:デフォルトの名無しさん
22/03/16 21:21:30.66 5z0ayZzJ.net
もち回るのが面倒だからこれでいいかなって、、
312:デフォルトの名無しさん
22/03/16 21:24:39.33 aSvQMnmr.net
どうせ他にも持ち回る情報はあるのだからちゃんと管理した方がいいよ
どっちしろuseLocalStorageみたいなフック作ることになるんだし
313:デフォルトの名無しさん
22/03/17 01:04:21.86 nbrJosFU.net
Ruby on Rails では、セッション情報を何を使って実現しているかは、あまり意識しない。
各デバイスを自分でコーディングする事もない
4KB までなら、ブラウザのcookie だし、
それ以上なら、Rails のキャッシュか、データベースとか
フレームワークを使わない人は、自分で調べてコーディングするから、
何十倍も時間が掛かって、なおかつ低品質な実装しかできない
314:デフォルトの名無しさん
22/03/17 23:27:53.87 575mXe6h.net
>>313
氏ね
315:デフォルトの名無しさん
22/04/01 10:10:23.98 JecPgYr0.net
React初心者だけど画面のDevelper ToolsからReactコンポーネントが
どれなのかってわかりにくいよね？
ブラウザからHTMLを見るとどれがReactコンポーネントの塊なのかわかりにくいし
Reactコンポーネントを組み込んだHTMLのビューファイルのソースコードを見ると
配置されているコンポーネントが何なのかわかりにくい
316:デフォルトの名無しさん
22/04/01 11:23:42.76 auF3smsz.net
React DevToolsというのがありましてん
317:デフォルトの名無しさん
22/04/01 18:54:14.92 yYW+C1/7.net
Reactってちょっとした実装するとすぐパフォーマンス悪くなって
不要なれだリングを抑制するのに苦労するじゃん
これ逆にで、全て手動でレダリング指示する方式には出来なかったん？
318:デフォルトの名無しさん
22/04/01 19:46:55.68 rhFjyhAq.net
それなんてjQuery
319:デフォルトの名無しさん
22/04/03 15:55:17.06 MTdqQjr6.net
>>309
recoil使えばええんやない？それで足りんかったらrecoil-persistも
320:デフォルトの名無しさん
22/04/13 00:17:55.41 fbGfFCQp.net
react-bootstrapの"esm"ってどこの馬鹿が付けたんだ？
RowとかColとかを自動インポートするたびにesmが付きやがる・・・（怒
それならreact-bootstrap-esmにでもしてreact-bootstrapとは分けろよ
とんでもねえ馬鹿野郎が作っちまったな
321:デフォルトの名無しさん
22/04/15 18:52:04.48 6JZFJ70w.net
スマホアプリと連動するWebアプリを開発するために
html, css, js, ts, react, redux, material-uiなどについて現在勉強中
「組み込みの経験値があるから、Webアプリ開発なんて楽勝でしょwwwww」とか思ってたけど
技術選定を含めて二週間かかってもまだ開発に着手できてない
もう1週間はかかりそう。かなり敷居が高いな
322:デフォルトの名無しさん
22/04/15 18:53:13.67 6JZFJ70w.net
バックエンドはfirebaseとapp engineを使うつもりだから簡単なはずなんだけど
323:デフォルトの名無しさん
22/04/16 10:36:16.56 GJol2hPc.net
Material-UIもv5になってv4の頃より大分使いやすくなったし選択肢に入れてもいいんじゃない？
324:デフォルトの名無しさん
22/04/26 03:06:09.90 1qeD7Yad.net
>>321だけど、やっとまともに開発を進められるようになった
まだ手が早く動かなくて辛いわ
325:デフォルトの名無しさん
22/04/28 12:12:12 +1bBzylX.net
新規でreduxとか茨の道じゃない？
326:デフォルトの名無しさん
22/04/29 18:12:15.81 HVcwi/JU.net
比較的簡単なツールだから茨の道ということはない
327:デフォルトの名無しさん
22/04/30 08:55:59.74 xRiYwFSM.net
>>325
recoil使え
328:デフォルトの名無しさん
22/04/30 20:24:57.68 zPHJgr0b.net
recoilいいね
わかりやすいわ
329:デフォルトの名無しさん
22/05/05 11:51:03.63 JOrREzPe.net
reduxを使うにしても、UI側だけで使用する状態の保持はcontextでやった方がいい感じかな
あくまで個人的感想の落書き
330:デフォルトの名無しさん
22/05/22 20:06:50.28 QFhXSBvp.net
gifjsってライブラリをReactNativeでも使えるようにしようと色々いじくってます。canvasが必要なのでreact-native-canvas入れてみたけどgetImagedataが遅すぎる...
webviewで実行したら改善するかな？？もしくはなんか違うやり方あるかな？？
331:デフォルトの名無しさん
22/05/29 18:03:59.58 3mvQdNHh.net
組込みやってて流れでreactで自社内で使うwebアプリのフロント側
作らされる羽目になったのですが素人がreactとjs学ぶのに
定番みたいな書籍やコンテンツありますか？
バックエンドはやりませんがpythonのfastapiです。
332:デフォルトの名無しさん
22/06/07 16:32:08.16 trxEqnyj.net
reactとかってソースにコメントって
あまり書かないほうがいい的な暗黙のルールってあります？
読まれちゃうから？
今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。
333:デフォルトの名無しさん
22/06/09 19:17:56.70 pioqxBxg.net
ないです
トランスパイルしたら消えるのでしっかり書きましょう
334:デフォルトの名無しさん
22/07/01 09:49:56.08 mdBqK8pn.net
ありがとう
335:デフォルトの名無しさん
22/08/20 11:13:41.79 ncpICP0v.net
propsで受け取ったデータを
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか？
336:デフォルトの名無しさん
22/08/25 12:56:19.31 H3bW7ybM.net
ここReactの本スレ？
過疎ってるの？
337:デフォルトの名無しさん
22/08/25 17:55:45.09 Tb5qjwQY.net
過疎ってるのは明白やろ
338:デフォルトの名無しさん
[ここ壊れてます] .net
ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな
339:デフォルトの名無しさん
22/08/30 00:50:56.99 GSie6Ogu.net
reactはtypescriptが必須なのでしょうか？
340:デフォルトの名無しさん
22/08/30 03:03:46.27 R48CF1Id.net
>>339
いらん
341:デフォルトの名無しさん
22/08/30 03:55:25.12 AgQQgySl.net
Reactが流行っていないから、過疎っているんだよ
342:デフォルトの名無しさん
22/08/30 18:08:40.22 GSie6Ogu.net
reactの求人は多いですけど、実際にはどうなのでしょうか。
343:デフォルトの名無しさん
22/08/30 19:28:11.75 148lWuya.net
Reactできる人は全然足りてない
344:デフォルトの名無しさん
[ここ壊れてます] .net
>>343
そうなのですか。
今、javascriptとjQueryの勉強をしてますが、この2つだけでも大変ですね。
345:デフォルトの名無しさん
22/08/30 20:28:20.43 oTUqrsBR.net
数年Web屋やって引退するつもりならそれでもいい
346:デフォルトの名無しさん
22/08/30 21:03:00.66 BxScEIY5.net
Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる
347:デフォルトの名無しさん
[ここ壊れてます] .net
JavaScript関連技術でwebアプリを作るならreactは便利でしょうか？
348:デフォルトの名無しさん
22/08/30 23:14:38.13 AsY/BIgk.net
便利さでいうならAngularがいいよ
349:デフォルトの名無しさん
22/08/30 23:44:08.14 B8+owlOV.net
満足度が底辺のangularがなんだって？
URLﾘﾝｸ(2021.stateofjs.com)
350:デフォルトの名無しさん
22/08/31 01:59:04.53 J9nI7vcp.net
>>347
できる人は、何でもできる
351:デフォルトの名無しさん
22/08/31 11:44:05.05 FlEWiE9h.net
Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる
352:デフォルトの名無しさん
22/08/31 12:36:45.93 3saFUPw3.net
ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ
353:デフォルトの名無しさん
22/09/01 05:11:23.04 jMwj7QaK.net
vue.jsよりreactの方が優れてますよね？
354:デフォルトの名無しさん
22/09/13 16:36:34.31 DqV+9O8X.net
test
355:デフォルトの名無しさん
22/09/26 01:00:41.00 ikr92+JD.net
最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい
・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね？recoilに比べてどういうメリットがあるの？
・クラスベースの記述って殆どしないの？ベストプラクティスは関数ベース？
356:デフォルトの名無しさん
22/09/26 20:02:50.86 wZFpwFwK.net
toolkitはReduxで使い勝手が悪かった機能を改良したもの。(asyncに対応させるためにthunkとかsagaが必要だったりとかの)
recoilのほうが新しく記述もシンプルで見通しが良くなる。stateのset/get両方に対応。ただしまだexperimental
URLﾘﾝｸ(www.npmjs.com)
Recoil is an experimental state management framework for React.
公式は関数コンポーネント+フックを推奨
URLﾘﾝｸ(ja.reactjs.org)
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。
357:デフォルトの名無しさん
22/09/26 22:42:27.40 ikr92+JD.net
>>356
ごめんクラスコンポーネントと関数コンポーネントの違いは分かってるんだ
例えば、1+1を計算する関数をクラスベースで定義すべきか関数ベースで定義すべきか
的なことを知りたかった！
358:デフォルトの名無しさん
22/09/26 22:56:01.37 lxhy0Qxo.net
JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
359:デフォルトの名無しさん
22/09/26 22:59:55.62 rxxJbSNv.net
>>357
書いてくれてるだろ
ちゃんと読もうよ
360:デフォルトの名無しさん
22/09/26 23:21:54.38 rxxJbSNv.net
ああ、ごめんコンポーネントの話じゃなかったのか
361:デフォルトの名無しさん
22/09/26 23:22:50.91 tIU7Oyti.net
React実践の教科書、2021
この本には、クラスは出てこない。
すべて関数
362:デフォルトの名無しさん
22/09/27 12:54:00.07 CMfXpwKQ.net
なるほどなるほど
仕事でcobolとvbaしか使ったｂｱとなかったかｂ辜Iブジェクト試w向的な記述自荘ﾌ馴染みなかっｂｽわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
363:デフォルトの名無しさん
22/09/27 13:46:50.26 t32oMnpk.net
JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる？
ちなみにReactのクラスコンポーネントはオワコンだけどね
364:デフォルトの名無しさん
22/09/27 14:04:56.54 CMfXpwKQ.net
>>363
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる！？
365:デフォルトの名無しさん
22/09/27 15:39:04.72 D1kdTDEr.net
>>364
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ
JSの方は好みだな
366:デフォルトの名無しさん
22/09/27 15:58:48.85 aOp1T7nJ.net
>>362
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
367:デフォルトの名無しさん
22/09/27 16:41:51.18 MQqAKvI3.net
Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
368:デフォルトの名無しさん
22/09/27 16:48:43.98 CMfXpwKQ.net
>>366
頭ごなしに否定する気はないんだけど
（jsの）クラスベースの記述するメリットってどういうとこがあるの？
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
369:デフォルトの名無しさん
22/09/27 17:25:00.79 fOqsMNTu.net
Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
370:デフォルトの名無しさん
22/09/27 17:28:55.43 YFL0VkhR.net
プロジェクトメンバーにどうして混在してるのか聞いてみた？
371:デフォルトの名無しさん
22/09/27 17:29:21.69 fOqsMNTu.net
jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
372:デフォルトの名無しさん
22/09/27 18:13:32.56 dJevJ7EZ.net
クラスコンポーネントは公式に非推奨扱いじゃね
373:デフォルトの名無しさん
22/09/27 18:15:33.41 397xSubl.net
話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
374:デフォルトの名無しさん
22/09/27 18:20:28.32 dJevJ7EZ.net
Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
375:デフォルトの名無しさん
22/09/27 20:04:34.40 CMfXpwKQ.net
>>370
うん
「本当はよくないんですけどね～～」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流（これが一番酷い）
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
376:デフォルトの名無しさん
22/09/27 20:20:13.86 6DdS+dLy.net
プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
377:デフォルトの名無しさん
22/09/27 20:22:10.28 fOqsMNTu.net
>>375
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。
378:デフォルトの名無しさん
22/09/27 20:39:34.88 CMfXpwKQ.net
>>376
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。
>>377
アジャイルってこんなもんなんじゃないの？知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ
379:デフォルトの名無しさん
22/09/27 22:23:16.69 /UUTRmF2.net
>>364
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。
380:359
22/09/27 23:17:49.69 oW3s344K.net
>>375
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
381:359
22/09/27 23:29:13.30 oW3s344K.net
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
382:デフォルトの名無しさん
22/09/27 23:53:21.49 BMrl8a7V.net
なんでそんなにクラスコンポーネントの話にこだわるの？
383:デフォルトの名無しさん
22/09/28 20:45:18.22 KHG5QcXL.net
presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？
384:デフォルトの名無しさん
22/09/28 21:57:59.16 Km2fmn1T.net
プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
385:デフォルトの名無しさん
22/09/28 22:11:03.79 0Dahyjoe.net
グローブステートにRxで変更通知でどうですか？