22/06/07 16:32:08.16 trxEqnyj.net
reactとかってソースにコメントって
あまり書かないほうがいい的な暗黙のルールってあります？
読まれちゃうから？
今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。
333:デフォルトの名無しさん
22/06/09 19:17:56.70 pioqxBxg.net
ないです
トランスパイルしたら消えるのでしっかり書きましょう
334:デフォルトの名無しさん
22/07/01 09:49:56.08 mdBqK8pn.net
ありがとう
335:デフォルトの名無しさん
22/08/20 11:13:41.79 ncpICP0v.net
propsで受け取ったデータを
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか？
336:デフォルトの名無しさん
22/08/25 12:56:19.31 H3bW7ybM.net
ここReactの本スレ？
過疎ってるの？
337:デフォルトの名無しさん
22/08/25 17:55:45.09 Tb5qjwQY.net
過疎ってるのは明白やろ
338:デフォルトの名無しさん
[ここ壊れてます] .net
ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな
339:デフォルトの名無しさん
22/08/30 00:50:56.99 GSie6Ogu.net
reactはtypescriptが必須なのでしょうか？
340:デフォルトの名無しさん
22/08/30 03:03:46.27 R48CF1Id.net
>>339
いらん
341:デフォルトの名無しさん
22/08/30 03:55:25.12 AgQQgySl.net
Reactが流行っていないから、過疎っているんだよ
342:デフォルトの名無しさん
22/08/30 18:08:40.22 GSie6Ogu.net
reactの求人は多いですけど、実際にはどうなのでしょうか。
343:デフォルトの名無しさん
22/08/30 19:28:11.75 148lWuya.net
Reactできる人は全然足りてない
344:デフォルトの名無しさん
[ここ壊れてます] .net
>>343
そうなのですか。
今、javascriptとjQueryの勉強をしてますが、この2つだけでも大変ですね。
345:デフォルトの名無しさん
22/08/30 20:28:20.43 oTUqrsBR.net
数年Web屋やって引退するつもりならそれでもいい
346:デフォルトの名無しさん
22/08/30 21:03:00.66 BxScEIY5.net
Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる
347:デフォルトの名無しさん
[ここ壊れてます] .net
JavaScript関連技術でwebアプリを作るならreactは便利でしょうか？
348:デフォルトの名無しさん
22/08/30 23:14:38.13 AsY/BIgk.net
便利さでいうならAngularがいいよ
349:デフォルトの名無しさん
22/08/30 23:44:08.14 B8+owlOV.net
満足度が底辺のangularがなんだって？
URLﾘﾝｸ(2021.stateofjs.com)
350:デフォルトの名無しさん
22/08/31 01:59:04.53 J9nI7vcp.net
>>347
できる人は、何でもできる
351:デフォルトの名無しさん
22/08/31 11:44:05.05 FlEWiE9h.net
Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる
352:デフォルトの名無しさん
22/08/31 12:36:45.93 3saFUPw3.net
ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ
353:デフォルトの名無しさん
22/09/01 05:11:23.04 jMwj7QaK.net
vue.jsよりreactの方が優れてますよね？
354:デフォルトの名無しさん
22/09/13 16:36:34.31 DqV+9O8X.net
test
355:デフォルトの名無しさん
22/09/26 01:00:41.00 ikr92+JD.net
最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい
・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね？recoilに比べてどういうメリットがあるの？
・クラスベースの記述って殆どしないの？ベストプラクティスは関数ベース？
356:デフォルトの名無しさん
22/09/26 20:02:50.86 wZFpwFwK.net
toolkitはReduxで使い勝手が悪かった機能を改良したもの。(asyncに対応させるためにthunkとかsagaが必要だったりとかの)
recoilのほうが新しく記述もシンプルで見通しが良くなる。stateのset/get両方に対応。ただしまだexperimental
URLﾘﾝｸ(www.npmjs.com)
Recoil is an experimental state management framework for React.
公式は関数コンポーネント+フックを推奨
URLﾘﾝｸ(ja.reactjs.org)
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。
357:デフォルトの名無しさん
22/09/26 22:42:27.40 ikr92+JD.net
>>356
ごめんクラスコンポーネントと関数コンポーネントの違いは分かってるんだ
例えば、1+1を計算する関数をクラスベースで定義すべきか関数ベースで定義すべきか
的なことを知りたかった！
358:デフォルトの名無しさん
22/09/26 22:56:01.37 lxhy0Qxo.net
JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
359:デフォルトの名無しさん
22/09/26 22:59:55.62 rxxJbSNv.net
>>357
書いてくれてるだろ
ちゃんと読もうよ
360:デフォルトの名無しさん
22/09/26 23:21:54.38 rxxJbSNv.net
ああ、ごめんコンポーネントの話じゃなかったのか
361:デフォルトの名無しさん
22/09/26 23:22:50.91 tIU7Oyti.net
React実践の教科書、2021
この本には、クラスは出てこない。
すべて関数
362:デフォルトの名無しさん
22/09/27 12:54:00.07 CMfXpwKQ.net
なるほどなるほど
仕事でcobolとvbaしか使ったｂｱとなかったかｂ辜Iブジェクト試w向的な記述自荘ﾌ馴染みなかっｂｽわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
363:デフォルトの名無しさん
22/09/27 13:46:50.26 t32oMnpk.net
JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる？
ちなみにReactのクラスコンポーネントはオワコンだけどね
364:デフォルトの名無しさん
22/09/27 14:04:56.54 CMfXpwKQ.net
>>363
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる！？
365:デフォルトの名無しさん
22/09/27 15:39:04.72 D1kdTDEr.net
>>364
Reactのクラスコンポーネントは無くなるんであれこれ考える必要ない
関数コンポーネントの一択だ
JSの方は好みだな
366:デフォルトの名無しさん
22/09/27 15:58:48.85 aOp1T7nJ.net
>>362
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ！って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
367:デフォルトの名無しさん
22/09/27 16:41:51.18 MQqAKvI3.net
Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
368:デフォルトの名無しさん
22/09/27 16:48:43.98 CMfXpwKQ.net
>>366
頭ごなしに否定する気はないんだけど
（jsの）クラスベースの記述するメリットってどういうとこがあるの？
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
369:デフォルトの名無しさん
22/09/27 17:25:00.79 fOqsMNTu.net
Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
370:デフォルトの名無しさん
22/09/27 17:28:55.43 YFL0VkhR.net
プロジェクトメンバーにどうして混在してるのか聞いてみた？
371:デフォルトの名無しさん
22/09/27 17:29:21.69 fOqsMNTu.net
jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
372:デフォルトの名無しさん
22/09/27 18:13:32.56 dJevJ7EZ.net
クラスコンポーネントは公式に非推奨扱いじゃね
373:デフォルトの名無しさん
22/09/27 18:15:33.41 397xSubl.net
話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
374:デフォルトの名無しさん
22/09/27 18:20:28.32 dJevJ7EZ.net
Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
375:デフォルトの名無しさん
22/09/27 20:04:34.40 CMfXpwKQ.net
>>370
うん
「本当はよくないんですけどね～～」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流（これが一番酷い）
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
376:デフォルトの名無しさん
22/09/27 20:20:13.86 6DdS+dLy.net
プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
377:デフォルトの名無しさん
22/09/27 20:22:10.28 fOqsMNTu.net
>>375
Java屋PHP屋Cobol屋の混成チームでコーディングルールも設計もフワフワとか地獄やん……。
PMがフロントエンド舐めてたのかな。
378:デフォルトの名無しさん
22/09/27 20:39:34.88 CMfXpwKQ.net
>>376
リモートだけどSESだから元請けに当たる人に対して
ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑)
スタイリングぐちゃぐちゃだったのはさすがに言ったけど
でも言うとこは言ったがいいね。ありがとう。
>>377
アジャイルってこんなもんなんじゃないの？知らんけど(笑)
でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ
379:デフォルトの名無しさん
22/09/27 22:23:16.69 /UUTRmF2.net
>>364
jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから
プロトタイプベース云々は関係ない。
380:359
22/09/27 23:17:49.69 oW3s344K.net
>>375
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
381:359
22/09/27 23:29:13.30 oW3s344K.net
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
382:デフォルトの名無しさん
22/09/27 23:53:21.49 BMrl8a7V.net
なんでそんなにクラスコンポーネントの話にこだわるの？
383:デフォルトの名無しさん
22/09/28 20:45:18.22 KHG5QcXL.net
presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？
384:デフォルトの名無しさん
22/09/28 21:57:59.16 Km2fmn1T.net
プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
385:デフォルトの名無しさん
22/09/28 22:11:03.79 0Dahyjoe.net
グローブステートにRxで変更通知でどうですか？
386:デフォルトの名無しさん
22/09/28 22:46:08.76 HuYE1qae.net
>>384
へー！なるほど！
その経緯は知らんかったわ！ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
387:デフォルトの名無しさん
22/09/28 23:33:30.69 N1fcW8jX.net
え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの？
388:デフォルトの名無しさん
22/09/28 23:38:10.61 QcgKtZxa.net
ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？
389:デフォルトの名無しさん
22/09/29 01:06:57.42 6obmiat7.net
>>387
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
390:デフォルトの名無しさん
22/09/29 01:29:18.28 ffAnOOZb.net
>>389
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん？
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
391:デフォルトの名無しさん
22/09/29 07:28:27.58 +pwL/l2M.net
>>388
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
392:デフォルトの名無しさん
22/09/29 07:40:58.14 6obmiat7.net
>>390
いやいやいやロジックはhooksって書いたじゃん
複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う
393:デフォルトの名無しさん
22/09/29 08:51:14.08 DUgkcSyO.net
Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
394:デフォルトの名無しさん
22/09/29 08:54:50.37 vsyIBCv9.net
>>392
コンポーネントにロジックを記載するのではなく
カスタムhooksとして切り出すってこと？
理解力乏しくてすまん
395:デフォルトの名無しさん
22/09/29 09:34:16.50 6obmiat7.net
>>394
そういうこと
396:359
22/09/29 09:39:43.34 DUgkcSyO.net
React実践の教科書、2021
この本には、カスタムフック・自作のHooks も書いてある
ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック
397:デフォルトの名無しさん
22/09/29 09:52:34.39 clewMKt/.net
>>395
hooks限定である必要はないと思うが...
398:デフォルトの名無しさん
22/09/29 10:45:31.47 6obmiat7.net
>>397
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ
399:デフォルトの名無しさん
22/09/29 10:54:55.41 clewMKt/.net
ステートレスなロジックも意味なくhooksとして？実装するとでも言うのかい？
400:デフォルトの名無しさん
22/09/29 11:20:12.57 vsyIBCv9.net
ごめん、一番聞きたかったのは
コールバック等使ったpropsの逆流（リフトアップ？）のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの？？
401:デフォルトの名無しさん
22/09/29 11:41:08.20 RG+lw4Yl.net
俺の場合はコントロールの状態は極力propsで渡して
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた
402:デフォルトの名無しさん
22/09/29 12:43:16.88 N+5tSsEm.net
全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き
403:デフォルトの名無しさん
22/09/29 13:42:04.91 RG+lw4Yl.net
propsて受け取った状態を
内部てstateとして別管理すると嵌まるパターンが多いね
404:デフォルトの名無しさん
22/10/04 20:36:43.24 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:デフォルトの名無しさん
22/10/04 21:43:53.97 ZExEo8/e.net
>>404
> 先頭行に追加、末尾行は削除
keyを調べれ
> 1行ずつをコンポーネントにするのは必須
んなこたぁない
406:デフォルトの名無しさん
[ここ壊れてます] .net
>>405
ありがとうございます。
なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。
だから必ずkeyを付けるんですね。
407:デフォルトの名無しさん
22/10/05 00:29:27.00 zhKCpglg.net
keyはどのみち付けないとWarning出るね
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ
408:デフォルトの名無しさん
22/10/05 10:49:27.30 RsX5Dgpw.net
>>407
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
409:デフォルトの名無しさん
22/11/05 23:06:02.94 uWVkhL+y.net
react native詳しいニキ教えて
下部に表示されるメニューバー（以下、Menu）のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか？
410:デフォルトの名無しさん
22/11/05 23:47:25.78 ocl/XM+V.net
知らんけどrecoil-syncってのがあるらしいな知らんけど
411:.NET MAUI HighSchool
22/11/11 12:32:52.36 kw0okeTL.net
Metaが倒産したらReactどうなってしまうんだ？ってレス見たんだけどほんとどうなってしまうん？
誰かに買われるとか？？？
412:デフォルトの名無しさん
22/11/11 12:42:14.20 BY70aiHB.net
Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない
413:.NET MAUI HighSchool
22/11/11 12:43:10.48 kw0okeTL.net
やっぱり大手に買われるのか…
414:デフォルトの名無しさん
22/11/11 13:19:40.85 P8cdLDDc.net
React NativeはMSが持っていきそう
415:.NET MAUI HighSchool
22/11/11 13:20:58.38 kw0okeTL.net
>>414
ありえそう
OfficeとかReact Nativeやしな
416:デフォルトの名無しさん
22/11/21 04:31:38.78 9tdtmBpP.net
プログラマーならview定義もJavaScriptでする方が幸せじゃないですか？
URLﾘﾝｸ(zenn.dev)
417:デフォルトの名無しさん
22/11/21 19:55:26.69 WHQv7Vmu.net
>>416
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
418:デフォルトの名無しさん
22/11/21 20:03:57.34 WHQv7Vmu.net
(試みとしては面白いと思うけど)
419:デフォルトの名無しさん
22/11/21 20:32:50.68 530w1iq8.net
hyperTextじゃん
420:デフォルトの名無しさん
22/11/21 20:33:18.27 530w1iq8.net
textじゃねえやHyperScript
421:デフォルトの名無しさん
22/11/21 20:54:44.24 F57+7x5h.net
ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな
422:デフォルトの名無しさん
22/11/22 07:44:22.59 XlS3y7OH.net
tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。
URLﾘﾝｸ(jsfiddle.net)
423:デフォルトの名無しさん
22/11/22 09:58:17.91 J3G+pIhw.net
それならここに来る必要ないやろ
424:デフォルトの名無しさん
22/11/23 04:11:09.42 TMK4+5Kw.net
reactでjsx使わない話なんだけどダメ？
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
425:デフォルトの名無しさん
22/11/23 04:25:07.28 mlnYnqLg.net
jQuery絶対王者
426:デフォルトの名無しさん
22/11/23 05:07:49.07 AN01Xhf0.net
>>424
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
427:デフォルトの名無しさん
22/11/23 08:06:55.32 Wy3yaUuF.net
html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
428:デフォルトの名無しさん
22/11/23 09:09:30.10 6E3xEeS7.net
HTMLをHTMLとして認識しにくいのはイヤ
429:デフォルトの名無しさん
22/11/23 13:34:39.63 Y3sgMMcN.net
jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
430:デフォルトの名無しさん
22/11/23 14:08:23.15 kuPI2CLi.net
JSXの構文はもっと省略できるよね
431:デフォルトの名無しさん
22/11/23 14:20:57.19 pkO67U6a.net
ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ
432:デフォルトの名無しさん
22/11/23 15:21:48.20 Q2Zz8xgu.net
逆にJSの言語仕様としてのクラスが要らんのやないかって感じするしな
433:デフォルトの名無しさん
22/11/23 15:46:18.91 KqoXuT6V.net
>>431
PreactではJSXでclass属性使えるからReactが使えないのは単に怠慢ちゃうか
>>432
Rustのstructとimplの関係とかオブジェクトとprototypeの関係に近いし、classなんて要らんかった感がある。なんもかんも関数にnew付けるとコンストラクタになるっていう全く直感的でない仕様が悪かった
434:デフォルトの名無しさん
22/11/27 18:18:42.40 DGQvXdXK.net
reactでjsx使いたくないなReact.createElement使えばすむだろ
pure jsだしreact自身がメンテナだぞ
435:デフォルトの名無しさん
22/11/28 16:39:23.37 bah5acf2.net
class使わんかったらええしjsxも受け入れればええやん
中途半端に色々俺ルール入れようとするからプロジェクト通したコードがグチャグチャになるんだよ
ガタガタ抜かさずに読みやすいコード書け
436:デフォルトの名無しさん
22/11/28 17:59:40.28 IoJupQtf.net
それはそう
437:デフォルトの名無しさん
22/11/28 18:10:16.07 HJ3Js2uA.net
React.createElement() は、見たことない。
クラスなのか？
今は、関数しか使わない
438:デフォルトの名無しさん
22/11/28 20:53:35.42 UVD224c9.net
>>437
JSXをトランスパイルするとそれが出てくる
というか前はそれになってた
今はもちっとサイズが小さくなるコードにトランスパイルされる
439:デフォルトの名無しさん
22/12/03 08:35:21.91 taaLhEhL.net
フロントエンドはAIとローコードにより死んでいきそう
440:デフォルトの名無しさん
22/12/03 10:06:11.17 nGrXXmmc.net
フロントエンドの連中が死んでいったら愉快すぎるだろうな。
441:デフォルトの名無しさん
22/12/03 10:26:28.26 yzFmn8Js.net
管理画面作れるローコードツールやばいで？
t-wadaさんの会社が出資してるやつ
ガチでフロントエンドいらんw
442:デフォルトの名無しさん
22/12/03 11:52:54.38 olmTGWDy.net
できねぇ自分を棚に上げてよく言うぜ
443:デフォルトの名無しさん
22/12/03 13:16:27.12 DRrYSu6r.net
フロントエンドができるのは
どのくらいのレベル？
444:デフォルトの名無しさん
22/12/04 10:14:28.76 Mf+W6hFq.net
URLﾘﾝｸ(pleasanter.org)
これとか使えそうだな
445:デフォルトの名無しさん
22/12/04 11:54:38.25 Wvq70p6a.net
周りが適性なさすぎて消去法でバックエンドやるハメになり
苦労もあったが経験しておけて良かった
446:デフォルトの名無しさん
22/12/08 08:12:36.96 Z0lc4TAH.net
ここ本スレ？
447:デフォルトの名無しさん
23/01/15 12:22:06.03 c+nrjCWx.net
みんなuseStateのとき以外でset～って関数名付けてる？
448:デフォルトの名無しさん
23/02/11 08:10:49.33 vzM9dagC.net
>>441
何？ 使ってみたいから教えて
449:デフォルトの名無しさん
23/02/14 00:24:32.69 L+R7vyp5.net
知らんけどAirtableとかじゃないの？
450:デフォルトの名無しさん
23/02/20 17:20:13.84 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:デフォルトの名無しさん
23/02/20 17:53:11.21 1+J+V+Et.net
>>450
一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。
あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため)
452:デフォルトの名無しさん
23/02/20 18:41:24.87 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:デフォルトの名無しさん
23/02/20 18:48:10.50 o1ZyjHKj.net
動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。
これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので
コンポーネントの使いまわしが楽になるのですが。
javascriptのみで完結できるので。
454:デフォルトの名無しさん
23/02/20 20:09:11.05 CBterFMa.net
Reactをrender()するHTML要素を動的に追加するのはありだと思うよ
でもそのロジックをReactコンポーネントに入れる必要はないな
ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし
455:デフォルトの名無しさん
23/02/20 20:40:21.95 1+J+V+Et.net
まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。
456:デフォルトの名無しさん
23/02/20 21:16:51.58 zSsoBtA6.net
最初はお手本通りrender関数とコンポーネント挿入関数に2ファイルに別けてたのですが、
一機能実現するために手順を踏んで２ファイル使うのが解り辛いかなと思いました。
作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。
render関数とコンポーネントの挿入関数を試行錯誤して一つのファイルにまとめたら >>452のようになりました。
>>452なら
import ExampleComponent from './examplecomponent';
const modal = new ExampleComponent ();
modal.show("メッセージです", "タイトル");
だけで済むので、クラスのusageに書いておけば利用手順も簡単でどの画面でも使えると思います。
reactの定石からは離れますので、やはりreactのプロの目から見ると違和感あるのですね。
457:デフォルトの名無しさん
23/02/20 23:39:55.71 qmqKnMRQ.net
Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
458:デフォルトの名無しさん
23/02/21 02:04:19.05 R25lIONK.net
あちこちに<ExampleComponent />追加したくないってことかな？その場合はProviderやContextを使うのが正式なやり方になると思う。
レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。
459:デフォルトの名無しさん
23/02/21 08:04:52.44 pYWIE5Lo.net
>Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
はい、それであっています。
>あちこちに<ExampleComponent />追加したくないってことかな？
はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って
なるべくJavascriptだけで完結させたいです。
とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。
460:デフォルトの名無しさん
23/02/21 13:34:11.33 5AAcCPtU.net
メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は
どこでも仕込みなしで呼び出したい
あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね
461:デフォルトの名無しさん
23/02/21 13:52:30.32 pYWIE5Lo.net
レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが
メッセージダイアログのような画面中のレイアウトが必要無い物については
わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。
javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。
462:デフォルトの名無しさん
23/02/21 14:46:08.62 4BxaQg+7.net
Railsとかの既存画面にReactでモーダルだけ作ろうって話？
jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな
463:デフォルトの名無しさん
23/02/21 14:59:48.47 5AAcCPtU.net
いや、そういう話ではないよ
464:デフォルトの名無しさん
23/02/21 15:18:03.61 4BxaQg+7.net
へ？普通にSPA？
それなのにDOMのエレメント作ってrender()呼ぶって？ただのアホじゃん
465:デフォルトの名無しさん
23/02/21 16:09:35.73 5AAcCPtU.net
そりゃ動機があって試行錯誤の中でイレギュラーなことをしていて
より良い方法、より一般的な方法はないかという問いかけなんだし
466:デフォルトの名無しさん
23/02/21 16:42:00.18 4BxaQg+7.net
試行錯誤にしても道を外れすぎ
React.renderはReactアプリ(コンポーネントツリー)全体をDOMにマウントするためのAPIで個々のコンポーネントが呼び出すもんじゃない
大抵はフレームワーク的なコード(CRAやNext.js)が呼び出すからアプリからは呼ばない
共通のモーダルコンポーネントはAppコンポーネントなどツリーのルート近くに一つだけ置く
そしてモーダルはそれを開くためのカスタムフックを利用者に提供する
モーダルの開閉制御に使うステートはRedux等のライブラリを使ってもいいしContext + useStateでもいい
467:デフォルトの名無しさん
23/02/21 17:16:01.15 i5fGgfrB.net
試行錯誤ってのはそんなもんでしょ
まして最初にReactに不慣れだと断ってるわけだし
寛容にいこうよ
468:デフォルトの名無しさん
23/02/21 18:46:29.89 pYWIE5Lo.net
イレギュラーなやり方ということは重々承知しています。
自分のやり方はreactのフル機能を使うよりも、ESM＋Reactの機能の一部を使ったやり方になり
Reactの恩恵を受けられない事を承知しています。
その上で使い勝手を選択して、react機能の一部のみを使った開発を行うのもありなのではと思ったりしています。
ダイアログなどの静的なコンテンツについてはreactの機能を全て使い切らなくとも、reactが無くとも実現できますし、
reactの性能を発揮できる開発内容でもないと思っています。
静的HTMLのページをreactで作るのが効率悪いのと同様に、静的なダイアログ程度のものについてもreact使わない方が良いんじゃないかと。
その上で便利な部分（javascript上でHTMLを共有化できる）だけ摘まみ食いしたいです。
reactの専門家から見ると節操無いでしょうが、開発効率や汎用性を考えた場合に
こういったやり方はどうなんでしょうかと意見を」聞きたかったです。
469:デフォルトの名無しさん
23/02/21 19:00:38.86 YV4X7nvq.net
>>468
>>466の提示してるやり方はどう？落とし所としてはいいように思えるけども
あと>>458も1箇所に固定で追加するという方針は近しいように思う
必要なら詳しく聞いてみたら？
470:デフォルトの名無しさん
23/02/21 19:34:17.35 +X0VWij1.net
>>468
結局何をどう作ろうとしてるのかわからないんだよな
Reactで完全なSPAなら最初から449や456が書いてるとおりだし464も同じことを書いてる
しかし451の「サーバ側のview」とか466の「react機能の一部のみを使った開発」なら460に見えるんだよな
それなら452だろう
454で変なこと書いてるけど1ファイル1関数に制限さｂ黷驍墲ｯじゃなｂ｢んだから2ファイルに分けたくなけりゃ分けなければいいだけ
471:デフォルトの名無しさん
23/02/21 19:38:08.77 zF6zP+5N.net
つまり……
・他のreactコンポーネントから利用されるreactコンポーネントを作ってる
のか
・reactで作ってるけど利用する側はreactとか気にしないで使う
なのかどっちなんだという話
472:デフォルトの名無しさん
23/02/21 19:41:59.71 pYWIE5Lo.net
>>466の提示してるやり方はどう？
react的にはスマートなやり方なのでしょうが、react使わない方が実装手順を簡略化できるのでメリットを感じないです。
>>・reactで作ってるけど利用する側はreactとか気にしないで使う
の方です。
関わっているプロジェクトがこれからreactに乗り換えような流れなので、新規開発分からreactで作り始めているのですが、
そもそものベースがreactではないので、reactの便利な所だけ利用したい感じですね。
473:デフォルトの名無しさん
23/02/21 19:54:51.48 zF6zP+5N.net
>>472
それを先に言えって話だがそれなら>>454でいいだろ
モーダルを表示する関数だけexportしてreactコンポーネントはexportせずにファイル内だけで使う
ダイアログ表示するたびにDOMエレメント作るなら閉じたときに削除忘れないように
reactのアンマウントも
474:デフォルトの名無しさん
23/02/21 20:09:31.38 pYWIE5Lo.net
>>473
多分言っている事を理解しました。
reactによるコンポーネント作成と表示する関数は別けたいと思います。
ファイルを別けるのには違和感がありましたが、同一ファイル内で２関数実装して
片方だけexportするなら理想通りです。
一度サンプルソースを作成してリーダーに相談してみます。
ありがとうございました。
475:デフォルトの名無しさん
23/02/22 00:14:36.76 wXAQdOu8.net
実装者しか分からん負の遺産はこうやって増えていくんですね
自己満のためにプロジェクトを良くない方向に進めている自覚を持ちましょう。
あなたのやっていることは時間の無駄です。
476:デフォルトの名無しさん
23/02/22 02:31:50.15 DPknPTwq.net
だけど、いくらきれいに書いたとしても、後任者がアレな場合、結局、良くない方向に進む（本人たちは満足）なので、どないしようもない気がします
（という現場をよく見てきたので、どないしようもないですね）
477:デフォルトの名無しさん
23/02/22 21:02:05.11 ek8Yt4/u.net
きれいなだけではダメで意図とか背景にある思想とかそういったものをちゃんと伝えておかないと
今回みたいに定石から外れることを自覚してるならなおさら
478:デフォルトの名無しさん
23/02/26 16:09:53.37 7ZfAUNQ9.net
でも必死こいてゲットしたマイナポイントも結局使わないまま失効するんだろどうせ
479:デフォルトの名無しさん
23/02/26 16:10:31.65 7ZfAUNQ9.net
スマン誤爆
480:デフォルトの名無しさん
23/02/26 17:52:01.97 +WhKwZG4.net
>>478
必死こいで使おう
481:デフォルトの名無しさん
23/08/21 22:44:49.15 Y0H4lTnqK
軍事費GDΡ比4％超て゛NATOにまで加盟しようとしていたウクライナは周辺国に脅威視されて攻撃されたわけだが．
世界最悪の腐敗利権国家日本も軍事費倍増させて周辺国に脅威視されようとマッチポンプ戦争利権屋とベッタリの岸田増税文雄が必死た゛な
ウクライナで市民への攻撃ガ一だの停電カ゛一だの戦争犯罪ガ一だの白々しいが、戦争なんだから当たり前だろ
日本に絨毯爆撃して原爆まで落とした世界最悪のならず者國家なんて、いまだに新型戦略爆撃機とか発表してるだろ
軍事施設だけ爆撃とかあり得ないし、要するに戦略ってのは戦爭となれは゛こいつを使って一般市民の家屋を焼き尽くすって意味た゛からな
国民を人間の盾にして、女こども以外逃亡(出国］禁止にして戦わせて，他国まで巻き込んでまで利権に執着してるキチカ゛イナゼレンスキーを
いまだに引きずり降ろさないあたり．戦闘民族として現状を受け入れて、むしろリアルサバゲ‐を楽しんでると理解するのが正解
世界最悪の腐敗利権国家日本は軍事費ゼロにして、ポーランドのように国民に武器を持たせて扱い方を訓練する個人防衛国へと移行しよう！
（羽田］TΤＰs://www.call4.jp/info.php?тУpe=items&id=I0000062 , tTρs:／/haneda-projеcΤ.jimdofree.com／
（成田)URLﾘﾝｸ(n-souonhigaisos)ｙoudan.amebaownd.Ｃom/
(テ囗組織)TｔＰs://i.imgur.com/hnli1ga.jpеg
482:デフォルトの名無しさん
23/09/09 09:35:09.94 XstChhEA.net
（＞ェ＜；
483:デフォルトの名無しさん
23/10/18 11:53:52.23 pKa2ZouW.net
redux!!
484:デフォルトの名無しさん
24/09/03 11:41:52.36 a/z1r+/G.net
外部cssをimportじゃなくてhead要素に入れたいんだけど(scriptタグ多いのが嫌なだけ)、ドキュメントだとShowRenderedHTMLがいいって書いてあるっぽいけど他の方法あるのかな？無いならこれ使ってみる
Helmetで出来るもんだと思ってたんだけどなあ