React と React Native のスレ

1 ：デフォルトの名無しさん：2019/03/09(土) 21:29:27.97 ID:AJ6jPa0v.net

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. 両方です。どっちの話題をしているかは文脈で判断してください

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ファイルに別けてたのですが、
一機能実現するために手順を踏んで２ファイル使うのが解り辛いかなと思いました。
作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。
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関数に制限さｂ黷驍�けじゃなｂ｢んだから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によるコンポーネント作成と表示する関数は別けたいと思います。
ファイルを別けるのには違和感がありましたが、同一ファイル内で２関数実装して
片方だけ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ΤＰs://www.call4.jp/info.php?тУpe=items&id=I0000062 , tTρs:／/haneda-projеcΤ.jimdofree.com／
（成田)ttps://n-souonhigaisosｙoudan.amebaownd.Ｃom/
(テ囗組織)TｔＰs://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!!