React と React Native のスレ
- 30 :デフォルトの名無しさん:2019/06/13(木) 10:44:16.38 ID:euXigNzW.net
- React Nativeの改善に関するサブプロジェクトあるいは用語
Lean Core: リポジトリの再編成(コンポーネントの分離)
TurboModules: NativeModulesの新構造(JSIを使用した改善)
Fabric: UIレイヤの新構造(JSIを使用した改善)
JSI: JavaScript Interface, JS-Native間のブリッジを高性能化する仕組み
- 31 :デフォルトの名無しさん:2019/07/01(月) 11:44:34.42 ID:z9YX7xX6.net
- みんなReduxの非同期処理どうしてる?
- 32 :デフォルトの名無しさん:2019/07/01(月) 13:21:05.84 ID:PO46Zlgj.net
- オレオレミドルウェア
suspenseが来たらreduxもろとも捨てる
- 33 :デフォルトの名無しさん:2019/07/06(土) 17:25:24.51 ID:GNb7wQCP.net
- React+Reduxやってるけど、MとVM的なものが分離されないのがつらくなってきた。
他のfluxフレームワークだとどうなんだろう。
- 34 :デフォルトの名無しさん:2019/07/06(土) 17:57:41.84 ID:TSNTMph3.net
- 所詮プレゼンテーションレイヤーのフロントエンドにMを持ち込むタコは何を使っても同じ
- 35 :デフォルトの名無しさん:2019/07/06(土) 19:48:01.42 ID:GNb7wQCP.net
- >プレゼンテーションレイヤーのフロントエンドにMを持ち込む
なにかマウントとりたい意思は伝わってくるけどさすがに意味不明。
- 36 :デフォルトの名無しさん:2019/07/06(土) 19:58:59.36 ID:SiQr95jR.net
- MVCとかMVVMとかって小さい単位での独立部品の切り出しを考えたら結構邪魔なんだよね
- 37 :デフォルトの名無しさん:2019/07/06(土) 20:56:58.71 ID:apheD/Vh.net
- 道具は悪くない
設計者が悪い
- 38 :デフォルトの名無しさん:2019/07/07(日) 00:32:53.73 ID:eaenhCbM.net
- Announcing React Native 0.60
https://facebook.github.io/react-native/blog/2019/07/03/version-60
- 39 :デフォルトの名無しさん:2019/08/04(日) 01:11:18.51 ID:k7LAQow0.net
- 久々に動かしたらmetro bundlerなるものができてた
ナンジャコリャ
- 40 :デフォルトの名無しさん:2019/08/16(金) 09:00:38.45 ID:DTIEgPs0.net
- 公式blogから
React 16.9.0 およびロードマップの更新
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html
新しいReact DevTools
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
- 41 :デフォルトの名無しさん:2019/08/16(金) 11:07:23.70 ID:SpwmZ6gR.net
- 半年ぶりか
滞ってるな
- 42 :デフォルトの名無しさん:2019/08/16(金) 14:14:55.65 ID:fLRfCcm2.net
- オワコンなのかな
- 43 :デフォルトの名無しさん:2019/08/16(金) 16:05:56.38 ID:DTIEgPs0.net
- ・Hooksのフォローアップの作業量を過小評価していた
・Concurrent Mode と Suspense for Data Fetching の作業に注力
Facebookのサイトで実際に試していてリリースに向けて修正中
この辺で時間掛かっているらしい
- 44 :デフォルトの名無しさん:2019/08/16(金) 23:37:57.69 ID:RmCywHfR.net
- hooks はなあ
モナド欲しい
- 45 :デフォルトの名無しさん:2019/08/26(月) 03:11:43.67 ID:xTwJabF+.net
- create-react-app xxx とすると、
xxxというreactアプリ(フォルダ)が作られますが、
このxxxの部分を変更したい場合、そのままフォルダを編集してしまっても問題ありませんか?
他にもpackage.jsonのnameもxxxになっておりますがこちらも変更したりして
- 46 :デフォルトの名無しさん:2019/09/26(木) 18:30:21.05 ID:OrvmZwJd.net
- React Native 0.61
https://facebook.github.io/react-native/blog/2019/09/18/version-0.61
・ライブリロードとホットリロードは新実装のファストリフレッシュに統合された
・0.60で支障があったCocoaPodsでのuse_frameworksの問題が解消
- 47 :デフォルトの名無しさん:2019/09/28(土) 09:05:26.72 ID:yWQY0maC.net
- ReactNativeでaxios動かないんだが。。。
- 48 :デフォルトの名無しさん:2019/10/28(月) 18:32:37.59 ID:kOeifBSs.net
- macOS上でのReact Native(Project Catalystを使用)
https://twitter.com/brunolemos/status/1185636022346043392
https://github.com/react-native-community/discussions-and-proposals/issues/131#issuecomment-544189591
(deleted an unsolicited ad)
- 49 :デフォルトの名無しさん:2019/11/10(日) 09:20:57.59 ID:ZVDov6M9.net
- vscode+react+material-ui使ってるんだけど下のコードでボタンが赤にならないのなんでだろう・・・
なんかPrimaryが紫になってるんだが・・・
import { createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/purple';
const mytheme = createMuiTheme({
palette: {
primary: red,
},
});
const useStyles = makeStyles({
button: {
backgroundColor: mytheme.palette.primary.main,
},
});
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={0} justify={'center'}>
<Grid item xs={12}>
<Button className={classes.button} variant='outlined'>
botton
</Button>
</Grid>
</Grid>
</div>
);
}
- 50 :デフォルトの名無しさん:2019/11/10(日) 09:43:45.39 ID:ZVDov6M9.net
- ごめん自決して
カラーのimportミスってた
×import red from '@material-ui/core/colors/purple';
◯ import red from '@material-ui/core/colors/red';
スレ汚しすまん
- 51 :デフォルトの名無しさん:2019/11/28(木) 18:27:49.62 ID:GNo6CJtR.net
- react-native doctor コマンド
https://facebook.github.io/react-native/blog/2019/11/18/react-native-doctor
プロジェクト設定や開発環境の診断と修正
- 52 :デフォルトの名無しさん:2020/01/20(月) 13:50:40 ID: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にコピペしてインポートしています。
http://html5doctor.com/html-5-reset-stylesheet/
試しにfirst.scssの中身の最上部にHTML5 Doctor Reset CSSの中身を張り付けてみたのですが同じでした。
- 53 :デフォルトの名無しさん:2020/01/20(月) 14:09:55 ID:1C7qXqig.net
- importされるのはcssじゃなくてjs(実質reset.css.js)だからね
問題はwebpackの設定じゃないの?
webpack entryでググってみたら?
- 54 :デフォルトの名無しさん:2020/01/29(水) 20:07:56.78 ID:kAGOnFqI.net
- 最近androidシミュでfetchが上手くいかなくなったけど何でだろ?
- 55 :デフォルトの名無しさん:2020/05/23(土) 18:46:27 ID:wT2dUHsh.net
- useStateとReduxって共存していいの?
- 56 :デフォルトの名無しさん:2020/05/24(日) 13:54:49 ID:rk0sziuW.net
- >>55
システム全体で必要なのはRedux
Postする為にそのFormだけで必要なものはuseState
って使い方してる
共存って点で言うならHooksか旧型式かを共存させなきゃ別にいいと思う
- 57 :デフォルトの名無しさん:2020/06/09(火) 16:01:35.59 ID:mEfhV+3L.net
- React.ComponentとSuspenseを使ってリストを読み込んで表示するプログラムを書いているのだけど
renderでメンバ関数を呼んで読込するとthisがつく変数(stateとか)が全てリセットされるよどうして?
リセットされる変数をstaticにすると動くようです
- 58 :デフォルトの名無しさん:2020/07/25(土) 07:59:44.00 ID:e6nmtc2O.net
- 人工知能フレームワークのGpt-3がReact上で動くんだよなあ
- 59 :デフォルトの名無しさん:2020/07/25(土) 14:10:16.00 ID:ZlqyHRW3.net
- >>57
まだそんな事やってるのか?
早くHooksに移行した方がシンプルで使いやすいよ
- 60 :デフォルトの名無しさん:2020/08/05(水) 20:39:39.66 ID:HaLefuVq.net
- reactでフォームの連動させたいんだけど
良いチュートリアルやサンプルをおしえてください
調べ方でも大丈夫です
- 61 :デフォルトの名無しさん:2020/10/06(火) 09:47:28.33 ID:FaC1oBor.net
- >>60
連動?
って具体的に何やりたいの?
- 62 :デフォルトの名無しさん:2020/10/06(火) 15:47:26.50 ID:3JbOTVG0.net
- >>60
公式を嫁!
それか、オレの知り合いの本を嫁!
以上。
- 63 :デフォルトの名無しさん:2020/10/07(水) 08:13:26.21 ID:9X+ETi/j.net
- 他のフォーム要素を同時にどうかしたいって仮定するとonClickイベントやonChangeイベントのコールバックにメソッド噛ませればいいんじゃない?
- 64 :デフォルトの名無しさん:2020/10/11(日) 20:19:56.38 ID:/PPF0LFF.net
- Html,Javascriptのソースコードをreact nativeに書き直してるけどDom要素のID管理していたのを書き直すのが辛すぎる
何かよいライブラリないかなぁ
- 65 :デフォルトの名無しさん:2021/01/04(月) 01:07:02.79 ID:EMrQXkgT.net
- iOSやAndroidアプリを作りたくてprogateのhtmlとJavaScriptと reactまでやったんですが、次に何をすれば良いか分かりません。僕は次に何を学べばいいですか?
- 66 :(u_・y):2021/01/04(月) 11:37:19.32 ID:oZidFLop.net
- (u_・y)順序からしておかしくね
(u_・y)Androidアプリ作るならまずAndroid上でハローワールドだろ
(u_・y)Googleになんかアカウント作って登録あれこれやるんじゃねーの
(u_・y)Win以外のアプリを作るので難関になるのはそういった手順と環境構築絡みなので、
(u_・y)周りに先生がいない状況で独学初心者がいきなりAndroidアプリってのはハローワールドまでに時間かかるぞ
- 67 :デフォルトの名無しさん:2021/01/12(火) 01:34:10.49 ID:dF2LSabj.net
- 公式のドキュメントに全部書いてあるから全部読め
- 68 :デフォルトの名無しさん:2021/01/21(木) 19:04:19.07 ID:RZX+x1N+.net
- Java から来て、最近 React はじめたんだけど、MVC 思想的なのは最近フロントエンドではなくなっていってる感じなん?
せめて View 部分は分けないと気持ち悪いんだけど、チュートリアルみても割とごちゃまぜなのよね…
- 69 :デフォルトの名無しさん:2021/02/14(日) 03:47:14.57 ID:wyKYn9A/.net
- React の hookを初めてみてるんだけど、
これClassベースの機能で提供できないのかな?
functionなのに永続化を無理やりやってるようでコード読みづらい。
その永続化をuse接頭語のみで判断しなければならないという...
functionじゃなきゃhookの機能が提供できない??というモヤモヤ感が払拭できないです。
- 70 :デフォルトの名無しさん:2021/02/14(日) 04:24:42.10 ID:qcnkr3Yb.net
- 元々はクラスベースで提供されてた機能を関数コンポーネントでも使えるようにしたのがhookやで
- 71 :デフォルトの名無しさん:2021/02/14(日) 04:26:06.17 ID:o9olz+i9.net
- >>69
目に見える副作用をフレームワーク側に追い出して
ユーザーからは副作用がないようにしてる設計は素晴らしいと思うけどね
- 72 :デフォルトの名無しさん:2021/02/14(日) 04:47:15.25 ID:wyKYn9A/.net
- >>71 副作用がないようにしてる設計
それがclassベースでは出来ない??って疑問。
>>70
ならhookがclassより上という事ではなくなる。
でも公式コメントでもclassよりhookのモデルが優秀みたいな書き方。
ただclassは無くさずこのまま残しますみたいな。
なんかfunctionを無理やり生存期間拡張してるところが
感覚的に違和感モヤモヤ。
hookの機能をclassで実装するとやりづらい箇所って、
同名メソッドを複数定義できる箇所ぐらい?
- 73 :デフォルトの名無しさん:2021/02/14(日) 04:59:08.67 ID:o9olz+i9.net
- >>72
もちろんできるしそれを手動でやってきたのがクラス
でもsetState呼ばなかったり状態にオブジェクトが必須だったりで色んなミスが起きやすかった
それをフレームワーク側で全部やって
ユーザーが書きやすくするのがHooks
人間がやるよりフレームワークがやる方が信頼性が高いし賢いからそこは任せた方が良いよねってことで生まれたと勝手に思っている
- 74 :デフォルトの名無しさん:2021/02/14(日) 05:41:48.27 ID:wyKYn9A/.net
- >>73
だから、それ(hook)をclassべースで提供できないの?って言ってんの。
- 75 :デフォルトの名無しさん:2021/02/14(日) 05:48:13.99 ID:eZAyHvHf.net
- クラスはhookなしで同じことができるから提供する必要がない
- 76 :デフォルトの名無しさん:2021/02/14(日) 07:45:04.97 ID:o9olz+i9.net
- >>74
いやだからsetStateという汎用的な物しか提供できないっことね
stateを自分で好き勝手いじれるのに
それをライブラリが管理するって無理でしょ
hooksは内部で対応するコンポーネントとその状態を管理してるから
ライブラリとして提供できる
- 77 :デフォルトの名無しさん:2021/02/14(日) 13:32:40.22 ID:wyKYn9A/.net
- >>76
分かんない人だな。
なんで今のclassベースの実装をこの話に持ち込むの。
hookの機能を”function”でなく、jsの”class”で実現できないの?っていう疑問なの。
- 78 :デフォルトの名無しさん:2021/02/14(日) 14:00:51.86 ID:+4ZWExbH.net
- お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ
- 79 :デフォルトの名無しさん:2021/02/14(日) 14:19:02.14 ID:wyKYn9A/.net
- hookを知らないやつだったか。アホらし。
- 80 :デフォルトの名無しさん:2021/02/14(日) 14:34:40.65 ID:kA8DCabn.net
- 時系列的には
クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える
と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし
クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する
という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント
- 81 :デフォルトの名無しさん:2021/02/14(日) 14:46:29.94 ID:wyKYn9A/.net
- >>80
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか?向かないのか?
って事になる。ね。
- 82 :デフォルトの名無しさん:2021/02/14(日) 15:15:15.08 ID:kA8DCabn.net
- クラスコンポーネントのインスタンスはthis.〜で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる
- 83 :デフォルトの名無しさん:2021/02/14(日) 16:39:29.19 ID:DVWK/pJu.net
- useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと?
なんかそう言うパッケージ見たことあるぞ
- 84 :デフォルトの名無しさん:2021/02/14(日) 16:59:03.97 ID:FekQTk3J.net
- classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ
class Foo extends React.Component {
handleClick = (ev) => {...}
- 85 :デフォルトの名無しさん:2021/02/14(日) 21:01:15.04 ID: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 :デフォルトの名無しさん:2021/02/14(日) 21:03:03.46 ID:NOmukaW1.net
- ス・レ・チ
- 87 :デフォルトの名無しさん:2021/02/15(月) 02:51:04.90 ID:E7fw/gtI.net
- マジで障害者かな?
この板に巣食ってる人がいるのは認識してたけど
- 88 :デフォルトの名無しさん:2021/04/22(木) 04:19:05.03 ID:vjCFYs66g
- 「社員全員が副業」を体現し普及するスタートアップ、売上前年比4倍が物語る今後
https://newswitch.jp/p/23029
「全員副業必須」型破りな経営がもたらした、社員の脱会社依存と幸せ
https://ix-careercompass.jp/article/4586/
社長も社員も全員副業 ひとつの会社に頼らない働き方
https://style.nikkei.com/article/DGXMZO66620470V21C20A1000000/
「副業」社員で成り立つ会社登場 働き方改革の最先端
https://www.sankei.com/premium/news/200831/prm2008310006-n1.html
仕事を「時間と場所」から解放せよ! 週休3日、スーパーフレックス──新しい働き方は日本企業に通用するか
https://www.itmedia.co.jp/news/articles/1809/28/news017.html
週休3日なのに年収を3倍にした男性の「時短術」
https://news.yahoo.co.jp/articles/090b7e720c2e8c6fb0d524b67a40182f70d8fdf2
“週休3日制”導入で売上4割増の例も…日本企業で普及期に、週30時間が常識に
https://biz-journal.jp/2020/01/post_138414.html
「 リモートワークで手放すべき7つのこと」働き方改革の先の世界
https://tebanasu-lab.com/interview/9828/
週休3日制をさらに進めた週休4日制
https://www.k-society.com/recruit/why-four-days-off-a-week/
- 89 :デフォルトの名無しさん:2021/06/18(金) 09:52:07.92 ID: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 :デフォルトの名無しさん:2021/08/10(火) 10:10:26.07 ID:0SSgF6Zh.net
- Reactで関数コンポーネントで本気実装始めたんだが、
関数コンポーネント面倒くさ過ぎじゃね?
関数コンポネント入門位の実装なら問題なかったんだが、
ちょっと込み入ったの実装しようと思ったら
クラスじゃないんで、コンポーネントの自前メソッドを(子から親、親から子)公開するのとか
そのTS型定義をどうするのとかうまく解決できんのか?これwww
- 91 :デフォルトの名無しさん:2021/08/10(火) 10:18:58.12 ID:Yti8n+JL.net
- 込み入った実装ってだいたい設計から間違ってるよね…
- 92 :デフォルトの名無しさん:2021/08/10(火) 10:22:58.46 ID:0SSgF6Zh.net
- >>91
あんたが考えてんの具体的にどのレベルだ?
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ
- 93 :デフォルトの名無しさん:2021/08/10(火) 11:17:59.39 ID:x9cqqxVb.net
- 奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ
推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね
- 94 :デフォルトの名無しさん:2021/08/10(火) 11:27:05.53 ID:0SSgF6Zh.net
- >>93
!!
まだReact不慣れで困ってる
半年前にReact初めてそちはクラスベース(TS)だったので、
実装できない事は無かったのでこういった苦労はなかった
>>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
どうだろう?
あんまり業務的なことを書くわけにはいかんけど、
親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、
コンポーネントが今回クラスから関数に変わったんで、
コンポーネント側にコンポーネント固有の機能(クラスん時はメソッド)が実装しずらくなって困ってる
関数コンポーネントだとここにメソッドとか置かないもんなの?
- 95 :デフォルトの名無しさん:2021/08/10(火) 12:03:49.33 ID:0SSgF6Zh.net
- 関数なんだから、オブジェクト指向的な実装はムリなんだろうな
とりあえず、
・クラス → モジュール
・プロパティ → モジュールの関数の引数
・メソッド → モジュールの関数
に置き換えて実装してみるわ
- 96 :デフォルトの名無しさん:2021/08/10(火) 12:28:03.76 ID:dmkhwQTT.net
- 関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト
その超基本的なところをわかってなさそう
他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ
- 97 :デフォルトの名無しさん:2021/08/10(火) 12:36:48.42 ID:0SSgF6Zh.net
- いや、アトミックデザイン的に機能分割して
その単位をオブジェクト指向的にデザインしてたわー−(前回プロジェクト)
でもRender()しかやらん関数と、
その外にはみ出た処理で細切れ関数だらけになって、
コード読みにくいは、実装も美しくならんわー− ( ノД`)ドスル
- 98 :デフォルトの名無しさん:2021/08/10(火) 14:00:37.21 ID:8kvO2lBn.net
- Redux素晴らしいって言ってた人たちは今息してんのかな
- 99 :デフォルトの名無しさん:2021/08/10(火) 14:08:07.90 ID:UtkECLI3.net
- >>97
この流れでアトミックデザインを出してくるのものすっごく薄っぺらい
- 100 :デフォルトの名無しさん:2021/08/10(火) 14:15:30.49 ID:i+IrTlV6.net
- >>99
アトミックデザイン使わず
あなたが表現してあげたら?
- 101 :デフォルトの名無しさん:2021/08/10(火) 14:57:48.57 ID:UtkECLI3.net
- >>100
単純にいらんやろ
「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん
- 102 :デフォルトの名無しさん:2021/08/10(火) 15:49:45.99 ID:LAvum0nL.net
- >>101
コンポーネントの分割単位が伝わらんよ
- 103 :デフォルトの名無しさん:2021/08/10(火) 16:58:18.35 ID:UtkECLI3.net
- >>102
この流れで分割単位の話なんかいらないじゃん
88から読み直してみ
- 104 :デフォルトの名無しさん:2021/08/10(火) 18:51:43.55 ID:M/It2Akn.net
- > コンポーネント間のメソッド呼び出し
??????????
- 105 :デフォルトの名無しさん:2021/08/10(火) 19:15:22.44 ID:Yh+H2qBA.net
- データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか
両方使う例があるなら見てみたい
- 106 :デフォルトの名無しさん:2021/08/10(火) 19:38:32.34 ID:Qo7qEUjv.net
- >>105
swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね
だからクライアントサイド固有の状態を
swrで扱おうとは俺は思わない
apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない
コンポーネントのローカルステート→useState, useReducer
クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る)
サーバーステート→swr, react query, apolloなど
と使い分けてる
- 107 :デフォルトの名無しさん:2021/08/10(火) 20:04:49.62 ID:Yh+H2qBA.net
- >>106
参考になるありがとう
依存ライブラリ増加を嫌うことへの妥協案で >>105 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう
- 108 :デフォルトの名無しさん:2021/08/11(水) 19:43:56.70 ID:u2eXJHJo.net
- >>90
ちゃんとhooks使ってるか?
- 109 :デフォルトの名無しさん:2021/08/11(水) 20:53:01.89 ID:UmYmX+C7.net
- >>108
ぶっちゃけクラスの方が書きやすく
コードも綺麗だ(実力高い人の場合)
関数コンポーネントは
実装の自由度がhocksbニその拡張ぐらb「しかなく
フレームワーク的なのが造りづらく感じてる
- 110 :デフォルトの名無しさん:2021/08/12(木) 03:09:43.60 ID:YWc6Jioi.net
- 実力が高いw
本気でそう思ってるならqiitaでもzennでもどこでもいいから記事に書いてみろよ
間違いなく日本中からボロクソに叩かれるよ
- 111 :デフォルトの名無しさん:2021/08/12(木) 03:23:50.10 ID:c9YvWIsD.net
- >>110
受け答えから見て実力が低そう
- 112 :デフォルトの名無しさん:2021/08/12(木) 17:08:42.90 ID:qp3m1ZO5.net
- >>109
クラス記法はこういう欠点があるからなあ
ttps://speakerdeck.com/sonatard/coheision-coupling?slide=24
- 113 :デフォルトの名無しさん:2021/08/12(木) 17:57:27.67 ID:/tY+Xjfe.net
- 大方の単細胞腦は、SQLDBとNoSQLDBの時がそうであったように
関数コンポーネントとクラスコンポーネントのどちらかに
絶対的な優劣をつけたがってんじゃね?
今回も関数コンポーネントがマッチする場合と、
そうでない場合がありそうに見える
とくに、関数コンポーネントは
コンポーネントのインスタンスが自由に扱えない(扱えなさそう)から
そういった処理の実装時に(React用で無いJSライブラリを無理やり動かしてたようなケースとか)
トラブりそうな気がする
- 114 :デフォルトの名無しさん:2021/08/12(木) 18:16:18.47 ID:mo2yl2b6.net
- 典型的な「分かってないことが分かってない」ヤツ
- 115 :デフォルトの名無しさん:2021/08/12(木) 18:29:54.23 ID:1fVVrAZN.net
- 優劣はどうでもよくてクラスコンポーネントは互換性のために残されてるだけってのがReactの立場
新しい機能の中には関数コンポーネントからしか使えないものが出てるしこれからも増える
そもそも対等な選択肢ではないから議論する価値がない
状況に合わせて適応するってのが一番大事
- 116 :デフォルトの名無しさん:2021/08/12(木) 18:43:59.17 ID:/tY+Xjfe.net
- >>115
>> 互換性のために残されてるだけってのがReactの立場
なんと!(; ・`д・´)
- 117 :デフォルトの名無しさん:2021/08/12(木) 18:53:29.47 ID:1fVVrAZN.net
- 今の公式ドキュメントやチュートリアルは古くてクラスコンポーネントが大きく扱われてるのが本当に良くない
それはReactチームも分かってるからドキュメントを全面的に書き換えてる最中
もちろん関数コンポーネントとHooksメインで
- 118 :デフォルトの名無しさん:2021/08/12(木) 19:01:46.19 ID:/tY+Xjfe.net
- >>117
なんと!(; ・`д・´)
- 119 :デフォルトの名無しさん:2021/08/26(木) 15:41:55.94 ID:CFvcLd/B.net
- フック初心者ですが
「フックは関数のトップレベルのみで呼び出してください。」
とあります。この関数は関数コンポーネントの意味で合ってますでしょうか?
- 120 :デフォルトの名無しさん:2021/08/26(木) 15:51:22.45 ID:CFvcLd/B.net
- <Button1>と<Button2>で
それぞれ内部でuseStateを使ってたら
<Button1>
<Button2/>
</Button1>
はNGになるのでしょうか?
- 121 :デフォルトの名無しさん:2021/08/26(木) 16:38:00.65 ID:gityixOl.net
- >>119
> この関数は関数コンポーネントの意味
違う
ifやforなどの制御構造の内側から呼び出すなということ
要するに関数コンポーネントの呼び出しごとにhookが実行されたりされなかったりしてはいけない
なので?:や&&などと組み合わせるのもダメ
- 122 :デフォルトの名無しさん:2021/08/26(木) 16:39:25.72 ID:gityixOl.net
- >>120
それはOK
それぞれのコンポーネントは独立してるから問題ない
- 123 :デフォルトの名無しさん:2021/08/26(木) 16:45:57.37 ID:KmLAFOYJ.net
- >>122
有り難い!
しかし判り辛いですね
お題目だけだと
公式に具体例を上げてくれないと
勘違いしそう...
- 124 :デフォルトの名無しさん:2021/08/27(金) 13:34:41.69 ID:gabOubiT.net
- hookの実行順でレンダリング毎の同一性を保証してるってわかってれば当たり前のことなんだけどね
- 125 :デフォルトの名無しさん:2021/08/27(金) 13:54:27.15 ID:KVovKrAi.net
- 順番で状態を管理してるって一昔前の考えだと
なんだそりゃって感じになるんだけど
そもそも自分で管理するのはクソだから
全部フレームワークに任せちゃえってなってる
React凄い
- 126 :デフォルトの名無しさん:2021/08/27(金) 15:19:14.34 ID:B8clkCSU.net
- 翻訳の問題かもしれんけど
「関数のトップレベル」という表現が判りずらい
「関数内部の最初の行あたり」で良くないか?
- 127 :デフォルトの名無しさん:2021/08/27(金) 15:45:49.48 ID:nZgJAtld.net
- function Foo(props) {
if (props.flag) useEffect(...)
...
最初の行だけどアウト
- 128 :デフォルトの名無しさん:2021/08/27(金) 15:48:30.00 ID:KVovKrAi.net
- 「同じフックが常に実行されるようにすること」
これでよくね?
- 129 :デフォルトの名無しさん:2021/08/27(金) 15:49:19.59 ID:B8clkCSU.net
- 関数のトップレベルの訳としての話しだよ(´Д`)
- 130 :デフォルトの名無しさん:2021/08/27(金) 15:57:29.79 ID:rY0RNuZ6.net
- モジュールのトップレベルもわからない?
それじゃトップレベルawaitも分からないしJSやるの無理やろ
- 131 :デフォルトの名無しさん:2021/08/28(土) 04:17:28.74 ID:5cd2kTad.net
- useCallback これっている?
fnのMemoならMemoってキーワードも名称から抜けてるし
useMemo(() => fn, deps) と同じならなおさら...
- 132 :デフォルトの名無しさん:2021/08/28(土) 04:35:56.44 ID:52Q/kK4D.net
- fnをファットアローでインラインに書いてみ
- 133 :デフォルトの名無しさん:2021/08/28(土) 04:42:56.91 ID:5cd2kTad.net
- うー−ん!初学者だからなのか意味わからんです
- 134 :デフォルトの名無しさん:2021/08/28(土) 04:46:30.48 ID:5cd2kTad.net
- useCallback(fn, deps) が useMemo(() => fn, deps) こう書けるって事なんじゃないですか?
- 135 :デフォルトの名無しさん:2021/08/28(土) 04:54:08.75 ID:aWJHFkdS.net
- useCallback((event) => {...}, deps) を useMemo(() => (event) => {...}, deps) って書きたいかって話
- 136 :デフォルトの名無しさん:2021/08/28(土) 05:10:24.97 ID:5cd2kTad.net
- >>135
良い!
そっちのが良い!
fnのメモなのに、useMemoCallback()になってないので直観的に思えない
初学者だと、ぱっと見CallbackするにはuseCallback()が必須に見える
理由はMemoの文字が入ってないから
- 137 :デフォルトの名無しさん:2021/08/28(土) 06:24:50.37 ID:P0+dXebs.net
- それ言ったらuseMemoなんてuseState使えばいいし内部でstate使ってるのにuseNemoStateじゃないの直感的じゃないよね
- 138 :デフォルトの名無しさん:2021/08/28(土) 08:24:29.02 ID:5cd2kTad.net
- useCallback だと名称から、
コールバック使いますよ!の宣言に見えると言っている
実際はコールバックをメモしますよ!だから
コード読むとき直感的でないと言っている
実際、初学者で関数コンポネント内でコールバックを定義するときは
useCallback()を使わなければならないと思いこんでいる人が少なからず居ると思う
- 139 :デフォルトの名無しさん:2021/08/28(土) 10:18:42.44 ID:rJz23Izt.net
- Ionicと比べた場合のReact nativeのメリットはアプリの動作速度が速いところ?
- 140 :デフォルトの名無しさん:2021/08/28(土) 10:19:30.77 ID:rJz23Izt.net
- ageてしまって申し訳ない
- 141 :デフォルトの名無しさん:2021/08/28(土) 10:59:30.05 ID:4fr1GGj/.net
- >>138
初学者は
> useCallback()を使わなければならないと思いこんでいる
で丁度いい
- 142 :デフォルトの名無しさん:2021/08/28(土) 11:35:50.02 ID:5cd2kTad.net
- >>141
その心は?
- 143 :デフォルトの名無しさん:2021/08/28(土) 12:30:31.08 ID:fYYl/4Rj.net
- >>142
不要なuseCallbackを書いても実害はない
超大規模ならチリツモでパフォーマンスに影響あるかもしれないが初学者には関係ない
対して必要なuseCallbackを忘れるとuseEffectやReact.memoに影響しうるが初学者には気付きにくい
最初は愚直にuseCallback書いて後から不要なケースを学べばいい
- 144 :デフォルトの名無しさん:2021/08/28(土) 13:47:14.15 ID:17Xf1f5F.net
- >>143
なるほど!
その意味であえて関数名もそうしたんだろうか...
- 145 :デフォルトの名無しさん:2021/08/28(土) 23:14:15.55 ID:5cd2kTad.net
- https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
"カスタムフックは技術的にはReact機能ではない" って
ステートレス関数に状態を保持する機能が
jsに元よりあるという事でしょうか?
- 146 :デフォルトの名無しさん:2021/08/28(土) 23:39:41.08 ID:tYNkdatt.net
- カスタムフック===ユーザー定義フック
利用者(アプリケーション)で定義するものであってReactが提供する機能ではない
- 147 :デフォルトの名無しさん:2021/08/29(日) 00:17:55.75 ID:V85oGWwE.net
- >>146
それは了解してた!(質問を間違えた!)
フックを実現する技術(ステートレス関数に状態を保持する機能)は
JSに元からあるという記述が公式にあったようにおもうのだけれど、
それは何?って事が言いたかった...
- 148 :デフォルトの名無しさん:2021/08/29(日) 01:51:35.47 ID:V85oGWwE.net
- >>147
前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく
JSのクロージャーと array.push と array.pop とかで実装できるって事かな?
誤りありましたらご指摘下さい
- 149 :デフォルトの名無しさん:2021/08/29(日) 03:34:12.05 ID:pzZWZODD.net
- 引用しろボケカス
- 150 :デフォルトの名無しさん:2021/08/29(日) 12:10:00.26 ID: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 :デフォルトの名無しさん:2021/08/29(日) 12:12:17.85 ID:OiCqCGE7.net
- もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実
詳しく知りたければソースを読めばいい
https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js
- 152 :デフォルトの名無しさん:2021/08/29(日) 13:18:38.44 ID:V85oGWwE.net
- >>150
>>147 で言ったように、それは最初から解ってる
聞きたかったのは、フック自体の実装方法だよ!
>>151
そりゃそーーだ
- 153 :デフォルトの名無しさん:2021/08/29(日) 13:41:49.73 ID:1XJvcbdc.net
- >>152
お前さぁ・・・
フック自体の実装方法が知りたいならそう書けよ
無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ
つーか5ch開く前にすることあるだろ
- 154 :デフォルトの名無しさん:2021/08/29(日) 14:30:21.63 ID:LbdE2Z/6.net
- >>152
preactのソースを読め
わずか400行そこらでhooksを実装してる
俺がここ数年で見たコードで最も美しいコードだ
型もついてるからめちゃくちゃ読みやすい
https://github.com/preactjs/preact/blob/master/hooks
- 155 :デフォルトの名無しさん:2021/08/29(日) 21:46:55.62 ID:V85oGWwE.net
- >>154
(; ・`д・´)
- 156 :デフォルトの名無しさん:2021/09/18(土) 13:05:29.83 ID:ZtgFEKoc.net
- reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます?
- 157 :デフォルトの名無しさん:2021/09/20(月) 00:13:37.74 ID:fIDZ4k/Q.net
- 最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな?
reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか?
- 158 :デフォルトの名無しさん:2021/09/20(月) 00:18:04.28 ID:pwmEuNTH.net
- >>157
keyを使え
チュートリアルにも乗ってたはず
- 159 :デフォルトの名無しさん:2021/09/20(月) 01:13:11.44 ID:GKDt5rSn.net
- >>157
ならない
- 160 :デフォルトの名無しさん:2021/09/20(月) 02:01:14.08 ID:Rr9hULkc.net
- >>157
要素を別コンポーネントにしてReact.memoする
その場合も156が書いてるようにkeyは必須
でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ
- 161 :デフォルトの名無しさん:2021/09/20(月) 08:25:15.93 ID:fIDZ4k/Q.net
- >>158,159,160
dクス
もうちょい調べてみるわ
- 162 :デフォルトの名無しさん:2021/09/20(月) 12:16:07.93 ID:GKDt5rSn.net
- >>161
リストの出力の場合
アイテム毎にkey必ず振らなければない
key無いのはバグだからね
コンソールにエラー出てるはず
- 163 :デフォルトの名無しさん:2021/09/20(月) 12:53:40.75 ID:2GdVuLmq.net
- keyが必要なのは確かだがそれが影響するのはリアルDOMの更新
keyがないと
> reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど
が機能しなくなる
本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo
- 164 :デフォルトの名無しさん:2021/09/20(月) 18:39:05.51 ID:0kyk7DvV.net
- ID:GKDt5rSn の的外れ感
- 165 :デフォルトの名無しさん:2021/09/20(月) 19:00:16.83 ID:wV0zqhwC.net
- ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか?
テストユーザーは50名程度の予定です
- 166 :デフォルトの名無しさん:2021/09/20(月) 21:16:44.39 ID:hoT+CjfW.net
- それReact関係ないよね
- 167 :デフォルトの名無しさん:2021/09/22(水) 02:10:39.83 ID:LiQqK68K.net
- うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー
- 168 :デフォルトの名無しさん:2021/09/22(水) 15:53:36.27 ID:LiQqK68K.net
- >>167だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ
ありがとう
- 169 :デフォルトの名無しさん:2021/09/25(土) 21:37:04.38 ID:h7oOvGYh.net
- Vue.jsだと公式サイトからリンクにawesome-vueってのがあって
https://github.com/vuejs/awesome-vue
ここ(Components & Libraries)にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、
これのReact版とか無いですか?
- 170 :デフォルトの名無しさん:2021/09/25(土) 21:39:38.06 ID:h7oOvGYh.net
- 言った直後にまんまのがあった...
awesome-react
awesome-react-components
笑
- 171 :デフォルトの名無しさん:2021/09/25(土) 23:03:28.71 ID:PknKU9DC.net
- awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス
- 172 :デフォルトの名無しさん:2021/09/27(月) 11:55:16.25 ID:DYuWVLW4.net
- JSだとホットリロードが機能するけどTSだと機能しないのだけど
これはTSの自動トランスパイルが機能してないってことですかね?
- 173 :デフォルトの名無しさん:2021/09/27(月) 11:57:06.64 ID:ZRFQgXut.net
- >>172
?
- 174 :デフォルトの名無しさん:2021/09/27(月) 12:09:11.49 ID:DYuWVLW4.net
- 再起動したら直ったわ
- 175 :デフォルトの名無しさん:2021/09/28(火) 17:29:52.40 ID:s3NqJ5bC.net
- reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick={clickHandler}みたいに書くじゃない
このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ?
clickHandlerを関数を返す関数にして、
clickHandler =(props)=> () =>{‥}
コンポーネントにはonClick={clickHandler(props)}ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな
event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと
- 176 :デフォルトの名無しさん:2021/09/28(火) 18:22:37.60 ID:Tl6wB3bi.net
- >>175
JSの基本機能にクロージャーというのがあってだな
なんと!clickHandlerの中から外(つまりコンポーネント)の変数を参照できるんだよ!
const clickHandler = () => {
console.log(props.xxx)
}
useCallback使ってるならdepsに並べる
const clickHandler = useCallback(() => {
console.log(props.xxx)
}, [props.xxx])
- 177 :デフォルトの名無しさん:2021/09/28(火) 21:49:04.22 ID:s3NqJ5bC.net
- >>176
変数名をpropsにしたのが紛らわしかったかもしれんが
{arr.map((v)=>{
<ComponentA key=v.Id onClick={clickHandler} />
})}
みたいなことをやってるときにclickHandlerの処理の中でvを参照するにはどうしたらいいのかな?っていうのが聞きたいことなんだが、クロージャ?にあたるのか?
分かりにくくてスマン
- 178 :デフォルトの名無しさん:2021/09/28(火) 22:23:47.81 ID:yTRBGUiM.net
- memo 化したコンポーネントで ComponentA をラップし props と clickHandler を受け取って onClick={() => clickHandler(props)} とする
- 179 :デフォルトの名無しさん:2021/09/28(火) 22:25:37.88 ID:84Zwu3SC.net
- >>177
それならComponentAにvを渡してその中で
onXxx={(ev) => clickHandler(ev, v)}
- 180 :デフォルトの名無しさん:2021/09/28(火) 23:04:47.64 ID:s3NqJ5bC.net
- >>178
なーるほどなぁ、面倒だけど確かにそれならできそう
>>179
おー?これはuseCallbackで包めるんか?ちょっと明日試してみるわ
おまえらthx
- 181 :デフォルトの名無しさん:2021/09/28(火) 23:30:14.37 ID:pKLoFE48.net
- >>180
input等のdomにマップされるコンポーネントに直接渡す関数をuseCallbackする必要はない
- 182 :デフォルトの名無しさん:2021/09/29(水) 23:01:40.05 ID:lzBphG+K.net
- >>179
あ、これ>>178と同じこと言ってるんか、勘違いしてたわ
このためにラップしたコンポーネントを作らなきゃいけないってのはなんかイマイチだけどそれくらいしかなさそうね。ありがとう
- 183 :デフォルトの名無しさん:2021/09/29(水) 23:13:02.36 ID:VRCLPgDh.net
- >>182
え?177は俺だけどラップしたコンポーネントってなんのことかわからねーぞw
ComponentAもおまえが作ってるんならそんなのいらないだろ
- 184 :デフォルトの名無しさん:2021/09/30(木) 12:42:41.23 ID:TAcHeIwJ.net
- componentAが自作かそうでないかに関わらず言ってることは同じだわな
どちらも子コンポーネント内で実装しないといけないことを言ってるんだから
- 185 :デフォルトの名無しさん:2021/09/30(木) 14:23:21.02 ID:uxDakMZz.net
- 質問主はどう見ても>>157なんだから自作前提でよくて余計なことは省いた方がいいと思うね
- 186 :デフォルトの名無しさん:2021/10/03(日) 21:36:14.94 ID:9xTT9AKy.net
- material-uiのspeed dialをネストしたいんだけど無理かな?speed dial actionの代わりにspeed dialそのものを子に持ちたい
- 187 :デフォルトの名無しさん:2021/10/19(火) 10:58:01.20 ID:I/uBXkGk.net
- VSCodeでsassファイル保存時に自動フォーマット掛けたいですけどそれ出来る拡張ありますか?
- 188 :デフォルトの名無しさん:2021/10/20(水) 21:47:12.22 ID:VGECjsMp.net
- >>187
marketplace.visualstudio.com/items?itemName=BdSoftware.format-on-auto-save
標準搭載してほしいわ
- 189 :デフォルトの名無しさん:2021/11/09(火) 10:45:02.06 ID:tf9NUtHx.net
- イベントと副作用フックどっちでもいい時に、どちらを優先して使うほうがより良いとかってある?
keyを入力するテキスト入力欄、valueを表示するテキスト表示欄がある
keyが変化するとデータを鯖から取ってきてvalueに設定したい
副作用フックでkeyを監視するか、key入力欄の変更通知イベントを使うか、どっちでもいいけど、どちらかというとどっちが良いか?
- 190 :デフォルトの名無しさん:2021/11/09(火) 11:13:14.15 ID:ppTxKkYh.net
- 入力欄の変更イベントで十分だろ
そしてuseDefferedValue経由の値でサーバを叩く
- 191 :デフォルトの名無しさん:2021/11/17(水) 09:45:52.91 ID:gjeYELEc.net
- 素朴な疑問
状態を持ったり副作用を持ったりするコンポーネントってぶっちゃけclassのほうが可読性いいよね?
フックは書く時は楽だけど後で見るとナンジャコラ?ってなる
- 192 :デフォルトの名無しさん:2021/11/17(水) 10:40:45.63 ID:yi3gjxGP.net
- >>112を読んでないってわかんだよね
- 193 :デフォルトの名無しさん:2021/11/17(水) 11:55:31.75 ID:gjeYELEc.net
- 例えばの話、コンポーネントの初期化処理と終了処理はどこでやるの?って新人の疑問に対して
classコンポーネントなら
見たまんまcomponentDidMount、componentWillUnmountだよ
このメソッドを用意しとくとこのコンポーネントを持って管理してるフレームワークさんが、
いい感じのタイミングで呼び出してくれるよ
こう教えてやれば、直感ですぐさまなるほど、と理解して貰える
しかし関数コンポーネントでは純粋関数とは何か、副作用とは何か、フックとは何か、useEffectとは何か、useEffectの引数は何か、引数の戻りの関数は何か
ということをよく理解して頭の中で読み替えないといけない
なのでじっくり時間をかけて教えても、それでも理解するには時間を要する
関数コンポーネントはこんなのが無数にある
だから理解しにくい
タイピングの文字数は減るので書くのは楽だ、ということは確かだが
理解しやすさで言うと、ちょっとね、、、
- 194 :デフォルトの名無しさん:2021/11/17(水) 16:48:12.54 ID:QzSwOiy0.net
- 宣言的なReactを命令的に読み替えるんじゃ永遠に理解できないだろうな
そういう教え方をされる新人がかわいそうだし同情しかない
- 195 :デフォルトの名無しさん:2021/11/17(水) 20:00:29.63 ID:h3betjKK.net
- reactでいくつかのファイルがあって保存(ctrl+s)すると
コンパイルしてくれるファイルとしてくれないファイルがあるんだけど違いってなんですか。。。
- 196 :デフォルトの名無しさん:2021/11/17(水) 20:55:02.32 ID:Wtj2hevs.net
- 使ってるide (vscodeとか) のスレで聞け
- 197 :デフォルトの名無しさん:2021/11/17(水) 21:47:40.34 ID:h3+MjybB.net
- >>193
クラスって何?メソッドって何?継承って何?
- 198 :デフォルトの名無しさん:2021/11/17(水) 22:25:06.52 ID:N4+deCyE.net
- >>193
クラスだとマウント/アンマウントじゃなくてpropsが変わるたびに開始処理終了処理するってなると全然違うこと教えなきゃダメだろ
- 199 :デフォルトの名無しさん:2021/11/18(木) 00:22:44.81 ID:3dlOBCKi.net
- レアクトは宣言的だけど実用的なアプリケーションは全て有状態の手続きの塊じゃん?
ということはレアクトと「この不都合な現実世界」を上手いこと切り離して管理する方法が必要なんだよ
それがオブジェクト指向ってわけでね
関数コンポーネントは分離すべき手続きと宣言が渾然一体となっていてわかりにくい
オブジェクト指向を使えば
オブジェクトとオブジェクトを描画する純粋関数に分離することは容易い
それがrenderメソッドな訳だな
- 200 :デフォルトの名無しさん:2021/11/18(木) 00:44:06.97 ID:aYAbIgl/.net
- レアクト
- 201 :デフォルトの名無しさん:2021/11/18(木) 00:47:56.13 ID:F8B2t3Oi.net
- また知恵遅れクラス信者か
この流れ何度目だよw
- 202 :デフォルトの名無しさん:2021/11/18(木) 01:15:46.87 ID:3dlOBCKi.net
- 関数が優位に立つのはDOMのレンダリングだけ
状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい
関数は状態が無いものだけを扱うべき
- 203 :デフォルトの名無しさん:2021/11/18(木) 07:26:11.67 ID:sAyjJzQx.net
- 状態や手続きを分離する方法はオブジェクトだけじゃない
モナドもそれだしReactの場合は代数的作用が背景にある
- 204 :デフォルトの名無しさん:2021/11/18(木) 07:56:21.14 ID:JMkvun5L.net
- >>71辺りからの話を繰り返してるな
高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに
- 205 :デフォルトの名無しさん:2021/11/18(木) 08:07:20.27 ID:3dlOBCKi.net
- >>203
できる、と、簡単にできる、は全く違うからなぁ
モナドもあるしとか言っても、それはオブジェクト指向の簡単さ、理解しやすさ、使いやすさには到底及ばないわけだよ
- 206 :デフォルトの名無しさん:2021/11/18(木) 08:56:13.25 ID:O/tzCGdy.net
- それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな
- 207 :デフォルトの名無しさん:2021/11/18(木) 10:18:03.07 ID:5if92K6E.net
- 理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない
それよりReact18がベータになったことだしConcurrent Renderingを知るべき
そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう
- 208 :デフォルトの名無しさん:2021/11/18(木) 10:23:00.26 ID:5if92K6E.net
- Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる
いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる
だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する
それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう
そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな
クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題
そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね
- 209 :デフォルトの名無しさん:2021/11/18(木) 10:29:08.68 ID:5if92K6E.net
- 将来のReactではマウント・アンマウントも複数回行われるようになる
これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる
クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう
だから従来のライフサイクルという考え方だと破綻する
useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある
React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える
こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる
どちらが理解しやすいかという次元の話じゃないんだよね
- 210 :デフォルトの名無しさん:2021/11/18(木) 13:11:55.12 ID:3dlOBCKi.net
- それはuseStateを使うかlet変数宣言を使うかってのと同じこと
行儀の悪いコードはファンクショナルでも好きなだけ書ける
ようするにプログラマの腕とモラルの問題
ファンクショナルがクラスに対して優位と示す証拠ではないな
Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら
新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ
そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう
実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは
initializeComponent
componentDidMount
componentWillUnmount
disposeComponent
この辺りだろう
なんてわかりやすいんだ!
そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな
仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前
進化しないならそれはベンダーの怠慢
- 211 :デフォルトの名無しさん:2021/11/18(木) 14:18:18.92 ID:I+5yMFIL.net
- ライフサイクルが変わってもuseEffectは影響を受けない
なぜならライフサイクルを扱う機能ではないから
ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ
だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw
まぁ、取り残されたければそれでいいんじゃない?
ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ
本気で主張したけりゃここに行きな
https://github.com/reactwg/react-18/discussions
- 212 :デフォルトの名無しさん:2021/11/18(木) 15:19:55.65 ID:3dlOBCKi.net
- 本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない!ってんなら
useInitializer
useFainalizer
この2つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます!
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ? 空配列ってさ
- 213 :デフォルトの名無しさん:2021/11/18(木) 16:20:58.58 ID:yPpHDEE/.net
- 本当に化石のような石頭だな
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して?
- 214 :デフォルトの名無しさん:2021/11/18(木) 16:43:19.19 ID:3dlOBCKi.net
- >>213
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
- 215 :デフォルトの名無しさん:2021/11/18(木) 17:09:36.68 ID:tb6GSOae.net
- ファンクショナルの限界じゃなくてお前の限界な
- 216 :デフォルトの名無しさん:2021/11/18(木) 18:20:41.19 ID:te8WLqUU.net
- うわあ・・・
ID:3dlOBCKi
ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html
- 217 :デフォルトの名無しさん:2021/11/18(木) 18:34:14.46 ID:3dlOBCKi.net
- >>215
いや、ファンクショナルの限界
ファンクショナルでは本来の目的から外れた使い方をしなければない
初回だけ処理したいだけなのに、状態を維持するファンクションを強要される
- 218 :デフォルトの名無しさん:2021/11/18(木) 19:03:14.82 ID:wacBz6NM.net
- 使う人が増えると残念な人も増えるいつもの光景
- 219 :デフォルトの名無しさん:2021/11/18(木) 22:26:22.51 ID:fTWvydC+.net
- こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
- 220 :デフォルトの名無しさん:2021/11/19(金) 09:42:11.48 ID:J0mGbVeO.net
- >>196
webpack-dev-server知らんのは流石に論外やろ
- 221 :デフォルトの名無しさん:2021/11/21(日) 14:16:11.00 ID:knw1x1gk.net
- 関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
- 222 :デフォルトの名無しさん:2021/11/21(日) 17:48:46.47 ID:UWSF5n1L.net
- お前がそう思うんならそうなんだろう お前ん中ではな
- 223 :デフォルトの名無しさん:2021/11/21(日) 17:55:48.39 ID:Wm1mwUDt.net
- オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね!
- 224 :デフォルトの名無しさん:2021/11/21(日) 20:40:46.53 ID:1yBKup76.net
- 例えばさ、
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう?
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
- 225 :デフォルトの名無しさん:2021/11/21(日) 20:55:13.47 ID:SJq+O3t2.net
- しつこい
- 226 :デフォルトの名無しさん:2021/11/21(日) 21:04:01.25 ID:5qd0Nwtv.net
- ふむ、反論ができなくなったのかな?
- 227 :デフォルトの名無しさん:2021/11/21(日) 21:16:31.74 ID:zzbPLRQo.net
- 石頭の老害相手に反論しても無駄
- 228 :デフォルトの名無しさん:2021/11/21(日) 22:35:19.11 ID:UWSF5n1L.net
- 馬鹿は論破できない
- 229 :デフォルトの名無しさん:2021/11/22(月) 10:00:05.25 ID:HTg16b0P.net
- 今どきfunctionって書くか?
- 230 :デフォルトの名無しさん:2021/11/22(月) 14:12:56.45 ID:yxcpONXb.net
- 書かない
- 231 :デフォルトの名無しさん:2021/12/03(金) 10:05:55.29 ID:OvhoAu9V.net
- ボタン連打するけしからん奴対策の定番ライブラリ教えてよ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
- 232 :デフォルトの名無しさん:2021/12/03(金) 16:35:10.63 ID:ZR9gqQ7Z.net
- ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね?
- 233 :デフォルトの名無しさん:2021/12/03(金) 18:25:47.16 ID:C14FVshC.net
- ボタンが押されたらボタンをdisabledにすればいいじゃん
- 234 :デフォルトの名無しさん:2021/12/03(金) 19:41:18.43 ID:L4TUqIiQ.net
- わろた
- 235 :デフォルトの名無しさん:2021/12/03(金) 19:41:36.25 ID:50htZSL3.net
- それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある
- 236 :デフォルトの名無しさん:2021/12/03(金) 20:19:23.32 ID:mMKMUGdN.net
- JavaScriptはシングルスレッド
- 237 :デフォルトの名無しさん:2021/12/06(月) 19:49:21.16 ID: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 :デフォルトの名無しさん:2021/12/06(月) 20:06:59.76 ID:4QzxG6KH.net
- useMyEffectもuseMyHookでやるべきじゃねーの
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
- 239 :デフォルトの名無しさん:2021/12/06(月) 20:07:50.83 ID:4QzxG6KH.net
- とりあえずこれ読んどけ
https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/
- 240 :デフォルトの名無しさん:2021/12/06(月) 20:11:27.69 ID:4QzxG6KH.net
- >>238
1行目訂正
useEffectもuseMyHookでやるべきじゃねーの
- 241 :デフォルトの名無しさん:2021/12/06(月) 22:16:00.54 ID:zN0DCcOz.net
- >>238
thank you.
- 242 :デフォルトの名無しさん:2021/12/08(水) 14:16:37.56 ID:/W89KInL.net
- function MyComp () {
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる?
つまりuseMyCompViewModelをインジェクトしたい時
- 243 :デフォルトの名無しさん:2021/12/08(水) 15:51:56.43 ID:5zVi58LJ.net
- https://github.com/testing-library/react-hooks-testing-library
- 244 :デフォルトの名無しさん:2021/12/08(水) 19:22:47.15 ID:/W89KInL.net
- >>243
d
でもこれフックのテスト用なのでは?
そうじゃなくフックをモック化してコンポーネントをテストしたい
- 245 :デフォルトの名無しさん:2021/12/08(水) 21:33:33.67 ID:Rfcvtfm3.net
- テストだけならこんなんで十分じゃね
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
- 246 :デフォルトの名無しさん:2021/12/08(水) 21:48:07.68 ID:lkzI+wPD.net
- 経年劣化に耐える ReactComponent の書き方
https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component
- 247 :デフォルトの名無しさん:2021/12/08(水) 22:23:21.01 ID:SYjhTw/G.net
- >>245
なるぼどなぁ
これで少しやってみよかな
- 248 :デフォルトの名無しさん:2021/12/11(土) 11:45:52.40 ID:zttGewLv.net
- サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい
どうすればいい?ソースコードを書き換えるのは無しで
- 249 :デフォルトの名無しさん:2021/12/11(土) 11:52:28.47 ID:GrxR7SwR.net
- プルリクエスト
- 250 :デフォルトの名無しさん:2021/12/11(土) 12:05:31.62 ID:zttGewLv.net
- function IWantEasyTestableComponent(props) {
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ?
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
- 251 :デフォルトの名無しさん:2021/12/11(土) 12:21:22.59 ID:GrxR7SwR.net
- jest.mock('path/to/FackingStatefullComponent')
- 252 :デフォルトの名無しさん:2021/12/11(土) 12:27:06.61 ID:RI4P88iz.net
- >>251
ソースコードの書き換えとどう違うんだそれ?
- 253 :デフォルトの名無しさん:2021/12/11(土) 12:44:03.50 ID:g9v4y15i.net
- 依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
- 254 :デフォルトの名無しさん:2021/12/12(日) 21:59:15.39 ID:wsjthnMX.net
- LogBox邪魔すぎる
機能OFFにできんのかコレ
- 255 :デフォルトの名無しさん:2021/12/20(月) 09:27:19.20 ID:vskoYLeQ.net
- 状態、副作用は親コンポーネントに持たせるべきか
子コンポーネントに持たせるべきか
- 256 :デフォルトの名無しさん:2021/12/20(月) 17:18:10.57 ID:hUMHHR9z.net
- コンポーネントの用途に依る
基本的にはコンポーネントで独立してる方がいいと思う
ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず
- 257 :デフォルトの名無しさん:2021/12/20(月) 18:51:15.00 ID:DVSwWolF.net
- 以前は
親(コンテナ)コンポーネントで状態管理
子(プレゼンテーショナル)コンポーネントは表示だけ
ってのが流行ってたが廃れたな
再レンダリングが発生しやすいせいかな
- 258 :デフォルトの名無しさん:2021/12/21(火) 15:04:20.98 ID:2tghIxun.net
- まあケースバイケースになるか
そこそこ複雑な入力ページなんだけど
親に状態を持たせると不定個数の状態の扱いがやりにくい
子に状態を持たせると親への通知がやりにくい
どっちでやってもスッキリしない
- 259 :デフォルトの名無しさん:2021/12/21(火) 15:13:11.31 ID:YHqQ6+Ts.net
- 入力フォームなら素直にreact-hook-form使え
- 260 :デフォルトの名無しさん:2021/12/21(火) 15:40:04.62 ID:ESVu6HO8.net
- ほぉん
なかなか便利そう
どこまで複雑な入力ページに耐えられるか気になるところだけど
単純なフォームならこれで良さそうだ
- 261 :デフォルトの名無しさん:2021/12/29(水) 00:29:54.67 ID:ceh8LJAo.net
- React完全に理解したがパフォーマンスの上げ方がわからねえ
- 262 :デフォルトの名無しさん:2021/12/29(水) 00:50:07.29 ID:b+BxW/Al.net
- >>261
理解出来てねーーじゃん!
- 263 :デフォルトの名無しさん:2021/12/29(水) 01:49:18.73 ID:CcYJF9F8.net
- 完全に理解した=何もわからんだからな
チョットでかる=世界一わかってるだし
- 264 :デフォルトの名無しさん:2022/01/04(火) 12:28:56.67 ID:LToZWYYj.net
- ブラウザデバッガで見て出てるエラー消すところからかな
あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない
- 265 :デフォルトの名無しさん:2022/01/05(水) 12:38:15.54 ID:1AqA60VG.net
- Reactの優れたイディオム、デザインパターンまとめたサイト、書籍、教えてよ
- 266 :デフォルトの名無しさん:2022/01/09(日) 14:30:52.75 ID:YbeZmiIg.net
- react nativeのパーツかわからないんですけど
画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう?
ttps://i.imgur.com/FuvGKCx.jpg
- 267 :デフォルトの名無しさん:2022/01/20(木) 19:51:41.70 ID: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 :デフォルトの名無しさん:2022/01/20(木) 19:58:21.41 ID:dHw5M9GX.net
- store.getState()
- 269 :デフォルトの名無しさん:2022/01/22(土) 01:00:33.62 ID:Q6mU4pBx.net
- React Nativeはオワコンらしいですが
Reactは使う価値ありますか?
教えてエロい人
- 270 :デフォルトの名無しさん:2022/01/22(土) 01:02:15.28 ID:VcaTUFKD.net
- >>269
自分で見極められないの?
- 271 :デフォルトの名無しさん:2022/01/22(土) 01:17:25.20 ID:Q6mU4pBx.net
- >>270
すいません。
パソコン初心者です。
アドバイスお願いします。
- 272 :デフォルトの名無しさん:2022/01/22(土) 01:19:22.91 ID:NdDHIpih.net
- 初心者はやめておいた方が良いです
- 273 :デフォルトの名無しさん:2022/01/22(土) 01:25:12.66 ID:Q6mU4pBx.net
- これから勉強するならFlutterの方がいいですか?
- 274 :デフォルトの名無しさん:2022/01/22(土) 10:04:33.20 ID:Z1IOsfXg.net
- シカトっすか?
- 275 :デフォルトの名無しさん:2022/01/22(土) 11:17:22.76 ID:N7C2miyW.net
- まず上級者になることをおすすめします
- 276 :デフォルトの名無しさん:2022/01/23(日) 11:01:19.74 ID:5zqw2dvO.net
- create-react-appで、npm run buildしたのですが
manifest.jsonのみがbuildフォルダーにコピーされないです・・・
回避方法ないでしょうか?
- 277 :デフォルトの名無しさん:2022/01/23(日) 11:08:40.96 ID:5zqw2dvO.net
- >>276
解決しました!失礼しました・・・。
- 278 :デフォルトの名無しさん:2022/01/26(水) 10:48:59.57 ID:PJmPV3+3.net
- Reduxのストアにクラスっぽいオブジェクト(プロパティ+関数)入れようとしたら
non-serialize objectがどうのこうのとエラーになった。
そもそも何でシリアライズなんかやろうとするんだ?
- 279 :デフォルトの名無しさん:2022/01/26(水) 10:59:34.07 ID:0H2oAMTN.net
- 不変性を担保するためじゃね
- 280 :デフォルトの名無しさん:2022/01/26(水) 11:35:00.62 ID:SY+BWxpR.net
- なんかもっと決定的な感じのフレームワーク出ないのエロい人?
- 281 :デフォルトの名無しさん:2022/01/26(水) 17:40:44.17 ID:kU7cNmd7.net
- >>279
別にそんなもん担保する必要ないだろ。
- 282 :デフォルトの名無しさん:2022/01/26(水) 18:01:16.43 ID:+qGThwTi.net
- reduxの根本が不変性をベースにしてるんだが
でないとシャロー比較とか成り立たない
たいして有用じゃないがタイムトラベルも不変性前提の機能
そのへんちゃんと理解してから使った方がいいよ
- 283 :デフォルトの名無しさん:2022/01/27(木) 00:56:59.89 ID:58xO6kDn.net
- そんなどうでも良い概念を使用者全員に押し付けて来んなよ。
単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、
アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。
不変性?(w) プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろw
- 284 :デフォルトの名無しさん:2022/01/27(木) 01:06:46.42 ID:oXQnXbb3.net
- ダメだこいつ…
- 285 :デフォルトの名無しさん:2022/01/27(木) 01:39:30.37 ID:58xO6kDn.net
- 何故それが必要と思うのか説明して見ろよw
- 286 :デフォルトの名無しさん:2022/01/27(木) 05:05:01.32 ID:kowYjA+c.net
- Ruby on Rails の作者・DHH の動画では、
React, Vue.js とか、規約だけのフレームワーク・Stimulus も使う
- 287 :デフォルトの名無しさん:2022/01/27(木) 10:03:38.14 ID:QU6mkTFl.net
- >>285
すでに280に書いただろが
もっともシャロー比較のために不変性が必要というのは話が逆で不変性が前提としてあるからシャロー比較が機能するんだが
もっと言えばreduxは関数型のスタイルを「選択」して全体が作られてる
だからステートやアクションは不変に、reducerやselecterは純粋にすべしってこと
それがreduxの設計意図
一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
- 288 :デフォルトの名無しさん:2022/01/27(木) 10:51:15.03 ID:zgsWbtRT.net
- >>286
DHHってフロントエンドでは間違いしかしない人だからスルー推奨
- 289 :デフォルトの名無しさん:2022/01/27(木) 11:28:21.68 ID:58xO6kDn.net
- >>287
だから全てのアプリがシャロー比較とかタイムトラベルしたい訳じゃないだろって話してんだがw?
まあ、余計な機能をテンコ盛りに詰めて利用者に強制したから、別の実装が出たりreactが自前実装して
見捨てられるんだろうけど。Reduxに期待する事はFluxのあの図を忠実に実装する事だけで余計な機能は付けるなよ
>一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
飛びついたのは俺じゃなくて俺が使ってるミドル作った人だけど、まあ、あのアプリの規模(デモレベル)
でそんな面倒臭いシステム使ったのなら、理由はそんなところだろうなと。
Reduxはマジあかんな。費用対効果が悪すぎる。
コスト意識の無い潔癖な学者か研究者が作ったシステムって感じがするね。
- 290 :デフォルトの名無しさん:2022/01/27(木) 12:05:30.94 ID:zgsWbtRT.net
- >>289
全てのアプリがしたいかどうかじゃなくてredux使うアプリはその流儀に従うしかないって話なんだがわからず屋だな
それが嫌ならredux選ぶなっつーだけの話だ
ちなみにシャロー比較はreact.memoなどreactエコシステムの共通項だから全てのreactアプリ開発者が身につけておくべきことだけどな
だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
- 291 :デフォルトの名無しさん:2022/01/28(金) 04:01:26.15 ID:dtKXZRXN.net
- Deanin, 1/10、15分の動画
Setup A Ruby on Rails 7 API With React JS
https://www.youtube.com/watch?v=sh4WrNGDvQM
WSL, Ubuntu 20.04, VSCode(Remote WSL)
Ruby 3, Rails 7 のAPI モード、React, Axios
Railsのscaffold で、簡単なデモ。
この兄ちゃんは、きれいな英語を喋るので、翻訳も分かりやすい
- 292 :デフォルトの名無しさん:2022/01/28(金) 07:19:26.02 ID:FbvuqA1u.net
- Ruby はお呼びじゃないです
- 293 :デフォルトの名無しさん:2022/01/29(土) 01:06:49.85 ID:b1Z4prOk.net
- >だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
害悪をまき散らした張本人だな。
マジであの生鮮性を何故実装して広めようとした事は理解に苦しむ。
J2EEとかhadoopとか(多分将来的にk8sも)生産性が超絶に低い潔癖システムが消えてなくなった事例から全く学ぼうとしないんだな。
- 294 :デフォルトの名無しさん:2022/02/06(日) 05:24:52.64 ID:ETpepHrW.net
- ReactでPOSTメソッドだけを受けるアプリ作るのはどうすれば良いんでしょう?
"react POST method "でぐぐってもfetchを使えとか、何故か投げる側の処理ばかりが出ます。
webサーバーには何も入れてないので、npm start で動くサーバーと思しき物はreact-scriptsの筈です。
POSTメソッドだけに紐付いたコンポーネント書きたいのですが…
- 295 :デフォルトの名無しさん:2022/02/06(日) 07:33:46.13 ID:d9+JDYY/.net
- >>294
(´Д`)
- 296 :デフォルトの名無しさん:2022/02/06(日) 13:52:11.36 ID:xkt5lO0Z.net
- >>294
これネタじゃなくマジで言ってんの
- 297 :デフォルトの名無しさん:2022/02/06(日) 15:17:45.09 ID:d9+JDYY/.net
- (´Д`)
- 298 :デフォルトの名無しさん:2022/02/06(日) 15:52:20.16 ID:YYEn69uQ.net
- GETとPOSTの違いを質問するだけで、
アレな人を面接から排除できるし、簡単だな
これで95%ぐらい排除できるし
- 299 :デフォルトの名無しさん:2022/02/06(日) 16:34:57.86 ID:FsJSE82A.net
- いやいや、この場合はクライアントとサーバの違いを質問するところからだろ……
- 300 :デフォルトの名無しさん:2022/02/06(日) 16:41:29.09 ID:d9+JDYY/.net
- まずネタかどうか...
- 301 :デフォルトの名無しさん:2022/02/06(日) 16:52:26.30 ID:NfirkViC.net
- □私はロボットではありません
- 302 :デフォルトの名無しさん:2022/02/06(日) 21:41:04.19 ID:g3gFasX1.net
- あれ?Reactってサーバーサイドで動く処理は一切かけないの??
Next.jsとかあるから、かけるもんかと思ってたけど。
- 303 :デフォルトの名無しさん:2022/02/06(日) 22:13:46.32 ID:akwTUDY3.net
- Next.jsってそれっぽい処理あるのね
React勉強中でAPIサーバ別で作るかって思ってたけどNext.jsで事足りそう
- 304 :デフォルトの名無しさん:2022/02/06(日) 22:34:10.48 ID:hDdLDr4C.net
- Next.jsのサーバサイドはpages以下のページコンポーネントに対応するGETリクエストを受けたときだけそのページコンポーネントをレンダリングする(SSRの場合)
POSTを処理するにはAPIルートを使えるがこれはReactコンポーネント関係ない
- 305 :デフォルトの名無しさん:2022/02/07(月) 16:33:13.54 ID:QUqmCtWk.net
- Ruby on Rails は、React, Bootstrap が多い
他には、Vue.js, Stimulus, jQuery
Bulma, Tailwind
Rails にはHTML ではなく、JSON を返す、API モードもある
- 306 :デフォルトの名無しさん:2022/02/07(月) 16:54:59.57 ID:sj/r7l/l.net
- ウザ
- 307 :デフォルトの名無しさん:2022/02/08(火) 16:28:11.87 ID:vHTqeH80.net
- prettier以外でReact hookでつかえる
フォーマッターで何か良いの無いでしょか?
- 308 :デフォルトの名無しさん:2022/02/15(火) 22:42:35.11 ID:/0MPsAKI.net
- eslint
- 309 :デフォルトの名無しさん:2022/03/16(水) 12:08:38.94 ID:5z0ayZzJ.net
- webサイト作っててログイン名とか持ち回りたいんですけど、usestateとかpropsとかで持ち回るよりlocalstorageとかsessionstorageとか使えば良いのでは?と思うのですが何か問題あったりする?
- 310 :デフォルトの名無しさん:2022/03/16(水) 15:24:22.47 ID:QBH5mk3r.net
- なぜその程度の情報をそこに保存しようと思ったのかを知りたいね
- 311 :デフォルトの名無しさん:2022/03/16(水) 21:21:30.66 ID:5z0ayZzJ.net
- もち回るのが面倒だからこれでいいかなって、、
- 312 :デフォルトの名無しさん:2022/03/16(水) 21:24:39.33 ID:aSvQMnmr.net
- どうせ他にも持ち回る情報はあるのだからちゃんと管理した方がいいよ
どっちしろuseLocalStorageみたいなフック作ることになるんだし
- 313 :デフォルトの名無しさん:2022/03/17(木) 01:04:21.86 ID:nbrJosFU.net
- Ruby on Rails では、セッション情報を何を使って実現しているかは、あまり意識しない。
各デバイスを自分でコーディングする事もない
4KB までなら、ブラウザのcookie だし、
それ以上なら、Rails のキャッシュか、データベースとか
フレームワークを使わない人は、自分で調べてコーディングするから、
何十倍も時間が掛かって、なおかつ低品質な実装しかできない
- 314 :デフォルトの名無しさん:2022/03/17(木) 23:27:53.87 ID:575mXe6h.net
- >>313
氏ね
- 315 :デフォルトの名無しさん:2022/04/01(金) 10:10:23.98 ID:JecPgYr0.net
- React初心者だけど画面のDevelper ToolsからReactコンポーネントが
どれなのかってわかりにくいよね?
ブラウザからHTMLを見るとどれがReactコンポーネントの塊なのかわかりにくいし
Reactコンポーネントを組み込んだHTMLのビューファイルのソースコードを見ると
配置されているコンポーネントが何なのかわかりにくい
- 316 :デフォルトの名無しさん:2022/04/01(金) 11:23:42.76 ID:auF3smsz.net
- React DevToolsというのがありましてん
- 317 :デフォルトの名無しさん:2022/04/01(金) 18:54:14.92 ID:yYW+C1/7.net
- Reactってちょっとした実装するとすぐパフォーマンス悪くなって
不要なれだリングを抑制するのに苦労するじゃん
これ逆にで、全て手動でレダリング指示する方式には出来なかったん?
- 318 :デフォルトの名無しさん:2022/04/01(金) 19:46:55.68 ID:rhFjyhAq.net
- それなんてjQuery
- 319 :デフォルトの名無しさん:2022/04/03(日) 15:55:17.06 ID:MTdqQjr6.net
- >>309
recoil使えばええんやない?それで足りんかったらrecoil-persistも
- 320 :デフォルトの名無しさん:2022/04/13(水) 00:17:55.41 ID:fbGfFCQp.net
- react-bootstrapの"esm"ってどこの馬鹿が付けたんだ?
RowとかColとかを自動インポートするたびにesmが付きやがる・・・(怒
それならreact-bootstrap-esmにでもしてreact-bootstrapとは分けろよ
とんでもねえ馬鹿野郎が作っちまったな
- 321 :デフォルトの名無しさん:2022/04/15(金) 18:52:04.48 ID:6JZFJ70w.net
- スマホアプリと連動するWebアプリを開発するために
html, css, js, ts, react, redux, material-uiなどについて現在勉強中
「組み込みの経験値があるから、Webアプリ開発なんて楽勝でしょwwwww」とか思ってたけど
技術選定を含めて二週間かかってもまだ開発に着手できてない
もう1週間はかかりそう。かなり敷居が高いな
- 322 :デフォルトの名無しさん:2022/04/15(金) 18:53:13.67 ID:6JZFJ70w.net
- バックエンドはfirebaseとapp engineを使うつもりだから簡単なはずなんだけど
- 323 :デフォルトの名無しさん:2022/04/16(土) 10:36:16.56 ID:GJol2hPc.net
- Material-UIもv5になってv4の頃より大分使いやすくなったし選択肢に入れてもいいんじゃない?
- 324 :デフォルトの名無しさん:2022/04/26(火) 03:06:09.90 ID:1qeD7Yad.net
- >>321だけど、やっとまともに開発を進められるようになった
まだ手が早く動かなくて辛いわ
- 325 :デフォルトの名無しさん:2022/04/28(木) 12:12:12 ID:+1bBzylX.net
- 新規でreduxとか茨の道じゃない?
- 326 :デフォルトの名無しさん:2022/04/29(金) 18:12:15.81 ID:HVcwi/JU.net
- 比較的簡単なツールだから茨の道ということはない
- 327 :デフォルトの名無しさん:2022/04/30(土) 08:55:59.74 ID:xRiYwFSM.net
- >>325
recoil使え
- 328 :デフォルトの名無しさん:2022/04/30(土) 20:24:57.68 ID:zPHJgr0b.net
- recoilいいね
わかりやすいわ
- 329 :デフォルトの名無しさん:2022/05/05(木) 11:51:03.63 ID:JOrREzPe.net
- reduxを使うにしても、UI側だけで使用する状態の保持はcontextでやった方がいい感じかな
あくまで個人的感想の落書き
- 330 :デフォルトの名無しさん:2022/05/22(日) 20:06:50.28 ID:QFhXSBvp.net
- gifjsってライブラリをReactNativeでも使えるようにしようと色々いじくってます。canvasが必要なのでreact-native-canvas入れてみたけどgetImagedataが遅すぎる...
webviewで実行したら改善するかな??もしくはなんか違うやり方あるかな??
- 331 :デフォルトの名無しさん:2022/05/29(日) 18:03:59.58 ID:3mvQdNHh.net
- 組込みやってて流れでreactで自社内で使うwebアプリのフロント側
作らされる羽目になったのですが素人がreactとjs学ぶのに
定番みたいな書籍やコンテンツありますか?
バックエンドはやりませんがpythonのfastapiです。
- 332 :デフォルトの名無しさん:2022/06/07(火) 16:32:08.16 ID:trxEqnyj.net
- reactとかってソースにコメントって
あまり書かないほうがいい的な暗黙のルールってあります?
読まれちゃうから?
今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。
- 333 :デフォルトの名無しさん:2022/06/09(木) 19:17:56.70 ID:pioqxBxg.net
- ないです
トランスパイルしたら消えるのでしっかり書きましょう
- 334 :デフォルトの名無しさん:2022/07/01(金) 09:49:56.08 ID:mdBqK8pn.net
- ありがとう
- 335 :デフォルトの名無しさん:2022/08/20(土) 11:13:41.79 ID:ncpICP0v.net
- propsで受け取ったデータを
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか?
- 336 :デフォルトの名無しさん:2022/08/25(木) 12:56:19.31 ID:H3bW7ybM.net
- ここReactの本スレ?
過疎ってるの?
- 337 :デフォルトの名無しさん:2022/08/25(木) 17:55:45.09 ID:Tb5qjwQY.net
- 過疎ってるのは明白やろ
- 338 :デフォルトの名無しさん:[ここ壊れてます] .net
- ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな
- 339 :デフォルトの名無しさん:2022/08/30(火) 00:50:56.99 ID:GSie6Ogu.net
- reactはtypescriptが必須なのでしょうか?
- 340 :デフォルトの名無しさん:2022/08/30(火) 03:03:46.27 ID:R48CF1Id.net
- >>339
いらん
- 341 :デフォルトの名無しさん:2022/08/30(火) 03:55:25.12 ID:AgQQgySl.net
- Reactが流行っていないから、過疎っているんだよ
- 342 :デフォルトの名無しさん:2022/08/30(火) 18:08:40.22 ID:GSie6Ogu.net
- reactの求人は多いですけど、実際にはどうなのでしょうか。
- 343 :デフォルトの名無しさん:2022/08/30(火) 19:28:11.75 ID:148lWuya.net
- Reactできる人は全然足りてない
- 344 :デフォルトの名無しさん:[ここ壊れてます] .net
- >>343
そうなのですか。
今、javascriptとjQueryの勉強をしてますが、この2つだけでも大変ですね。
- 345 :デフォルトの名無しさん:2022/08/30(火) 20:28:20.43 ID:oTUqrsBR.net
- 数年Web屋やって引退するつもりならそれでもいい
- 346 :デフォルトの名無しさん:2022/08/30(火) 21:03:00.66 ID:BxScEIY5.net
- Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる
- 347 :デフォルトの名無しさん:[ここ壊れてます] .net
- JavaScript関連技術でwebアプリを作るならreactは便利でしょうか?
- 348 :デフォルトの名無しさん:2022/08/30(火) 23:14:38.13 ID:AsY/BIgk.net
- 便利さでいうならAngularがいいよ
- 349 :デフォルトの名無しさん:2022/08/30(火) 23:44:08.14 ID:B8+owlOV.net
- 満足度が底辺のangularがなんだって?
https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks
- 350 :デフォルトの名無しさん:2022/08/31(水) 01:59:04.53 ID:J9nI7vcp.net
- >>347
できる人は、何でもできる
- 351 :デフォルトの名無しさん:2022/08/31(水) 11:44:05.05 ID:FlEWiE9h.net
- Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる
- 352 :デフォルトの名無しさん:2022/08/31(水) 12:36:45.93 ID:3saFUPw3.net
- ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ
- 353 :デフォルトの名無しさん:2022/09/01(木) 05:11:23.04 ID:jMwj7QaK.net
- vue.jsよりreactの方が優れてますよね?
- 354 :デフォルトの名無しさん:2022/09/13(火) 16:36:34.31 ID:DqV+9O8X.net
- test
- 355 :デフォルトの名無しさん:2022/09/26(月) 01:00:41.00 ID:ikr92+JD.net
- 最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい
・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね?recoilに比べてどういうメリットがあるの?
・クラスベースの記述って殆どしないの?ベストプラクティスは関数ベース?
- 356 :デフォルトの名無しさん:2022/09/26(月) 20:02:50.86 ID:wZFpwFwK.net
- 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
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか?
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。
- 357 :デフォルトの名無しさん:2022/09/26(月) 22:42:27.40 ID:ikr92+JD.net
- >>356
ごめんクラスコンポーネントと関数コンポーネントの違いは分かってるんだ
例えば、1+1を計算する関数をクラスベースで定義すべきか関数ベースで定義すべきか
的なことを知りたかった!
- 358 :デフォルトの名無しさん:2022/09/26(月) 22:56:01.37 ID:lxhy0Qxo.net
- JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
- 359 :デフォルトの名無しさん:2022/09/26(月) 22:59:55.62 ID:rxxJbSNv.net
- >>357
書いてくれてるだろ
ちゃんと読もうよ
- 360 :デフォルトの名無しさん:2022/09/26(月) 23:21:54.38 ID:rxxJbSNv.net
- ああ、ごめんコンポーネントの話じゃなかったのか
- 361 :デフォルトの名無しさん:2022/09/26(月) 23:22:50.91 ID:tIU7Oyti.net
- React実践の教科書、2021
この本には、クラスは出てこない。
すべて関数
- 362 :デフォルトの名無しさん:2022/09/27(火) 12:54:00.07 ID:CMfXpwKQ.net
- なるほどなるほど
仕事でcobolとvbaしか使ったbアとなかったかb辜Iブジェクト試w向的な記述自荘フ馴染みなかっbスわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
- 363 :デフォルトの名無しさん:2022/09/27(火) 13:46:50.26 ID:t32oMnpk.net
- JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる?
ちなみにReactのクラスコンポーネントはオワコンだけどね
- 364 :デフォルトの名無しさん:2022/09/27(火) 14:04:56.54 ID:CMfXpwKQ.net
- >>363
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる!?
- 365 :デフォルトの名無しさん:2022/09/27(火) 15:39:04.72 ID:D1kdTDEr.net
- >>364
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ
JSの方は好みだな
- 366 :デフォルトの名無しさん:2022/09/27(火) 15:58:48.85 ID:aOp1T7nJ.net
- >>362
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
- 367 :デフォルトの名無しさん:2022/09/27(火) 16:41:51.18 ID:MQqAKvI3.net
- Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
- 368 :デフォルトの名無しさん:2022/09/27(火) 16:48:43.98 ID:CMfXpwKQ.net
- >>366
頭ごなしに否定する気はないんだけど
(jsの)クラスベースの記述するメリットってどういうとこがあるの?
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
- 369 :デフォルトの名無しさん:2022/09/27(火) 17:25:00.79 ID:fOqsMNTu.net
- Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
- 370 :デフォルトの名無しさん:2022/09/27(火) 17:28:55.43 ID:YFL0VkhR.net
- プロジェクトメンバーにどうして混在してるのか聞いてみた?
- 371 :デフォルトの名無しさん:2022/09/27(火) 17:29:21.69 ID:fOqsMNTu.net
- jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
- 372 :デフォルトの名無しさん:2022/09/27(火) 18:13:32.56 ID:dJevJ7EZ.net
- クラスコンポーネントは公式に非推奨扱いじゃね
- 373 :デフォルトの名無しさん:2022/09/27(火) 18:15:33.41 ID:397xSubl.net
- 話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
- 374 :デフォルトの名無しさん:2022/09/27(火) 18:20:28.32 ID:dJevJ7EZ.net
- Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
- 375 :デフォルトの名無しさん:2022/09/27(火) 20:04:34.40 ID:CMfXpwKQ.net
- >>370
うん
「本当はよくないんですけどね~~」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流(これが一番酷い)
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
- 376 :デフォルトの名無しさん:2022/09/27(火) 20:20:13.86 ID:6DdS+dLy.net
- プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
- 377 :デフォルトの名無しさん:2022/09/27(火) 20:22:10.28 ID:fOqsMNTu.net
- >>375
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。
- 378 :デフォルトの名無しさん:2022/09/27(火) 20:39:34.88 ID:CMfXpwKQ.net
- >>376
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。
>>377
アジャイルってこんなもんなんじゃないの?知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ
- 379 :デフォルトの名無しさん:2022/09/27(火) 22:23:16.69 ID:/UUTRmF2.net
- >>364
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。
- 380 :359:2022/09/27(火) 23:17:49.69 ID:oW3s344K.net
- >>375
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
- 381 :359:2022/09/27(火) 23:29:13.30 ID:oW3s344K.net
- Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
- 382 :デフォルトの名無しさん:2022/09/27(火) 23:53:21.49 ID:BMrl8a7V.net
- なんでそんなにクラスコンポーネントの話にこだわるの?
- 383 :デフォルトの名無しさん:2022/09/28(水) 20:45:18.22 ID:KHG5QcXL.net
- presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの?
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う?
- 384 :デフォルトの名無しさん:2022/09/28(水) 21:57:59.16 ID:Km2fmn1T.net
- プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
- 385 :デフォルトの名無しさん:2022/09/28(水) 22:11:03.79 ID:0Dahyjoe.net
- グローブステートにRxで変更通知でどうですか?
- 386 :デフォルトの名無しさん:2022/09/28(水) 22:46:08.76 ID:HuYE1qae.net
- >>384
へー!なるほど!
その経緯は知らんかったわ!ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
- 387 :デフォルトの名無しさん:2022/09/28(水) 23:33:30.69 ID:N1fcW8jX.net
- え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの?
- 388 :デフォルトの名無しさん:2022/09/28(水) 23:38:10.61 ID:QcgKtZxa.net
- ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない?
- 389 :デフォルトの名無しさん:2022/09/29(木) 01:06:57.42 ID:6obmiat7.net
- >>387
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
- 390 :デフォルトの名無しさん:2022/09/29(木) 01:29:18.28 ID:ffAnOOZb.net
- >>389
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん?
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと?
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
- 391 :デフォルトの名無しさん:2022/09/29(木) 07:28:27.58 ID:+pwL/l2M.net
- >>388
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
- 392 :デフォルトの名無しさん:2022/09/29(木) 07:40:58.14 ID:6obmiat7.net
- >>390
いやいやいやロジックはhooksって書いたじゃん
複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う
- 393 :デフォルトの名無しさん:2022/09/29(木) 08:51:14.08 ID:DUgkcSyO.net
- Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
- 394 :デフォルトの名無しさん:2022/09/29(木) 08:54:50.37 ID:vsyIBCv9.net
- >>392
コンポーネントにロジックを記載するのではなく
カスタムhooksとして切り出すってこと?
理解力乏しくてすまん
- 395 :デフォルトの名無しさん:2022/09/29(木) 09:34:16.50 ID:6obmiat7.net
- >>394
そういうこと
- 396 :359:2022/09/29(木) 09:39:43.34 ID:DUgkcSyO.net
- React実践の教科書、2021
この本には、カスタムフック・自作のHooks も書いてある
ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック
- 397 :デフォルトの名無しさん:2022/09/29(木) 09:52:34.39 ID:clewMKt/.net
- >>395
hooks限定である必要はないと思うが...
- 398 :デフォルトの名無しさん:2022/09/29(木) 10:45:31.47 ID:6obmiat7.net
- >>397
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ
- 399 :デフォルトの名無しさん:2022/09/29(木) 10:54:55.41 ID:clewMKt/.net
- ステートレスなロジックも意味なくhooksとして?実装するとでも言うのかい?
- 400 :デフォルトの名無しさん:2022/09/29(木) 11:20:12.57 ID:vsyIBCv9.net
- ごめん、一番聞きたかったのは
コールバック等使ったpropsの逆流(リフトアップ?)のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの??
- 401 :デフォルトの名無しさん:2022/09/29(木) 11:41:08.20 ID:RG+lw4Yl.net
- 俺の場合はコントロールの状態は極力propsで渡して
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた
- 402 :デフォルトの名無しさん:2022/09/29(木) 12:43:16.88 ID:N+5tSsEm.net
- 全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き
- 403 :デフォルトの名無しさん:2022/09/29(木) 13:42:04.91 ID:RG+lw4Yl.net
- propsて受け取った状態を
内部てstateとして別管理すると嵌まるパターンが多いね
- 404 :デフォルトの名無しさん:2022/10/04(火) 20:36:43.24 ID:R+w5qX88.net
- React勉強中です
テーブルが例えば最大行数20行として、新しいデータを取得するたびに先頭行に追加、末尾データは削除、というのをしたいです。
以前直接DOMを操作していたときは、テーブルのElementに対し、insertRow()、deleteRow()を行っていました。
これをReactでやろうとした時、テーブルの各行のデータを配列で持っているとすると、下記のようにmapを使って各行のHTMLを生成するというやりかたがあるかと思いますが、
この場合は行の追加の度に全行が再レンダリングされてしまいますよね?
const table_data = ['a', 'b', 'c', 〜]
return(
<tbody>
{
table_data.map((val) =><tr><td>{val}</td></tr>)
}
</tbody>
)
前述のような先頭行に追加、末尾行は削除、というのをReactでやるとすると、どいういう感じの処理になるのでしょうか?
ヒントをいただけると助かります。
まずは、1行ずつをコンポーネントにするのは必須ですかね?
- 405 :デフォルトの名無しさん:2022/10/04(火) 21:43:53.97 ID:ZExEo8/e.net
- >>404
> 先頭行に追加、末尾行は削除
keyを調べれ
> 1行ずつをコンポーネントにするのは必須
んなこたぁない
- 406 :デフォルトの名無しさん:[ここ壊れてます] .net
- >>405
ありがとうございます。
なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。
だから必ずkeyを付けるんですね。
- 407 :デフォルトの名無しさん:2022/10/05(水) 00:29:27.00 ID:zhKCpglg.net
- keyはどのみち付けないとWarning出るね
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ
- 408 :デフォルトの名無しさん:2022/10/05(水) 10:49:27.30 ID:RsX5Dgpw.net
- >>407
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
- 409 :デフォルトの名無しさん:2022/11/05(土) 23:06:02.94 ID:uWVkhL+y.net
- react native詳しいニキ教えて
下部に表示されるメニューバー(以下、Menu)のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか?
- 410 :デフォルトの名無しさん:2022/11/05(土) 23:47:25.78 ID:ocl/XM+V.net
- 知らんけどrecoil-syncってのがあるらしいな知らんけど
- 411 :.NET MAUI HighSchool:2022/11/11(金) 12:32:52.36 ID:kw0okeTL.net
- Metaが倒産したらReactどうなってしまうんだ?ってレス見たんだけどほんとどうなってしまうん?
誰かに買われるとか???
- 412 :デフォルトの名無しさん:2022/11/11(金) 12:42:14.20 ID:BY70aiHB.net
- Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない
- 413 :.NET MAUI HighSchool:2022/11/11(金) 12:43:10.48 ID:kw0okeTL.net
- やっぱり大手に買われるのか…
- 414 :デフォルトの名無しさん:2022/11/11(金) 13:19:40.85 ID:P8cdLDDc.net
- React NativeはMSが持っていきそう
- 415 :.NET MAUI HighSchool:2022/11/11(金) 13:20:58.38 ID:kw0okeTL.net
- >>414
ありえそう
OfficeとかReact Nativeやしな
- 416 :デフォルトの名無しさん:2022/11/21(月) 04:31:38.78 ID:9tdtmBpP.net
- プログラマーならview定義もJavaScriptでする方が幸せじゃないですか?
https://zenn.dev/takahad/articles/view-with-js
- 417 :デフォルトの名無しさん:2022/11/21(月) 19:55:26.69 ID:WHQv7Vmu.net
- >>416
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
- 418 :デフォルトの名無しさん:2022/11/21(月) 20:03:57.34 ID:WHQv7Vmu.net
- (試みとしては面白いと思うけど)
- 419 :デフォルトの名無しさん:2022/11/21(月) 20:32:50.68 ID:530w1iq8.net
- hyperTextじゃん
- 420 :デフォルトの名無しさん:2022/11/21(月) 20:33:18.27 ID:530w1iq8.net
- textじゃねえやHyperScript
- 421 :デフォルトの名無しさん:2022/11/21(月) 20:54:44.24 ID:F57+7x5h.net
- ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな
- 422 :デフォルトの名無しさん:2022/11/22(火) 07:44:22.59 ID:XlS3y7OH.net
- tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。
https://jsfiddle.net/nwmeqbL4/
- 423 :デフォルトの名無しさん:2022/11/22(火) 09:58:17.91 ID:J3G+pIhw.net
- それならここに来る必要ないやろ
- 424 :デフォルトの名無しさん:2022/11/23(水) 04:11:09.42 ID:TMK4+5Kw.net
- reactでjsx使わない話なんだけどダメ?
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
- 425 :デフォルトの名無しさん:2022/11/23(水) 04:25:07.28 ID:mlnYnqLg.net
- jQuery絶対王者
- 426 :デフォルトの名無しさん:2022/11/23(水) 05:07:49.07 ID:AN01Xhf0.net
- >>424
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
- 427 :デフォルトの名無しさん:2022/11/23(水) 08:06:55.32 ID:Wy3yaUuF.net
- html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
- 428 :デフォルトの名無しさん:2022/11/23(水) 09:09:30.10 ID:6E3xEeS7.net
- HTMLをHTMLとして認識しにくいのはイヤ
- 429 :デフォルトの名無しさん:2022/11/23(水) 13:34:39.63 ID:Y3sgMMcN.net
- jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
- 430 :デフォルトの名無しさん:2022/11/23(水) 14:08:23.15 ID:kuPI2CLi.net
- JSXの構文はもっと省略できるよね
- 431 :デフォルトの名無しさん:2022/11/23(水) 14:20:57.19 ID:pkO67U6a.net
- ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ
- 432 :デフォルトの名無しさん:2022/11/23(水) 15:21:48.20 ID:Q2Zz8xgu.net
- 逆にJSの言語仕様としてのクラスが要らんのやないかって感じするしな
- 433 :デフォルトの名無しさん:2022/11/23(水) 15:46:18.91 ID:KqoXuT6V.net
- >>431
PreactではJSXでclass属性使えるからReactが使えないのは単に怠慢ちゃうか
>>432
Rustのstructとimplの関係とかオブジェクトとprototypeの関係に近いし、classなんて要らんかった感がある。なんもかんも関数にnew付けるとコンストラクタになるっていう全く直感的でない仕様が悪かった
- 434 :デフォルトの名無しさん:2022/11/27(日) 18:18:42.40 ID:DGQvXdXK.net
- reactでjsx使いたくないなReact.createElement使えばすむだろ
pure jsだしreact自身がメンテナだぞ
- 435 :デフォルトの名無しさん:2022/11/28(月) 16:39:23.37 ID:bah5acf2.net
- class使わんかったらええしjsxも受け入れればええやん
中途半端に色々俺ルール入れようとするからプロジェクト通したコードがグチャグチャになるんだよ
ガタガタ抜かさずに読みやすいコード書け
- 436 :デフォルトの名無しさん:2022/11/28(月) 17:59:40.28 ID:IoJupQtf.net
- それはそう
- 437 :デフォルトの名無しさん:2022/11/28(月) 18:10:16.07 ID:HJ3Js2uA.net
- React.createElement() は、見たことない。
クラスなのか?
今は、関数しか使わない
- 438 :デフォルトの名無しさん:2022/11/28(月) 20:53:35.42 ID:UVD224c9.net
- >>437
JSXをトランスパイルするとそれが出てくる
というか前はそれになってた
今はもちっとサイズが小さくなるコードにトランスパイルされる
- 439 :デフォルトの名無しさん:2022/12/03(土) 08:35:21.91 ID:taaLhEhL.net
- フロントエンドはAIとローコードにより死んでいきそう
- 440 :デフォルトの名無しさん:2022/12/03(土) 10:06:11.17 ID:nGrXXmmc.net
- フロントエンドの連中が死んでいったら愉快すぎるだろうな。
- 441 :デフォルトの名無しさん:2022/12/03(土) 10:26:28.26 ID:yzFmn8Js.net
- 管理画面作れるローコードツールやばいで?
t-wadaさんの会社が出資してるやつ
ガチでフロントエンドいらんw
- 442 :デフォルトの名無しさん:2022/12/03(土) 11:52:54.38 ID:olmTGWDy.net
- できねぇ自分を棚に上げてよく言うぜ
- 443 :デフォルトの名無しさん:2022/12/03(土) 13:16:27.12 ID:DRrYSu6r.net
- フロントエンドができるのは
どのくらいのレベル?
- 444 :デフォルトの名無しさん:2022/12/04(日) 10:14:28.76 ID:Mf+W6hFq.net
- https://pleasanter.org/
これとか使えそうだな
- 445 :デフォルトの名無しさん:2022/12/04(日) 11:54:38.25 ID:Wvq70p6a.net
- 周りが適性なさすぎて消去法でバックエンドやるハメになり
苦労もあったが経験しておけて良かった
- 446 :デフォルトの名無しさん:2022/12/08(木) 08:12:36.96 ID:Z0lc4TAH.net
- ここ本スレ?
- 447 :デフォルトの名無しさん:2023/01/15(日) 12:22:06.03 ID:c+nrjCWx.net
- みんなuseStateのとき以外でset~って関数名付けてる?
- 448 :デフォルトの名無しさん:2023/02/11(土) 08:10:49.33 ID:vzM9dagC.net
- >>441
何? 使ってみたいから教えて
- 449 :デフォルトの名無しさん:2023/02/14(火) 00:24:32.69 ID:L+R7vyp5.net
- 知らんけどAirtableとかじゃないの?
- 450 :デフォルトの名無しさん:2023/02/20(月) 17:20:13.84 ID:o1ZyjHKj.net
- Reactが始めてなので変な質問かもしれません。
React.Componentを継承したクラスを作成し、これを「new」した時点でbodyの最後に描画したいです。
具体的にはmodalのクラスなのですが、
import modalClass from './modalClass';
const hoge = new modalClass(); //この時点でbodyの最後に描画されて
hoge.show(); //これで描画されたモーダルが表示される
だけでモーダルを表示したいです。
constructor中でrenderを実行して、戻り値をReact.Domでbodyの最後に置換すれば可能な気がしますが、
このような使い方は一般的でしょうか?
htmlに「<modalClass />」の記述をしたくありません。
- 451 :デフォルトの名無しさん:2023/02/20(月) 17:53:11.21 ID:1+J+V+Et.net
- >>450
一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。
あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため)
- 452 :デフォルトの名無しさん:2023/02/20(月) 18:41:24.87 ID:o1ZyjHKj.net
- はい、一般的ではないのは十分承知しています。
ライフサイクルなどを無視してHTMLの管理と描画のみにreactを使用したいと考えています。
ソースコードとしては下記で行けたのですが、このような使い方が一般的に許されるのかが不安です。
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
const element = this.render();
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(element, container);
}
show() {
//モーダル表示のDOMの操作
}
render() {
return (
<div>
/** モーダルのHTMLソース **/</div>
);
}
}
- 453 :デフォルトの名無しさん:2023/02/20(月) 18:48:10.50 ID:o1ZyjHKj.net
- 動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。
これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので
コンポーネントの使いまわしが楽になるのですが。
javascriptのみで完結できるので。
- 454 :デフォルトの名無しさん:2023/02/20(月) 20:09:11.05 ID:CBterFMa.net
- Reactをrender()するHTML要素を動的に追加するのはありだと思うよ
でもそのロジックをReactコンポーネントに入れる必要はないな
ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし
- 455 :デフォルトの名無しさん:2023/02/20(月) 20:40:21.95 ID:1+J+V+Et.net
- まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。
- 456 :デフォルトの名無しさん:2023/02/20(月) 21:16:51.58 ID:zSsoBtA6.net
- 最初はお手本通りrender関数とコンポーネント挿入関数に2ファイルに別けてたのですが、
一機能実現するために手順を踏んで2ファイル使うのが解り辛いかなと思いました。
作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。
render関数とコンポーネントの挿入関数を試行錯誤して一つのファイルにまとめたら >>452のようになりました。
>>452なら
import ExampleComponent from './examplecomponent';
const modal = new ExampleComponent ();
modal.show("メッセージです", "タイトル");
だけで済むので、クラスのusageに書いておけば利用手順も簡単でどの画面でも使えると思います。
reactの定石からは離れますので、やはりreactのプロの目から見ると違和感あるのですね。
- 457 :デフォルトの名無しさん:2023/02/20(月) 23:39:55.71 ID:qmqKnMRQ.net
- Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
- 458 :デフォルトの名無しさん:2023/02/21(火) 02:04:19.05 ID:R25lIONK.net
- あちこちに<ExampleComponent />追加したくないってことかな?その場合はProviderやContextを使うのが正式なやり方になると思う。
レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。
- 459 :デフォルトの名無しさん:2023/02/21(火) 08:04:52.44 ID:pYWIE5Lo.net
- >Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
はい、それであっています。
>あちこちに<ExampleComponent />追加したくないってことかな?
はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って
なるべくJavascriptだけで完結させたいです。
とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。
- 460 :デフォルトの名無しさん:2023/02/21(火) 13:34:11.33 ID:5AAcCPtU.net
- メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は
どこでも仕込みなしで呼び出したい
あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね
- 461 :デフォルトの名無しさん:2023/02/21(火) 13:52:30.32 ID:pYWIE5Lo.net
- レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが
メッセージダイアログのような画面中のレイアウトが必要無い物については
わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。
javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。
- 462 :デフォルトの名無しさん:2023/02/21(火) 14:46:08.62 ID:4BxaQg+7.net
- Railsとかの既存画面にReactでモーダルだけ作ろうって話?
jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな
- 463 :デフォルトの名無しさん:2023/02/21(火) 14:59:48.47 ID:5AAcCPtU.net
- いや、そういう話ではないよ
- 464 :デフォルトの名無しさん:2023/02/21(火) 15:18:03.61 ID:4BxaQg+7.net
- へ?普通にSPA?
それなのにDOMのエレメント作ってrender()呼ぶって?ただのアホじゃん
- 465 :デフォルトの名無しさん:2023/02/21(火) 16:09:35.73 ID:5AAcCPtU.net
- そりゃ動機があって試行錯誤の中でイレギュラーなことをしていて
より良い方法、より一般的な方法はないかという問いかけなんだし
- 466 :デフォルトの名無しさん:2023/02/21(火) 16:42:00.18 ID:4BxaQg+7.net
- 試行錯誤にしても道を外れすぎ
React.renderはReactアプリ(コンポーネントツリー)全体をDOMにマウントするためのAPIで個々のコンポーネントが呼び出すもんじゃない
大抵はフレームワーク的なコード(CRAやNext.js)が呼び出すからアプリからは呼ばない
共通のモーダルコンポーネントはAppコンポーネントなどツリーのルート近くに一つだけ置く
そしてモーダルはそれを開くためのカスタムフックを利用者に提供する
モーダルの開閉制御に使うステートはRedux等のライブラリを使ってもいいしContext + useStateでもいい
- 467 :デフォルトの名無しさん:2023/02/21(火) 17:16:01.15 ID:i5fGgfrB.net
- 試行錯誤ってのはそんなもんでしょ
まして最初にReactに不慣れだと断ってるわけだし
寛容にいこうよ
- 468 :デフォルトの名無しさん:2023/02/21(火) 18:46:29.89 ID:pYWIE5Lo.net
- イレギュラーなやり方ということは重々承知しています。
自分のやり方はreactのフル機能を使うよりも、ESM+Reactの機能の一部を使ったやり方になり
Reactの恩恵を受けられない事を承知しています。
その上で使い勝手を選択して、react機能の一部のみを使った開発を行うのもありなのではと思ったりしています。
ダイアログなどの静的なコンテンツについてはreactの機能を全て使い切らなくとも、reactが無くとも実現できますし、
reactの性能を発揮できる開発内容でもないと思っています。
静的HTMLのページをreactで作るのが効率悪いのと同様に、静的なダイアログ程度のものについてもreact使わない方が良いんじゃないかと。
その上で便利な部分(javascript上でHTMLを共有化できる)だけ摘まみ食いしたいです。
reactの専門家から見ると節操無いでしょうが、開発効率や汎用性を考えた場合に
こういったやり方はどうなんでしょうかと意見を」聞きたかったです。
- 469 :デフォルトの名無しさん:2023/02/21(火) 19:00:38.86 ID:YV4X7nvq.net
- >>468
>>466の提示してるやり方はどう?落とし所としてはいいように思えるけども
あと>>458も1箇所に固定で追加するという方針は近しいように思う
必要なら詳しく聞いてみたら?
- 470 :デフォルトの名無しさん:2023/02/21(火) 19:34:17.35 ID:+X0VWij1.net
- >>468
結局何をどう作ろうとしてるのかわからないんだよな
Reactで完全なSPAなら最初から449や456が書いてるとおりだし464も同じことを書いてる
しかし451の「サーバ側のview」とか466の「react機能の一部のみを使った開発」なら460に見えるんだよな
それなら452だろう
454で変なこと書いてるけど1ファイル1関数に制限さb黷驍けじゃなb「んだから2ファイルに分けたくなけりゃ分けなければいいだけ
- 471 :デフォルトの名無しさん:2023/02/21(火) 19:38:08.77 ID:zF6zP+5N.net
- つまり……
・他のreactコンポーネントから利用されるreactコンポーネントを作ってる
のか
・reactで作ってるけど利用する側はreactとか気にしないで使う
なのかどっちなんだという話
- 472 :デフォルトの名無しさん:2023/02/21(火) 19:41:59.71 ID:pYWIE5Lo.net
- >>466の提示してるやり方はどう?
react的にはスマートなやり方なのでしょうが、react使わない方が実装手順を簡略化できるのでメリットを感じないです。
>>・reactで作ってるけど利用する側はreactとか気にしないで使う
の方です。
関わっているプロジェクトがこれからreactに乗り換えような流れなので、新規開発分からreactで作り始めているのですが、
そもそものベースがreactではないので、reactの便利な所だけ利用したい感じですね。
- 473 :デフォルトの名無しさん:2023/02/21(火) 19:54:51.48 ID:zF6zP+5N.net
- >>472
それを先に言えって話だがそれなら>>454でいいだろ
モーダルを表示する関数だけexportしてreactコンポーネントはexportせずにファイル内だけで使う
ダイアログ表示するたびにDOMエレメント作るなら閉じたときに削除忘れないように
reactのアンマウントも
- 474 :デフォルトの名無しさん:2023/02/21(火) 20:09:31.38 ID:pYWIE5Lo.net
- >>473
多分言っている事を理解しました。
reactによるコンポーネント作成と表示する関数は別けたいと思います。
ファイルを別けるのには違和感がありましたが、同一ファイル内で2関数実装して
片方だけexportするなら理想通りです。
一度サンプルソースを作成してリーダーに相談してみます。
ありがとうございました。
- 475 :デフォルトの名無しさん:2023/02/22(水) 00:14:36.76 ID:wXAQdOu8.net
- 実装者しか分からん負の遺産はこうやって増えていくんですね
自己満のためにプロジェクトを良くない方向に進めている自覚を持ちましょう。
あなたのやっていることは時間の無駄です。
- 476 :デフォルトの名無しさん:2023/02/22(水) 02:31:50.15 ID:DPknPTwq.net
- だけど、いくらきれいに書いたとしても、後任者がアレな場合、結局、良くない方向に進む(本人たちは満足)なので、どないしようもない気がします
(という現場をよく見てきたので、どないしようもないですね)
- 477 :デフォルトの名無しさん:2023/02/22(水) 21:02:05.11 ID:ek8Yt4/u.net
- きれいなだけではダメで意図とか背景にある思想とかそういったものをちゃんと伝えておかないと
今回みたいに定石から外れることを自覚してるならなおさら
- 478 :デフォルトの名無しさん:2023/02/26(日) 16:09:53.37 ID:7ZfAUNQ9.net
- でも必死こいてゲットしたマイナポイントも結局使わないまま失効するんだろどうせ
- 479 :デフォルトの名無しさん:2023/02/26(日) 16:10:31.65 ID:7ZfAUNQ9.net
- スマン誤爆
- 480 :デフォルトの名無しさん:2023/02/26(日) 17:52:01.97 ID:+WhKwZG4.net
- >>478
必死こいで使おう
- 481 :デフォルトの名無しさん:2023/08/21(月) 22:44:49.15 ID:Y0H4lTnqK
- 軍事費GDΡ比4%超て゛NATOにまで加盟しようとしていたウクライナは周辺国に脅威視されて攻撃されたわけだが.
世界最悪の腐敗利権国家日本も軍事費倍増させて周辺国に脅威視されようとマッチポンプ戦争利権屋とベッタリの岸田増税文雄が必死た゛な
ウクライナで市民への攻撃ガ一だの停電カ゛一だの戦争犯罪ガ一だの白々しいが、戦争なんだから当たり前だろ
日本に絨毯爆撃して原爆まで落とした世界最悪のならず者國家なんて、いまだに新型戦略爆撃機とか発表してるだろ
軍事施設だけ爆撃とかあり得ないし、要するに戦略ってのは戦爭となれは゛こいつを使って一般市民の家屋を焼き尽くすって意味た゛からな
国民を人間の盾にして、女こども以外逃亡(出国]禁止にして戦わせて,他国まで巻き込んでまで利権に執着してるキチカ゛イナゼレンスキーを
いまだに引きずり降ろさないあたり.戦闘民族として現状を受け入れて、むしろリアルサバゲ‐を楽しんでると理解するのが正解
世界最悪の腐敗利権国家日本は軍事費ゼロにして、ポーランドのように国民に武器を持たせて扱い方を訓練する個人防衛国へと移行しよう!
(羽田]TΤPs://www.call4.jp/info.php?тУpe=items&id=I0000062 , tTρs://haneda-projеcΤ.jimdofree.com/
(成田)ttps://n-souonhigaisosyoudan.amebaownd.Com/
(テ囗組織)TtPs://i.imgur.com/hnli1ga.jpеg
- 482 :デフォルトの名無しさん:2023/09/09(土) 09:35:09.94 ID:XstChhEA.net
- (>ェ<;
- 483 :デフォルトの名無しさん:2023/10/18(水) 11:53:52.23 ID:pKa2ZouW.net
- redux!!
138 KB
新着レスの表示
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★