React と React Native のスレ

1 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/03/09(土) 21:41:37.77 ID:izNw5U5z.net

>>1
乙

3 ：デフォルトの名無しさん：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：2019/03/09(土) 21:45:02.26 ID:7ubvtRZR.net

あれ？なんでID変わってるんだろｗ

5 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/03/10(日) 14:06:23.16 ID:Q25DRVQl.net

以前ちょっと触ってみただけだけど
ReactNativeってimportしたエレメントじゃなきゃhtmlタグとかは使えんのよな

7 ：デフォルトの名無しさん：2019/03/10(日) 15:04:28.91 ID:5/+zyaBC.net

そんなんやりたいならガワだけネイティブのいわゆるハイブリッドフレームワーク使ってその中でreact使えば？react nativeじゃなく。
なんでそんなことしたいのか知らないけど。

8 ：デフォルトの名無しさん：2019/03/10(日) 15:21:54.07 ID:Q25DRVQl.net

去年の秋頃だったか流行ってるみたいだったから試してみだたけ
別に本格的にアプリ作ろうなんて気はなかったしReactと同じように掛けるのかなと思ったけど認識違いだったってだけの話だよ

9 ：デフォルトの名無しさん：2019/03/10(日) 23:12:46.62 ID:gfFE/T4s.net

Reduxの定番ミドルウェアお願いします

10 ：デフォルトの名無しさん：2019/03/12(火) 03:44:15.71 ID:6KkHqTtx.net

ReactでCanvas使う場合ってcomponentDidMountでcanvas.getContext("2d")ってやるの正しい？
それとも持っとReact的にもっとスマートなやり方とかある？

11 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/03/23(土) 17:42:18.24 ID:SoDVK1qs.net

>>14
npm run build
でdistフォルダに生成されてない？
package.jsonにscriptsって項目で
npm run 〇〇
で使えるコマンド一覧が書いてあるから一度確認してみ

16 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/03/23(土) 18:57:04.81 ID:SoDVK1qs.net

>>17
npm run eject
node_modulesのreact-scriptsをプロジェクトルートに移してから
react-scriptsの中身を書き換えてビルドプラグインとかを抜けばいいけど

詳しいやり方はQiita漁ったら確かあったと思うから探してみ

20 ：デフォルトの名無しさん：2019/03/23(土) 19:08:09.96 ID:UK/ZLX81.net

>>17
ReactはJavaScriptで動的にページを構築するからhtmlファイル自体は殆ど空っぽだよ

21 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/05/11(土) 11:04:25.28 ID:dFSThr/t.net

継承はせずに単なるコンポジットかHigher Order Componentsでやってる

26 ：デフォルトの名無しさん：2019/05/18(土) 13:26:28.87 ID:IcnCnpvi.net

classコンポーネントはほぼ使わないな
前はrecompose使ってたし今はhooksあるし

27 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/07/01(月) 11:44:34.42 ID:z9YX7xX6.net

みんなReduxの非同期処理どうしてる？

32 ：デフォルトの名無しさん：2019/07/01(月) 13:21:05.84 ID:PO46Zlgj.net

オレオレミドルウェア
suspenseが来たらreduxもろとも捨てる

33 ：デフォルトの名無しさん：2019/07/06(土) 17:25:24.51 ID:GNb7wQCP.net

React+Reduxやってるけど、MとVM的なものが分離されないのがつらくなってきた。
他のfluxフレームワークだとどうなんだろう。

34 ：デフォルトの名無しさん：2019/07/06(土) 17:57:41.84 ID:TSNTMph3.net

所詮プレゼンテーションレイヤーのフロントエンドにMを持ち込むタコは何を使っても同じ

35 ：デフォルトの名無しさん：2019/07/06(土) 19:48:01.42 ID:GNb7wQCP.net

>プレゼンテーションレイヤーのフロントエンドにMを持ち込む

なにかマウントとりたい意思は伝わってくるけどさすがに意味不明。

36 ：デフォルトの名無しさん：2019/07/06(土) 19:58:59.36 ID:SiQr95jR.net

MVCとかMVVMとかって小さい単位での独立部品の切り出しを考えたら結構邪魔なんだよね

37 ：デフォルトの名無しさん：2019/07/06(土) 20:56:58.71 ID:apheD/Vh.net

道具は悪くない
設計者が悪い

38 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/08/04(日) 01:11:18.51 ID:k7LAQow0.net

久々に動かしたらmetro bundlerなるものができてた
ナンジャコリャ

40 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2019/08/16(金) 11:07:23.70 ID:SpwmZ6gR.net

半年ぶりか
滞ってるな

42 ：デフォルトの名無しさん：2019/08/16(金) 14:14:55.65 ID:fLRfCcm2.net

オワコンなのかな

43 ：デフォルトの名無しさん：2019/08/16(金) 16:05:56.38 ID:DTIEgPs0.net

・Hooksのフォローアップの作業量を過小評価していた
・Concurrent Mode と Suspense for Data Fetching の作業に注力
　Facebookのサイトで実際に試していてリリースに向けて修正中

この辺で時間掛かっているらしい

44 ：デフォルトの名無しさん：2019/08/16(金) 23:37:57.69 ID:RmCywHfR.net

hooks はなあ
モナド欲しい

45 ：デフォルトの名無しさん：2019/08/26(月) 03:11:43.67 ID:xTwJabF+.net

create-react-app xxx とすると、
xxxというreactアプリ(フォルダ)が作られますが、
このxxxの部分を変更したい場合、そのままフォルダを編集してしまっても問題ありませんか？
他にもpackage.jsonのnameもxxxになっておりますがこちらも変更したりして

46 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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にコピペしてインポートしています。
http://html5doctor.com/html-5-reset-stylesheet/
試しにfirst.scssの中身の最上部にHTML5 Doctor Reset CSSの中身を張り付けてみたのですが同じでした。

53 ：デフォルトの名無しさん：2020/01/20(月) 14:09:55 ID:1C7qXqig.net

importされるのはcssじゃなくてjs(実質reset.css.js)だからね
問題はwebpackの設定じゃないの？
webpack entryでググってみたら？

54 ：デフォルトの名無しさん：2020/01/29(水) 20:07:56.78 ID:kAGOnFqI.net

最近androidシミュでfetchが上手くいかなくなったけど何でだろ？

55 ：デフォルトの名無しさん：2020/05/23(土) 18:46:27 ID:wT2dUHsh.net

useStateとReduxって共存していいの？

56 ：デフォルトの名無しさん：2020/05/24(日) 13:54:49 ID:rk0sziuW.net

>>55
システム全体で必要なのはRedux
Postする為にそのFormだけで必要なものはuseState
って使い方してる

共存って点で言うならHooksか旧型式かを共存させなきゃ別にいいと思う

57 ：デフォルトの名無しさん：2020/06/09(火) 16:01:35.59 ID:mEfhV+3L.net

React.ComponentとSuspenseを使ってリストを読み込んで表示するプログラムを書いているのだけど
renderでメンバ関数を呼んで読込するとthisがつく変数(stateとか)が全てリセットされるよどうして？
リセットされる変数をstaticにすると動くようです

58 ：デフォルトの名無しさん：2020/07/25(土) 07:59:44.00 ID:e6nmtc2O.net

人工知能フレームワークのGpt-3がReact上で動くんだよなあ

59 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2020/10/06(火) 09:47:28.33 ID:FaC1oBor.net

>>60
連動？
って具体的に何やりたいの？

62 ：デフォルトの名無しさん：2020/10/06(火) 15:47:26.50 ID:3JbOTVG0.net

>>60
公式を嫁！
それか、オレの知り合いの本を嫁！
以上。

63 ：デフォルトの名無しさん：2020/10/07(水) 08:13:26.21 ID:9X+ETi/j.net

他のフォーム要素を同時にどうかしたいって仮定するとonClickイベントやonChangeイベントのコールバックにメソッド噛ませればいいんじゃない？

64 ：デフォルトの名無しさん：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)：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 ：デフォルトの名無しさん：2021/01/12(火) 01:34:10.49 ID:dF2LSabj.net

公式のドキュメントに全部書いてあるから全部読め

68 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/02/14(日) 04:24:42.10 ID:qcnkr3Yb.net

元々はクラスベースで提供されてた機能を関数コンポーネントでも使えるようにしたのがhookやで

71 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/02/14(日) 05:48:13.99 ID:eZAyHvHf.net

クラスはhookなしで同じことができるから提供する必要がない

76 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/02/14(日) 14:00:51.86 ID:+4ZWExbH.net

お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ

79 ：デフォルトの名無しさん：2021/02/14(日) 14:19:02.14 ID:wyKYn9A/.net

hookを知らないやつだったか。アホらし。

80 ：デフォルトの名無しさん：2021/02/14(日) 14:34:40.65 ID:kA8DCabn.net

時系列的には

クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える

と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし

クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する

という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント

81 ：デフォルトの名無しさん：2021/02/14(日) 14:46:29.94 ID:wyKYn9A/.net

>>80
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか？向かないのか？
って事になる。ね。

82 ：デフォルトの名無しさん：2021/02/14(日) 15:15:15.08 ID:kA8DCabn.net

クラスコンポーネントのインスタンスはthis.〜で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる

83 ：デフォルトの名無しさん：2021/02/14(日) 16:39:29.19 ID:DVWK/pJu.net

useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？
なんかそう言うパッケージ見たことあるぞ

84 ：デフォルトの名無しさん：2021/02/14(日) 16:59:03.97 ID:FekQTk3J.net

classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ

class Foo extends React.Component {
　handleClick = (ev) => {...}

85 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/02/14(日) 21:03:03.46 ID:NOmukaW1.net

ス・レ・チ

87 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/08/10(火) 10:18:58.12 ID:Yti8n+JL.net

込み入った実装ってだいたい設計から間違ってるよね…

92 ：デフォルトの名無しさん：2021/08/10(火) 10:22:58.46 ID:0SSgF6Zh.net

>>91
あんたが考えてんの具体的にどのレベルだ？
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ

93 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：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 ：デフォルトの名無しさん：2021/08/10(火) 14:15:30.49 ID:i+IrTlV6.net

>>99
アトミックデザイン使わず
あなたが表現してあげたら？