React と React Native のスレ (481ﾚｽ)
上下前次1-新
362(2): 2022/09/27(火)14:04 ID:CMfXpwKQ(2/5) AAS
>>361
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる！？
363: 2022/09/27(火)15:39 ID:D1kdTDEr(1) AAS
>>362
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ
JSの方は好みだな
364(1): 2022/09/27(火)15:58 ID:aOp1T7nJ(1) AAS
>>360
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
365: 2022/09/27(火)16:41 ID:MQqAKvI3(1) AAS
Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
366: 2022/09/27(火)16:48 ID:CMfXpwKQ(3/5) AAS
>>364
頭ごなしに否定する気はないんだけど
（jsの）クラスベースの記述するメリットってどういうとこがあるの？
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
367: 2022/09/27(火)17:25 ID:fOqsMNTu(1/3) AAS
Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
368(1): 2022/09/27(火)17:28 ID:YFL0VkhR(1) AAS
プロジェクトメンバーにどうして混在してるのか聞いてみた？
369: 2022/09/27(火)17:29 ID:fOqsMNTu(2/3) AAS
jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
370: 2022/09/27(火)18:13 ID:dJevJ7EZ(1/2) AAS
クラスコンポーネントは公式に非推奨扱いじゃね
371: 2022/09/27(火)18:15 ID:397xSubl(1) AAS
話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
372: 2022/09/27(火)18:20 ID:dJevJ7EZ(2/2) AAS
Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
373(2): 2022/09/27(火)20:04 ID:CMfXpwKQ(4/5) AAS
>>368
うん
「本当はよくないんですけどね～～」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流（これが一番酷い）
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
374(1): 2022/09/27(火)20:20 ID:6DdS+dLy(1) AAS
プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
375(1): 2022/09/27(火)20:22 ID:fOqsMNTu(3/3) AAS
>>373
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。
376: 2022/09/27(火)20:39 ID:CMfXpwKQ(5/5) AAS
>>374
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。
>>375
アジャイルってこんなもんなんじゃないの？知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ
377: 2022/09/27(火)22:23 ID:/UUTRmF2(1) AAS
>>362
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。
378: 359 2022/09/27(火)23:17 ID:oW3s344K(1/2) AAS
>>373
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
379: 359 2022/09/27(火)23:29 ID:oW3s344K(2/2) AAS
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
380: 2022/09/27(火)23:53 ID:BMrl8a7V(1) AAS
なんでそんなにクラスコンポーネントの話にこだわるの？
381: 2022/09/28(水)20:45 ID:KHG5QcXL(1) AAS
presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？
382(1): 2022/09/28(水)21:57 ID:Km2fmn1T(1) AAS
プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
383: 2022/09/28(水)22:11 ID:0Dahyjoe(1) AAS
グローブステートにRxで変更通知でどうですか？
384: 2022/09/28(水)22:46 ID:HuYE1qae(1) AAS
>>382
へー！なるほど！
その経緯は知らんかったわ！ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
385(1): 2022/09/28(水)23:33 ID:N1fcW8jX(1) AAS
え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの？
386(1): 2022/09/28(水)23:38 ID:QcgKtZxa(1) AAS
ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？
387(1): 2022/09/29(木)01:06 ID:6obmiat7(1/4) AAS
>>385
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
388(1): 2022/09/29(木)01:29 ID:ffAnOOZb(1) AAS
>>387
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん？
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
389: 2022/09/29(木)07:28 ID:+pwL/l2M(1) AAS
>>386
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
390(1): 2022/09/29(木)07:40 ID:6obmiat7(2/4) AAS
>>388
いやいやいやロジックはhooksって書いたじゃん
複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う
391: 2022/09/29(木)08:51 ID:DUgkcSyO(1/2) AAS
Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
上下前次1-新書関写板覧索設栞歴
あと 90 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.008s