React と React Native のスレ (481ﾚｽ)
React と React Native のスレ http://mevius.5ch.net/test/read.cgi/tech/1552134567/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
1: デフォルトの名無しさん [sage] 2019/03/09(土) 21:29:27.97 ID:AJ6jPa0v 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. 両方です。どっちの話題をしているかは文脈で判断してください http://mevius.5ch.net/test/read.cgi/tech/1552134567/1
382: デフォルトの名無しさん [sage] 2022/09/28(水) 21:57:59.16 ID:Km2fmn1T プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた それとは別に親から子にコールバック渡すのは極めて普通 useReducerなんかそういう使い方がほとんどだろ その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート http://mevius.5ch.net/test/read.cgi/tech/1552134567/382
383: デフォルトの名無しさん [sage] 2022/09/28(水) 22:11:03.79 ID:0Dahyjoe グローブステートにRxで変更通知でどうですか？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/383
384: デフォルトの名無しさん [] 2022/09/28(水) 22:46:08.76 ID:HuYE1qae >>382 へー！なるほど！ その経緯は知らんかったわ！ありがとう propsの大原則として親→子→…… があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど グローバルステート使わずに普通にコールバックして直接、 子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ 現場では割と普通のことなのね http://mevius.5ch.net/test/read.cgi/tech/1552134567/384
385: デフォルトの名無しさん [sage] 2022/09/28(水) 23:33:30.69 ID:N1fcW8jX え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか… 今はどういうのが流行りなの？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/385
386: デフォルトの名無しさん [sage] 2022/09/28(水) 23:38:10.61 ID:QcgKtZxa ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/386
387: デフォルトの名無しさん [sage] 2022/09/29(木) 01:06:57.42 ID:6obmiat7 >>385 ロジックはhooks データ取得もhooks (swrやReact Query) そのデータ取得hooksはデータを表示するコンポーネントで呼び出す これは特にGraphQLではフラグメントコロケーションと呼ばれる GraphQL以外でもRemixがコロケーションを実現してる 総じて変に分類するより凝集度を高くする方向に進化してる http://mevius.5ch.net/test/read.cgi/tech/1552134567/387
388: デフォルトの名無しさん [] 2022/09/29(木) 01:29:18.28 ID:ffAnOOZb >>387 例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして その条件や処理をShowUnkoの中に全部書くのが流行りなん？ presentationalとcontainerの例だと 複雑な条件と処理をcontainerに記述して 算出した結果をpresentationalに渡してウンコの画像が出るけど 今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？ …まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど http://mevius.5ch.net/test/read.cgi/tech/1552134567/388
389: デフォルトの名無しさん [sage] 2022/09/29(木) 07:28:27.58 ID:+pwL/l2M >>386 くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ…… http://mevius.5ch.net/test/read.cgi/tech/1552134567/389
390: デフォルトの名無しさん [sage] 2022/09/29(木) 07:40:58.14 ID:6obmiat7 >>388 いやいやいやロジックはhooksって書いたじゃん 複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う http://mevius.5ch.net/test/read.cgi/tech/1552134567/390
391: デフォルトの名無しさん [sage] 2022/09/29(木) 08:51:14.08 ID:DUgkcSyO Ruby on Rails では、コントローラーの肥大化を防ぐために、 Skinny Controller, Fat Model を推奨した。 その結果、モデルが肥大化した そこで今度は、モデルの処理を減らすために、 Form Object, Service Object へ処理を分けた また表示処理は、Presenter へ分けた。 それで、Form Presenter, Model Presenter が出来た http://mevius.5ch.net/test/read.cgi/tech/1552134567/391
392: デフォルトの名無しさん [] 2022/09/29(木) 08:54:50.37 ID:vsyIBCv9 >>390 コンポーネントにロジックを記載するのではなく カスタムhooksとして切り出すってこと？ 理解力乏しくてすまん http://mevius.5ch.net/test/read.cgi/tech/1552134567/392
393: デフォルトの名無しさん [sage] 2022/09/29(木) 09:34:16.50 ID:6obmiat7 >>392 そういうこと http://mevius.5ch.net/test/read.cgi/tech/1552134567/393
394: 359 [sage] 2022/09/29(木) 09:39:43.34 ID:DUgkcSyO React実践の教科書、2021 この本には、カスタムフック・自作のHooks も書いてある ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。 共有ロジック http://mevius.5ch.net/test/read.cgi/tech/1552134567/394
395: デフォルトの名無しさん [sage] 2022/09/29(木) 09:52:34.39 ID:clewMKt/ >>393 hooks限定である必要はないと思うが... http://mevius.5ch.net/test/read.cgi/tech/1552134567/395
396: デフォルトの名無しさん [sage] 2022/09/29(木) 10:45:31.47 ID:6obmiat7 >>395 元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ 状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ http://mevius.5ch.net/test/read.cgi/tech/1552134567/396
397: デフォルトの名無しさん [sage] 2022/09/29(木) 10:54:55.41 ID:clewMKt/ ステートレスなロジックも意味なくhooksとして？実装するとでも言うのかい？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/397
398: デフォルトの名無しさん [] 2022/09/29(木) 11:20:12.57 ID:vsyIBCv9 ごめん、一番聞きたかったのは コールバック等使ったpropsの逆流（リフトアップ？）のことなんだけど 例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど わざわざリフトアップする必要ってあるの？？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/398
399: デフォルトの名無しさん [sage] 2022/09/29(木) 11:41:08.20 ID:RG+lw4Yl 俺の場合はコントロールの状態は極力propsで渡して そのコントロール起因で発生した状態の変更は そのコントロールの外部からディスパッチして またコントロールのpropsとして再投入するパターンに落ち着いた http://mevius.5ch.net/test/read.cgi/tech/1552134567/399
400: デフォルトの名無しさん [sage] 2022/09/29(木) 12:43:16.88 ID:N+5tSsEm 全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き http://mevius.5ch.net/test/read.cgi/tech/1552134567/400
401: デフォルトの名無しさん [sage] 2022/09/29(木) 13:42:04.91 ID:RG+lw4Yl propsて受け取った状態を 内部てstateとして別管理すると嵌まるパターンが多いね http://mevius.5ch.net/test/read.cgi/tech/1552134567/401
402: デフォルトの名無しさん [sage] 2022/10/04(火) 20:36:43.24 ID:R+w5qX88 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行ずつをコンポーネントにするのは必須ですかね？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/402
403: デフォルトの名無しさん [sage] 2022/10/04(火) 21:43:53.97 ID:ZExEo8/e >>402 > 先頭行に追加、末尾行は削除 keyを調べれ > 1行ずつをコンポーネントにするのは必須 んなこたぁない http://mevius.5ch.net/test/read.cgi/tech/1552134567/403
404: デフォルトの名無しさん [sage] 2022/10/04(火) 22:08:33.94 ID:R+w5qX88 >>403 ありがとうございます。 なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。 だから必ずkeyを付けるんですね。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/404
405: デフォルトの名無しさん [] 2022/10/05(水) 00:29:27.00 ID:zhKCpglg keyはどのみち付けないとWarning出るね バックエンド連携とかどうするつもりなのか知らんけど 普通に先頭20件だけ表示するように指定してやって useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ http://mevius.5ch.net/test/read.cgi/tech/1552134567/405
406: デフォルトの名無しさん [sage] 2022/10/05(水) 10:49:27.30 ID:RsX5Dgpw >>405 ありがとうございます。 useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。 ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。 データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/406
407: デフォルトの名無しさん [] 2022/11/05(土) 23:06:02.94 ID:uWVkhL+y react native詳しいニキ教えて 下部に表示されるメニューバー（以下、Menu）のコンポーネント作ってて ページによって表示/非表示の設定をしたいんだ 各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする で、次の案。 App→Main→各ページという構成を取ってるけど MainでMenuを呼び出すようにした。 で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。 あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど 前のページにバックしたときに改めてstateの値が書き換わらないんだ。 これを踏まえて何かいい方法ないですか？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/407
408: デフォルトの名無しさん [sage] 2022/11/05(土) 23:47:25.78 ID:ocl/XM+V 知らんけどrecoil-syncってのがあるらしいな知らんけど http://mevius.5ch.net/test/read.cgi/tech/1552134567/408
409: .NET MAUI HighSchool [] 2022/11/11(金) 12:32:52.36 ID:kw0okeTL Metaが倒産したらReactどうなってしまうんだ？ってレス見たんだけどほんとどうなってしまうん？ 誰かに買われるとか？？？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/409
410: デフォルトの名無しさん [sage] 2022/11/11(金) 12:42:14.20 ID:BY70aiHB Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない http://mevius.5ch.net/test/read.cgi/tech/1552134567/410
411: .NET MAUI HighSchool [] 2022/11/11(金) 12:43:10.48 ID:kw0okeTL やっぱり大手に買われるのか… http://mevius.5ch.net/test/read.cgi/tech/1552134567/411
412: デフォルトの名無しさん [sage] 2022/11/11(金) 13:19:40.85 ID:P8cdLDDc React NativeはMSが持っていきそう http://mevius.5ch.net/test/read.cgi/tech/1552134567/412
413: .NET MAUI HighSchool [] 2022/11/11(金) 13:20:58.38 ID:kw0okeTL >>412 ありえそう OfficeとかReact Nativeやしな http://mevius.5ch.net/test/read.cgi/tech/1552134567/413
414: デフォルトの名無しさん [] 2022/11/21(月) 04:31:38.78 ID:9tdtmBpP プログラマーならview定義もJavaScriptでする方が幸せじゃないですか？ https://zenn.dev/takahad/articles/view-with-js http://mevius.5ch.net/test/read.cgi/tech/1552134567/414
415: デフォルトの名無しさん [sage] 2022/11/21(月) 19:55:26.69 ID:WHQv7Vmu >>414 入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん http://mevius.5ch.net/test/read.cgi/tech/1552134567/415
416: デフォルトの名無しさん [sage] 2022/11/21(月) 20:03:57.34 ID:WHQv7Vmu (試みとしては面白いと思うけど) http://mevius.5ch.net/test/read.cgi/tech/1552134567/416
417: デフォルトの名無しさん [sage] 2022/11/21(月) 20:32:50.68 ID:530w1iq8 hyperTextじゃん http://mevius.5ch.net/test/read.cgi/tech/1552134567/417
418: デフォルトの名無しさん [sage] 2022/11/21(月) 20:33:18.27 ID:530w1iq8 textじゃねえやHyperScript http://mevius.5ch.net/test/read.cgi/tech/1552134567/418
419: デフォルトの名無しさん [sage] 2022/11/21(月) 20:54:44.24 ID:F57+7x5h ClojureScriptでReact使うのがまんまそんなだった Lisp界隈の人はなんでもS式だからな http://mevius.5ch.net/test/read.cgi/tech/1552134567/419
420: デフォルトの名無しさん [sage] 2022/11/22(火) 07:44:22.59 ID:XlS3y7OH tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。 https://jsfiddle.net/nwmeqbL4/ http://mevius.5ch.net/test/read.cgi/tech/1552134567/420
421: デフォルトの名無しさん [sage] 2022/11/22(火) 09:58:17.91 ID:J3G+pIhw それならここに来る必要ないやろ http://mevius.5ch.net/test/read.cgi/tech/1552134567/421
422: デフォルトの名無しさん [sage] 2022/11/23(水) 04:11:09.42 ID:TMK4+5Kw reactでjsx使わない話なんだけどダメ？ タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか 誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで jsx使わないで済むのは自分は衝撃だった。 見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。 [div, {className: 'game-info'}, [div, status,], [ol, moves,], ], http://mevius.5ch.net/test/read.cgi/tech/1552134567/422
423: デフォルトの名無しさん [sage] 2022/11/23(水) 04:25:07.28 ID:mlnYnqLg jQuery絶対王者 http://mevius.5ch.net/test/read.cgi/tech/1552134567/423
424: デフォルトの名無しさん [sage] 2022/11/23(水) 05:07:49.07 ID:AN01Xhf0 >>422 チームで合意が取れてれば良いんじゃないかな 自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから プロジェクトでそうなってたら合わせるかな もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし http://mevius.5ch.net/test/read.cgi/tech/1552134567/424
425: デフォルトの名無しさん [sage] 2022/11/23(水) 08:06:55.32 ID:Wy3yaUuF html in jsはカッコ地獄で使い続けられないと思った mapや三項演算が組み合わさると、あっという間にreadabilityも破綻 jsxは < > 構文なのでカッコに関してはマシ http://mevius.5ch.net/test/read.cgi/tech/1552134567/425
426: デフォルトの名無しさん [sage] 2022/11/23(水) 09:09:30.10 ID:6E3xEeS7 HTMLをHTMLとして認識しにくいのはイヤ http://mevius.5ch.net/test/read.cgi/tech/1552134567/426
427: デフォルトの名無しさん [sage] 2022/11/23(水) 13:34:39.63 ID:Y3sgMMcN jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ 閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし http://mevius.5ch.net/test/read.cgi/tech/1552134567/427
428: デフォルトの名無しさん [] 2022/11/23(水) 14:08:23.15 ID:kuPI2CLi JSXの構文はもっと省略できるよね http://mevius.5ch.net/test/read.cgi/tech/1552134567/428
429: デフォルトの名無しさん [sage] 2022/11/23(水) 14:20:57.19 ID:pkO67U6a ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ http://mevius.5ch.net/test/read.cgi/tech/1552134567/429
430: デフォルトの名無しさん [sage] 2022/11/23(水) 15:21:48.20 ID:Q2Zz8xgu 逆にJSの言語仕様としてのクラスが要らんのやないかって感じするしな http://mevius.5ch.net/test/read.cgi/tech/1552134567/430
431: デフォルトの名無しさん [sage] 2022/11/23(水) 15:46:18.91 ID:KqoXuT6V >>429 PreactではJSXでclass属性使えるからReactが使えないのは単に怠慢ちゃうか >>430 Rustのstructとimplの関係とかオブジェクトとprototypeの関係に近いし、classなんて要らんかった感がある。なんもかんも関数にnew付けるとコンストラクタになるっていう全く直感的でない仕様が悪かった http://mevius.5ch.net/test/read.cgi/tech/1552134567/431
432: デフォルトの名無しさん [sage] 2022/11/27(日) 18:18:42.40 ID:DGQvXdXK reactでjsx使いたくないなReact.createElement使えばすむだろ pure jsだしreact自身がメンテナだぞ http://mevius.5ch.net/test/read.cgi/tech/1552134567/432
433: デフォルトの名無しさん [] 2022/11/28(月) 16:39:23.37 ID:bah5acf2 class使わんかったらええしjsxも受け入れればええやん 中途半端に色々俺ルール入れようとするからプロジェクト通したコードがグチャグチャになるんだよ ガタガタ抜かさずに読みやすいコード書け http://mevius.5ch.net/test/read.cgi/tech/1552134567/433
434: デフォルトの名無しさん [sage] 2022/11/28(月) 17:59:40.28 ID:IoJupQtf それはそう http://mevius.5ch.net/test/read.cgi/tech/1552134567/434
435: デフォルトの名無しさん [sage] 2022/11/28(月) 18:10:16.07 ID:HJ3Js2uA React.createElement() は、見たことない。 クラスなのか？ 今は、関数しか使わない http://mevius.5ch.net/test/read.cgi/tech/1552134567/435
436: デフォルトの名無しさん [sage] 2022/11/28(月) 20:53:35.42 ID:UVD224c9 >>435 JSXをトランスパイルするとそれが出てくる というか前はそれになってた 今はもちっとサイズが小さくなるコードにトランスパイルされる http://mevius.5ch.net/test/read.cgi/tech/1552134567/436
437: デフォルトの名無しさん [] 2022/12/03(土) 08:35:21.91 ID:taaLhEhL フロントエンドはAIとローコードにより死んでいきそう http://mevius.5ch.net/test/read.cgi/tech/1552134567/437
438: デフォルトの名無しさん [] 2022/12/03(土) 10:06:11.17 ID:nGrXXmmc フロントエンドの連中が死んでいったら愉快すぎるだろうな。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/438
439: デフォルトの名無しさん [] 2022/12/03(土) 10:26:28.26 ID:yzFmn8Js 管理画面作れるローコードツールやばいで？ t-wadaさんの会社が出資してるやつ ガチでフロントエンドいらんw http://mevius.5ch.net/test/read.cgi/tech/1552134567/439
440: デフォルトの名無しさん [sage] 2022/12/03(土) 11:52:54.38 ID:olmTGWDy できねぇ自分を棚に上げてよく言うぜ http://mevius.5ch.net/test/read.cgi/tech/1552134567/440
441: デフォルトの名無しさん [sage] 2022/12/03(土) 13:16:27.12 ID:DRrYSu6r フロントエンドができるのは どのくらいのレベル？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/441
442: デフォルトの名無しさん [sage] 2022/12/04(日) 10:14:28.76 ID:Mf+W6hFq https://pleasanter.org/ これとか使えそうだな http://mevius.5ch.net/test/read.cgi/tech/1552134567/442
443: デフォルトの名無しさん [sage] 2022/12/04(日) 11:54:38.25 ID:Wvq70p6a 周りが適性なさすぎて消去法でバックエンドやるハメになり 苦労もあったが経験しておけて良かった http://mevius.5ch.net/test/read.cgi/tech/1552134567/443
444: デフォルトの名無しさん [sage] 2022/12/08(木) 08:12:36.96 ID:Z0lc4TAH ここ本スレ？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/444
445: デフォルトの名無しさん [] 2023/01/15(日) 12:22:06.03 ID:c+nrjCWx みんなuseStateのとき以外でset～って関数名付けてる？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/445
446: デフォルトの名無しさん [] 2023/02/11(土) 08:10:49.33 ID:vzM9dagC >>439 何？ 使ってみたいから教えて http://mevius.5ch.net/test/read.cgi/tech/1552134567/446
447: デフォルトの名無しさん [sage] 2023/02/14(火) 00:24:32.69 ID:L+R7vyp5 知らんけどAirtableとかじゃないの？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/447
448: デフォルトの名無しさん [sage] 2023/02/20(月) 17:20:13.84 ID:o1ZyjHKj Reactが始めてなので変な質問かもしれません。 React.Componentを継承したクラスを作成し、これを「new」した時点でbodyの最後に描画したいです。 具体的にはmodalのクラスなのですが、 import modalClass from './modalClass'; const hoge = new modalClass(); //この時点でbodyの最後に描画されて hoge.show(); //これで描画されたモーダルが表示される だけでモーダルを表示したいです。 constructor中でrenderを実行して、戻り値をReact.Domでbodyの最後に置換すれば可能な気がしますが、 このような使い方は一般的でしょうか？ htmlに「<modalClass />」の記述をしたくありません。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/448
449: デフォルトの名無しさん [sage] 2023/02/20(月) 17:53:11.21 ID:1+J+V+Et >>448 一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。 あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため) http://mevius.5ch.net/test/read.cgi/tech/1552134567/449
450: デフォルトの名無しさん [sage] 2023/02/20(月) 18:41:24.87 ID:o1ZyjHKj はい、一般的ではないのは十分承知しています。 ライフサイクルなどを無視して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> ); } } http://mevius.5ch.net/test/read.cgi/tech/1552134567/450
451: デフォルトの名無しさん [sage] 2023/02/20(月) 18:48:10.50 ID:o1ZyjHKj 動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。 これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので コンポーネントの使いまわしが楽になるのですが。 javascriptのみで完結できるので。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/451
452: デフォルトの名無しさん [sage] 2023/02/20(月) 20:09:11.05 ID:CBterFMa Reactをrender()するHTML要素を動的に追加するのはありだと思うよ でもそのロジックをReactコンポーネントに入れる必要はないな ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし http://mevius.5ch.net/test/read.cgi/tech/1552134567/452
453: デフォルトの名無しさん [sage] 2023/02/20(月) 20:40:21.95 ID:1+J+V+Et まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/453
454: デフォルトの名無しさん [sage] 2023/02/20(月) 21:16:51.58 ID:zSsoBtA6 最初はお手本通りrender関数とコンポーネント挿入関数に2ファイルに別けてたのですが、 一機能実現するために手順を踏んで２ファイル使うのが解り辛いかなと思いました。 作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。 render関数とコンポーネントの挿入関数を試行錯誤して一つのファイルにまとめたら >>450のようになりました。 >>450なら import ExampleComponent from './examplecomponent'; const modal = new ExampleComponent (); modal.show("メッセージです", "タイトル"); だけで済むので、クラスのusageに書いておけば利用手順も簡単でどの画面でも使えると思います。 reactの定石からは離れますので、やはりreactのプロの目から見ると違和感あるのですね。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/454
455: デフォルトの名無しさん [sage] 2023/02/20(月) 23:39:55.71 ID:qmqKnMRQ Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな http://mevius.5ch.net/test/read.cgi/tech/1552134567/455
456: デフォルトの名無しさん [sage] 2023/02/21(火) 02:04:19.05 ID:R25lIONK あちこちに<ExampleComponent />追加したくないってことかな？その場合はProviderやContextを使うのが正式なやり方になると思う。 レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/456
457: デフォルトの名無しさん [sage] 2023/02/21(火) 08:04:52.44 ID:pYWIE5Lo >Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな はい、それであっています。 >あちこちに<ExampleComponent />追加したくないってことかな？ はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って なるべくJavascriptだけで完結させたいです。 とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/457
458: デフォルトの名無しさん [sage] 2023/02/21(火) 13:34:11.33 ID:5AAcCPtU メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は どこでも仕込みなしで呼び出したい あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね http://mevius.5ch.net/test/read.cgi/tech/1552134567/458
459: デフォルトの名無しさん [sage] 2023/02/21(火) 13:52:30.32 ID:pYWIE5Lo レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが メッセージダイアログのような画面中のレイアウトが必要無い物については わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。 javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/459
460: デフォルトの名無しさん [sage] 2023/02/21(火) 14:46:08.62 ID:4BxaQg+7 Railsとかの既存画面にReactでモーダルだけ作ろうって話？ jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな http://mevius.5ch.net/test/read.cgi/tech/1552134567/460
461: デフォルトの名無しさん [sage] 2023/02/21(火) 14:59:48.47 ID:5AAcCPtU いや、そういう話ではないよ http://mevius.5ch.net/test/read.cgi/tech/1552134567/461
462: デフォルトの名無しさん [sage] 2023/02/21(火) 15:18:03.61 ID:4BxaQg+7 へ？普通にSPA？ それなのにDOMのエレメント作ってrender()呼ぶって？ただのアホじゃん http://mevius.5ch.net/test/read.cgi/tech/1552134567/462
463: デフォルトの名無しさん [sage] 2023/02/21(火) 16:09:35.73 ID:5AAcCPtU そりゃ動機があって試行錯誤の中でイレギュラーなことをしていて より良い方法、より一般的な方法はないかという問いかけなんだし http://mevius.5ch.net/test/read.cgi/tech/1552134567/463
464: デフォルトの名無しさん [sage] 2023/02/21(火) 16:42:00.18 ID:4BxaQg+7 試行錯誤にしても道を外れすぎ React.renderはReactアプリ(コンポーネントツリー)全体をDOMにマウントするためのAPIで個々のコンポーネントが呼び出すもんじゃない 大抵はフレームワーク的なコード(CRAやNext.js)が呼び出すからアプリからは呼ばない 共通のモーダルコンポーネントはAppコンポーネントなどツリーのルート近くに一つだけ置く そしてモーダルはそれを開くためのカスタムフックを利用者に提供する モーダルの開閉制御に使うステートはRedux等のライブラリを使ってもいいしContext + useStateでもいい http://mevius.5ch.net/test/read.cgi/tech/1552134567/464
465: デフォルトの名無しさん [sage] 2023/02/21(火) 17:16:01.15 ID:i5fGgfrB 試行錯誤ってのはそんなもんでしょ まして最初にReactに不慣れだと断ってるわけだし 寛容にいこうよ http://mevius.5ch.net/test/read.cgi/tech/1552134567/465
466: デフォルトの名無しさん [sage] 2023/02/21(火) 18:46:29.89 ID:pYWIE5Lo イレギュラーなやり方ということは重々承知しています。 自分のやり方はreactのフル機能を使うよりも、ESM＋Reactの機能の一部を使ったやり方になり Reactの恩恵を受けられない事を承知しています。 その上で使い勝手を選択して、react機能の一部のみを使った開発を行うのもありなのではと思ったりしています。 ダイアログなどの静的なコンテンツについてはreactの機能を全て使い切らなくとも、reactが無くとも実現できますし、 reactの性能を発揮できる開発内容でもないと思っています。 静的HTMLのページをreactで作るのが効率悪いのと同様に、静的なダイアログ程度のものについてもreact使わない方が良いんじゃないかと。 その上で便利な部分（javascript上でHTMLを共有化できる）だけ摘まみ食いしたいです。 reactの専門家から見ると節操無いでしょうが、開発効率や汎用性を考えた場合に こういったやり方はどうなんでしょうかと意見を」聞きたかったです。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/466
467: デフォルトの名無しさん [sage] 2023/02/21(火) 19:00:38.86 ID:YV4X7nvq >>466 >>464の提示してるやり方はどう？落とし所としてはいいように思えるけども あと>>456も1箇所に固定で追加するという方針は近しいように思う 必要なら詳しく聞いてみたら？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/467
468: デフォルトの名無しさん [sage] 2023/02/21(火) 19:34:17.35 ID:+X0VWij1 >>466 結局何をどう作ろうとしてるのかわからないんだよな Reactで完全なSPAなら最初から449や456が書いてるとおりだし464も同じことを書いてる しかし451の「サーバ側のview」とか466の「react機能の一部のみを使った開発」なら460に見えるんだよな それなら452だろう 454で変なこと書いてるけど1ファイル1関数に制限されるわけじゃないんだから2ファイルに分けたくなけりゃ分けなければいいだけ http://mevius.5ch.net/test/read.cgi/tech/1552134567/468
469: デフォルトの名無しさん [sage] 2023/02/21(火) 19:38:08.77 ID:zF6zP+5N つまり…… ・他のreactコンポーネントから利用されるreactコンポーネントを作ってる のか ・reactで作ってるけど利用する側はreactとか気にしないで使う なのかどっちなんだという話 http://mevius.5ch.net/test/read.cgi/tech/1552134567/469
470: デフォルトの名無しさん [sage] 2023/02/21(火) 19:41:59.71 ID:pYWIE5Lo >>464の提示してるやり方はどう？ react的にはスマートなやり方なのでしょうが、react使わない方が実装手順を簡略化できるのでメリットを感じないです。 >>・reactで作ってるけど利用する側はreactとか気にしないで使う の方です。 関わっているプロジェクトがこれからreactに乗り換えような流れなので、新規開発分からreactで作り始めているのですが、 そもそものベースがreactではないので、reactの便利な所だけ利用したい感じですね。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/470
471: デフォルトの名無しさん [sage] 2023/02/21(火) 19:54:51.48 ID:zF6zP+5N >>470 それを先に言えって話だがそれなら>>452でいいだろ モーダルを表示する関数だけexportしてreactコンポーネントはexportせずにファイル内だけで使う ダイアログ表示するたびにDOMエレメント作るなら閉じたときに削除忘れないように reactのアンマウントも http://mevius.5ch.net/test/read.cgi/tech/1552134567/471
472: デフォルトの名無しさん [sage] 2023/02/21(火) 20:09:31.38 ID:pYWIE5Lo >>471 多分言っている事を理解しました。 reactによるコンポーネント作成と表示する関数は別けたいと思います。 ファイルを別けるのには違和感がありましたが、同一ファイル内で２関数実装して 片方だけexportするなら理想通りです。 一度サンプルソースを作成してリーダーに相談してみます。 ありがとうございました。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/472
473: デフォルトの名無しさん [] 2023/02/22(水) 00:14:36.76 ID:wXAQdOu8 実装者しか分からん負の遺産はこうやって増えていくんですね 自己満のためにプロジェクトを良くない方向に進めている自覚を持ちましょう。 あなたのやっていることは時間の無駄です。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/473
474: デフォルトの名無しさん [sage] 2023/02/22(水) 02:31:50.15 ID:DPknPTwq だけど、いくらきれいに書いたとしても、後任者がアレな場合、結局、良くない方向に進む（本人たちは満足）なので、どないしようもない気がします （という現場をよく見てきたので、どないしようもないですね） http://mevius.5ch.net/test/read.cgi/tech/1552134567/474
475: デフォルトの名無しさん [sage] 2023/02/22(水) 21:02:05.11 ID:ek8Yt4/u きれいなだけではダメで意図とか背景にある思想とかそういったものをちゃんと伝えておかないと 今回みたいに定石から外れることを自覚してるならなおさら http://mevius.5ch.net/test/read.cgi/tech/1552134567/475
476: デフォルトの名無しさん [sage] 2023/02/26(日) 16:09:53.37 ID:7ZfAUNQ9 でも必死こいてゲットしたマイナポイントも結局使わないまま失効するんだろどうせ http://mevius.5ch.net/test/read.cgi/tech/1552134567/476
477: デフォルトの名無しさん [sage] 2023/02/26(日) 16:10:31.65 ID:7ZfAUNQ9 スマン誤爆 http://mevius.5ch.net/test/read.cgi/tech/1552134567/477
478: デフォルトの名無しさん [sage] 2023/02/26(日) 17:52:01.97 ID:+WhKwZG4 >>476 必死こいで使おう http://mevius.5ch.net/test/read.cgi/tech/1552134567/478
479: デフォルトの名無しさん [sage] 2023/09/09(土) 09:35:09.94 ID:XstChhEA （＞ェ＜； http://mevius.5ch.net/test/read.cgi/tech/1552134567/479
480: デフォルトの名無しさん [sage] 2023/10/18(水) 11:53:52.23 ID:pKa2ZouW redux!! http://mevius.5ch.net/test/read.cgi/tech/1552134567/480
481: デフォルトの名無しさん [sage] 2024/09/03(火) 11:41:52.36 ID:a/z1r+/G 外部cssをimportじゃなくてhead要素に入れたいんだけど(scriptタグ多いのが嫌なだけ)、ドキュメントだとShowRenderedHTMLがいいって書いてあるっぽいけど他の方法あるのかな？無いならこれ使ってみる Helmetで出来るもんだと思ってたんだけどなあ http://mevius.5ch.net/test/read.cgi/tech/1552134567/481
ﾒﾓ帳
(0/65535文字)
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
AAｻﾑﾈｲﾙ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.018s