React と React Native のスレ (481ﾚｽ)
上下前次1-新
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で出来るもんだと思ってたんだけどなあ
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.021s