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. 両方です。どっちの話題をしているかは文脈で判断してください
探検
React と React Native のスレ
2019/03/09(土) 21:29:27.97ID:AJ6jPa0v
328デフォルトの名無しさん
2022/05/22(日) 20:06:50.28ID:QFhXSBvp gifjsってライブラリをReactNativeでも使えるようにしようと色々いじくってます。canvasが必要なのでreact-native-canvas入れてみたけどgetImagedataが遅すぎる...
webviewで実行したら改善するかな??もしくはなんか違うやり方あるかな??
webviewで実行したら改善するかな??もしくはなんか違うやり方あるかな??
329デフォルトの名無しさん
2022/05/29(日) 18:03:59.58ID:3mvQdNHh 組込みやってて流れでreactで自社内で使うwebアプリのフロント側
作らされる羽目になったのですが素人がreactとjs学ぶのに
定番みたいな書籍やコンテンツありますか?
バックエンドはやりませんがpythonのfastapiです。
作らされる羽目になったのですが素人がreactとjs学ぶのに
定番みたいな書籍やコンテンツありますか?
バックエンドはやりませんがpythonのfastapiです。
330デフォルトの名無しさん
2022/06/07(火) 16:32:08.16ID:trxEqnyj reactとかってソースにコメントって
あまり書かないほうがいい的な暗黙のルールってあります?
読まれちゃうから?
今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。
あまり書かないほうがいい的な暗黙のルールってあります?
読まれちゃうから?
今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。
331デフォルトの名無しさん
2022/06/09(木) 19:17:56.70ID:pioqxBxg ないです
トランスパイルしたら消えるのでしっかり書きましょう
トランスパイルしたら消えるのでしっかり書きましょう
332デフォルトの名無しさん
2022/07/01(金) 09:49:56.08ID:mdBqK8pn ありがとう
333デフォルトの名無しさん
2022/08/20(土) 11:13:41.79ID:ncpICP0v propsで受け取ったデータを
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか?
内部で更新するときに
useStateすると思うんですけど
そするとpropsの変更が無視されるんですけど
その時のベストプラクティスって何ですか?
334デフォルトの名無しさん
2022/08/25(木) 12:56:19.31ID:H3bW7ybM ここReactの本スレ?
過疎ってるの?
過疎ってるの?
335デフォルトの名無しさん
2022/08/25(木) 17:55:45.09ID:Tb5qjwQY 過疎ってるのは明白やろ
336デフォルトの名無しさん
2022/08/25(木) 17:58:32.30ID:Tb5qjwQY ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな
337デフォルトの名無しさん
2022/08/30(火) 00:50:56.99ID:GSie6Ogu reactはtypescriptが必須なのでしょうか?
338デフォルトの名無しさん
2022/08/30(火) 03:03:46.27ID:R48CF1Id >>337
いらん
いらん
339デフォルトの名無しさん
2022/08/30(火) 03:55:25.12ID:AgQQgySl Reactが流行っていないから、過疎っているんだよ
340デフォルトの名無しさん
2022/08/30(火) 18:08:40.22ID:GSie6Ogu reactの求人は多いですけど、実際にはどうなのでしょうか。
341デフォルトの名無しさん
2022/08/30(火) 19:28:11.75ID:148lWuya Reactできる人は全然足りてない
342デフォルトの名無しさん
2022/08/30(火) 19:53:41.07ID:GSie6Ogu343デフォルトの名無しさん
2022/08/30(火) 20:28:20.43ID:oTUqrsBR 数年Web屋やって引退するつもりならそれでもいい
344デフォルトの名無しさん
2022/08/30(火) 21:03:00.66ID:BxScEIY5 Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる
それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる
345デフォルトの名無しさん
2022/08/30(火) 22:54:29.99ID:GSie6Ogu JavaScript関連技術でwebアプリを作るならreactは便利でしょうか?
346デフォルトの名無しさん
2022/08/30(火) 23:14:38.13ID:AsY/BIgk 便利さでいうならAngularがいいよ
347デフォルトの名無しさん
2022/08/30(火) 23:44:08.14ID:B8+owlOV 満足度が底辺のangularがなんだって?
https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks
https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks
348デフォルトの名無しさん
2022/08/31(水) 01:59:04.53ID:J9nI7vcp >>345
できる人は、何でもできる
できる人は、何でもできる
349デフォルトの名無しさん
2022/08/31(水) 11:44:05.05ID:FlEWiE9h Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる
350デフォルトの名無しさん
2022/08/31(水) 12:36:45.93ID:3saFUPw3 ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ
351デフォルトの名無しさん
2022/09/01(木) 05:11:23.04ID:jMwj7QaK vue.jsよりreactの方が優れてますよね?
352デフォルトの名無しさん
2022/09/13(火) 16:36:34.31ID:DqV+9O8X test
353デフォルトの名無しさん
2022/09/26(月) 01:00:41.00ID:ikr92+JD 最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい
・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね?recoilに比べてどういうメリットがあるの?
・クラスベースの記述って殆どしないの?ベストプラクティスは関数ベース?
・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね?recoilに比べてどういうメリットがあるの?
・クラスベースの記述って殆どしないの?ベストプラクティスは関数ベース?
354デフォルトの名無しさん
2022/09/26(月) 20:02:50.86ID:wZFpwFwK toolkitはReduxで使い勝手が悪かった機能を改良したもの。(asyncに対応させるためにthunkとかsagaが必要だったりとかの)
recoilのほうが新しく記述もシンプルで見通しが良くなる。stateのset/get両方に対応。ただしまだexperimental
https://www.npmjs.com/package/recoil
Recoil is an experimental state management framework for React.
公式は関数コンポーネント+フックを推奨
https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか?
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。
recoilのほうが新しく記述もシンプルで見通しが良くなる。stateのset/get両方に対応。ただしまだexperimental
https://www.npmjs.com/package/recoil
Recoil is an experimental state management framework for React.
公式は関数コンポーネント+フックを推奨
https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか?
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。
355デフォルトの名無しさん
2022/09/26(月) 22:42:27.40ID:ikr92+JD356デフォルトの名無しさん
2022/09/26(月) 22:56:01.37ID:lxhy0Qxo JS/TSでクラスはほっとんど使わない
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
使うのは独自のErrorクラスくらいだな
メソッドというより関数をプロパティとして持つオブジェクトはよく使う
でも基本は単なる関数
357デフォルトの名無しさん
2022/09/26(月) 22:59:55.62ID:rxxJbSNv358デフォルトの名無しさん
2022/09/26(月) 23:21:54.38ID:rxxJbSNv ああ、ごめんコンポーネントの話じゃなかったのか
359デフォルトの名無しさん
2022/09/26(月) 23:22:50.91ID:tIU7Oyti React実践の教科書、2021
この本には、クラスは出てこない。
すべて関数
この本には、クラスは出てこない。
すべて関数
360デフォルトの名無しさん
2022/09/27(火) 12:54:00.07ID:CMfXpwKQ なるほどなるほど
仕事でcobolとvbaしか使ったbアとなかったかb辜Iブジェクト試w向的な記述自荘フ馴染みなかっbスわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
仕事でcobolとvbaしか使ったbアとなかったかb辜Iブジェクト試w向的な記述自荘フ馴染みなかっbスわ
Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
元々phpやらjavaやらやってた人たちが分かりやすいからって使ってる感じぽいな
361デフォルトの名無しさん
2022/09/27(火) 13:46:50.26ID:t32oMnpk JSのクラスと
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる?
ちなみにReactのクラスコンポーネントはオワコンだけどね
Reactのクラスコンポーネントと
Reactの関数コンポーネントの区別出来てる?
ちなみにReactのクラスコンポーネントはオワコンだけどね
362デフォルトの名無しさん
2022/09/27(火) 14:04:56.54ID:CMfXpwKQ >>361
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる!?
・jsのクラス…いわゆるオブジェクト指向の考え方におけるクラス。継承やらなんやらできる。但し、プロトタイプベースであるjsではほとんど使われない
・クラスコンポーネント…super(constructor)みたいな書き方してstate管理するやつ。thisとか使いまくって見通しクソ悪い上にhooks使えないゴミ。progateや公式チュートリアルはこの書き方してるので初心者は騙される。
・関数コンポーネント…スタンダードなreactコンポーネント。読みやすい。神。
こんなイメージだけど合ってる!?
363デフォルトの名無しさん
2022/09/27(火) 15:39:04.72ID:D1kdTDEr364デフォルトの名無しさん
2022/09/27(火) 15:58:48.85ID:aOp1T7nJ >>360
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
> Reactに関しては、本やらネットやらで関数しか使わねみたいな記述は多く見てたんだけど
> 今配属されてるプロジェクトではクラスベースの書き方が多く見られたから
> 現場では何だかんだ使うんだ!って勝手に納得してたけどそうじゃないのね
Reactだから関数しか使わないということはないという認識
本やネットで見かけるサンプルコードはそのへんは主眼じゃないから参考にならんでしょ
クラスベースを頭ごなしに否定するものではないと思うよ
365デフォルトの名無しさん
2022/09/27(火) 16:41:51.18ID:MQqAKvI3 Reactコンポーネントに関してはクラスベースを頭ごなしに否定して構わない
366デフォルトの名無しさん
2022/09/27(火) 16:48:43.98ID:CMfXpwKQ >>364
頭ごなしに否定する気はないんだけど
(jsの)クラスベースの記述するメリットってどういうとこがあるの?
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
頭ごなしに否定する気はないんだけど
(jsの)クラスベースの記述するメリットってどういうとこがあるの?
配属されたプロジェクトのコードを初心者目線で見てクラスベースと関数ベースが混在して読みにくいな、って印象なのよ
367デフォルトの名無しさん
2022/09/27(火) 17:25:00.79ID:fOqsMNTu Reactに関しては関数コンポーネントしか使わないけど、それ以外の部分では臨機応変に使うのみよ。まぁそれでもclassの出番はかなり限定されるけど……
368デフォルトの名無しさん
2022/09/27(火) 17:28:55.43ID:YFL0VkhR プロジェクトメンバーにどうして混在してるのか聞いてみた?
369デフォルトの名無しさん
2022/09/27(火) 17:29:21.69ID:fOqsMNTu jsにおけるclassの出番って、大量に作成し、なおかつ副作用があるオブジェクトがある場合くらい……。
370デフォルトの名無しさん
2022/09/27(火) 18:13:32.56ID:dJevJ7EZ クラスコンポーネントは公式に非推奨扱いじゃね
371デフォルトの名無しさん
2022/09/27(火) 18:15:33.41ID:397xSubl 話の流れで関数コンポーネントかクラスコンポーネントかの話は終わってるのは分かるっしょ
372デフォルトの名無しさん
2022/09/27(火) 18:20:28.32ID:dJevJ7EZ Reactなので将来容赦なくクラスコンポーネントが無くなるかサポート切ると思う
373デフォルトの名無しさん
2022/09/27(火) 20:04:34.40ID:CMfXpwKQ >>368
うん
「本当はよくないんですけどね~~」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流(これが一番酷い)
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
うん
「本当はよくないんですけどね~~」
的なことを言ってたよ
他にも
・propsのバケツリレー
・コールバック関数使って 子→親へのprops逆流(これが一番酷い)
・アロー関数とnamed functionの混在
・typeとinterfaceの混在
・mui使ってるのに無駄にemotionでカスタムコンポーネント作成
等々………
どの現場もこんな感じなのかなぁとは思ったりするけど
やっぱ立ち上げ段階でコーディングルールやら設計やらある程度固めとかないとスパゲッティ化するんだね
374デフォルトの名無しさん
2022/09/27(火) 20:20:13.86ID:6DdS+dLy プロジェクトメンバーが現状を問題と捉えてるならどういう方針でコードを
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
書いていけばいいかお伺いを立ててそれに従うべきでしょ
もちろん自分の意見があるならそれも伝えて
375デフォルトの名無しさん
2022/09/27(火) 20:22:10.28ID:fOqsMNTu376デフォルトの名無しさん
2022/09/27(火) 20:39:34.88ID:CMfXpwKQ377デフォルトの名無しさん
2022/09/27(火) 22:23:16.69ID:/UUTRmF2378359
2022/09/27(火) 23:17:49.69ID:oW3s344K >>373
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
React実践の教科書、2021
基礎はこの本で良い。3日で読める
propsのバケツリレーは、
グローバルState である、useContext を使うと書いてある
これ以上に複雑なものは、Redux, Recoil, Apollo Client など
useMemo など、use何々にはどういう機能があるか、すべて見た方がよい
379359
2022/09/27(火) 23:29:13.30ID:oW3s344K Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
Stoyan Stefanov, 2017
この本には、createClass と書いてあるけど、
2017年6月には非推奨になっている
var MyComponent = React.createClass({
render: function() {
return React.DOM.span(null, "カスタムコンポーネント");
}
});
380デフォルトの名無しさん
2022/09/27(火) 23:53:21.49ID:BMrl8a7V なんでそんなにクラスコンポーネントの話にこだわるの?
381デフォルトの名無しさん
2022/09/28(水) 20:45:18.22ID:KHG5QcXL presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの?
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う?
で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの?
一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う?
382デフォルトの名無しさん
2022/09/28(水) 21:57:59.16ID:Km2fmn1T プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
それとは別に親から子にコールバック渡すのは極めて普通
useReducerなんかそういう使い方がほとんどだろ
その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート
383デフォルトの名無しさん
2022/09/28(水) 22:11:03.79ID:0Dahyjoe グローブステートにRxで変更通知でどうですか?
384デフォルトの名無しさん
2022/09/28(水) 22:46:08.76ID:HuYE1qae >>382
へー!なるほど!
その経緯は知らんかったわ!ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
へー!なるほど!
その経緯は知らんかったわ!ありがとう
propsの大原則として親→子→……
があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど
グローバルステート使わずに普通にコールバックして直接、
子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ
現場では割と普通のことなのね
385デフォルトの名無しさん
2022/09/28(水) 23:33:30.69ID:N1fcW8jX え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか…
今はどういうのが流行りなの?
今はどういうのが流行りなの?
386デフォルトの名無しさん
2022/09/28(水) 23:38:10.61ID:QcgKtZxa ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない?
387デフォルトの名無しさん
2022/09/29(木) 01:06:57.42ID:6obmiat7 >>385
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
ロジックはhooks
データ取得もhooks (swrやReact Query)
そのデータ取得hooksはデータを表示するコンポーネントで呼び出す
これは特にGraphQLではフラグメントコロケーションと呼ばれる
GraphQL以外でもRemixがコロケーションを実現してる
総じて変に分類するより凝集度を高くする方向に進化してる
388デフォルトの名無しさん
2022/09/29(木) 01:29:18.28ID:ffAnOOZb >>387
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん?
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと?
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして
その条件や処理をShowUnkoの中に全部書くのが流行りなん?
presentationalとcontainerの例だと
複雑な条件と処理をcontainerに記述して
算出した結果をpresentationalに渡してウンコの画像が出るけど
今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと?
…まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど
389デフォルトの名無しさん
2022/09/29(木) 07:28:27.58ID:+pwL/l2M >>386
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ……
390デフォルトの名無しさん
2022/09/29(木) 07:40:58.14ID:6obmiat7391デフォルトの名無しさん
2022/09/29(木) 08:51:14.08ID:DUgkcSyO Ruby on Rails では、コントローラーの肥大化を防ぐために、
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
Skinny Controller, Fat Model を推奨した。
その結果、モデルが肥大化した
そこで今度は、モデルの処理を減らすために、
Form Object, Service Object へ処理を分けた
また表示処理は、Presenter へ分けた。
それで、Form Presenter, Model Presenter が出来た
392デフォルトの名無しさん
2022/09/29(木) 08:54:50.37ID:vsyIBCv9393デフォルトの名無しさん
2022/09/29(木) 09:34:16.50ID:6obmiat7 >>392
そういうこと
そういうこと
394359
2022/09/29(木) 09:39:43.34ID:DUgkcSyO React実践の教科書、2021
この本には、カスタムフック・自作のHooks も書いてある
ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック
この本には、カスタムフック・自作のHooks も書いてある
ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。
共有ロジック
395デフォルトの名無しさん
2022/09/29(木) 09:52:34.39ID:clewMKt/ >>393
hooks限定である必要はないと思うが...
hooks限定である必要はないと思うが...
396デフォルトの名無しさん
2022/09/29(木) 10:45:31.47ID:6obmiat7 >>395
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ
元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ
React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ
状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ
397デフォルトの名無しさん
2022/09/29(木) 10:54:55.41ID:clewMKt/ ステートレスなロジックも意味なくhooksとして?実装するとでも言うのかい?
398デフォルトの名無しさん
2022/09/29(木) 11:20:12.57ID:vsyIBCv9 ごめん、一番聞きたかったのは
コールバック等使ったpropsの逆流(リフトアップ?)のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの??
コールバック等使ったpropsの逆流(リフトアップ?)のことなんだけど
例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど
わざわざリフトアップする必要ってあるの??
399デフォルトの名無しさん
2022/09/29(木) 11:41:08.20ID:RG+lw4Yl 俺の場合はコントロールの状態は極力propsで渡して
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた
そのコントロール起因で発生した状態の変更は
そのコントロールの外部からディスパッチして
またコントロールのpropsとして再投入するパターンに落ち着いた
400デフォルトの名無しさん
2022/09/29(木) 12:43:16.88ID:N+5tSsEm 全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き
401デフォルトの名無しさん
2022/09/29(木) 13:42:04.91ID:RG+lw4Yl propsて受け取った状態を
内部てstateとして別管理すると嵌まるパターンが多いね
内部てstateとして別管理すると嵌まるパターンが多いね
402デフォルトの名無しさん
2022/10/04(火) 20:36:43.24ID: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行ずつをコンポーネントにするのは必須ですかね?
テーブルが例えば最大行数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行ずつをコンポーネントにするのは必須ですかね?
403デフォルトの名無しさん
2022/10/04(火) 21:43:53.97ID:ZExEo8/e404デフォルトの名無しさん
2022/10/04(火) 22:08:33.94ID:R+w5qX88405デフォルトの名無しさん
2022/10/05(水) 00:29:27.00ID:zhKCpglg keyはどのみち付けないとWarning出るね
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ
バックエンド連携とかどうするつもりなのか知らんけど
普通に先頭20件だけ表示するように指定してやって
useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ
406デフォルトの名無しさん
2022/10/05(水) 10:49:27.30ID:RsX5Dgpw >>405
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
407デフォルトの名無しさん
2022/11/05(土) 23:06:02.94ID:uWVkhL+y react native詳しいニキ教えて
下部に表示されるメニューバー(以下、Menu)のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか?
下部に表示されるメニューバー(以下、Menu)のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか?
408デフォルトの名無しさん
2022/11/05(土) 23:47:25.78ID:ocl/XM+V 知らんけどrecoil-syncってのがあるらしいな知らんけど
409.NET MAUI HighSchool
2022/11/11(金) 12:32:52.36ID:kw0okeTL Metaが倒産したらReactどうなってしまうんだ?ってレス見たんだけどほんとどうなってしまうん?
誰かに買われるとか???
誰かに買われるとか???
410デフォルトの名無しさん
2022/11/11(金) 12:42:14.20ID:BY70aiHB Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない
411.NET MAUI HighSchool
2022/11/11(金) 12:43:10.48ID:kw0okeTL やっぱり大手に買われるのか…
412デフォルトの名無しさん
2022/11/11(金) 13:19:40.85ID:P8cdLDDc React NativeはMSが持っていきそう
413.NET MAUI HighSchool
2022/11/11(金) 13:20:58.38ID:kw0okeTL414デフォルトの名無しさん
2022/11/21(月) 04:31:38.78ID:9tdtmBpP415デフォルトの名無しさん
2022/11/21(月) 19:55:26.69ID:WHQv7Vmu >>414
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
416デフォルトの名無しさん
2022/11/21(月) 20:03:57.34ID:WHQv7Vmu (試みとしては面白いと思うけど)
417デフォルトの名無しさん
2022/11/21(月) 20:32:50.68ID:530w1iq8 hyperTextじゃん
418デフォルトの名無しさん
2022/11/21(月) 20:33:18.27ID:530w1iq8 textじゃねえやHyperScript
419デフォルトの名無しさん
2022/11/21(月) 20:54:44.24ID:F57+7x5h ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな
Lisp界隈の人はなんでもS式だからな
420デフォルトの名無しさん
2022/11/22(火) 07:44:22.59ID:XlS3y7OH421デフォルトの名無しさん
2022/11/22(火) 09:58:17.91ID:J3G+pIhw それならここに来る必要ないやろ
422デフォルトの名無しさん
2022/11/23(水) 04:11:09.42ID:TMK4+5Kw reactでjsx使わない話なんだけどダメ?
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
423デフォルトの名無しさん
2022/11/23(水) 04:25:07.28ID:mlnYnqLg jQuery絶対王者
424デフォルトの名無しさん
2022/11/23(水) 05:07:49.07ID:AN01Xhf0 >>422
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
425デフォルトの名無しさん
2022/11/23(水) 08:06:55.32ID:Wy3yaUuF html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
426デフォルトの名無しさん
2022/11/23(水) 09:09:30.10ID:6E3xEeS7 HTMLをHTMLとして認識しにくいのはイヤ
427デフォルトの名無しさん
2022/11/23(水) 13:34:39.63ID:Y3sgMMcN jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
428デフォルトの名無しさん
2022/11/23(水) 14:08:23.15ID:kuPI2CLi JSXの構文はもっと省略できるよね
レスを投稿する
ニュース
- 【無言】中国怒らせた高市首相→1週間だんまり、国民に実害も説明なし 中国問題を避けてスルー… ★5 [BFU★]
- 「日本はパンダがいなくなる状況に直面するだろう」 中国メディア、専門家の見方伝える [♪♪♪★]
- 止まらぬ「日本売り」 高市財政への懸念で進む金利上昇と円安 ★2 [蚤の市★]
- 【北海道】帯広vs釧路 不良グループが30人規模の大乱闘 廃墟での肝試しで鉢合わせトラブルに…自称解体工の男ら逮捕 [ぐれ★]
- ネット殺到「高市総理の責任」「完全に高市リスク」「負けるな」中国が水産物輸入停止→流石に総理批判の声も「どう責任取る?」 ★12 [樽悶★]
- 【福岡】ミカンの木に逆さ吊りになっていた高齢の男性が死亡 [雑用縞工作★]
- ネトウヨ「日本人の命を守るために中国とケンカしろ!え、薬が作れない?じゃあ死ね!」 こいつらの言う安全保障とはいったい何なのか? [314039747]
- 東大名誉教授「中国は誤った宣伝を繰り広げ、対立を煽り、経済の失敗による国内の不満を日本に向けている」 [903292576]
- 【悲報】Suica、セキュリティを突破されたのが販売されはじめる [347751896]
- 【悲報】米問屋「助けて!米がとんでもない量余ってるのに全然売れないの!でも絶対値下げしたくない…どうしたらいいの…」 [802034645]
- コンビニ店長、ついにキレる「なんであなた達にトイレを貸さないといけないんですか?私達はトイレレンタル業ではありません」 [329329848]
- 🏡
