React と React Native のスレ

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. 両方です。どっちの話題をしているかは文脈で判断してください 2 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:41:37.77 ID:izNw5U5z.net] >>1 乙 3 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:44:22.99 ID:7ubvtRZR.net] 姉妹スレ、こっちもよろしくな！ Vue vs React vs Angular その2 https://mevius.5ch.net/test/read.cgi/tech/1552122580/ 4 名前：1 mailto:sage [2019/03/09(土) 21:45:02.26 ID:7ubvtRZR.net] あれ？なんでID変わってるんだろｗ 5 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 13:53:47.03 ID:56gRJqyl.net] >>1 React と React Nativeをソースレベルで共通化する試み React Native for Web (★12,764) https://github.com/necolas/react-native-web React Native DOM (★3,025) https://github.com/vincentriemer/react-native-dom 6 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 14:06:23.16 ID:Q25DRVQl.net] 以前ちょっと触ってみただけだけど ReactNativeってimportしたエレメントじゃなきゃhtmlタグとかは使えんのよな 7 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 15:04:28.91 ID:5/+zyaBC.net] そんなんやりたいならガワだけネイティブのいわゆるハイブリッドフレームワーク使ってその中でreact使えば？react nativeじゃなく。 なんでそんなことしたいのか知らないけど。 8 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 15:21:54.07 ID:Q25DRVQl.net] 去年の秋頃だったか流行ってるみたいだったから試してみだたけ 別に本格的にアプリ作ろうなんて気はなかったしReactと同じように掛けるのかなと思ったけど認識違いだったってだけの話だよ 9 名前：デフォルトの名無しさん mailto:sage [2019/03/10(日) 23:12:46.62 ID:gfFE/T4s.net] Reduxの定番ミドルウェアお願いします 10 名前：デフォルトの名無しさん mailto:sage [2019/03/12(火) 03:44:15.71 ID:6KkHqTtx.net] ReactでCanvas使う場合ってcomponentDidMountでcanvas.getContext("2d")ってやるの正しい？ それとも持っとReact的にもっとスマートなやり方とかある？ 11 名前：デフォルトの名無しさん mailto:sage [2019/03/15(金) 22:53:51.78 ID:Q5qTdV/M.net] React Native公式ブログ https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059 　・ver 0.59 　・フックが使えるようになった 　・JavaScriptCore強化：　Androidで性能向上、64bitサポート 　・起動高速化のためのJSモジュールの遅延ロード機能 　(他省略) 12 名前：デフォルトの名無しさん [2019/03/23(土) 13:29:30.06 ID:Tnjwe5F0.net] JSXで書いたファイルを、 HTMLとJSに変換する方法があれば教えて頂けないでしょうか・・・。 13 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 16:40:55.66 ID:UK/ZLX81.net] >>12 前提知識が不明なのでとりあえず順番に 　1.　「node.js インストール」でググる 　2.　「npm react インストール」でググる 　3.　「webpack react ビルド」でググる 概要としては node上で動くnpmコマンドで React, webpack, Babelをインストールして、webpackでビルド それとJSXはJavaScriptの構文拡張でしかないから 変換(ビルド)で出てくるのはJSだけ 14 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 16:47:46.96 ID:Tnjwe5F0.net] >>13 失礼しました・・・。 node.jsはすでに入れてあり、reactはcreate-react-appからのを使っています。 webpackとbabelはreactを使う上でよく聞きました（ほとんど使えませんが・・・） ＞それとJSXはJavaScriptの構文拡張でしかないから ＞変換(ビルド)で出てくるのはJSだけ というのは、>>13さんのwebpackでビルドしてもhtmlは出ない（jsファイルのみ出来る）という事でしょうか？ 15 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 17:42:18.24 ID:SoDVK1qs.net] >>14 npm run build でdistフォルダに生成されてない？ package.jsonにscriptsって項目で npm run 〇〇 で使えるコマンド一覧が書いてあるから一度確認してみ 16 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 17:42:53.33 ID:UK/ZLX81.net] >>14 create-react-appなら npm run build でビルド出来る (裏でwebpackやbabelが動く) js(JSX)をビルドするだけならhtmlは出ない create-react-appならhtmlの最適化コピーを出すようになってる 元ファイルは public/index.html にあるはず 17 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 18:44:19.14 ID:Tnjwe5F0.net] >>15 >>16 ありがとうございます そういうことだったのですね・・・ 無事出力されました。 buildしたファイルにindex.htmlができました。 改行がされず最小の表示？(min.jsの様な）になっているのですが、 こちらをj従来の読みやすさ重視で表示できる様にする方法はありませんか…？ reactで作っている傍、知人にはhtmlとjsで同じ構成のを見せたくて、 reactで書いたのに別途htmlとjsで同じものを作るのも大変なので、そういった方法があればなと。 18 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 18:48:41.08 ID:4V4ijAbJ.net] Babel https://babeljs.io/docs/en/babel-preset-react @ babel / preset-react このプリセットには常に、次のプラグインが含まれています。 @ babel / plugin-transform-react-jsx など！ 19 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 18:57:04.81 ID:SoDVK1qs.net] >>17 npm run eject node_modulesのreact-scriptsをプロジェクトルートに移してから react-scriptsの中身を書き換えてビルドプラグインとかを抜けばいいけど 詳しいやり方はQiita漁ったら確かあったと思うから探してみ 20 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 19:08:09.96 ID:UK/ZLX81.net] >>17 ReactはJavaScriptで動的にページを構築するからhtmlファイル自体は殆ど空っぽだよ 21 名前：デフォルトの名無しさん mailto:sage [2019/03/23(土) 20:00:56.18 ID:SoDVK1qs.net] npm run eject やった後にできた scripts/build.jsの const config = configFactory('production'); ↓ const config = configFactory('development'); と config/webpack.config.jsの148行辺り path: isEnvProduction ? paths.appBuild : undefined, ↓ path: isEnvProduction ? paths.appBuild : paths.appBuild, に書き換えたら良さそうだね minify掛かってなくてもやっぱ見づらいけど 22 名前：デフォルトの名無しさん [2019/03/23(土) 23:26:19.57 ID:bpH0UPT8.net] とりあえずなんか見せるためだけなら、最終的にブラウザで表示されてる html だけとってこれば？ページ表示してブラウザの保存機能でここまでならできる。 js は react じゃない部分だけ取り出すのはむずいと思う。自分で書き直してあげるしかない。 23 名前：デフォルトの名無しさん mailto:sage [2019/04/27(土) 22:25:13.20 ID:Ud86wEGC.net] そういやReactでClassコンポーネント作るとき extends React.Componentって書くけど 自作クラスを中間クラスとして中継して継承するのってあんまやらないもんなの？ 24 名前：デフォルトの名無しさん [2019/05/01(水) 01:56:26.63 ID:rAvBxnqcP] React Native関連の記事を見てみると、親コンポーネントから子コンポーネントへ渡されたpropsは書き換え不可と書かれているのですが、正しいのでしょうか。 25 名前：デフォルトの名無しさん mailto:sage [2019/05/11(土) 11:04:25.28 ID:dFSThr/t.net] 継承はせずに単なるコンポジットかHigher Order Componentsでやってる 26 名前：デフォルトの名無しさん mailto:sage [2019/05/18(土) 13:26:28.87 ID:IcnCnpvi.net] classコンポーネントはほぼ使わないな 前はrecompose使ってたし今はhooksあるし 27 名前：デフォルトの名無しさん mailto:sage [2019/05/18(土) 17:08:52.29 ID:4C+see96.net] ほんとクラスのキッタネエ構文大嫌いだわ そもそも生まれてこなきゃ良かったのにオブジェクト指向つってもクラスベースじゃないっつーの es2015でねじ込んだヤツ呪われろ 28 名前：デフォルトの名無しさん [2019/06/11(火) 13:27:33.61 ID:vib91KXZ.net] React + Redux を使用したモダンフロントエンド開発 https://www.udemy.com/react-redux-basic/ これを1200円で購入したよって人いる・・・？ Udemyはしょっちゅう1200円セールしてるけど、これも1200円になったりするかな 現状の9600円となるとお財布が厳しくて・・・ 29 名前：デフォルトの名無しさん mailto:sage [2019/06/13(木) 10:37:32.28 ID:euXigNzW.net] React Native 公式blog 2019/06/12 https://facebook.github.io/react-native/blog/2019/06/12/react-native-open-source-update React Native 0.60, TurboModule, Lean Core, アップグレードコマンドの改善などの話 30 名前：デフォルトの名無しさん mailto:sage [2019/06/13(木) 10:44:16.38 ID:euXigNzW.net] React Nativeの改善に関するサブプロジェクトあるいは用語 Lean Core：　　 リポジトリの再編成(コンポーネントの分離) TurboModules： NativeModulesの新構造(JSIを使用した改善) Fabric：　　　　　UIレイヤの新構造(JSIを使用した改善) JSI：　　　　　　 JavaScript Interface, JS-Native間のブリッジを高性能化する仕組み 31 名前：デフォルトの名無しさん mailto:sage [2019/07/01(月) 11:44:34.42 ID:z9YX7xX6.net] みんなReduxの非同期処理どうしてる？ 32 名前：デフォルトの名無しさん mailto:sage [2019/07/01(月) 13:21:05.84 ID:PO46Zlgj.net] オレオレミドルウェア suspenseが来たらreduxもろとも捨てる 33 名前：デフォルトの名無しさん mailto:sage [2019/07/06(土) 17:25:24.51 ID:GNb7wQCP.net] React+Reduxやってるけど、MとVM的なものが分離されないのがつらくなってきた。 他のfluxフレームワークだとどうなんだろう。 34 名前：デフォルトの名無しさん mailto:sage [2019/07/06(土) 17:57:41.84 ID:TSNTMph3.net] 所詮プレゼンテーションレイヤーのフロントエンドにMを持ち込むタコは何を使っても同じ 35 名前：デフォルトの名無しさん mailto:sage [2019/07/06(土) 19:48:01.42 ID:GNb7wQCP.net] >プレゼンテーションレイヤーのフロントエンドにMを持ち込む なにかマウントとりたい意思は伝わってくるけどさすがに意味不明。 36 名前：デフォルトの名無しさん mailto:sage [2019/07/06(土) 19:58:59.36 ID:SiQr95jR.net] MVCとかMVVMとかって小さい単位での独立部品の切り出しを考えたら結構邪魔なんだよね 37 名前：デフォルトの名無しさん mailto:sage [2019/07/06(土) 20:56:58.71 ID:apheD/Vh.net] 道具は悪くない 設計者が悪い 38 名前：デフォルトの名無しさん mailto:sage [2019/07/07(日) 00:32:53.73 ID:eaenhCbM.net] Announcing React Native 0.60 https://facebook.github.io/react-native/blog/2019/07/03/version-60 39 名前：デフォルトの名無しさん mailto:sage [2019/08/04(日) 01:11:18.51 ID:k7LAQow0.net] 久々に動かしたらmetro bundlerなるものができてた ナンジャコリャ 40 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 09:00:38.45 ID:DTIEgPs0.net] 公式blogから React 16.9.0 およびロードマップの更新 https://reactjs.org/blog/2019/08/08/react-v16.9.0.html 新しいReact DevTools https://reactjs.org/blog/2019/08/15/new-react-devtools.html 41 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 11:07:23.70 ID:SpwmZ6gR.net] 半年ぶりか 滞ってるな 42 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 14:14:55.65 ID:fLRfCcm2.net] オワコンなのかな 43 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 16:05:56.38 ID:DTIEgPs0.net] ・Hooksのフォローアップの作業量を過小評価していた ・Concurrent Mode と Suspense for Data Fetching の作業に注力 　Facebookのサイトで実際に試していてリリースに向けて修正中 この辺で時間掛かっているらしい 44 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 23:37:57.69 ID:RmCywHfR.net] hooks はなあ モナド欲しい 45 名前：デフォルトの名無しさん mailto:sage [2019/08/26(月) 03:11:43.67 ID:xTwJabF+.net] create-react-app xxx とすると、 xxxというreactアプリ(フォルダ)が作られますが、 このxxxの部分を変更したい場合、そのままフォルダを編集してしまっても問題ありませんか？ 他にもpackage.jsonのnameもxxxになっておりますがこちらも変更したりして 46 名前：デフォルトの名無しさん mailto:sage [2019/09/26(木) 18:30:21.05 ID:OrvmZwJd.net] React Native 0.61 https://facebook.github.io/react-native/blog/2019/09/18/version-0.61 ・ライブリロードとホットリロードは新実装のファストリフレッシュに統合された ・0.60で支障があったCocoaPodsでのuse_frameworksの問題が解消 47 名前：デフォルトの名無しさん mailto:sage [2019/09/28(土) 09:05:26.72 ID:yWQY0maC.net] ReactNativeでaxios動かないんだが。。。 48 名前：デフォルトの名無しさん [2019/10/28(月) 18:32:37.59 ID:kOeifBSs.net] macOS上でのReact Native(Project Catalystを使用) https://twitter.com/brunolemos/status/1185636022346043392 https://github.com/react-native-community/discussions-and-proposals/issues/131#issuecomment-544189591 (deleted an unsolicited ad) 49 名前：デフォルトの名無しさん [2019/11/10(日) 09:20:57.59 ID:ZVDov6M9.net] vscode+react+material-ui使ってるんだけど下のコードでボタンが赤にならないのなんでだろう・・・ なんかPrimaryが紫になってるんだが・・・ import { createMuiTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/purple'; const mytheme = createMuiTheme({ palette: { primary: red, }, }); const useStyles = makeStyles({ button: { backgroundColor: mytheme.palette.primary.main, }, }); export default function CenteredGrid() { const classes = useStyles(); return ( <div className={classes.root}> <Grid container spacing={0} justify={'center'}> <Grid item xs={12}> <Button className={classes.button} variant='outlined'> botton </Button> </Grid> </Grid> </div> ); } 50 名前：デフォルトの名無しさん mailto:sage [2019/11/10(日) 09:43:45.39 ID:ZVDov6M9.net] ごめん自決して カラーのimportミスってた ×import red from '@material-ui/core/colors/purple'; ◯ import red from '@material-ui/core/colors/red'; スレ汚しすまん 51 名前：デフォルトの名無しさん mailto:sage [2019/11/28(木) 18:27:49.62 ID:GNo6CJtR.net] react-native doctor コマンド https://facebook.github.io/react-native/blog/2019/11/18/react-native-doctor プロジェクト設定や開発環境の診断と修正 52 名前：デフォルトの名無しさん [2020/01/20(月) 13:50:40 ID:NblZ7u1g.net] 初歩的な質問で申し訳ないのですが リセットCSSを適用させようとすると、スタイルがリセットCSSのみしか適応されません。 具体的には・・・ App.js import React from "react"; import { render } from "react-dom"; import "./reset.css"; import "./first.scss"; import { BrowserRouter, Switch, Route } from "react-router-dom"; こんな感じのをApp.jsに読み込ませているのですが、 reset.cssをインポートするとreset.cssのHTMLがリセットされたスタイルしか反映されず、first.scssは反映されません。 reset.cssを外しfirst.scssのみにすればちゃんとfirst.scssの内容がHTMLに反映されます。 HTMLのCSSをリセットしてから、オリジナル（first.scss)に変更といった事がしたいのですが、 どうすれば良いでしょうか？ reset.cssはこちらのHTML5 Doctor Reset CSSというのをreset.cssにコピペしてインポートしています。 html5doctor.com/html-5-reset-stylesheet/ 試しにfirst.scssの中身の最上部にHTML5 Doctor Reset CSSの中身を張り付けてみたのですが同じでした。 53 名前：デフォルトの名無しさん mailto:sage [2020/01/20(月) 14:09:55 ID:1C7qXqig.net] importされるのはcssじゃなくてjs(実質reset.css.js)だからね 問題はwebpackの設定じゃないの？ webpack entryでググってみたら？ 54 名前：デフォルトの名無しさん mailto:sage [2020/01/29(水) 20:07:56.78 ID:kAGOnFqI.net] 最近androidシミュでfetchが上手くいかなくなったけど何でだろ？ 55 名前：デフォルトの名無しさん mailto:sage [2020/05/23(土) 18:46:27 ID:wT2dUHsh.net] useStateとReduxって共存していいの？ 56 名前：デフォルトの名無しさん mailto:sage [2020/05/24(日) 13:54:49 ID:rk0sziuW.net] >>55 システム全体で必要なのはRedux Postする為にそのFormだけで必要なものはuseState って使い方してる 共存って点で言うならHooksか旧型式かを共存させなきゃ別にいいと思う 57 名前：デフォルトの名無しさん mailto:sage [2020/06/09(火) 16:01:35.59 ID:mEfhV+3L.net] React.ComponentとSuspenseを使ってリストを読み込んで表示するプログラムを書いているのだけど renderでメンバ関数を呼んで読込するとthisがつく変数(stateとか)が全てリセットされるよどうして？ リセットされる変数をstaticにすると動くようです 58 名前：デフォルトの名無しさん mailto:sage [2020/07/25(土) 07:59:44.00 ID:e6nmtc2O.net] 人工知能フレームワークのGpt-3がReact上で動くんだよなあ 59 名前：デフォルトの名無しさん mailto:sage [2020/07/25(土) 14:10:16.00 ID:ZlqyHRW3.net] >>57 まだそんな事やってるのか？ 早くHooksに移行した方がシンプルで使いやすいよ 60 名前：デフォルトの名無しさん [2020/08/05(水) 20:39:39.66 ID:HaLefuVq.net] reactでフォームの連動させたいんだけど 良いチュートリアルやサンプルをおしえてください 調べ方でも大丈夫です 61 名前：デフォルトの名無しさん mailto:sage [2020/10/06(火) 09:47:28.33 ID:FaC1oBor.net] >>60 連動？ って具体的に何やりたいの？ 62 名前：デフォルトの名無しさん mailto:sage [2020/10/06(火) 15:47:26.50 ID:3JbOTVG0.net] >>60 公式を嫁！ それか、オレの知り合いの本を嫁！ 以上。 63 名前：デフォルトの名無しさん mailto:sage [2020/10/07(水) 08:13:26.21 ID:9X+ETi/j.net] 他のフォーム要素を同時にどうかしたいって仮定するとonClickイベントやonChangeイベントのコールバックにメソッド噛ませればいいんじゃない？ 64 名前：デフォルトの名無しさん mailto:sage [2020/10/11(日) 20:19:56.38 ID:/PPF0LFF.net] Html,Javascriptのソースコードをreact nativeに書き直してるけどDom要素のID管理していたのを書き直すのが辛すぎる 何かよいライブラリないかなぁ 65 名前：デフォルトの名無しさん [2021/01/04(月) 01:07:02.79 ID:EMrQXkgT.net] iOSやAndroidアプリを作りたくてprogateのhtmlとJavaScriptと reactまでやったんですが、次に何をすれば良いか分かりません。僕は次に何を学べばいいですか？ 66 名前：(u＿・y) mailto:sage [2021/01/04(月) 11:37:19.32 ID:oZidFLop.net] (u＿・y)順序からしておかしくね (u＿・y)Androidアプリ作るならまずAndroid上でハローワールドだろ (u＿・y)Googleになんかアカウント作って登録あれこれやるんじゃねーの (u＿・y)Win以外のアプリを作るので難関になるのはそういった手順と環境構築絡みなので、 (u＿・y)周りに先生がいない状況で独学初心者がいきなりAndroidアプリってのはハローワールドまでに時間かかるぞ 67 名前：デフォルトの名無しさん mailto:sage [2021/01/12(火) 01:34:10.49 ID:dF2LSabj.net] 公式のドキュメントに全部書いてあるから全部読め 68 名前：デフォルトの名無しさん mailto:sage [2021/01/21(木) 19:04:19.07 ID:RZX+x1N+.net] Java から来て、最近 React はじめたんだけど、MVC 思想的なのは最近フロントエンドではなくなっていってる感じなん？ せめて View 部分は分けないと気持ち悪いんだけど、チュートリアルみても割とごちゃまぜなのよね… 69 名前：デフォルトの名無しさん [2021/02/14(日) 03:47:14.57 ID:wyKYn9A/.net] React の hookを初めてみてるんだけど、 これClassベースの機能で提供できないのかな？ functionなのに永続化を無理やりやってるようでコード読みづらい。 その永続化をuse接頭語のみで判断しなければならないという... functionじゃなきゃhookの機能が提供できない？？というモヤモヤ感が払拭できないです。 70 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:24:42.10 ID:qcnkr3Yb.net] 元々はクラスベースで提供されてた機能を関数コンポーネントでも使えるようにしたのがhookやで 71 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:26:06.17 ID:o9olz+i9.net] >>69 目に見える副作用をフレームワーク側に追い出して ユーザーからは副作用がないようにしてる設計は素晴らしいと思うけどね 72 名前：デフォルトの名無しさん [2021/02/14(日) 04:47:15.25 ID:wyKYn9A/.net] >>71 副作用がないようにしてる設計 それがclassベースでは出来ない？？って疑問。 >>70 ならhookがclassより上という事ではなくなる。 でも公式コメントでもclassよりhookのモデルが優秀みたいな書き方。 ただclassは無くさずこのまま残しますみたいな。 なんかfunctionを無理やり生存期間拡張してるところが 感覚的に違和感モヤモヤ。 hookの機能をclassで実装するとやりづらい箇所って、 同名メソッドを複数定義できる箇所ぐらい？ 73 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:59:08.67 ID:o9olz+i9.net] >>72 もちろんできるしそれを手動でやってきたのがクラス でもsetState呼ばなかったり状態にオブジェクトが必須だったりで色んなミスが起きやすかった それをフレームワーク側で全部やって ユーザーが書きやすくするのがHooks 人間がやるよりフレームワークがやる方が信頼性が高いし賢いからそこは任せた方が良いよねってことで生まれたと勝手に思っている 74 名前：デフォルトの名無しさん [2021/02/14(日) 05:41:48.27 ID:wyKYn9A/.net] >>73 だから、それ（hook）をclassべースで提供できないの？って言ってんの。 75 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 05:48:13.99 ID:eZAyHvHf.net] クラスはhookなしで同じことができるから提供する必要がない 76 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 07:45:04.97 ID:o9olz+i9.net] >>74 いやだからsetStateという汎用的な物しか提供できないっことね stateを自分で好き勝手いじれるのに それをライブラリが管理するって無理でしょ hooksは内部で対応するコンポーネントとその状態を管理してるから ライブラリとして提供できる 77 名前：デフォルトの名無しさん [2021/02/14(日) 13:32:40.22 ID:wyKYn9A/.net] >>76 分かんない人だな。 なんで今のclassベースの実装をこの話に持ち込むの。 hookの機能を”function”でなく、jsの”class”で実現できないの？っていう疑問なの。 78 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:00:51.86 ID:+4ZWExbH.net] お前もわからずやだな useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ 79 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:19:02.14 ID:wyKYn9A/.net] hookを知らないやつだったか。アホらし。 80 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:34:40.65 ID:kA8DCabn.net] 時系列的には クラスコンポーネント: 状態を扱える ↓ "ステートレス"関数コンポーネント: 状態を扱えない ↓ 関数コンポーネント+hooks: 状態を扱える と発展してきた つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの ただし クラスコンポーネント: 状態をコンポーネントが管理する 関数コンポーネント+hooks: 状態をフレームワークが管理する という違いがある これが今後のconcurrent modeやserver componentsで大きな違いになってくる フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント 81 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:46:29.94 ID:wyKYn9A/.net] >>80 この解説から見ると、自分の疑問は "状態をフレームワークが管理する" にはclass実装では不利なのか？向かないのか？ って事になる。ね。 82 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 15:15:15.08 ID:kA8DCabn.net] クラスコンポーネントのインスタンスはthis.〜で自由に状態を扱えてしまうからフレームワークには都合が悪い そこをthis禁止のように縛っていくとただの関数でいいやってなる 83 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 16:39:29.19 ID:DVWK/pJu.net] useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？ なんかそう言うパッケージ見たことあるぞ 84 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 16:59:03.97 ID:FekQTk3J.net] classコンポーネントにuseCallbackはいらんやろ 前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ class Foo extends React.Component { 　handleClick = (ev) => {...} 85 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 21:01:15.04 ID:K2VDjDyL.net] Ruby on Rails では、控えめなJS フレームワークのStimulu もある 規約で、HTML のdata-controller 属性で、JSファイル名・コントローラーが決まるので、 そこにイベント処理を書くだけ DOM・コントローラーは、多対多 1つのDOMは、複数のコントローラーで処理できる。 HTML内で、同じコントローラーを複数定義できる Stimuluは、this を使う。 同じコントローラーを複数定義したら、別のインスタンスを作る <li data-controller="a">1</li> <li data-controller="a">2</li> 86 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 21:03:03.46 ID:NOmukaW1.net] ス・レ・チ 87 名前：デフォルトの名無しさん mailto:sage [2021/02/15(月) 02:51:04.90 ID:E7fw/gtI.net] マジで障害者かな？ この板に巣食ってる人がいるのは認識してたけど 88 名前：デフォルトの名無しさん [2021/04/22(木) 04:19:05.03 ID:vjCFYs66g] 「社員全員が副業」を体現し普及するスタートアップ、売上前年比４倍が物語る今後 https://newswitch.jp/p/23029 「全員副業必須」型破りな経営がもたらした、社員の脱会社依存と幸せ https://ix-careercompass.jp/article/4586/ 社長も社員も全員副業　ひとつの会社に頼らない働き方 https://style.nikkei.com/article/DGXMZO66620470V21C20A1000000/ 「副業」社員で成り立つ会社登場　働き方改革の最先端 https://www.sankei.com/premium/news/200831/prm2008310006-n1.html 仕事を「時間と場所」から解放せよ！　週休3日、スーパーフレックス──新しい働き方は日本企業に通用するか https://www.itmedia.co.jp/news/articles/1809/28/news017.html 週休3日なのに年収を3倍にした男性の「時短術」 https://news.yahoo.co.jp/articles/090b7e720c2e8c6fb0d524b67a40182f70d8fdf2 “週休3日制”導入で売上4割増の例も…日本企業で普及期に、週30時間が常識に https://biz-journal.jp/2020/01/post_138414.html 「 リモートワークで手放すべき7つのこと」働き方改革の先の世界 https://tebanasu-lab.com/interview/9828/ 週休3日制をさらに進めた週休4日制 https://www.k-society.com/recruit/why-four-days-off-a-week/ 89 名前：デフォルトの名無しさん [2021/06/18(金) 09:52:07.92 ID:IQL7BQ/N.net] React Hooks + Reduxの利点を述べた記事をいくつか読んだのですが、 MVCでだめな理由がよくわかりませんでした。 複数のModelがReduxのStoreに一本化される: Modelをシングルトンにして、 Storeの内部で区分するところをModelのメンバとして区分する。 ViewからはActionを発行してReducerを通さないとStoreを更新できない: ViewはControllerに登録されたメソッドを通してしかModelを更新できない。 Storeの更新はViewに自動的に反映される。 Model(とそのメンバ、孫メンバ)がObservableであれば、Modelの更新を 自動的にViewに反映させることができる。 ではだめなんでしょうか。 90 名前：デフォルトの名無しさん [2021/08/10(火) 10:10:26.07 ID:0SSgF6Zh.net] Reactで関数コンポーネントで本気実装始めたんだが、 関数コンポーネント面倒くさ過ぎじゃね？ 関数コンポネント入門位の実装なら問題なかったんだが、 ちょっと込み入ったの実装しようと思ったら クラスじゃないんで、コンポーネントの自前メソッドを（子から親、親から子）公開するのとか そのTS型定義をどうするのとかうまく解決できんのか？これwww 91 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 10:18:58.12 ID:Yti8n+JL.net] 込み入った実装ってだいたい設計から間違ってるよね… 92 名前：デフォルトの名無しさん [2021/08/10(火) 10:22:58.46 ID:0SSgF6Zh.net] >>91 あんたが考えてんの具体的にどのレベルだ？ こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが コンポーネント間のメソッド呼び出しは結構多いぞ 93 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 11:17:59.39 ID:x9cqqxVb.net] 奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ 推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ 同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね 94 名前：デフォルトの名無しさん [2021/08/10(火) 11:27:05.53 ID:0SSgF6Zh.net] >>93 ！！ まだReact不慣れで困ってる 半年前にReact初めてそちはクラスベース（TS）だったので、 実装できない事は無かったのでこういった苦労はなかった >>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ どうだろう？ あんまり業務的なことを書くわけにはいかんけど、 親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、 コンポーネントが今回クラスから関数に変わったんで、 コンポーネント側にコンポーネント固有の機能（クラスん時はメソッド）が実装しずらくなって困ってる 関数コンポーネントだとここにメソッドとか置かないもんなの？ 95 名前：デフォルトの名無しさん [2021/08/10(火) 12:03:49.33 ID:0SSgF6Zh.net] 関数なんだから、オブジェクト指向的な実装はムリなんだろうな とりあえず、 ・クラス → モジュール ・プロパティ → モジュールの関数の引数 ・メソッド → モジュールの関数 に置き換えて実装してみるわ 96 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 12:28:03.76 ID:dmkhwQTT.net] 関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト その超基本的なところをわかってなさそう 他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ 97 名前：デフォルトの名無しさん [2021/08/10(火) 12:36:48.42 ID:0SSgF6Zh.net] いや、アトミックデザイン的に機能分割して その単位をオブジェクト指向的にデザインしてたわー−（前回プロジェクト） でもRender()しかやらん関数と、 その外にはみ出た処理で細切れ関数だらけになって、 コード読みにくいは、実装も美しくならんわー− ( ﾉД`)ﾄﾞｽﾙ 98 名前：デフォルトの名無しさん [2021/08/10(火) 14:00:37.21 ID:8kvO2lBn.net] Redux素晴らしいって言ってた人たちは今息してんのかな 99 名前：デフォルトの名無しさん [2021/08/10(火) 14:08:07.90 ID:UtkECLI3.net] >>97 この流れでアトミックデザインを出してくるのものすっごく薄っぺらい 100 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 14:15:30.49 ID:i+IrTlV6.net] >>99 アトミックデザイン使わず あなたが表現してあげたら？ 101 名前：デフォルトの名無しさん [2021/08/10(火) 14:57:48.57 ID:UtkECLI3.net] >>100 単純にいらんやろ 「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん 102 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 15:49:45.99 ID:LAvum0nL.net] >>101 コンポーネントの分割単位が伝わらんよ 103 名前：デフォルトの名無しさん [2021/08/10(火) 16:58:18.35 ID:UtkECLI3.net] >>102 この流れで分割単位の話なんかいらないじゃん 88から読み直してみ 104 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 18:51:43.55 ID:M/It2Akn.net] > コンポーネント間のメソッド呼び出し ？？？？？？？？？？ 105 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 19:15:22.44 ID:Yh+H2qBA.net] データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか 両方使う例があるなら見てみたい 106 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 19:38:32.34 ID:Qo7qEUjv.net] >>105 swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね だからクライアントサイド固有の状態を swrで扱おうとは俺は思わない apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない コンポーネントのローカルステート→useState, useReducer クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る) サーバーステート→swr, react query, apolloなど と使い分けてる 107 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 20:04:49.62 ID:Yh+H2qBA.net] >>106 参考になるありがとう 依存ライブラリ増加を嫌うことへの妥協案で >>105 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう 108 名前：デフォルトの名無しさん mailto:sage [2021/08/11(水) 19:43:56.70 ID:u2eXJHJo.net] >>90 ちゃんとhooks使ってるか？ 109 名前：デフォルトの名無しさん mailto:sage [2021/08/11(水) 20:53:01.89 ID:UmYmX+C7.net] >>108 ぶっちゃけクラスの方が書きやすく コードも綺麗だ（実力高い人の場合） 関数コンポーネントは 実装の自由度がhocksｂﾆその拡張ぐらｂ｢しかなく フレームワーク的なのが造りづらく感じてる 110 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 03:09:43.60 ID:YWc6Jioi.net] 実力が高いw 本気でそう思ってるならqiitaでもzennでもどこでもいいから記事に書いてみろよ 間違いなく日本中からボロクソに叩かれるよ 111 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 03:23:50.10 ID:c9YvWIsD.net] >>110 受け答えから見て実力が低そう 112 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 17:08:42.90 ID:qp3m1ZO5.net] >>109 クラス記法はこういう欠点があるからなあ ttps://speakerdeck.com/sonatard/coheision-coupling?slide=24 113 名前：デフォルトの名無しさん [2021/08/12(木) 17:57:27.67 ID:/tY+Xjfe.net] 大方の単細胞腦は、SQLDBとNoSQLDBの時がそうであったように 関数コンポーネントとクラスコンポーネントのどちらかに 絶対的な優劣をつけたがってんじゃね？ 今回も関数コンポーネントがマッチする場合と、 そうでない場合がありそうに見える とくに、関数コンポーネントは コンポーネントのインスタンスが自由に扱えない（扱えなさそう）から そういった処理の実装時に（React用で無いJSライブラリを無理やり動かしてたようなケースとか） トラブりそうな気がする 114 名前：デフォルトの名無しさん [2021/08/12(木) 18:16:18.47 ID:mo2yl2b6.net] 典型的な「分かってないことが分かってない」ヤツ 115 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 18:29:54.23 ID:1fVVrAZN.net] 優劣はどうでもよくてクラスコンポーネントは互換性のために残されてるだけってのがReactの立場 新しい機能の中には関数コンポーネントからしか使えないものが出てるしこれからも増える そもそも対等な選択肢ではないから議論する価値がない 状況に合わせて適応するってのが一番大事 116 名前：デフォルトの名無しさん [2021/08/12(木) 18:43:59.17 ID:/tY+Xjfe.net] >>115 >> 互換性のために残されてるだけってのがReactの立場 なんと！(; ･`д･´) 117 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 18:53:29.47 ID:1fVVrAZN.net] 今の公式ドキュメントやチュートリアルは古くてクラスコンポーネントが大きく扱われてるのが本当に良くない それはReactチームも分かってるからドキュメントを全面的に書き換えてる最中 もちろん関数コンポーネントとHooksメインで 118 名前：デフォルトの名無しさん [2021/08/12(木) 19:01:46.19 ID:/tY+Xjfe.net] >>117 なんと！(; ･`д･´) 119 名前：デフォルトの名無しさん [2021/08/26(木) 15:41:55.94 ID:CFvcLd/B.net] フック初心者ですが 「フックは関数のトップレベルのみで呼び出してください。」 とあります。この関数は関数コンポーネントの意味で合ってますでしょうか？ 120 名前：デフォルトの名無しさん [2021/08/26(木) 15:51:22.45 ID:CFvcLd/B.net] <Button1>と<Button2>で それぞれ内部でuseStateを使ってたら <Button1> <Button2/> </Button1> はNGになるのでしょうか？ 121 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:38:00.65 ID:gityixOl.net] >>119 > この関数は関数コンポーネントの意味 違う ifやforなどの制御構造の内側から呼び出すなということ 要するに関数コンポーネントの呼び出しごとにhookが実行されたりされなかったりしてはいけない なので?:や&&などと組み合わせるのもダメ 122 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:39:25.72 ID:gityixOl.net] >>120 それはOK それぞれのコンポーネントは独立してるから問題ない 123 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:45:57.37 ID:KmLAFOYJ.net] >>122 有り難い！ しかし判り辛いですね お題目だけだと 公式に具体例を上げてくれないと 勘違いしそう... 124 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 13:34:41.69 ID:gabOubiT.net] hookの実行順でレンダリング毎の同一性を保証してるってわかってれば当たり前のことなんだけどね 125 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 13:54:27.15 ID:KVovKrAi.net] 順番で状態を管理してるって一昔前の考えだと なんだそりゃって感じになるんだけど そもそも自分で管理するのはクソだから 全部フレームワークに任せちゃえってなってる React凄い 126 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:19:14.34 ID:B8clkCSU.net] 翻訳の問題かもしれんけど 「関数のトップレベル」という表現が判りずらい 「関数内部の最初の行あたり」で良くないか？ 127 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:45:49.48 ID:nZgJAtld.net] function Foo(props) { 　if (props.flag) useEffect(...) 　... 最初の行だけどアウト 128 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:48:30.00 ID:KVovKrAi.net] 「同じフックが常に実行されるようにすること」 これでよくね？ 129 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:49:19.59 ID:B8clkCSU.net] 関数のトップレベルの訳としての話しだよ(´Д`) 130 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:57:29.79 ID:rY0RNuZ6.net] モジュールのトップレベルもわからない？ それじゃトップレベルawaitも分からないしJSやるの無理やろ 131 名前：デフォルトの名無しさん [2021/08/28(土) 04:17:28.74 ID:5cd2kTad.net] useCallback これっている？ fnのMemoならMemoってキーワードも名称から抜けてるし useMemo(() => fn, deps) と同じならなおさら... 132 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 04:35:56.44 ID:52Q/kK4D.net] fnをファットアローでインラインに書いてみ 133 名前：デフォルトの名無しさん [2021/08/28(土) 04:42:56.91 ID:5cd2kTad.net] うー−ん！初学者だからなのか意味わからんです 134 名前：デフォルトの名無しさん [2021/08/28(土) 04:46:30.48 ID:5cd2kTad.net] useCallback(fn, deps) が useMemo(() => fn, deps) こう書けるって事なんじゃないですか？ 135 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 04:54:08.75 ID:aWJHFkdS.net] useCallback((event) => {...}, deps) を useMemo(() => (event) => {...}, deps) って書きたいかって話 136 名前：デフォルトの名無しさん [2021/08/28(土) 05:10:24.97 ID:5cd2kTad.net] >>135 良い！ そっちのが良い！ fnのメモなのに、useMemoCallback()になってないので直観的に思えない 初学者だと、ぱっと見CallbackするにはuseCallback()が必須に見える 理由はMemoの文字が入ってないから 137 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 06:24:50.37 ID:P0+dXebs.net] それ言ったらuseMemoなんてuseState使えばいいし内部でstate使ってるのにuseNemoStateじゃないの直感的じゃないよね 138 名前：デフォルトの名無しさん [2021/08/28(土) 08:24:29.02 ID:5cd2kTad.net] useCallback だと名称から、 コールバック使いますよ！の宣言に見えると言っている 実際はコールバックをメモしますよ！だから コード読むとき直感的でないと言っている 実際、初学者で関数コンポネント内でコールバックを定義するときは useCallback()を使わなければならないと思いこんでいる人が少なからず居ると思う 139 名前：デフォルトの名無しさん [2021/08/28(土) 10:18:42.44 ID:rJz23Izt.net] Ionicと比べた場合のReact nativeのメリットはアプリの動作速度が速いところ？ 140 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 10:19:30.77 ID:rJz23Izt.net] ageてしまって申し訳ない 141 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 10:59:30.05 ID:4fr1GGj/.net] >>138 初学者は > useCallback()を使わなければならないと思いこんでいる で丁度いい 142 名前：デフォルトの名無しさん [2021/08/28(土) 11:35:50.02 ID:5cd2kTad.net] >>141 その心は？ 143 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 12:30:31.08 ID:fYYl/4Rj.net] >>142 不要なuseCallbackを書いても実害はない 超大規模ならチリツモでパフォーマンスに影響あるかもしれないが初学者には関係ない 対して必要なuseCallbackを忘れるとuseEffectやReact.memoに影響しうるが初学者には気付きにくい 最初は愚直にuseCallback書いて後から不要なケースを学べばいい 144 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 13:47:14.15 ID:17Xf1f5F.net] >>143 なるほど！ その意味であえて関数名もそうしたんだろうか... 145 名前：デフォルトの名無しさん [2021/08/28(土) 23:14:15.55 ID:5cd2kTad.net] https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 "カスタムフックは技術的にはReact機能ではない" って ステートレス関数に状態を保持する機能が jsに元よりあるという事でしょうか？ 146 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 23:39:41.08 ID:tYNkdatt.net] カスタムフック===ユーザー定義フック 利用者(アプリケーション)で定義するものであってReactが提供する機能ではない 147 名前：デフォルトの名無しさん [2021/08/29(日) 00:17:55.75 ID:V85oGWwE.net] >>146 それは了解してた！（質問を間違えた！） フックを実現する技術（ステートレス関数に状態を保持する機能）は ＪＳに元からあるという記述が公式にあったようにおもうのだけれど、 それは何？って事が言いたかった... 148 名前：デフォルトの名無しさん [2021/08/29(日) 01:51:35.47 ID:V85oGWwE.net] >>147 前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく JSのクロージャーと array.push と array.pop とかで実装できるって事かな？ 誤りありましたらご指摘下さい 149 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 03:34:12.05 ID:pzZWZODD.net] 引用しろボケカス 150 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 12:10:00.26 ID:OiCqCGE7.net] >>148 前のリンクの文意というのが > Since Hooks are regular JavaScript functions, you can combine built-in Hooks provided by React into your own “custom Hooks”. ら辺のことなら全然違う Reactが提供する「組み込みフック」はJSの普通の関数だからそれを組み合わせて「カスタムフック」を作れると言ってるだけ Reactが「組み込みフック」をどう実装しているかは触れてない 公式にあったという記述がなんのことかわからないがユーザー向けのドキュメントにReactの内部実装について書いてあるとは考えにくいので何か勘違いしてるんだろう 151 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 12:12:17.85 ID:OiCqCGE7.net] もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実 詳しく知りたければソースを読めばいい https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js 152 名前：デフォルトの名無しさん [2021/08/29(日) 13:18:38.44 ID:V85oGWwE.net] >>150 >>147 で言ったように、それは最初から解ってる 聞きたかったのは、フック自体の実装方法だよ！ >>151 そりゃそーーだ 153 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 13:41:49.73 ID:1XJvcbdc.net] >>152 お前さぁ・・・ フック自体の実装方法が知りたいならそう書けよ 無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ つーか5ch開く前にすることあるだろ 154 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 14:30:21.63 ID:LbdE2Z/6.net] >>152 preactのソースを読め わずか400行そこらでhooksを実装してる 俺がここ数年で見たコードで最も美しいコードだ 型もついてるからめちゃくちゃ読みやすい https://github.com/preactjs/preact/blob/master/hooks 155 名前：デフォルトの名無しさん [2021/08/29(日) 21:46:55.62 ID:V85oGWwE.net] >>154 (; ･`д･´) 156 名前：デフォルトの名無しさん mailto:sage [2021/09/18(土) 13:05:29.83 ID:ZtgFEKoc.net] reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？ 157 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 00:13:37.74 ID:fIDZ4k/Q.net] 最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？ reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？ 158 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 00:18:04.28 ID:pwmEuNTH.net] >>157 keyを使え チュートリアルにも乗ってたはず 159 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 01:13:11.44 ID:GKDt5rSn.net] >>157 ならない 160 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 02:01:14.08 ID:Rr9hULkc.net] >>157 要素を別コンポーネントにしてReact.memoする その場合も156が書いてるようにkeyは必須 でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ 161 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 08:25:15.93 ID:fIDZ4k/Q.net] >>158,159,160 �dクス もうちょい調べてみるわ 162 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 12:16:07.93 ID:GKDt5rSn.net] >>161 リストの出力の場合 アイテム毎にkey必ず振らなければない key無いのはバグだからね コンソールにエラー出てるはず 163 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 12:53:40.75 ID:2GdVuLmq.net] keyが必要なのは確かだがそれが影響するのはリアルDOMの更新 keyがないと > reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど が機能しなくなる 本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo 164 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 18:39:05.51 ID:0kyk7DvV.net] ID:GKDt5rSn の的外れ感 165 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 19:00:16.83 ID:wV0zqhwC.net] ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？ テストユーザーは50名程度の予定です 166 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 21:16:44.39 ID:hoT+CjfW.net] それReact関係ないよね 167 名前：デフォルトの名無しさん mailto:sage [2021/09/22(水) 02:10:39.83 ID:LiQqK68K.net] うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー 168 名前：デフォルトの名無しさん mailto:sage [2021/09/22(水) 15:53:36.27 ID:LiQqK68K.net] >>167だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ ありがとう 169 名前：デフォルトの名無しさん [2021/09/25(土) 21:37:04.38 ID:h7oOvGYh.net] Vue.jsだと公式サイトからリンクにawesome-vueってのがあって https://github.com/vuejs/awesome-vue ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、 これのReact版とか無いですか？ 170 名前：デフォルトの名無しさん [2021/09/25(土) 21:39:38.06 ID:h7oOvGYh.net] 言った直後にまんまのがあった... awesome-react awesome-react-components 笑 171 名前：デフォルトの名無しさん mailto:sage [2021/09/25(土) 23:03:28.71 ID:PknKU9DC.net] awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス 172 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 11:55:16.25 ID:DYuWVLW4.net] JSだとホットリロードが機能するけどTSだと機能しないのだけど これはTSの自動トランスパイルが機能してないってことですかね？ 173 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 11:57:06.64 ID:ZRFQgXut.net] >>172 ？ 174 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 12:09:11.49 ID:DYuWVLW4.net] 再起動したら直ったわ 175 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 17:29:52.40 ID:s3NqJ5bC.net] reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick＝｛clickHandler｝みたいに書くじゃない このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ？ clickHandlerを関数を返す関数にして、 clickHandler ＝（props）＝＞ () ＝＞｛‥｝ コンポーネントにはonClick＝｛clickHandler(props)｝ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと 176 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 18:22:37.60 ID:Tl6wB3bi.net] >>175 JSの基本機能にクロージャーというのがあってだな なんと！clickHandlerの中から外(つまりコンポーネント)の変数を参照できるんだよ！ const clickHandler = () => { console.log(props.xxx) } useCallback使ってるならdepsに並べる const clickHandler = useCallback(() => { console.log(props.xxx) }, [props.xxx]) 177 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 21:49:04.22 ID:s3NqJ5bC.net] >>176 変数名をpropsにしたのが紛らわしかったかもしれんが ｛arr.map((v)＝＞｛ 　　＜ComponentA　key＝v.Id　onClick＝｛clickHandler｝ /＞ ｝)｝ みたいなことをやってるときにclickHandlerの処理の中でvを参照するにはどうしたらいいのかな？っていうのが聞きたいことなんだが、クロージャ？にあたるのか？ 分かりにくくてスマン 178 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 22:23:47.81 ID:yTRBGUiM.net] memo 化したコンポーネントで ComponentA をラップし props と clickHandler を受け取って onClick=｛() => clickHandler(props)} とする 179 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 22:25:37.88 ID:84Zwu3SC.net] >>177 それならComponentAにvを渡してその中で onXxx={(ev) => clickHandler(ev, v)} 180 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 23:04:47.64 ID:s3NqJ5bC.net] >>178 なーるほどなぁ、面倒だけど確かにそれならできそう >>179 おー？これはuseCallbackで包めるんか？ちょっと明日試してみるわ おまえらthx 181 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 23:30:14.37 ID:pKLoFE48.net] >>180 input等のdomにマップされるコンポーネントに直接渡す関数をuseCallbackする必要はない 182 名前：デフォルトの名無しさん mailto:sage [2021/09/29(水) 23:01:40.05 ID:lzBphG+K.net] >>179 あ、これ>>178と同じこと言ってるんか、勘違いしてたわ このためにラップしたコンポーネントを作らなきゃいけないってのはなんかイマイチだけどそれくらいしかなさそうね。ありがとう 183 名前：デフォルトの名無しさん mailto:sage [2021/09/29(水) 23:13:02.36 ID:VRCLPgDh.net] >>182 え？177は俺だけどラップしたコンポーネントってなんのことかわからねーぞw ComponentAもおまえが作ってるんならそんなのいらないだろ 184 名前：デフォルトの名無しさん mailto:sage [2021/09/30(木) 12:42:41.23 ID:TAcHeIwJ.net] componentAが自作かそうでないかに関わらず言ってることは同じだわな どちらも子コンポーネント内で実装しないといけないことを言ってるんだから 185 名前：デフォルトの名無しさん mailto:sage [2021/09/30(木) 14:23:21.02 ID:uxDakMZz.net] 質問主はどう見ても>>157なんだから自作前提でよくて余計なことは省いた方がいいと思うね 186 名前：デフォルトの名無しさん mailto:sage [2021/10/03(日) 21:36:14.94 ID:9xTT9AKy.net] material-uiのspeed dialをネストしたいんだけど無理かな？speed dial actionの代わりにspeed dialそのものを子に持ちたい 187 名前：デフォルトの名無しさん [2021/10/19(火) 10:58:01.20 ID:I/uBXkGk.net] VSCodeでsassファイル保存時に自動フォーマット掛けたいですけどそれ出来る拡張ありますか？ 188 名前：デフォルトの名無しさん [2021/10/20(水) 21:47:12.22 ID:VGECjsMp.net] >>187 marketplace.visualstudio.com/items?itemName=BdSoftware.format-on-auto-save 標準搭載してほしいわ 189 名前：デフォルトの名無しさん mailto:sage [2021/11/09(火) 10:45:02.06 ID:tf9NUtHx.net] イベントと副作用フックどっちでもいい時に、どちらを優先して使うほうがより良いとかってある？ keyを入力するテキスト入力欄、valueを表示するテキスト表示欄がある keyが変化するとデータを鯖から取ってきてvalueに設定したい 副作用フックでkeyを監視するか、key入力欄の変更通知イベントを使うか、どっちでもいいけど、どちらかというとどっちが良いか？ 190 名前：デフォルトの名無しさん mailto:sage [2021/11/09(火) 11:13:14.15 ID:ppTxKkYh.net] 入力欄の変更イベントで十分だろ そしてuseDefferedValue経由の値でサーバを叩く 191 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 09:45:52.91 ID:gjeYELEc.net] 素朴な疑問 状態を持ったり副作用を持ったりするコンポーネントってぶっちゃけclassのほうが可読性いいよね？ フックは書く時は楽だけど後で見るとナンジャコラ？ってなる 192 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 10:40:45.63 ID:yi3gjxGP.net] >>112を読んでないってわかんだよね 193 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 11:55:31.75 ID:gjeYELEc.net] 例えばの話、コンポーネントの初期化処理と終了処理はどこでやるの？って新人の疑問に対して classコンポーネントなら 見たまんまcomponentDidMount、componentWillUnmountだよ このメソッドを用意しとくとこのコンポーネントを持って管理してるフレームワークさんが、 いい感じのタイミングで呼び出してくれるよ こう教えてやれば、直感ですぐさまなるほど、と理解して貰える しかし関数コンポーネントでは純粋関数とは何か、副作用とは何か、フックとは何か、useEffectとは何か、useEffectの引数は何か、引数の戻りの関数は何か ということをよく理解して頭の中で読み替えないといけない なのでじっくり時間をかけて教えても、それでも理解するには時間を要する 関数コンポーネントはこんなのが無数にある だから理解しにくい タイピングの文字数は減るので書くのは楽だ、ということは確かだが 理解しやすさで言うと、ちょっとね、、、 194 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 16:48:12.54 ID:QzSwOiy0.net] 宣言的なReactを命令的に読み替えるんじゃ永遠に理解できないだろうな そういう教え方をされる新人がかわいそうだし同情しかない 195 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 20:00:29.63 ID:h3betjKK.net] reactでいくつかのファイルがあって保存(ctrl+s)すると コンパイルしてくれるファイルとしてくれないファイルがあるんだけど違いってなんですか。。。 196 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 20:55:02.32 ID:Wtj2hevs.net] 使ってるide (vscodeとか) のスレで聞け 197 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 21:47:40.34 ID:h3+MjybB.net] >>193 クラスって何？メソッドって何？継承って何？ 198 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 22:25:06.52 ID:N4+deCyE.net] >>193 クラスだとマウント／アンマウントじゃなくてpropsが変わるたびに開始処理終了処理するってなると全然違うこと教えなきゃダメだろ 199 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:22:44.81 ID:3dlOBCKi.net] レアクトは宣言的だけど実用的なアプリケーションは全て有状態の手続きの塊じゃん？ ということはレアクトと「この不都合な現実世界」を上手いこと切り離して管理する方法が必要なんだよ それがオブジェクト指向ってわけでね 関数コンポーネントは分離すべき手続きと宣言が渾然一体となっていてわかりにくい オブジェクト指向を使えば オブジェクトとオブジェクトを描画する純粋関数に分離することは容易い それがrenderメソッドな訳だな 200 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:44:06.97 ID:aYAbIgl/.net] レアクト 201 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:47:56.13 ID:F8B2t3Oi.net] また知恵遅れクラス信者か この流れ何度目だよw 202 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 01:15:46.87 ID:3dlOBCKi.net] 関数が優位に立つのはDOMのレンダリングだけ 状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい 関数は状態が無いものだけを扱うべき 203 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:26:11.67 ID:sAyjJzQx.net] 状態や手続きを分離する方法はオブジェクトだけじゃない モナドもそれだしReactの場合は代数的作用が背景にある 204 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:56:21.14 ID:JMkvun5L.net] >>71辺りからの話を繰り返してるな 高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに 205 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 08:07:20.27 ID:3dlOBCKi.net] >>203 できる、と、簡単にできる、は全く違うからなぁ モナドもあるしとか言っても、それはオブジェクト指向の簡単さ、理解しやすさ、使いやすさには到底及ばないわけだよ 206 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 08:56:13.25 ID:O/tzCGdy.net] それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな 207 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:18:03.07 ID:5if92K6E.net] 理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない それよりReact18がベータになったことだしConcurrent Renderingを知るべき そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう 208 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:23:00.26 ID:5if92K6E.net] Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題 そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね 209 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:29:08.68 ID:5if92K6E.net] 将来のReactではマウント・アンマウントも複数回行われるようになる これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう だから従来のライフサイクルという考え方だと破綻する useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる どちらが理解しやすいかという次元の話じゃないんだよね 210 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 13:11:55.12 ID:3dlOBCKi.net] それはuseStateを使うかlet変数宣言を使うかってのと同じこと 行儀の悪いコードはファンクショナルでも好きなだけ書ける ようするにプログラマの腕とモラルの問題 ファンクショナルがクラスに対して優位と示す証拠ではないな Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら 新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう 実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは initializeComponent componentDidMount componentWillUnmount disposeComponent この辺りだろう なんてわかりやすいんだ！ そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな 仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前 進化しないならそれはベンダーの怠慢 211 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 14:18:18.92 ID:I+5yMFIL.net] ライフサイクルが変わってもuseEffectは影響を受けない なぜならライフサイクルを扱う機能ではないから ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw まぁ、取り残されたければそれでいいんじゃない？ ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ 本気で主張したけりゃここに行きな https://github.com/reactwg/react-18/discussions 212 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 15:19:55.65 ID:3dlOBCKi.net] 本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ 最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ useEffectはライフサイクルじゃない！ってんなら useInitializer useFainalizer この２つのフックはオフィシャルに提供した方がいいだろね それをしないというのはベンダーの怠慢でしかないよ そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます！ なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ 冷静に考えてわかりにくいだろ？　空配列ってさ 213 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 16:20:58.58 ID:yPpHDEE/.net] 本当に化石のような石頭だな 現場でもさぞかし迷惑な存在だろう ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ 間違った理解 コンポーネントがマウントされたら一度だけxxを実行する コンポーネントがアンマウントされたら一度だけyyを実行する (やや)正しい理解 コンポーネントがマウントされてる間はzzの状態を維持する zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々 useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる 実際はマウントされてる間とかってのをもっと一般化して 正しい理解 依存配列が変わらない間は状態を維持する と考える 空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ いつまでも古い考えに固執しないでちゃんと勉強して？ 214 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 16:43:19.19 ID:3dlOBCKi.net] >>213 で、それは手続きだらけの現実世界には対処不能、と ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない useEffectという本来違う目的のためにあるものを、使うしかない これがファンクショナルの限界 例えばコンポーネント初期化時にログを追記したい、とかな 「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ 215 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 17:09:36.68 ID:tb6GSOae.net] ファンクショナルの限界じゃなくてお前の限界な 216 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 18:20:41.19 ID:te8WLqUU.net] うわあ・・・ ID:3dlOBCKi ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html 217 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 18:34:14.46 ID:3dlOBCKi.net] >>215 いや、ファンクショナルの限界 ファンクショナルでは本来の目的から外れた使い方をしなければない 初回だけ処理したいだけなのに、状態を維持するファンクションを強要される 218 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 19:03:14.82 ID:wacBz6NM.net] 使う人が増えると残念な人も増えるいつもの光景 219 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 22:26:22.51 ID:fTWvydC+.net] こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある 元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる 作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな 220 名前：デフォルトの名無しさん mailto:sage [2021/11/19(金) 09:42:11.48 ID:J0mGbVeO.net] >>196 webpack-dev-server知らんのは流石に論外やろ 221 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 14:16:11.00 ID:knw1x1gk.net] 関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな 所詮は構文の違いでしかない 属性を使うかuseStateを使うか Reactにコールバックをどうやって教えるか それだけだ オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する 関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった 222 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 17:48:46.47 ID:UWSF5n1L.net] お前がそう思うんならそうなんだろう お前ん中ではな 223 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 17:55:48.39 ID:Wm1mwUDt.net] オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな 所詮は構文の違いでしかない こうですか 最後は全部ただの機械語ですしね！ 224 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 20:40:46.53 ID:1yBKup76.net] 例えばさ、 ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう？ function useMyForm () { // 略::フックを使った汚いコード return { /* 美しいオブジェクト */ } } function MyForm () { const f = useMyForm() return <…..略 } useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、 代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね 詳細をカプセル化して、外から見て美しいオブジェクトを作る これはオブジェクト指向の基本にして、真髄 ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ 例えばclass MyFormBehaivorとかね で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね 結局さ、同じなんだよ、やってることが 同じなら、見た目に読みやすい方がいいに決まってる で、読みやすいのは断然、オブジェクト指向 QED 225 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 20:55:13.47 ID:SJq+O3t2.net] しつこい 226 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:04:01.25 ID:5qd0Nwtv.net] ふむ、反論ができなくなったのかな？ 227 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:16:31.74 ID:zzbPLRQo.net] 石頭の老害相手に反論しても無駄 228 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 22:35:19.11 ID:UWSF5n1L.net] 馬鹿は論破できない 229 名前：デフォルトの名無しさん mailto:sage [2021/11/22(月) 10:00:05.25 ID:HTg16b0P.net] 今どきfunctionって書くか？ 230 名前：デフォルトの名無しさん mailto:sage [2021/11/22(月) 14:12:56.45 ID:yxcpONXb.net] 書かない 231 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 10:05:55.29 ID:OvhoAu9V.net] ボタン連打するけしからん奴対策の定番ライブラリ教えてよ 送信フラグ管理はもう疲れた あ、いちおクロスプラットフォームのライブラリでヨロ 232 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 16:35:10.63 ID:ZR9gqQ7Z.net] ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして 実処理を useEffect(()=>{if(anyState){ // 実際したい処理 setAnyState(false) }},[anyState]) にしとけば連打されても大丈夫じゃね？ 233 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 18:25:47.16 ID:C14FVshC.net] ボタンが押されたらボタンをdisabledにすればいいじゃん 234 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 19:41:18.43 ID:L4TUqIiQ.net] わろた 235 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 19:41:36.25 ID:50htZSL3.net] それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある 236 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 20:19:23.32 ID:mMKMUGdN.net] JavaScriptはシングルスレッド 237 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 19:49:21.16 ID:56/uA2M5.net] function useMyHook() { const [a, setA] = useState(0); const [b, setB] = useState(0); return { foo: () => a+b, bar: () => a-b, }; } function MyComp () { const myhook = useMyHook(); useEffect(() => { if (myhook.foo() > 100 && myhook.bar() < 20) hoge(); } }, [???]); return <Aaaaa />; ???はどう書くのが正解？ 推移的に依存してるのはa, bだがa、bには直接アクセスできない 238 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:06:59.76 ID:4QzxG6KH.net] useMyEffectもuseMyHookでやるべきじゃねーの それができないならuseMyEffectを foo: useCallback(() => a+b, [a, b]), bar: useCallback(() => a-b, [a, b]) とすれば[???]は [myhook.foo, myhook.bar] 239 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:07:50.83 ID:4QzxG6KH.net] とりあえずこれ読んどけ https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ 240 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:11:27.69 ID:4QzxG6KH.net] >>238 1行目訂正 useEffectもuseMyHookでやるべきじゃねーの 241 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 22:16:00.54 ID:zN0DCcOz.net] >>238 thank you. 242 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 14:16:37.56 ID:/W89KInL.net] function MyComp () { const vm = useMyCompViewModel(); return <略 />; } MyCompのユニットテストする時ってどうしてる？ つまりuseMyCompViewModelをインジェクトしたい時 243 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 15:51:56.43 ID:5zVi58LJ.net] https://github.com/testing-library/react-hooks-testing-library 244 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 19:22:47.15 ID:/W89KInL.net] >>243 �d でもこれフックのテスト用なのでは？ そうじゃなくフックをモック化してコンポーネントをテストしたい 245 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 21:33:33.67 ID:Rfcvtfm3.net] テストだけならこんなんで十分じゃね function MyComp (props) { const useViewModel = props.useMyCompViewModel || useMyCompViewModel const vm = useViewModel(); return <略 />; } 246 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 21:48:07.68 ID:lkzI+wPD.net] 経年劣化に耐える ReactComponent の書き方 https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component 247 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 22:23:21.01 ID:SYjhTw/G.net] >>245 なるぼどなぁ これで少しやってみよかな 248 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:45:52.40 ID:zttGewLv.net] サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい どうすればいい？ソースコードを書き換えるのは無しで 249 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:52:28.47 ID:GrxR7SwR.net] プルリクエスト 250 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:05:31.62 ID:zttGewLv.net] function IWantEasyTestableComponent(props) { return (<View> <FackingStatefullComponent foo={props.foo} /> <MyAwesomeStatelessComponent {…props} /> </View>); } こういうの、どうすりゃいいんだ？ 野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる できれば使いたく無いが、使う前提で予算と工程を組まれる オープンソースのダークサイドやね 251 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:21:22.59 ID:GrxR7SwR.net] jest.mock('path/to/FackingStatefullComponent') 252 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:27:06.61 ID:RI4P88iz.net] >>251 ソースコードの書き換えとどう違うんだそれ？ 253 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:44:03.50 ID:g9v4y15i.net] 依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく モジュール自体を上書きしてしまうことで無理やりインジェクションするということか 違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか 254 名前：デフォルトの名無しさん mailto:sage [2021/12/12(日) 21:59:15.39 ID:wsjthnMX.net] LogBox邪魔すぎる 機能OFFにできんのかコレ 255 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 09:27:19.20 ID:vskoYLeQ.net] 状態、副作用は親コンポーネントに持たせるべきか 子コンポーネントに持たせるべきか 256 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 17:18:10.57 ID:hUMHHR9z.net] コンポーネントの用途に依る 基本的にはコンポーネントで独立してる方がいいと思う ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず 257 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 18:51:15.00 ID:DVSwWolF.net] 以前は 親(コンテナ)コンポーネントで状態管理 子(プレゼンテーショナル)コンポーネントは表示だけ ってのが流行ってたが廃れたな 再レンダリングが発生しやすいせいかな 258 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:04:20.98 ID:2tghIxun.net] まあケースバイケースになるか そこそこ複雑な入力ページなんだけど 親に状態を持たせると不定個数の状態の扱いがやりにくい 子に状態を持たせると親への通知がやりにくい どっちでやってもスッキリしない 259 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:13:11.31 ID:YHqQ6+Ts.net] 入力フォームなら素直にreact-hook-form使え 260 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:40:04.62 ID:ESVu6HO8.net] ほぉん なかなか便利そう どこまで複雑な入力ページに耐えられるか気になるところだけど 単純なフォームならこれで良さそうだ 261 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 00:29:54.67 ID:ceh8LJAo.net] React完全に理解したがパフォーマンスの上げ方がわからねえ 262 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 00:50:07.29 ID:b+BxW/Al.net] >>261 理解出来てねーーじゃん！ 263 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 01:49:18.73 ID:CcYJF9F8.net] 完全に理解した＝何もわからんだからな チョットでかる＝世界一わかってるだし 264 名前：デフォルトの名無しさん mailto:sage [2022/01/04(火) 12:28:56.67 ID:LToZWYYj.net] ブラウザデバッガで見て出てるエラー消すところからかな あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない 265 名前：デフォルトの名無しさん mailto:sage [2022/01/05(水) 12:38:15.54 ID:1AqA60VG.net] Reactの優れたイディオム、デザインパターンまとめたサイト、書籍、教えてよ 266 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 14:30:52.75 ID:YbeZmiIg.net] react nativeのパーツかわからないんですけど 画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう？ ttps://i.imgur.com/FuvGKCx.jpg 267 名前：デフォルトの名無しさん [2022/01/20(木) 19:51:41.70 ID:fJA5C2IK.net] reduxでプレーンな只の関数でstate参照したい時ってどうすれば良いの？ reducersでもactionsでも無いから直接stateは見えない。コンポーネントじゃ無いから store.subscribeもuseSelectorも出来ないgetState()もない。 やりたいことは、Webの初期表示でstate.env{}の中にブラウザの種類・バージョンとかOSの種類とか入れてるけどそれを単純に参照する関数が書けない stateはreadOnlyで更新しないから見えればOK export const seeStateAndDoSomething() { const { env } = getState() ; // これは出来ないけどコレっぽい処理したい if ( env.browser == 'firefox' ) { ...何かの処理 } else if ( env.browser == 'chrome' ) { } ); どうすりゃ良いの？おそえて。 268 名前：デフォルトの名無しさん mailto:sage [2022/01/20(木) 19:58:21.41 ID:dHw5M9GX.net] store.getState() 269 名前：デフォルトの名無しさん [2022/01/22(土) 01:00:33.62 ID:Q6mU4pBx.net] React Nativeはオワコンらしいですが Reactは使う価値ありますか？ 教えてエロい人 270 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:02:15.28 ID:VcaTUFKD.net] >>269 自分で見極められないの？ 271 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:17:25.20 ID:Q6mU4pBx.net] >>270 すいません。 パソコン初心者です。 アドバイスお願いします。 272 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:19:22.91 ID:NdDHIpih.net] 初心者はやめておいた方が良いです 273 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:25:12.66 ID:Q6mU4pBx.net] これから勉強するならFlutterの方がいいですか？ 274 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 10:04:33.20 ID:Z1IOsfXg.net] シカトっすか？ 275 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 11:17:22.76 ID:N7C2miyW.net] まず上級者になることをおすすめします 276 名前：デフォルトの名無しさん [2022/01/23(日) 11:01:19.74 ID:5zqw2dvO.net] create-react-appで、npm run buildしたのですが manifest.jsonのみがbuildフォルダーにコピーされないです・・・ 回避方法ないでしょうか？ 277 名前：デフォルトの名無しさん [2022/01/23(日) 11:08:40.96 ID:5zqw2dvO.net] >>276 解決しました！失礼しました・・・。 278 名前：デフォルトの名無しさん [2022/01/26(水) 10:48:59.57 ID:PJmPV3+3.net] Reduxのストアにクラスっぽいオブジェクト（プロパティ＋関数）入れようとしたら non-serialize objectがどうのこうのとエラーになった。 そもそも何でシリアライズなんかやろうとするんだ？ 279 名前：デフォルトの名無しさん mailto:sage [2022/01/26(水) 10:59:34.07 ID:0H2oAMTN.net] 不変性を担保するためじゃね 280 名前：デフォルトの名無しさん [2022/01/26(水) 11:35:00.62 ID:SY+BWxpR.net] なんかもっと決定的な感じのフレームワーク出ないのエロい人？ 281 名前：デフォルトの名無しさん [2022/01/26(水) 17:40:44.17 ID:kU7cNmd7.net] >>279 別にそんなもん担保する必要ないだろ。 282 名前：デフォルトの名無しさん mailto:sage [2022/01/26(水) 18:01:16.43 ID:+qGThwTi.net] reduxの根本が不変性をベースにしてるんだが でないとシャロー比較とか成り立たない たいして有用じゃないがタイムトラベルも不変性前提の機能 そのへんちゃんと理解してから使った方がいいよ 283 名前：デフォルトの名無しさん [2022/01/27(木) 00:56:59.89 ID:58xO6kDn.net] そんなどうでも良い概念を使用者全員に押し付けて来んなよ。 単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、 アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。 不変性?(w)　プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろｗ 284 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 01:06:46.42 ID:oXQnXbb3.net] ダメだこいつ… 285 名前：デフォルトの名無しさん [2022/01/27(木) 01:39:30.37 ID:58xO6kDn.net] 何故それが必要と思うのか説明して見ろよｗ 286 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 05:05:01.32 ID:kowYjA+c.net] Ruby on Rails の作者・DHH の動画では、 React, Vue.js とか、規約だけのフレームワーク・Stimulus も使う 287 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 10:03:38.14 ID:QU6mkTFl.net] >>285 すでに280に書いただろが もっともシャロー比較のために不変性が必要というのは話が逆で不変性が前提としてあるからシャロー比較が機能するんだが もっと言えばreduxは関数型のスタイルを「選択」して全体が作られてる だからステートやアクションは不変に、reducerやselecterは純粋にすべしってこと それがreduxの設計意図 一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな 288 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 10:51:15.03 ID:zgsWbtRT.net] >>286 DHHってフロントエンドでは間違いしかしない人だからスルー推奨 289 名前：デフォルトの名無しさん [2022/01/27(木) 11:28:21.68 ID:58xO6kDn.net] >>287 だから全てのアプリがシャロー比較とかタイムトラベルしたい訳じゃないだろって話してんだがｗ？ まあ、余計な機能をテンコ盛りに詰めて利用者に強制したから、別の実装が出たりreactが自前実装して 見捨てられるんだろうけど。Reduxに期待する事はFluxのあの図を忠実に実装する事だけで余計な機能は付けるなよ >一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな 飛びついたのは俺じゃなくて俺が使ってるミドル作った人だけど、まあ、あのアプリの規模（デモレベル） でそんな面倒臭いシステム使ったのなら、理由はそんなところだろうなと。 Reduxはマジあかんな。費用対効果が悪すぎる。 コスト意識の無い潔癖な学者か研究者が作ったシステムって感じがするね。 290 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 12:05:30.94 ID:zgsWbtRT.net] >>289 全てのアプリがしたいかどうかじゃなくてredux使うアプリはその流儀に従うしかないって話なんだがわからず屋だな それが嫌ならredux選ぶなっつーだけの話だ ちなみにシャロー比較はreact.memoなどreactエコシステムの共通項だから全てのreactアプリ開発者が身につけておくべきことだけどな だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし 291 名前：デフォルトの名無しさん mailto:sage [2022/01/28(金) 04:01:26.15 ID:dtKXZRXN.net] Deanin, 1/10、15分の動画 Setup A Ruby on Rails 7 API With React JS https://www.youtube.com/watch?v=sh4WrNGDvQM WSL, Ubuntu 20.04, VSCode(Remote WSL) Ruby 3, Rails 7 のAPI モード、React, Axios Railsのscaffold で、簡単なデモ。 この兄ちゃんは、きれいな英語を喋るので、翻訳も分かりやすい 292 名前：デフォルトの名無しさん mailto:sage [2022/01/28(金) 07:19:26.02 ID:FbvuqA1u.net] Ruby はお呼びじゃないです 293 名前：デフォルトの名無しさん [2022/01/29(土) 01:06:49.85 ID:b1Z4prOk.net] >だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし 害悪をまき散らした張本人だな。 マジであの生鮮性を何故実装して広めようとした事は理解に苦しむ。 J2EEとかhadoopとか(多分将来的にk8sも）生産性が超絶に低い潔癖システムが消えてなくなった事例から全く学ぼうとしないんだな。 294 名前：デフォルトの名無しさん [2022/02/06(日) 05:24:52.64 ID:ETpepHrW.net] ReactでPOSTメソッドだけを受けるアプリ作るのはどうすれば良いんでしょう？ "react POST method "でぐぐってもfetchを使えとか、何故か投げる側の処理ばかりが出ます。 webサーバーには何も入れてないので、npm start で動くサーバーと思しき物はreact-scriptsの筈です。 POSTメソッドだけに紐付いたコンポーネント書きたいのですが… 295 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 07:33:46.13 ID:d9+JDYY/.net] >>294 (´Д`) 296 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 13:52:11.36 ID:xkt5lO0Z.net] >>294 これネタじゃなくマジで言ってんの 297 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 15:17:45.09 ID:d9+JDYY/.net] (´Д`) 298 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 15:52:20.16 ID:YYEn69uQ.net] GETとPOSTの違いを質問するだけで、 アレな人を面接から排除できるし、簡単だな これで95%ぐらい排除できるし 299 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 16:34:57.86 ID:FsJSE82A.net] いやいや、この場合はクライアントとサーバの違いを質問するところからだろ…… 300 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 16:41:29.09 ID:d9+JDYY/.net] まずネタかどうか... 301 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 16:52:26.30 ID:NfirkViC.net] □私はロボットではありません 302 名前：デフォルトの名無しさん [2022/02/06(日) 21:41:04.19 ID:g3gFasX1.net] あれ？Reactってサーバーサイドで動く処理は一切かけないの？？ Next.jsとかあるから、かけるもんかと思ってたけど。 303 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 22:13:46.32 ID:akwTUDY3.net] Next.jsってそれっぽい処理あるのね React勉強中でAPIサーバ別で作るかって思ってたけどNext.jsで事足りそう 304 名前：デフォルトの名無しさん mailto:sage [2022/02/06(日) 22:34:10.48 ID:hDdLDr4C.net] Next.jsのサーバサイドはpages以下のページコンポーネントに対応するGETリクエストを受けたときだけそのページコンポーネントをレンダリングする(SSRの場合) POSTを処理するにはAPIルートを使えるがこれはReactコンポーネント関係ない 305 名前：デフォルトの名無しさん mailto:sage [2022/02/07(月) 16:33:13.54 ID:QUqmCtWk.net] Ruby on Rails は、React, Bootstrap が多い 他には、Vue.js, Stimulus, jQuery Bulma, Tailwind Rails にはHTML ではなく、JSON を返す、API モードもある 306 名前：デフォルトの名無しさん mailto:sage [2022/02/07(月) 16:54:59.57 ID:sj/r7l/l.net] ウザ 307 名前：デフォルトの名無しさん mailto:sage [2022/02/08(火) 16:28:11.87 ID:vHTqeH80.net] prettier以外でReact hookでつかえる フォーマッターで何か良いの無いでしょか？ 308 名前：デフォルトの名無しさん mailto:sage [2022/02/15(火) 22:42:35.11 ID:/0MPsAKI.net] eslint 309 名前：デフォルトの名無しさん [2022/03/16(水) 12:08:38.94 ID:5z0ayZzJ.net] webサイト作っててログイン名とか持ち回りたいんですけど、usestateとかpropsとかで持ち回るよりlocalstorageとかsessionstorageとか使えば良いのでは？と思うのですが何か問題あったりする？ 310 名前：デフォルトの名無しさん mailto:sage [2022/03/16(水) 15:24:22.47 ID:QBH5mk3r.net] なぜその程度の情報をそこに保存しようと思ったのかを知りたいね 311 名前：デフォルトの名無しさん [2022/03/16(水) 21:21:30.66 ID:5z0ayZzJ.net] もち回るのが面倒だからこれでいいかなって、、 312 名前：デフォルトの名無しさん mailto:sage [2022/03/16(水) 21:24:39.33 ID:aSvQMnmr.net] どうせ他にも持ち回る情報はあるのだからちゃんと管理した方がいいよ どっちしろuseLocalStorageみたいなフック作ることになるんだし 313 名前：デフォルトの名無しさん [2022/03/17(木) 01:04:21.86 ID:nbrJosFU.net] Ruby on Rails では、セッション情報を何を使って実現しているかは、あまり意識しない。 各デバイスを自分でコーディングする事もない 4KB までなら、ブラウザのcookie だし、 それ以上なら、Rails のキャッシュか、データベースとか フレームワークを使わない人は、自分で調べてコーディングするから、 何十倍も時間が掛かって、なおかつ低品質な実装しかできない 314 名前：デフォルトの名無しさん mailto:sage [2022/03/17(木) 23:27:53.87 ID:575mXe6h.net] >>313 氏ね 315 名前：デフォルトの名無しさん [2022/04/01(金) 10:10:23.98 ID:JecPgYr0.net] React初心者だけど画面のDevelper ToolsからReactコンポーネントが どれなのかってわかりにくいよね？ ブラウザからHTMLを見るとどれがReactコンポーネントの塊なのかわかりにくいし Reactコンポーネントを組み込んだHTMLのビューファイルのソースコードを見ると 配置されているコンポーネントが何なのかわかりにくい 316 名前：デフォルトの名無しさん mailto:sage [2022/04/01(金) 11:23:42.76 ID:auF3smsz.net] React DevToolsというのがありましてん 317 名前：デフォルトの名無しさん [2022/04/01(金) 18:54:14.92 ID:yYW+C1/7.net] Reactってちょっとした実装するとすぐパフォーマンス悪くなって 不要なれだリングを抑制するのに苦労するじゃん これ逆にで、全て手動でレダリング指示する方式には出来なかったん？ 318 名前：デフォルトの名無しさん mailto:sage [2022/04/01(金) 19:46:55.68 ID:rhFjyhAq.net] それなんてjQuery 319 名前：デフォルトの名無しさん mailto:sage [2022/04/03(日) 15:55:17.06 ID:MTdqQjr6.net] >>309 recoil使えばええんやない？それで足りんかったらrecoil-persistも 320 名前：デフォルトの名無しさん mailto:sage [2022/04/13(水) 00:17:55.41 ID:fbGfFCQp.net] react-bootstrapの"esm"ってどこの馬鹿が付けたんだ？ RowとかColとかを自動インポートするたびにesmが付きやがる・・・（怒 それならreact-bootstrap-esmにでもしてreact-bootstrapとは分けろよ とんでもねえ馬鹿野郎が作っちまったな 321 名前：デフォルトの名無しさん mailto:sage [2022/04/15(金) 18:52:04.48 ID:6JZFJ70w.net] スマホアプリと連動するWebアプリを開発するために html, css, js, ts, react, redux, material-uiなどについて現在勉強中 「組み込みの経験値があるから、Webアプリ開発なんて楽勝でしょwwwww」とか思ってたけど 技術選定を含めて二週間かかってもまだ開発に着手できてない もう1週間はかかりそう。かなり敷居が高いな 322 名前：デフォルトの名無しさん mailto:sage [2022/04/15(金) 18:53:13.67 ID:6JZFJ70w.net] バックエンドはfirebaseとapp engineを使うつもりだから簡単なはずなんだけど 323 名前：デフォルトの名無しさん mailto:sage [2022/04/16(土) 10:36:16.56 ID:GJol2hPc.net] Material-UIもv5になってv4の頃より大分使いやすくなったし選択肢に入れてもいいんじゃない？ 324 名前：デフォルトの名無しさん [2022/04/26(火) 03:06:09.90 ID:1qeD7Yad.net] >>321だけど、やっとまともに開発を進められるようになった まだ手が早く動かなくて辛いわ 325 名前：デフォルトの名無しさん mailto:sage [2022/04/28(木) 12:12:12 ID:+1bBzylX.net] 新規でreduxとか茨の道じゃない？ 326 名前：デフォルトの名無しさん mailto:sage [2022/04/29(金) 18:12:15.81 ID:HVcwi/JU.net] 比較的簡単なツールだから茨の道ということはない 327 名前：デフォルトの名無しさん mailto:sage [2022/04/30(土) 08:55:59.74 ID:xRiYwFSM.net] >>325 recoil使え 328 名前：デフォルトの名無しさん mailto:sage [2022/04/30(土) 20:24:57.68 ID:zPHJgr0b.net] recoilいいね わかりやすいわ 329 名前：デフォルトの名無しさん [2022/05/05(木) 11:51:03.63 ID:JOrREzPe.net] reduxを使うにしても、UI側だけで使用する状態の保持はcontextでやった方がいい感じかな あくまで個人的感想の落書き 330 名前：デフォルトの名無しさん mailto:sage [2022/05/22(日) 20:06:50.28 ID:QFhXSBvp.net] gifjsってライブラリをReactNativeでも使えるようにしようと色々いじくってます。canvasが必要なのでreact-native-canvas入れてみたけどgetImagedataが遅すぎる... webviewで実行したら改善するかな？？もしくはなんか違うやり方あるかな？？ 331 名前：デフォルトの名無しさん mailto:sage [2022/05/29(日) 18:03:59.58 ID:3mvQdNHh.net] 組込みやってて流れでreactで自社内で使うwebアプリのフロント側 作らされる羽目になったのですが素人がreactとjs学ぶのに 定番みたいな書籍やコンテンツありますか？ バックエンドはやりませんがpythonのfastapiです。 332 名前：デフォルトの名無しさん [2022/06/07(火) 16:32:08.16 ID:trxEqnyj.net] reactとかってソースにコメントって あまり書かないほうがいい的な暗黙のルールってあります？ 読まれちゃうから？ 今のプロジェクトのソースにコメントがやけに少ない気がしてて、、。 333 名前：デフォルトの名無しさん mailto:sage [2022/06/09(木) 19:17:56.70 ID:pioqxBxg.net] ないです トランスパイルしたら消えるのでしっかり書きましょう 334 名前：デフォルトの名無しさん [2022/07/01(金) 09:49:56.08 ID:mdBqK8pn.net] ありがとう 335 名前：デフォルトの名無しさん mailto:sage [2022/08/20(土) 11:13:41.79 ID:ncpICP0v.net] propsで受け取ったデータを 内部で更新するときに useStateすると思うんですけど そするとpropsの変更が無視されるんですけど その時のベストプラクティスって何ですか？ 336 名前：デフォルトの名無しさん mailto:sage [2022/08/25(木) 12:56:19.31 ID:H3bW7ybM.net] ここReactの本スレ？ 過疎ってるの？ 337 名前：デフォルトの名無しさん mailto:sage [2022/08/25(木) 17:55:45.09 ID:Tb5qjwQY.net] 過疎ってるのは明白やろ 338 名前：デフォルトの名無しさん mailto:sage [[ここ壊れてます] .net] ベストプラクティスかは知らんけど中間のコンポーネントで親からのpropsが変わったら子のkeyを変える方法を使ってるな 339 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 00:50:56.99 ID:GSie6Ogu.net] reactはtypescriptが必須なのでしょうか？ 340 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 03:03:46.27 ID:R48CF1Id.net] >>339 いらん 341 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 03:55:25.12 ID:AgQQgySl.net] Reactが流行っていないから、過疎っているんだよ 342 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 18:08:40.22 ID:GSie6Ogu.net] reactの求人は多いですけど、実際にはどうなのでしょうか。 343 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 19:28:11.75 ID:148lWuya.net] Reactできる人は全然足りてない 344 名前：デフォルトの名無しさん mailto:sage [[ここ壊れてます] .net] >>343 そうなのですか。 今、javascriptとjQueryの勉強をしてますが、この2つだけでも大変ですね。 345 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 20:28:20.43 ID:oTUqrsBR.net] 数年Web屋やって引退するつもりならそれでもいい 346 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 21:03:00.66 ID:BxScEIY5.net] Reactのメリットを教示するには結構ガッツリ使いまわせる様な大枠を一回つくってしまわないといけないんだよな それができるまでのハードルは結構高いけど一回作ってしまえば色々再利用性が高くて開発効率が各段に上がる 347 名前：デフォルトの名無しさん mailto:sage [[ここ壊れてます] .net] JavaScript関連技術でwebアプリを作るならreactは便利でしょうか？ 348 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 23:14:38.13 ID:AsY/BIgk.net] 便利さでいうならAngularがいいよ 349 名前：デフォルトの名無しさん mailto:sage [2022/08/30(火) 23:44:08.14 ID:B8+owlOV.net] 満足度が底辺のangularがなんだって？ https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks 350 名前：デフォルトの名無しさん mailto:sage [2022/08/31(水) 01:59:04.53 ID:J9nI7vcp.net] >>347 できる人は、何でもできる 351 名前：デフォルトの名無しさん mailto:sage [2022/08/31(水) 11:44:05.05 ID:FlEWiE9h.net] Reactやった後にAngular触ると1個コンポーネント作る手間が煩わし過ぎる 352 名前：デフォルトの名無しさん mailto:sage [2022/08/31(水) 12:36:45.93 ID:3saFUPw3.net] ブラウザ実装の生WebComponentsも大概メンドクサイからオヌヌメ 353 名前：デフォルトの名無しさん mailto:sage [2022/09/01(木) 05:11:23.04 ID:jMwj7QaK.net] vue.jsよりreactの方が優れてますよね？ 354 名前：デフォルトの名無しさん mailto:sage [2022/09/13(火) 16:36:34.31 ID:DqV+9O8X.net] test 355 名前：デフォルトの名無しさん [2022/09/26(月) 01:00:41.00 ID:ikr92+JD.net] 最近フロントエンドエンジニアに転職した元cobolerだけど2つ質問したい ・状態管理ライブラリって今はReduxが主流で公式はtoolkit推してるけど、toolkitってrecoilと変わらなくね？recoilに比べてどういうメリットがあるの？ ・クラスベースの記述って殆どしないの？ベストプラクティスは関数ベース？ 356 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 20:02:50.86 ID:wZFpwFwK.net] 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 フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？ 準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。 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アプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな 458 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 02:04:19.05 ID:R25lIONK.net] あちこちに<ExampleComponent />追加したくないってことかな？その場合はProviderやContextを使うのが正式なやり方になると思う。 レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。 459 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 08:04:52.44 ID:pYWIE5Lo.net] >Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな はい、それであっています。 >あちこちに<ExampleComponent />追加したくないってことかな？ はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って なるべくJavascriptだけで完結させたいです。 とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。 460 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 13:34:11.33 ID:5AAcCPtU.net] メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は どこでも仕込みなしで呼び出したい あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね 461 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 13:52:30.32 ID:pYWIE5Lo.net] レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが メッセージダイアログのような画面中のレイアウトが必要無い物については わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。 javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。 462 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 14:46:08.62 ID:4BxaQg+7.net] Railsとかの既存画面にReactでモーダルだけ作ろうって話？ jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな 463 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 14:59:48.47 ID:5AAcCPtU.net] いや、そういう話ではないよ 464 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 15:18:03.61 ID:4BxaQg+7.net] へ？普通にSPA？ それなのにDOMのエレメント作ってrender()呼ぶって？ただのアホじゃん 465 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 16:09:35.73 ID:5AAcCPtU.net] そりゃ動機があって試行錯誤の中でイレギュラーなことをしていて より良い方法、より一般的な方法はないかという問いかけなんだし 466 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 16:42:00.18 ID:4BxaQg+7.net] 試行錯誤にしても道を外れすぎ React.renderはReactアプリ(コンポーネントツリー)全体をDOMにマウントするためのAPIで個々のコンポーネントが呼び出すもんじゃない 大抵はフレームワーク的なコード(CRAやNext.js)が呼び出すからアプリからは呼ばない 共通のモーダルコンポーネントはAppコンポーネントなどツリーのルート近くに一つだけ置く そしてモーダルはそれを開くためのカスタムフックを利用者に提供する モーダルの開閉制御に使うステートはRedux等のライブラリを使ってもいいしContext + useStateでもいい 467 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 17:16:01.15 ID:i5fGgfrB.net] 試行錯誤ってのはそんなもんでしょ まして最初にReactに不慣れだと断ってるわけだし 寛容にいこうよ 468 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 19:00:38.86 ID:YV4X7nvq.net] >>468 >>466の提示してるやり方はどう？落とし所としてはいいように思えるけども あと>>458も1箇所に固定で追加するという方針は近しいように思う 必要なら詳しく聞いてみたら？ 470 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 19:38:08.77 ID:zF6zP+5N.net] つまり…… ・他のreactコンポーネントから利用されるreactコンポーネントを作ってる のか ・reactで作ってるけど利用する側はreactとか気にしないで使う なのかどっちなんだという話 472 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 19:41:59.71 ID:pYWIE5Lo.net] >>466の提示してるやり方はどう？ react的にはスマートなやり方なのでしょうが、react使わない方が実装手順を簡略化できるのでメリットを感じないです。 >>・reactで作ってるけど利用する側はreactとか気にしないで使う の方です。 関わっているプロジェクトがこれからreactに乗り換えような流れなので、新規開発分からreactで作り始めているのですが、 そもそものベースがreactではないので、reactの便利な所だけ利用したい感じですね。 473 名前：デフォルトの名無しさん mailto:sage [2023/02/21(火) 19:54:51.48 ID:zF6zP+5N.net] >>472 それを先に言えって話だがそれなら>>454でいいだろ モーダルを表示する関数だけexportしてreactコンポーネントはexportせずにファイル内だけで使う ダイアログ表示するたびにDOMエレメント作るなら閉じたときに削除忘れないように reactのアンマウントも 474 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/02/22(水) 02:31:50.15 ID:DPknPTwq.net] だけど、いくらきれいに書いたとしても、後任者がアレな場合、結局、良くない方向に進む（本人たちは満足）なので、どないしようもない気がします （という現場をよく見てきたので、どないしようもないですね） 477 名前：デフォルトの名無しさん mailto:sage [2023/02/22(水) 21:02:05.11 ID:ek8Yt4/u.net] きれいなだけではダメで意図とか背景にある思想とかそういったものをちゃんと伝えておかないと 今回みたいに定石から外れることを自覚してるならなおさら 478 名前：デフォルトの名無しさん mailto:sage [2023/02/26(日) 16:09:53.37 ID:7ZfAUNQ9.net] でも必死こいてゲットしたマイナポイントも結局使わないまま失効するんだろどうせ 479 名前：デフォルトの名無しさん mailto:sage [2023/02/26(日) 16:10:31.65 ID:7ZfAUNQ9.net] スマン誤爆 480 名前：デフォルトの名無しさん mailto:sage [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 名前：デフォルトの名無しさん mailto:sage [2023/09/09(土) 09:35:09.94 ID:XstChhEA.net] （＞ェ＜； 483 名前：デフォルトの名無しさん mailto:sage [2023/10/18(水) 11:53:52.23 ID:pKa2ZouW.net] redux!! 484 名前：デフォルトの名無しさん mailto:sage [2024/09/03(火) 11:41:52.36 ID:a/z1r+/G.net] 外部cssをimportじゃなくてhead要素に入れたいんだけど(scriptタグ多いのが嫌なだけ)、ドキュメントだとShowRenderedHTMLがいいって書いてあるっぽいけど他の方法あるのかな？無いならこれ使ってみる Helmetで出来るもんだと思ってたんだけどなあ

---

---

[ 新着レスの取得/表示 (agate) ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef