- 1 名前：デフォルトの名無しさん mailto:sage [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. 両方です。どっちの話題をしているかは文脈で判断してください
- 357 名前：デフォルトの名無しさん [2022/09/26(月) 22:42:27.40 ID:ikr92+JD.net]
- >>356
ごめんクラスコンポーネントと関数コンポーネントの違いは分かってるんだ
例えば、1+1を計算する関数をクラスベースで定義すべきか関数ベースで定義すべきか
的なことを知りたかった！
- 358 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 22:56:01.37 ID:lxhy0Qxo.net]
- JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
- 359 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 22:59:55.62 ID:rxxJbSNv.net]
- >>357
書いてくれてるだろ
ちゃんと読もうよ
- 360 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 23:21:54.38 ID:rxxJbSNv.net]
- ああ、ごめんコンポーネントの話じゃなかったのか
- 361 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 23:22:50.91 ID:tIU7Oyti.net]
- React実践の教科書、2021
この本には、クラスは出てこない。
すべて関数
- 362 名前：デフォルトの名無しさん [2022/09/27(火) 12:54:00.07 ID:CMfXpwKQ.net]
- なるほどなるほど
仕事でcobolとvbaしか使ったｂｱとなかったかｂ辜Iブジェクト試w向的な記述自荘ﾌ馴染みなかっｂｽわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
- 363 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 13:46:50.26 ID:t32oMnpk.net]
- JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる？
ちなみにReactのクラスコンポーネントはオワコンだけどね
- 364 名前：デフォルトの名無しさん [2022/09/27(火) 14:04:56.54 ID:CMfXpwKQ.net]
- >>363
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる！？
- 365 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 15:39:04.72 ID:D1kdTDEr.net]
- >>364
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ
JSの方は好みだな
- 366 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 15:58:48.85 ID:aOp1T7nJ.net]
- >>362
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
- 367 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 16:41:51.18 ID:MQqAKvI3.net]
- Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
- 368 名前：デフォルトの名無しさん [2022/09/27(火) 16:48:43.98 ID:CMfXpwKQ.net]
- >>366
頭ごなしに否定する気はないんだけど
（jsの）クラスベースの記述するメリットってどういうとこがあるの？
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
- 369 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 17:25:00.79 ID:fOqsMNTu.net]
- Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
- 370 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 17:28:55.43 ID:YFL0VkhR.net]
- プロジェクトメンバーにどうして混在してるのか聞いてみた？
- 371 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 17:29:21.69 ID:fOqsMNTu.net]
- jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
- 372 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 18:13:32.56 ID:dJevJ7EZ.net]
- クラスコンポーネントは公式に非推奨扱いじゃね
- 373 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 18:15:33.41 ID:397xSubl.net]
- 話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
- 374 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 18:20:28.32 ID:dJevJ7EZ.net]
- Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
- 375 名前：デフォルトの名無しさん [2022/09/27(火) 20:04:34.40 ID:CMfXpwKQ.net]
- >>370
うん
「本当はよくないんですけどね～～」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流（これが一番酷い）
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
- 376 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 20:20:13.86 ID:6DdS+dLy.net]
- プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
- 377 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 20:22:10.28 ID:fOqsMNTu.net]
- >>375
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。
- 378 名前：デフォルトの名無しさん [2022/09/27(火) 20:39:34.88 ID:CMfXpwKQ.net]
- >>376
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。
>>377
アジャイルってこんなもんなんじゃないの？知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ
- 379 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 22:23:16.69 ID:/UUTRmF2.net]
- >>364
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。
- 380 名前：359 mailto:sage [2022/09/27(火) 23:17:49.69 ID:oW3s344K.net]
- >>375
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
- 381 名前：359 mailto:sage [2022/09/27(火) 23:29:13.30 ID:oW3s344K.net]
- Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
- 382 名前：デフォルトの名無しさん mailto:sage [2022/09/27(火) 23:53:21.49 ID:BMrl8a7V.net]
- なんでそんなにクラスコンポーネントの話にこだわるの？
- 383 名前：デフォルトの名無しさん [2022/09/28(水) 20:45:18.22 ID:KHG5QcXL.net]
- presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？
- 384 名前：デフォルトの名無しさん mailto:sage [2022/09/28(水) 21:57:59.16 ID:Km2fmn1T.net]
- プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
- 385 名前：デフォルトの名無しさん mailto:sage [2022/09/28(水) 22:11:03.79 ID:0Dahyjoe.net]
- グローブステートにRxで変更通知でどうですか？
- 386 名前：デフォルトの名無しさん [2022/09/28(水) 22:46:08.76 ID:HuYE1qae.net]
- >>384
へー！なるほど！
その経緯は知らんかったわ！ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
- 387 名前：デフォルトの名無しさん mailto:sage [2022/09/28(水) 23:33:30.69 ID:N1fcW8jX.net]
- え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの？
- 388 名前：デフォルトの名無しさん mailto:sage [2022/09/28(水) 23:38:10.61 ID:QcgKtZxa.net]
- ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？
- 389 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 01:06:57.42 ID:6obmiat7.net]
- >>387
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
- 390 名前：デフォルトの名無しさん [2022/09/29(木) 01:29:18.28 ID:ffAnOOZb.net]
- >>389
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん？
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
- 391 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 07:28:27.58 ID:+pwL/l2M.net]
- >>388
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
- 392 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 07:40:58.14 ID:6obmiat7.net]
- >>390
いやいやいやロジックはhooksって書いたじゃん
複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う
- 393 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 08:51:14.08 ID:DUgkcSyO.net]
- Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
- 394 名前：デフォルトの名無しさん [2022/09/29(木) 08:54:50.37 ID:vsyIBCv9.net]
- >>392
コンポーネントにロジックを記載するのではなく
カスタムhooksとして切り出すってこと？
理解力乏しくてすまん
- 395 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 09:34:16.50 ID:6obmiat7.net]
- >>394
そういうこと
- 396 名前：359 mailto:sage [2022/09/29(木) 09:39:43.34 ID:DUgkcSyO.net]
- React実践の教科書、2021
この本には、カスタムフック・自作のHooks も書いてある
ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック
- 397 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 09:52:34.39 ID:clewMKt/.net]
- >>395
hooks限定である必要はないと思うが...
- 398 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 10:45:31.47 ID:6obmiat7.net]
- >>397
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ
- 399 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 10:54:55.41 ID:clewMKt/.net]
- ステートレスなロジックも意味なくhooksとして？実装するとでも言うのかい？
- 400 名前：デフォルトの名無しさん [2022/09/29(木) 11:20:12.57 ID:vsyIBCv9.net]
- ごめん、一番聞きたかったのは
コールバック等使ったpropsの逆流（リフトアップ？）のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの？？
- 401 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 11:41:08.20 ID:RG+lw4Yl.net]
- 俺の場合はコントロールの状態は極力propsで渡して
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた
- 402 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 12:43:16.88 ID:N+5tSsEm.net]
- 全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き
- 403 名前：デフォルトの名無しさん mailto:sage [2022/09/29(木) 13:42:04.91 ID:RG+lw4Yl.net]
- propsて受け取った状態を
内部てstateとして別管理すると嵌まるパターンが多いね
- 404 名前：デフォルトの名無しさん mailto:sage [2022/10/04(火) 20:36:43.24 ID:R+w5qX88.net]
- 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行ずつをコンポーネントにするのは必須ですかね？
- 405 名前：デフォルトの名無しさん mailto:sage [2022/10/04(火) 21:43:53.97 ID:ZExEo8/e.net]
- >>404
> 先頭行に追加、末尾行は削除
keyを調べれ
> 1行ずつをコンポーネントにするのは必須
んなこたぁない
- 406 名前：デフォルトの名無しさん mailto:sage [[ここ壊れてます] .net]
- >>405
ありがとうございます。
なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。
だから必ずkeyを付けるんですね。
- 407 名前：デフォルトの名無しさん [2022/10/05(水) 00:29:27.00 ID:zhKCpglg.net]
- keyはどのみち付けないとWarning出るね
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ
- 408 名前：デフォルトの名無しさん mailto:sage [2022/10/05(水) 10:49:27.30 ID:RsX5Dgpw.net]
- >>407
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
- 409 名前：デフォルトの名無しさん [2022/11/05(土) 23:06:02.94 ID:uWVkhL+y.net]
- react native詳しいニキ教えて
下部に表示されるメニューバー（以下、Menu）のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか？
- 410 名前：デフォルトの名無しさん mailto:sage [2022/11/05(土) 23:47:25.78 ID:ocl/XM+V.net]
- 知らんけどrecoil-syncってのがあるらしいな知らんけど
- 411 名前：.NET MAUI HighSchool [2022/11/11(金) 12:32:52.36 ID:kw0okeTL.net]
- Metaが倒産したらReactどうなってしまうんだ？ってレス見たんだけどほんとどうなってしまうん？
誰かに買われるとか？？？
- 412 名前：デフォルトの名無しさん mailto:sage [2022/11/11(金) 12:42:14.20 ID:BY70aiHB.net]
- Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない
- 413 名前：.NET MAUI HighSchool [2022/11/11(金) 12:43:10.48 ID:kw0okeTL.net]
- やっぱり大手に買われるのか…
- 414 名前：デフォルトの名無しさん mailto:sage [2022/11/11(金) 13:19:40.85 ID:P8cdLDDc.net]
- React NativeはMSが持っていきそう
- 415 名前：.NET MAUI HighSchool [2022/11/11(金) 13:20:58.38 ID:kw0okeTL.net]
- >>414
ありえそう
OfficeとかReact Nativeやしな
- 416 名前：デフォルトの名無しさん [2022/11/21(月) 04:31:38.78 ID:9tdtmBpP.net]
- プログラマーならview定義もJavaScriptでする方が幸せじゃないですか？
https://zenn.dev/takahad/articles/view-with-js
- 417 名前：デフォルトの名無しさん mailto:sage [2022/11/21(月) 19:55:26.69 ID:WHQv7Vmu.net]
- >>416
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
- 418 名前：デフォルトの名無しさん mailto:sage [2022/11/21(月) 20:03:57.34 ID:WHQv7Vmu.net]
- (試みとしては面白いと思うけど)
- 419 名前：デフォルトの名無しさん mailto:sage [2022/11/21(月) 20:32:50.68 ID:530w1iq8.net]
- hyperTextじゃん
- 420 名前：デフォルトの名無しさん mailto:sage [2022/11/21(月) 20:33:18.27 ID:530w1iq8.net]
- textじゃねえやHyperScript
- 421 名前：デフォルトの名無しさん mailto:sage [2022/11/21(月) 20:54:44.24 ID:F57+7x5h.net]
- ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな
- 422 名前：デフォルトの名無しさん mailto:sage [2022/11/22(火) 07:44:22.59 ID:XlS3y7OH.net]
- tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。
https://jsfiddle.net/nwmeqbL4/
- 423 名前：デフォルトの名無しさん mailto:sage [2022/11/22(火) 09:58:17.91 ID:J3G+pIhw.net]
- それならここに来る必要ないやろ
- 424 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 04:11:09.42 ID:TMK4+5Kw.net]
- reactでjsx使わない話なんだけどダメ？
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
- 425 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 04:25:07.28 ID:mlnYnqLg.net]
- jQuery絶対王者
- 426 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 05:07:49.07 ID:AN01Xhf0.net]
- >>424
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
- 427 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 08:06:55.32 ID:Wy3yaUuF.net]
- html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
- 428 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 09:09:30.10 ID:6E3xEeS7.net]
- HTMLをHTMLとして認識しにくいのはイヤ
- 429 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 13:34:39.63 ID:Y3sgMMcN.net]
- jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
- 430 名前：デフォルトの名無しさん [2022/11/23(水) 14:08:23.15 ID:kuPI2CLi.net]
- JSXの構文はもっと省略できるよね
- 431 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 14:20:57.19 ID:pkO67U6a.net]
- ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ
- 432 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 15:21:48.20 ID:Q2Zz8xgu.net]
- 逆にJSの言語仕様としてのクラスが要らんのやないかって感じするしな
- 433 名前：デフォルトの名無しさん mailto:sage [2022/11/23(水) 15:46:18.91 ID:KqoXuT6V.net]
- >>431
PreactではJSXでclass属性使えるからReactが使えないのは単に怠慢ちゃうか
>>432
Rustのstructとimplの関係とかオブジェクトとprototypeの関係に近いし、classなんて要らんかった感がある。なんもかんも関数にnew付けるとコンストラクタになるっていう全く直感的でない仕様が悪かった
- 434 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2022/11/28(月) 17:59:40.28 ID:IoJupQtf.net]
- それはそう
- 437 名前：デフォルトの名無しさん mailto:sage [2022/11/28(月) 18:10:16.07 ID:HJ3Js2uA.net]
- React.createElement() は、見たことない。
クラスなのか？
今は、関数しか使わない
- 438 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2022/12/03(土) 11:52:54.38 ID:olmTGWDy.net]
- できねぇ自分を棚に上げてよく言うぜ
- 443 名前：デフォルトの名無しさん mailto:sage [2022/12/03(土) 13:16:27.12 ID:DRrYSu6r.net]
- フロントエンドができるのは
どのくらいのレベル？
- 444 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 10:14:28.76 ID:Mf+W6hFq.net]
- https://pleasanter.org/
これとか使えそうだな
- 445 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 11:54:38.25 ID:Wvq70p6a.net]
- 周りが適性なさすぎて消去法でバックエンドやるハメになり
苦労もあったが経験しておけて良かった
- 446 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/14(火) 00:24:32.69 ID:L+R7vyp5.net]
- 知らんけどAirtableとかじゃないの？
- 450 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/20(月) 17:53:11.21 ID:1+J+V+Et.net]
- >>450
一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。
あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため)
- 452 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/20(月) 18:48:10.50 ID:o1ZyjHKj.net]
- 動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。
これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので
コンポーネントの使いまわしが楽になるのですが。
javascriptのみで完結できるので。
- 454 名前：デフォルトの名無しさん mailto:sage [2023/02/20(月) 20:09:11.05 ID:CBterFMa.net]
- Reactをrender()するHTML要素を動的に追加するのはありだと思うよ
でもそのロジックをReactコンポーネントに入れる必要はないな
ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし
- 455 名前：デフォルトの名無しさん mailto:sage [2023/02/20(月) 20:40:21.95 ID:1+J+V+Et.net]
- まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。
- 456 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/20(月) 23:39:55.71 ID:qmqKnMRQ.net]
- Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
|
 |
