React と React Native のスレ

React と React Native のスレ (482ﾚｽ)
上下前次 1-新

1(4): 2019/03/09(土)21:29 ID:AJ6jPa0v(1) AAS
Q. Reactってなんですか？
A. ブラウザで動くウェブアプリを作るJavaScriptフレームワークです

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

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

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

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

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

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

356: 2022/09/26(月)22:56 ID:lxhy0Qxo(1) AAS
JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数

357: 2022/09/26(月)22:59 ID:rxxJbSNv(1/2) AAS
>>355
書いてくれてるだろ
ちゃんと読もうよ

358: 2022/09/26(月)23:21 ID:rxxJbSNv(2/2) AAS
ああ、ごめんコンポーネントの話じゃなかったのか

359(3): 2022/09/26(月)23:22 ID:tIU7Oyti(1) AAS
React実践の教科書、2021

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

360(1): 2022/09/27(火)12:54 ID:CMfXpwKQ(1/5) AAS
なるほどなるほど
仕事でcobolとvbaしか使ったことなかったからオブジェクト指向的な記述自体馴染みなかったわ

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

361(1): 2022/09/27(火)13:46 ID:t32oMnpk(1) AAS
JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる？

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

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 が出来た

392(1): 2022/09/29(木)08:54 ID:vsyIBCv9(1/2) AAS
>>390
コンポーネントにロジックを記載するのではなく
カスタムhooksとして切り出すってこと？
理解力乏しくてすまん

393(1): 2022/09/29(木)09:34 ID:6obmiat7(3/4) AAS
>>392
そういうこと

394: 359 2022/09/29(木)09:39 ID:DUgkcSyO(2/2) AAS
React実践の教科書、2021

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

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

395(1): 2022/09/29(木)09:52 ID:clewMKt/(1/2) AAS
>>393
hooks限定である必要はないと思うが...

396: 2022/09/29(木)10:45 ID:6obmiat7(4/4) AAS
>>395
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ

397: 2022/09/29(木)10:54 ID:clewMKt/(2/2) AAS
ステートレスなロジックも意味なくhooksとして？実装するとでも言うのかい？

398: 2022/09/29(木)11:20 ID:vsyIBCv9(2/2) AAS
ごめん、一番聞きたかったのは
コールバック等使ったpropsの逆流（リフトアップ？）のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの？？

399: 2022/09/29(木)11:41 ID:RG+lw4Yl(1/2) AAS
俺の場合はコントロールの状態は極力propsで渡して
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた

400: 2022/09/29(木)12:43 ID:N+5tSsEm(1) AAS
全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き

401: 2022/09/29(木)13:42 ID:RG+lw4Yl(2/2) AAS
propsて受け取った状態を
内部てstateとして別管理すると嵌まるパターンが多いね

402(1): 2022/10/04(火)20:36 ID:R+w5qX88(1/2) AAS
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行ずつをコンポーネントにするのは必須ですかね？

403(1): 2022/10/04(火)21:43 ID:ZExEo8/e(1) AAS
>>402
> 先頭行に追加、末尾行は削除

keyを調べれ

> 1行ずつをコンポーネントにするのは必須

んなこたぁない

404: 2022/10/04(火)22:08 ID:R+w5qX88(2/2) AAS
>>403
ありがとうございます。
なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。
だから必ずkeyを付けるんですね。

405(1): 2022/10/05(水)00:29 ID:zhKCpglg(1) AAS
keyはどのみち付けないとWarning出るね
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ

406: 2022/10/05(水)10:49 ID:RsX5Dgpw(1) AAS
>>405
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。

407: 2022/11/05(土)23:06 ID:uWVkhL+y(1) AAS
react native詳しいニキ教えて

下部に表示されるメニューバー（以下、Menu）のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ

各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする

で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。

これを踏まえて何かいい方法ないですか？

408: 2022/11/05(土)23:47 ID:ocl/XM+V(1) AAS
知らんけどrecoil-syncってのがあるらしいな知らんけど

409: .NET MAUI HighSchool 2022/11/11(金)12:32 ID:kw0okeTL(1/3) AAS
Metaが倒産したらReactどうなってしまうんだ？ってレス見たんだけどほんとどうなってしまうん？
誰かに買われるとか？？？

410: 2022/11/11(金)12:42 ID:BY70aiHB(1) AAS
Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない

411: .NET MAUI HighSchool 2022/11/11(金)12:43 ID:kw0okeTL(2/3) AAS
やっぱり大手に買われるのか…

412(1): 2022/11/11(金)13:19 ID:P8cdLDDc(1) AAS
React NativeはMSが持っていきそう

413: .NET MAUI HighSchool 2022/11/11(金)13:20 ID:kw0okeTL(3/3) AAS
>>412
ありえそう
OfficeとかReact Nativeやしな

414(1): 2022/11/21(月)04:31 ID:9tdtmBpP(1) AAS
プログラマーならview定義もJavaScriptでする方が幸せじゃないですか？

外部ﾘﾝｸ:zenn.dev

415: 2022/11/21(月)19:55 ID:WHQv7Vmu(1/2) AAS
>>414
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん

416: 2022/11/21(月)20:03 ID:WHQv7Vmu(2/2) AAS
(試みとしては面白いと思うけど)

417: 2022/11/21(月)20:32 ID:530w1iq8(1/2) AAS
hyperTextじゃん

418: 2022/11/21(月)20:33 ID:530w1iq8(2/2) AAS
textじゃねえやHyperScript

419: 2022/11/21(月)20:54 ID:F57+7x5h(1) AAS
ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな

420: 2022/11/22(火)07:44 ID:XlS3y7OH(1) AAS
tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。

外部ﾘﾝｸ:jsfiddle.net

421: 2022/11/22(火)09:58 ID:J3G+pIhw(1) AAS
それならここに来る必要ないやろ

422(1): 2022/11/23(水)04:11 ID:TMK4+5Kw(1) AAS
reactでjsx使わない話なんだけどダメ？
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],

423: 2022/11/23(水)04:25 ID:mlnYnqLg(1) AAS
jQuery絶対王者

424: 2022/11/23(水)05:07 ID:AN01Xhf0(1) AAS
>>422
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし

425: 2022/11/23(水)08:06 ID:Wy3yaUuF(1) AAS
html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ

426: 2022/11/23(水)09:09 ID:6E3xEeS7(1) AAS
HTMLをHTMLとして認識しにくいのはイヤ

427: 2022/11/23(水)13:34 ID:Y3sgMMcN(1) AAS
jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし

428: 2022/11/23(水)14:08 ID:kuPI2CLi(1) AAS
JSXの構文はもっと省略できるよね

429(1): 2022/11/23(水)14:20 ID:pkO67U6a(1) AAS
ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ

430(1): 2022/11/23(水)15:21 ID:Q2Zz8xgu(1) AAS
逆にJSの言語仕様としてのクラスが要らんのやないかって感じするしな

431: 2022/11/23(水)15:46 ID:KqoXuT6V(1) AAS
>>429
PreactではJSXでclass属性使えるからReactが使えないのは単に怠慢ちゃうか

>>430
Rustのstructとimplの関係とかオブジェクトとprototypeの関係に近いし、classなんて要らんかった感がある。なんもかんも関数にnew付けるとコンストラクタになるっていう全く直感的でない仕様が悪かった

432: 2022/11/27(日)18:18 ID:DGQvXdXK(1) AAS
reactでjsx使いたくないなReact.createElement使えばすむだろ
pure jsだしreact自身がメンテナだぞ

433: 2022/11/28(月)16:39 ID:bah5acf2(1) AAS
class使わんかったらええしjsxも受け入れればええやん
中途半端に色々俺ルール入れようとするからプロジェクト通したコードがグチャグチャになるんだよ
ガタガタ抜かさずに読みやすいコード書け

434: 2022/11/28(月)17:59 ID:IoJupQtf(1) AAS
それはそう

435(1): 2022/11/28(月)18:10 ID:HJ3Js2uA(1) AAS
React.createElement() は、見たことない。
クラスなのか？

今は、関数しか使わない

436: 2022/11/28(月)20:53 ID:UVD224c9(1) AAS
>>435
JSXをトランスパイルするとそれが出てくる
というか前はそれになってた
今はもちっとサイズが小さくなるコードにトランスパイルされる

437: 2022/12/03(土)08:35 ID:taaLhEhL(1) AAS
フロントエンドはAIとローコードにより死んでいきそう

438: 2022/12/03(土)10:06 ID:nGrXXmmc(1) AAS
フロントエンドの連中が死んでいったら愉快すぎるだろうな。

439(1): 2022/12/03(土)10:26 ID:yzFmn8Js(1) AAS
管理画面作れるローコードツールやばいで？
t-wadaさんの会社が出資してるやつ
ガチでフロントエンドいらんw

440: 2022/12/03(土)11:52 ID:olmTGWDy(1) AAS
できねぇ自分を棚に上げてよく言うぜ

441: 2022/12/03(土)13:16 ID:DRrYSu6r(1) AAS
フロントエンドができるのは
どのくらいのレベル？

442: 2022/12/04(日)10:14 ID:Mf+W6hFq(1) AAS
外部ﾘﾝｸ:pleasanter.org
これとか使えそうだな

443: 2022/12/04(日)11:54 ID:Wvq70p6a(1) AAS
周りが適性なさすぎて消去法でバックエンドやるハメになり
苦労もあったが経験しておけて良かった

444: 2022/12/08(木)08:12 ID:Z0lc4TAH(1) AAS
ここ本スレ？

445: 2023/01/15(日)12:22 ID:c+nrjCWx(1) AAS
みんなuseStateのとき以外でset～って関数名付けてる？

446: 2023/02/11(土)08:10 ID:vzM9dagC(1) AAS
>>439
何？　使ってみたいから教えて

447: 2023/02/14(火)00:24 ID:L+R7vyp5(1) AAS
知らんけどAirtableとかじゃないの？

448(1): 2023/02/20(月)17:20 ID:o1ZyjHKj(1/3) AAS
Reactが始めてなので変な質問かもしれません。
React.Componentを継承したクラスを作成し、これを「new」した時点でbodyの最後に描画したいです。
具体的にはmodalのクラスなのですが、

import modalClass from './modalClass';
const hoge = new modalClass();　//この時点でbodyの最後に描画されて
hoge.show(); //これで描画されたモーダルが表示される

だけでモーダルを表示したいです。
constructor中でrenderを実行して、戻り値をReact.Domでbodyの最後に置換すれば可能な気がしますが、
このような使い方は一般的でしょうか？
htmlに「<modalClass />」の記述をしたくありません。

449: 2023/02/20(月)17:53 ID:1+J+V+Et(1/2) AAS
>>448
一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。

あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため)

450(1): 2023/02/20(月)18:41 ID:o1ZyjHKj(2/3) AAS
はい、一般的ではないのは十分承知しています。
ライフサイクルなどを無視して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>
);
}
}

451: 2023/02/20(月)18:48 ID:o1ZyjHKj(3/3) AAS
動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。
これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので
コンポーネントの使いまわしが楽になるのですが。
javascriptのみで完結できるので。

452(1): 2023/02/20(月)20:09 ID:CBterFMa(1) AAS
Reactをrender()するHTML要素を動的に追加するのはありだと思うよ
でもそのロジックをReactコンポーネントに入れる必要はないな
ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし

453: 2023/02/20(月)20:40 ID:1+J+V+Et(2/2) AAS
まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。

454: 2023/02/20(月)21:16 ID:zSsoBtA6(1) AAS
最初はお手本通りrender関数とコンポーネント挿入関数に2ファイルに別けてたのですが、
一機能実現するために手順を踏んで２ファイル使うのが解り辛いかなと思いました。
作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。
render関数とコンポーネントの挿入関数を試行錯誤して一つのファイルにまとめたら >>450のようになりました。

>>450なら
import ExampleComponent from './examplecomponent';
const modal = new ExampleComponent ();
modal.show("メッセージです", "タイトル");

だけで済むので、クラスのusageに書いておけば利用手順も簡単でどの画面でも使えると思います。
reactの定石からは離れますので、やはりreactのプロの目から見ると違和感あるのですね。

455: 2023/02/20(月)23:39 ID:qmqKnMRQ(1) AAS
Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな

456(1): 2023/02/21(火)02:04 ID:R25lIONK(1) AAS
あちこちに<ExampleComponent />追加したくないってことかな？その場合はProviderやContextを使うのが正式なやり方になると思う。

レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。

457: 2023/02/21(火)08:04 ID:pYWIE5Lo(1/5) AAS
>Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
はい、それであっています。

>あちこちに<ExampleComponent />追加したくないってことかな？
はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って
なるべくJavascriptだけで完結させたいです。
とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。

458: 2023/02/21(火)13:34 ID:5AAcCPtU(1/3) AAS
メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は
どこでも仕込みなしで呼び出したい
あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね

459: 2023/02/21(火)13:52 ID:pYWIE5Lo(2/5) AAS
レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが
メッセージダイアログのような画面中のレイアウトが必要無い物については
わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。
javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。

460: 2023/02/21(火)14:46 ID:4BxaQg+7(1/3) AAS
Railsとかの既存画面にReactでモーダルだけ作ろうって話？
jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな

461: 2023/02/21(火)14:59 ID:5AAcCPtU(2/3) AAS
いや、そういう話ではないよ

462: 2023/02/21(火)15:18 ID:4BxaQg+7(2/3) AAS
へ？普通にSPA？
それなのにDOMのエレメント作ってrender()呼ぶって？ただのアホじゃん

463: 2023/02/21(火)16:09 ID:5AAcCPtU(3/3) AAS
そりゃ動機があって試行錯誤の中でイレギュラーなことをしていて
より良い方法、より一般的な方法はないかという問いかけなんだし

464(2): 2023/02/21(火)16:42 ID:4BxaQg+7(3/3) AAS
試行錯誤にしても道を外れすぎ
React.renderはReactアプリ(コンポーネントツリー)全体をDOMにマウントするためのAPIで個々のコンポーネントが呼び出すもんじゃない
大抵はフレームワーク的なコード(CRAやNext.js)が呼び出すからアプリからは呼ばない

共通のモーダルコンポーネントはAppコンポーネントなどツリーのルート近くに一つだけ置く
そしてモーダルはそれを開くためのカスタムフックを利用者に提供する
モーダルの開閉制御に使うステートはRedux等のライブラリを使ってもいいしContext + useStateでもいい

465: 2023/02/21(火)17:16 ID:i5fGgfrB(1) AAS
試行錯誤ってのはそんなもんでしょ
まして最初にReactに不慣れだと断ってるわけだし
寛容にいこうよ

466(2): 2023/02/21(火)18:46 ID:pYWIE5Lo(3/5) AAS
イレギュラーなやり方ということは重々承知しています。
自分のやり方はreactのフル機能を使うよりも、ESM＋Reactの機能の一部を使ったやり方になり
Reactの恩恵を受けられない事を承知しています。
その上で使い勝手を選択して、react機能の一部のみを使った開発を行うのもありなのではと思ったりしています。
ダイアログなどの静的なコンテンツについてはreactの機能を全て使い切らなくとも、reactが無くとも実現できますし、
reactの性能を発揮できる開発内容でもないと思っています。
静的HTMLのページをreactで作るのが効率悪いのと同様に、静的なダイアログ程度のものについてもreact使わない方が良いんじゃないかと。
その上で便利な部分（javascript上でHTMLを共有化できる）だけ摘まみ食いしたいです。
reactの専門家から見ると節操無いでしょうが、開発効率や汎用性を考えた場合に
こういったやり方はどうなんでしょうかと意見を」聞きたかったです。

467: 2023/02/21(火)19:00 ID:YV4X7nvq(1) AAS
>>466
>>464の提示してるやり方はどう？落とし所としてはいいように思えるけども
あと>>456も1箇所に固定で追加するという方針は近しいように思う
必要なら詳しく聞いてみたら？

468: 2023/02/21(火)19:34 ID:+X0VWij1(1) AAS
>>466
結局何をどう作ろうとしてるのかわからないんだよな

Reactで完全なSPAなら最初から449や456が書いてるとおりだし464も同じことを書いてる

しかし451の「サーバ側のview」とか466の「react機能の一部のみを使った開発」なら460に見えるんだよな
それなら452だろう
454で変なこと書いてるけど1ファイル1関数に制限されるわけじゃないんだから2ファイルに分けたくなけりゃ分けなければいいだけ

469: 2023/02/21(火)19:38 ID:zF6zP+5N(1/2) AAS
つまり……

・他のreactコンポーネントから利用されるreactコンポーネントを作ってる

のか

・reactで作ってるけど利用する側はreactとか気にしないで使う

なのかどっちなんだという話

470(1): 2023/02/21(火)19:41 ID:pYWIE5Lo(4/5) AAS
>>464の提示してるやり方はどう？
react的にはスマートなやり方なのでしょうが、react使わない方が実装手順を簡略化できるのでメリットを感じないです。

>>・reactで作ってるけど利用する側はreactとか気にしないで使う
の方です。
関わっているプロジェクトがこれからreactに乗り換えような流れなので、新規開発分からreactで作り始めているのですが、
そもそものベースがreactではないので、reactの便利な所だけ利用したい感じですね。

471(1): 2023/02/21(火)19:54 ID:zF6zP+5N(2/2) AAS
>>470
それを先に言えって話だがそれなら>>452でいいだろ
モーダルを表示する関数だけexportしてreactコンポーネントはexportせずにファイル内だけで使う
ダイアログ表示するたびにDOMエレメント作るなら閉じたときに削除忘れないように
reactのアンマウントも

472: 2023/02/21(火)20:09 ID:pYWIE5Lo(5/5) AAS
>>471
多分言っている事を理解しました。
reactによるコンポーネント作成と表示する関数は別けたいと思います。
ファイルを別けるのには違和感がありましたが、同一ファイル内で２関数実装して
片方だけexportするなら理想通りです。
一度サンプルソースを作成してリーダーに相談してみます。
ありがとうございました。

473: 2023/02/22(水)00:14 ID:wXAQdOu8(1) AAS
実装者しか分からん負の遺産はこうやって増えていくんですね
自己満のためにプロジェクトを良くない方向に進めている自覚を持ちましょう。
あなたのやっていることは時間の無駄です。

474: 2023/02/22(水)02:31 ID:DPknPTwq(1) AAS
だけど、いくらきれいに書いたとしても、後任者がアレな場合、結局、良くない方向に進む（本人たちは満足）なので、どないしようもない気がします
（という現場をよく見てきたので、どないしようもないですね）

475: 2023/02/22(水)21:02 ID:ek8Yt4/u(1) AAS
きれいなだけではダメで意図とか背景にある思想とかそういったものをちゃんと伝えておかないと
今回みたいに定石から外れることを自覚してるならなおさら

476(1): 2023/02/26(日)16:09 ID:7ZfAUNQ9(1/2) AAS
でも必死こいてゲットしたマイナポイントも結局使わないまま失効するんだろどうせ

477: 2023/02/26(日)16:10 ID:7ZfAUNQ9(2/2) AAS
スマン誤爆

478: 2023/02/26(日)17:52 ID:+WhKwZG4(1) AAS
>>476
必死こいで使おう

479: 2023/09/09(土)09:35 ID:XstChhEA(1) AAS
（＞ェ＜；

480: 2023/10/18(水)11:53 ID:pKa2ZouW(1) AAS
redux!!

481: 2024/09/03(火)11:41 ID:a/z1r+/G(1) AAS
外部cssをimportじゃなくてhead要素に入れたいんだけど(scriptタグ多いのが嫌なだけ)、ドキュメントだとShowRenderedHTMLがいいって書いてあるっぽいけど他の方法あるのかな？無いならこれ使ってみる

Helmetで出来るもんだと思ってたんだけどなあ

482: 10/09(木)11:30 ID:Z8SX7vJx(1) AAS
Meta一社からReact Fundation管理になったけど、どう変わるかな？
名実ともにExpoやMicrosoftがオフィシャルになったからReactNative加速しそう？

上下前次 1-新書関写板覧索設栞歴

ｽﾚ情報赤ﾚｽ抽出画像ﾚｽ抽出歴の未読ｽﾚ AAｻﾑﾈｲﾙ

ぬこの手ぬこTOP 0.721s*