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らしくないって話やん

---

---

[ 続きを読む ] / [ 携帯版 ]

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