Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
Svelte
https://svelte.dev/
※前スレ
Vue vs React vs Svelte Part.7
https://mevius.5ch.net/test/read.cgi/tech/1610901677/
Vue vs React vs Angular vs Svelte Part.8
https://mevius.5ch.net/test/read.cgi/tech/1621744952/
★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorキチガイが書き込んでも無視してください
Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおk。
Vue vs React vs Angular vs Svelte Part.9
■ このスレッドは過去ログ倉庫に格納されています
2022/01/16(日) 16:06:14.27ID:Zy2wxIp9
2022/01/17(月) 13:09:21.87ID:OoRE99LP
と思ったけどそういうレベルの話ではなさそうだな
2022/01/17(月) 13:13:12.62ID:nV7XcMJz
>>16
いや、あれはわかりにくい
依存関係とか諸々含めて、誰でもすんなり理解して間違いなく使える仕様とは思えん
必ずどこかでハマるように出来てる
つうか、完全に理解したとしても冗長な記述が多すぎる
reactの仕様を大きく変えてasync JSXタグをサポートするべきだと思うんだよな
例えばこういうの↓
const FooView = async () => {
try {
const foo = await fetchFoo();
return <View>
<Text>{foo.name}</Text>
<Text>{foo.age}</Text>
<View>
}
catch (e) { return <ErrorView error={e} /> }
}
もし仮にここまで出来れば俺は「reactは非同期が楽」と言っていいと思うぞ
つーかこんなんreactの開発者レベルならとっくに気付いてる筈なんだが
怠慢なのかわからんが、非同期をずっと放置し続けてきた
いや、あれはわかりにくい
依存関係とか諸々含めて、誰でもすんなり理解して間違いなく使える仕様とは思えん
必ずどこかでハマるように出来てる
つうか、完全に理解したとしても冗長な記述が多すぎる
reactの仕様を大きく変えてasync JSXタグをサポートするべきだと思うんだよな
例えばこういうの↓
const FooView = async () => {
try {
const foo = await fetchFoo();
return <View>
<Text>{foo.name}</Text>
<Text>{foo.age}</Text>
<View>
}
catch (e) { return <ErrorView error={e} /> }
}
もし仮にここまで出来れば俺は「reactは非同期が楽」と言っていいと思うぞ
つーかこんなんreactの開発者レベルならとっくに気付いてる筈なんだが
怠慢なのかわからんが、非同期をずっと放置し続けてきた
2022/01/17(月) 14:23:54.47ID:OoRE99LP
>>18
あーなるほど。確かにそこまでサポートされてれば楽かもな〜。
待ってる間はFragmentが入るようになってれば(多少柔軟性は落ちても)同期部分とも連携は取れると。
俺はそこまでは要らないかな。でもなるほどね
あーなるほど。確かにそこまでサポートされてれば楽かもな〜。
待ってる間はFragmentが入るようになってれば(多少柔軟性は落ちても)同期部分とも連携は取れると。
俺はそこまでは要らないかな。でもなるほどね
2022/01/17(月) 14:33:09.18ID:OoRE99LP
>>18
いや待て、そこでfetchしたら駄目じゃね?
いや待て、そこでfetchしたら駄目じゃね?
2022/01/17(月) 15:31:40.92ID:mFMlok3x
2022/01/17(月) 18:31:36.68ID:srH4p//H
fetchFooが何度も走るからその場所はマズくね?
2022/01/17(月) 18:44:23.62ID:8GhjbW2b
useSWRを使ってみるとか
(まだ使ったことないけど)
見た感じそれなりに使いやすそう?
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
(まだ使ったことないけど)
見た感じそれなりに使いやすそう?
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
2022/01/17(月) 19:25:32.08ID:05fLKY0G
>>23
単純なケースでしか通用しない気がするけどいけるんかな?
単純なケースでしか通用しない気がするけどいけるんかな?
2022/01/17(月) 19:25:53.20ID:dRyGD2/c
>>18
コンポーネントにガッツリ副作用入れてどうすんだよw
コンポーネントにガッツリ副作用入れてどうすんだよw
2022/01/17(月) 23:06:59.06ID:piunERDu
はっはっは、だから言ったろ
お前が非同期処理を理解してないって
想像した通りに動いてくれるわけじゃないのだよ
不可能なことは、不可能
お前が非同期処理を理解してないって
想像した通りに動いてくれるわけじゃないのだよ
不可能なことは、不可能
2022/01/17(月) 23:11:50.20ID:ZqR63tdH
2022/01/18(火) 00:00:44.87ID:EicAqYVv
>>26
具体的な事言わずに批判だけするとか……老害かな?
具体的な事言わずに批判だけするとか……老害かな?
2022/01/18(火) 00:30:02.59ID:lZlxHH3x
>>22
パラメータが変わらなければ同じpromiseが再利用されるので問題ない
パラメータが変わらなければ同じpromiseが再利用されるので問題ない
2022/01/18(火) 15:39:09.53ID:WUNUlNdf
>>30
fetchFooは(シングルトンみたく)何度呼び出しても同じPromiseを返すって事か。それなら確かに問題ない。
そう云うPromiseを作るhookと待ってる間はFragment(か何かをDOMに接続)、あとエラー時用のインターフェイス(Promise関連だからcatchメソッドで良いか)が必要、と。
う〜ん、俺はuseEffectでいいやw
fetchFooは(シングルトンみたく)何度呼び出しても同じPromiseを返すって事か。それなら確かに問題ない。
そう云うPromiseを作るhookと待ってる間はFragment(か何かをDOMに接続)、あとエラー時用のインターフェイス(Promise関連だからcatchメソッドで良いか)が必要、と。
う〜ん、俺はuseEffectでいいやw
2022/01/18(火) 19:50:02.62ID:TcbXe2vG
2022/01/18(火) 20:36:42.52ID:WUNUlNdf
FooViewが発行したPromiseインスタンスを再利用するという事?
2022/01/19(水) 19:07:29.30ID:3/Lr3xp/
2022/01/19(水) 19:25:26.21ID:uMoGEeK3
>>34
useEffectの引数に直接async function入れられなくて少し不便ってだけの話で特に特に問題無いから無視してええよ
useEffectの引数に直接async function入れられなくて少し不便ってだけの話で特に特に問題無いから無視してええよ
2022/01/19(水) 20:05:38.12ID:raxSHl5s
<ErrorBoundary onErrorComponent={ErrorView} >
<Suspence fallback={<Loading />}>
<Text>{props.foo.read().name}</Text>
</Suspence>
</ErrorBoundary>
一見すると良さそうだけど間違ってる
Textをラップするコンポーネントを作ってやらんとダメ
なんか書くものが多くてめんどくさい
後は純粋に醜い
処理フローの制御をタグで書きたくない
recoilって正直なとこContext APIやReduxより多少スマートだけど根本的なとこはあんま変わってないと思う
というかrecoilって基本は状態管理ライブラリだし非同期のめんどくささとはまた別の話では?
<Suspence fallback={<Loading />}>
<Text>{props.foo.read().name}</Text>
</Suspence>
</ErrorBoundary>
一見すると良さそうだけど間違ってる
Textをラップするコンポーネントを作ってやらんとダメ
なんか書くものが多くてめんどくさい
後は純粋に醜い
処理フローの制御をタグで書きたくない
recoilって正直なとこContext APIやReduxより多少スマートだけど根本的なとこはあんま変わってないと思う
というかrecoilって基本は状態管理ライブラリだし非同期のめんどくささとはまた別の話では?
2022/01/19(水) 21:22:56.22ID:26VsIy03
ラッパー高階関数なりhookでも書けばええんちゃうか……。
目的を最小のコードて書けるライブラリは用途特化ライブラリであって、汎用たり得ないと思うんだ。
目的を最小のコードて書けるライブラリは用途特化ライブラリであって、汎用たり得ないと思うんだ。
2022/01/19(水) 22:03:34.62ID:3/Lr3xp/
Suspenseでラップされたコンポーネントで使われているAtomで
非同期処理を実行している間はfallbackが呼ばれるため、loading stateが不要であったりと
RecoilはConcurrent Modeを意識した作りになっている
というのを踏まえた上で、Reactはv18から非同期でコンポーネントを扱う場合は
Suspenseでラップする形を押していくようなので
その手法が嫌なら何とも言えない(あなたの提案が悪いというわけではなく、Reactの方針的に)
非同期処理を実行している間はfallbackが呼ばれるため、loading stateが不要であったりと
RecoilはConcurrent Modeを意識した作りになっている
というのを踏まえた上で、Reactはv18から非同期でコンポーネントを扱う場合は
Suspenseでラップする形を押していくようなので
その手法が嫌なら何とも言えない(あなたの提案が悪いというわけではなく、Reactの方針的に)
2022/01/20(木) 02:46:03.95ID:Rxl97YaC
そうやって過剰な設計をするならReactとかの
フレームワークは重くなるんですよね
フレームワークは重くなるんですよね
2022/01/20(木) 07:10:36.24ID:Vj5JRmmF
重いってのは色んな要素や意味があるし、かなり曖昧表現だな。
スピードテストベンチマークも増えて、一時期に比べればみんな速度を意識しだして、Webって早くなってきたよ。
スピードテストベンチマークも増えて、一時期に比べればみんな速度を意識しだして、Webって早くなってきたよ。
2022/01/20(木) 12:12:04.67ID:Rxl97YaC
>>40
帯域制限中の格安スマホ
帯域制限中の格安スマホ
2022/01/20(木) 12:21:04.70ID:GD2M/Dj6
ここ数ヶ月で重すぎてブラウザバックした記憶はqiitaだけだな
あれは何のフレームワーク使ってるんだろ
あれは何のフレームワーク使ってるんだろ
2022/01/20(木) 12:25:07.74ID:iZmEL3fQ
qiitaはスマホが発熱するレベルで熱くなる
2022/01/20(木) 12:47:36.33ID:Vj5JRmmF
>>41
なる程。となると容量だな。
帯域制限状態を256kbpsとするとminify+gzipなReact(ReactDOM含む)で36KBなら1.125秒か。時間かかるっちゃかかるけど、この速度域だと画像すら重すぎてそれ以前の問題だなw
なる程。となると容量だな。
帯域制限状態を256kbpsとするとminify+gzipなReact(ReactDOM含む)で36KBなら1.125秒か。時間かかるっちゃかかるけど、この速度域だと画像すら重すぎてそれ以前の問題だなw
2022/01/20(木) 12:52:08.95ID:1yX1mPXr
結局のところ単純で速い方がいい
reactでゴテゴテに装飾したSNSより伍ちゃん戦ブラが良いんだな
reactでゴテゴテに装飾したSNSより伍ちゃん戦ブラが良いんだな
2022/01/20(木) 12:58:52.80ID:tc4dpKA2
今のSNS大抵レスポンス良いぞ
2022/01/20(木) 13:02:02.17ID:wSqfSwGe
そもそも目的や規模感、場合によってはチームの習熟度で不足にも過剰にもなる
結局は毛嫌いせず、状況に応じて使い分ければ良いだけの話
結局は毛嫌いせず、状況に応じて使い分ければ良いだけの話
48デフォルトの名無しさん
2022/01/20(木) 16:56:37.93ID:EFa2BF3Y2022/01/20(木) 20:33:47.49ID:+j6gWOWK
>>42
> ここ数ヶ月で重すぎてブラウザバックした記憶はqiitaだけだな
普通にネット見ていてもReactのような
重量系フレームワークを使ってるところなんて殆どないからね
QiitaはReact使ってるみたいだけど、一体あれのどこに必要なんだろうか
> ここ数ヶ月で重すぎてブラウザバックした記憶はqiitaだけだな
普通にネット見ていてもReactのような
重量系フレームワークを使ってるところなんて殆どないからね
QiitaはReact使ってるみたいだけど、一体あれのどこに必要なんだろうか
2022/01/20(木) 20:53:35.92ID:iZmEL3fQ
とりあえずSSG使ってCDNにpushすれば解決するのだがそういう改良する人材もいないんだろうな
元々優秀な技術者集団がいたはずだけど
技術のコモディティ化でその人たちも凡人になったのか
人がいなくなったのか
元々優秀な技術者集団がいたはずだけど
技術のコモディティ化でその人たちも凡人になったのか
人がいなくなったのか
2022/01/20(木) 20:54:50.03ID:Vj5JRmmF
何をもって『重量系』?
2022/01/20(木) 21:04:59.02ID:bXKXm3eN
>>50
Qiitaの親会社の偉い人に合った事あるけど、技術や技術者の事なんてどうとも思ってなさそうな人だったよ。それからしばらくしてあの炎上騒ぎが起きて、さもありなんと思った。
Qiitaの親会社の偉い人に合った事あるけど、技術や技術者の事なんてどうとも思ってなさそうな人だったよ。それからしばらくしてあの炎上騒ぎが起きて、さもありなんと思った。
2022/01/20(木) 23:08:25.65ID:wSqfSwGe
>>49
Zenn、Twitter、Instagram、Facebook、LINE、Yahoo、ZOZO、はてなブログ、AmazonのAWSの管理画面などなど
これらはフロント全体もしくは部分的にReactだけど?
Googleは多くのサービスでAngularだし
普段ネットで見てんの?
Zenn、Twitter、Instagram、Facebook、LINE、Yahoo、ZOZO、はてなブログ、AmazonのAWSの管理画面などなど
これらはフロント全体もしくは部分的にReactだけど?
Googleは多くのサービスでAngularだし
普段ネットで見てんの?
54デフォルトの名無しさん
2022/01/20(木) 23:31:12.23ID:0xN8W4D9 掲示板のレスの1つ1つに開閉式のメニューをつけるのってどうやるんだ?
下はyahooニュースだが、レス一覧の「非表示・報告」ってとこ押したら出てくるような奴
https://news.yahoo.co.jp/articles/5d52fe0f406f1aa3e9f2263f58966858786bf8a0/comments
vue だったらレス一個一個にコンポーネントマウントしないといかんのか??
下はyahooニュースだが、レス一覧の「非表示・報告」ってとこ押したら出てくるような奴
https://news.yahoo.co.jp/articles/5d52fe0f406f1aa3e9f2263f58966858786bf8a0/comments
vue だったらレス一個一個にコンポーネントマウントしないといかんのか??
2022/01/20(木) 23:36:53.55ID:ZmHYiWHP
>>54
VueでもReactでもAngularでもそう
VueでもReactでもAngularでもそう
56デフォルトの名無しさん
2022/01/20(木) 23:43:22.25ID:0xN8W4D9 >>55
なるほど。内部的には各ボタンにイベントリスナーつけるわけだから当然と言えば当然ではあるか。
サーバ側ではレスをPHPでforeach で回して出力するけど、そのタイミングでvueがマウントするためのコードを生成する必要があるってことなのか?
なるほど。内部的には各ボタンにイベントリスナーつけるわけだから当然と言えば当然ではあるか。
サーバ側ではレスをPHPでforeach で回して出力するけど、そのタイミングでvueがマウントするためのコードを生成する必要があるってことなのか?
2022/01/20(木) 23:44:48.93ID:ZmHYiWHP
>>53
noteなんかはVue使ってるしな
noteなんかはVue使ってるしな
2022/01/20(木) 23:46:19.28ID:iZmEL3fQ
vue選んだ会社はどうするんだろうか
オワコンまっしぐらなのに
オワコンまっしぐらなのに
59デフォルトの名無しさん
2022/01/20(木) 23:56:11.92ID:xZtQwvJ+ 生田勇人(39)
高知市朝倉中学校卒業
恐喝と暴行、偽証、傷害容疑で逮捕、起訴。
://togetter.com/li/1227954
://pbs.twimg.com/media/DbUOGw1VQAAqJcx.jpg:large
://i.imgur.com/tuUldwv.jpg
://www.youtube.com/watch?v=UyNXI8usCrM
取り調べで「事実無根」と容疑を否認。
卓球所に松岡学(39)と出入りし賭け試合を被害者に強要、一回ミスったら1000円払えと発言。
2万円を取ろうとした。親にチクったらただじゃ済まんぞと被害者の胸倉をつかみ壁に叩き付け2000円を脅し取り、後日腹を複数回殴った疑い。
生田勇人の両親も被害者の親にたかっていた。
高知市朝倉中学校卒業
恐喝と暴行、偽証、傷害容疑で逮捕、起訴。
://togetter.com/li/1227954
://pbs.twimg.com/media/DbUOGw1VQAAqJcx.jpg:large
://i.imgur.com/tuUldwv.jpg
://www.youtube.com/watch?v=UyNXI8usCrM
取り調べで「事実無根」と容疑を否認。
卓球所に松岡学(39)と出入りし賭け試合を被害者に強要、一回ミスったら1000円払えと発言。
2万円を取ろうとした。親にチクったらただじゃ済まんぞと被害者の胸倉をつかみ壁に叩き付け2000円を脅し取り、後日腹を複数回殴った疑い。
生田勇人の両親も被害者の親にたかっていた。
2022/01/21(金) 00:01:35.86ID:wLYahSWr
>>56
一例だけど、ページが読み込まれてCommentListコンポーネントがマウントされたタイミングでサーバからコメントを取得して
メニューを持ったCommentコンポーネントをcomments.mapで回す
この時のcommentひとつひとつをCommentコンポーネントのpropsに渡して描画していく
一例だけど、ページが読み込まれてCommentListコンポーネントがマウントされたタイミングでサーバからコメントを取得して
メニューを持ったCommentコンポーネントをcomments.mapで回す
この時のcommentひとつひとつをCommentコンポーネントのpropsに渡して描画していく
2022/01/21(金) 00:48:10.29ID:KdwPKAAI
Vueはそもそもの背景にAngularがあるのに
Composition登場以降、React寄りになったのが何とも
今のVueはどこに向かっているのか分からん
Composition登場以降、React寄りになったのが何とも
今のVueはどこに向かっているのか分からん
2022/01/21(金) 00:54:42.07ID:HxiXQYKt
>>54
https://codesandbox.io/embed/dark-dawn-0sk8t?fontsize=14&hidenavigation=1&theme=dark
↑ でけたで!!!
VueじゃなくてReactやけども
みんなもよかったらコードレビューしてや!
これ思たんやが、メニューの中身共通やんか
ヤフコメの仕様に合わせて同時に複数開けるようにしたからこうしたけど、同時に複数開かなくてもいいっていう仕様やったらばよ
各コメントのカードの中にメニュー含めず、メニューは外に出して1個だけ記述する方が無駄なさげな気するんやがどないなん
コード的には同じもんが複数あるってイメージが湧いてしまうわけやが、基本マウントされてないから別にええんか
意味わからんかったらすまんやで
https://codesandbox.io/embed/dark-dawn-0sk8t?fontsize=14&hidenavigation=1&theme=dark
↑ でけたで!!!
VueじゃなくてReactやけども
みんなもよかったらコードレビューしてや!
これ思たんやが、メニューの中身共通やんか
ヤフコメの仕様に合わせて同時に複数開けるようにしたからこうしたけど、同時に複数開かなくてもいいっていう仕様やったらばよ
各コメントのカードの中にメニュー含めず、メニューは外に出して1個だけ記述する方が無駄なさげな気するんやがどないなん
コード的には同じもんが複数あるってイメージが湧いてしまうわけやが、基本マウントされてないから別にええんか
意味わからんかったらすまんやで
2022/01/21(金) 02:20:49.29ID:sORVJkOm
その考え方で良いと思う
表示非表示といっても、仮想DOMのおかげで差分が更新されるだけなので
ひとつのメニューを座標などを保持してまで使い回すメリットがほとんどない
表示されているメニューをひとつだけとするなら
メニューを透明なBackdropと共に描画して、メニュー外がクリックされた場合はメニューを閉じるようにする
これはMUIのBackdropやMenuコンポーネントを参考にすると分かりやすいと思う
他にはグローバルステートにして、ひとつが表示状態となった場合、他が非表示となるようにする
これはReduxで複数のダイアログの状態を扱う場合なんかに使われたりする
規模感にもよるが、今だとRecoilで管理するのがシンプルでおすすめ
他にはonMouseLeaveで非表示にするのもアリかもしれない
表示非表示といっても、仮想DOMのおかげで差分が更新されるだけなので
ひとつのメニューを座標などを保持してまで使い回すメリットがほとんどない
表示されているメニューをひとつだけとするなら
メニューを透明なBackdropと共に描画して、メニュー外がクリックされた場合はメニューを閉じるようにする
これはMUIのBackdropやMenuコンポーネントを参考にすると分かりやすいと思う
他にはグローバルステートにして、ひとつが表示状態となった場合、他が非表示となるようにする
これはReduxで複数のダイアログの状態を扱う場合なんかに使われたりする
規模感にもよるが、今だとRecoilで管理するのがシンプルでおすすめ
他にはonMouseLeaveで非表示にするのもアリかもしれない
64デフォルトの名無しさん
2022/01/21(金) 02:28:51.97ID:mtDqJL7w >>60
やっぱりコメント自体を非同期で取得してくるしかないのかあ・・・。
現在の仕様やと、サーバ側でコメントをhtml生成してからレスポンス返しているから、作り直すの大変やなあ。
開閉メニューだけをvueでコンポーネント作ってってことをできんかと思ってたけど厳しいかもなあ。
ちなみに生JSで開閉メニューを作成済みなのだが、それをvue に書き換えたかった。
>>62
うおおおおおおおおすげええええ
でもreactわからん・・・・・・vueでも同様のことができるんやろなあ。
メニューの中身は共通やけど、yahooの例で言えば非表示と報告やからそのコメントを特定できるIDみたいなものをサーバに送るために仕込んどかんといかんのや。。。
やっぱりコメント自体を非同期で取得してくるしかないのかあ・・・。
現在の仕様やと、サーバ側でコメントをhtml生成してからレスポンス返しているから、作り直すの大変やなあ。
開閉メニューだけをvueでコンポーネント作ってってことをできんかと思ってたけど厳しいかもなあ。
ちなみに生JSで開閉メニューを作成済みなのだが、それをvue に書き換えたかった。
>>62
うおおおおおおおおすげええええ
でもreactわからん・・・・・・vueでも同様のことができるんやろなあ。
メニューの中身は共通やけど、yahooの例で言えば非表示と報告やからそのコメントを特定できるIDみたいなものをサーバに送るために仕込んどかんといかんのや。。。
2022/01/21(金) 05:23:06.12ID:2Ya+eSMz
>>42
Railsは、GitHub, Airbnb, Disney, Hulu, SoundCloud, Shopify といった世界的に有名な企業や、
日本国内でも、note、クックパッド、freee、マネーフォワード、Progate、Qiita などで使われている
2021年10月には、Railsを使い続ける宣言をしている、GitLab が上場し、時価総額は約1.9兆円!
時価総額1兆円ぐらいまでは、Railsで行ける。
その後、Go へ移行する
ここで、URL を入力して、サイト分析できる
https://builtwith.com/
Railsは、GitHub, Airbnb, Disney, Hulu, SoundCloud, Shopify といった世界的に有名な企業や、
日本国内でも、note、クックパッド、freee、マネーフォワード、Progate、Qiita などで使われている
2021年10月には、Railsを使い続ける宣言をしている、GitLab が上場し、時価総額は約1.9兆円!
時価総額1兆円ぐらいまでは、Railsで行ける。
その後、Go へ移行する
ここで、URL を入力して、サイト分析できる
https://builtwith.com/
6665
2022/01/21(金) 05:34:51.10ID:2Ya+eSMz 女の娘が1人で起業した、食べチョクは、Rails, React
食べチョクは、生産者と消費者を結ぶ、農林水産物の直販サイトだけど、
コロナで取引量が30倍になったとか
海外のRailsでは、ほとんどReactが多い
ただ日本は特殊で、YouTube で有名な、雑食系エンジニア・KENTA のサロンでも、
未経験者の転職用にはReactよりも、Vue.js を使うように指示している
食べチョクは、生産者と消費者を結ぶ、農林水産物の直販サイトだけど、
コロナで取引量が30倍になったとか
海外のRailsでは、ほとんどReactが多い
ただ日本は特殊で、YouTube で有名な、雑食系エンジニア・KENTA のサロンでも、
未経験者の転職用にはReactよりも、Vue.js を使うように指示している
6765
2022/01/21(金) 06:17:34.93ID:2Ya+eSMz Rails では、命名規約だけのフレームワーク・Stimulus もある。
イベントの書き方だけを決めている
Railsの作者・DHH が、デモなどでよく使う
1つのDOM に、コントローラーを複数設定できる
<div data-controller="hello goodbye"></div>
また、同じコントローラーを複数のDOMに設定できる
<div data-controller="hello"></div>
<div data-controller="hello"></div>
つまり、多対多
アクションはクリックで、helloコントローラーのgreet メソッドを呼ぶ
<button data-action="click->hello#greet"></button>
ターゲットを設定すると、this.nameTarget, this.outputTarget で、
ターゲットとなるDOMを取得できる
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
ターゲットとなるDOM。helloコントローラーのname・outputターゲット
<input data-hello-target="name" type="text">
<span data-hello-target="output"></span>
イベントの書き方だけを決めている
Railsの作者・DHH が、デモなどでよく使う
1つのDOM に、コントローラーを複数設定できる
<div data-controller="hello goodbye"></div>
また、同じコントローラーを複数のDOMに設定できる
<div data-controller="hello"></div>
<div data-controller="hello"></div>
つまり、多対多
アクションはクリックで、helloコントローラーのgreet メソッドを呼ぶ
<button data-action="click->hello#greet"></button>
ターゲットを設定すると、this.nameTarget, this.outputTarget で、
ターゲットとなるDOMを取得できる
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
ターゲットとなるDOM。helloコントローラーのname・outputターゲット
<input data-hello-target="name" type="text">
<span data-hello-target="output"></span>
2022/01/21(金) 07:05:45.77ID:cMXeDUr/
2022/01/21(金) 08:28:34.38ID:kufT2haj
プライベートなシステムの管理画面で複雑なReact使ってるけど重くもなくむしろ速い
どちらかというとサーバーにアクセスするAPIのほうが遅くてローディングアイコンくるくるしてる
閉鎖的なシステムだから業務ロジックはバックエンドではなくほぼtsで書いてるから処理は速い
どちらかというとサーバーにアクセスするAPIのほうが遅くてローディングアイコンくるくるしてる
閉鎖的なシステムだから業務ロジックはバックエンドではなくほぼtsで書いてるから処理は速い
2022/01/21(金) 11:11:34.46ID:SfEYbUH3
2022/01/21(金) 11:15:00.08ID:SfEYbUH3
コンピュータ用語と関係ない用語で検索してTOP10のサイトが
どのフレームワークを使っているか確認してみればいい
例えば「ネコ」で検索するとかな
どのフレームワークを使っているか確認してみればいい
例えば「ネコ」で検索するとかな
2022/01/21(金) 11:46:13.84ID:QNQeLsep
殆どない、に対してのレスだから
適当に列挙してもこれだけあるよ?って話でしょ
適当に列挙してもこれだけあるよ?って話でしょ
2022/01/21(金) 11:54:33.96ID:SfEYbUH3
適当に列挙したと言う割に
有名なコンピュータ関連の会社に偏ってるから
ダメだって話をしてる
適当に列挙させるために
コンピュータ用語と関係ない用語で
検索したサイトで調べろと言ってる
有名なコンピュータ関連の会社に偏ってるから
ダメだって話をしてる
適当に列挙させるために
コンピュータ用語と関係ない用語で
検索したサイトで調べろと言ってる
2022/01/21(金) 12:09:01.10ID:k2s5ThwE
ま〜たあんたか。今日もご苦労さん
2022/01/21(金) 12:16:03.07ID:u8ucGGY4
そんな謎調べ物させる前に重いサイト列挙すりゃ済む話やろ
2022/01/21(金) 12:45:58.84ID:943Xrj0f
ループ内でuseState使えるようにはできないのかなー
これ完全にフレームワーク設計の欠陥だよね
自分も>>62みたいな書き方をよく書くけど配列から子コンポーネントに渡すpropsに変換する手間がかかって面倒くさい
しかも配列の1要素を変更しただけで配列全体が変更されたとみなされてイベントハンドラが更新されて子コンポーネントも更新されるのが気になる
純粋な子コンポーネントをラップしてstateを持たせたコンポーネントをプライベートスコープに書いて
そのラップコンポーネントを使うって手も有るけどこれはこれでめんどくさい
かと言って子コンポーネント自体に副作用を持たせるとテストがめんどくさくなって再利用性も下がる
これ完全にフレームワーク設計の欠陥だよね
自分も>>62みたいな書き方をよく書くけど配列から子コンポーネントに渡すpropsに変換する手間がかかって面倒くさい
しかも配列の1要素を変更しただけで配列全体が変更されたとみなされてイベントハンドラが更新されて子コンポーネントも更新されるのが気になる
純粋な子コンポーネントをラップしてstateを持たせたコンポーネントをプライベートスコープに書いて
そのラップコンポーネントを使うって手も有るけどこれはこれでめんどくさい
かと言って子コンポーネント自体に副作用を持たせるとテストがめんどくさくなって再利用性も下がる
2022/01/21(金) 12:54:15.65ID:Mn4SUGG+
>>73
“殆どない”に対して”あるけど?”ってことなんだが大丈夫か?
“殆どない”に対して”あるけど?”ってことなんだが大丈夫か?
2022/01/21(金) 13:00:10.73ID:cMXeDUr/
>>76
いや、仕組みを考えればなぜそういう仕様なのかはわかるよ
いや、仕組みを考えればなぜそういう仕様なのかはわかるよ
2022/01/21(金) 13:00:46.06ID:Mn4SUGG+
ListやListItemなら再利用前提だけど
CommentListやCommentListItemとかになる固有だったりするから内部に状態を持たせたらいい
テストが大変、ってことならカスタムフックでロジックを分離すればいい
CommentListやCommentListItemとかになる固有だったりするから内部に状態を持たせたらいい
テストが大変、ってことならカスタムフックでロジックを分離すればいい
2022/01/21(金) 13:10:35.79ID:943Xrj0f
>>78
仕組みの問題なのはわかるけど
利用者の立場を考えたインターフェースデザインになってないのはフレームワークとしては残念ポイントだね
本当に良いフレームワークはまず使いやすいインターフェースがあってそこに実装を合わせていく
「実装の都合のせいで関数トップレベルにしかフックかけません」ってのはそう言う意味では怠慢かな
「どこでも書けるように実装の方で勉強しました」こういう姿勢が必要
仕組みの問題なのはわかるけど
利用者の立場を考えたインターフェースデザインになってないのはフレームワークとしては残念ポイントだね
本当に良いフレームワークはまず使いやすいインターフェースがあってそこに実装を合わせていく
「実装の都合のせいで関数トップレベルにしかフックかけません」ってのはそう言う意味では怠慢かな
「どこでも書けるように実装の方で勉強しました」こういう姿勢が必要
2022/01/21(金) 13:12:23.42ID:943Xrj0f
>>79
固有になるかどうかは場合によるよね
固有になるかどうかは場合によるよね
2022/01/21(金) 13:16:50.88ID:6I3Of8sH
>>76
状態を呼び出されたインデックスで管理してるんだからむしろわかりやすいと思うが
「副作用の内容」は全く意識しなくて良いのよ
そこはreactに丸投げできる
これこそHooksの素晴らしさ
わかりにくいと感じるのは副作用を意識してなさすぎるから
react難しいと言ってる人は関数型言語などの副作用、参照透過性、冪等性、(できればモナド)などその辺りを勉強し直した方が良い
状態を呼び出されたインデックスで管理してるんだからむしろわかりやすいと思うが
「副作用の内容」は全く意識しなくて良いのよ
そこはreactに丸投げできる
これこそHooksの素晴らしさ
わかりにくいと感じるのは副作用を意識してなさすぎるから
react難しいと言ってる人は関数型言語などの副作用、参照透過性、冪等性、(できればモナド)などその辺りを勉強し直した方が良い
2022/01/21(金) 13:20:29.63ID:cMXeDUr/
2022/01/21(金) 13:46:47.17ID:sORVJkOm
ドキュメントにフックがトップレベルでしか呼び出せない理由って説明されてるけどな
2022/01/21(金) 13:58:56.69ID:JF8FJvk5
CommentListも再利用前提ならプレフィックスを付けてArticleCommentListにしたらいい
ファイル数は増えていくが、コンポーネントをシンプルに保つ恩恵の方が圧倒的にでかい
ファイル数は増えていくが、コンポーネントをシンプルに保つ恩恵の方が圧倒的にでかい
2022/01/21(金) 14:04:37.79ID:sORVJkOm
結局はチームで統一されてれば良いって話ではあるけどね
87デフォルトの名無しさん
2022/01/21(金) 20:32:48.44ID:mtDqJL7w >>68
axios で投稿一覧取得して vue で表示する処理を書いたけど、
サーバ側でphpのforeachで回してた時htmlspecialcharsでエスケープしたり文字列操作したりしてたことをvue側でせないかんってことだよな?
なかなかめんどくさい気がしてきたがこのあたりどうしてるんだろうか
axios で投稿一覧取得して vue で表示する処理を書いたけど、
サーバ側でphpのforeachで回してた時htmlspecialcharsでエスケープしたり文字列操作したりしてたことをvue側でせないかんってことだよな?
なかなかめんどくさい気がしてきたがこのあたりどうしてるんだろうか
2022/01/21(金) 21:17:44.47ID:x9mhjTMm
マスタッシュ構文ならふつうにエスケープしてくれるはずだが
2022/01/21(金) 21:24:06.47ID:6I3Of8sH
>>87
逆に今時それを自動でやらないフレームワークなんてあるのか?
逆に今時それを自動でやらないフレームワークなんてあるのか?
2022/01/21(金) 21:57:20.08ID:cMXeDUr/
dangerouslySetInnerHTMLとかいう長くて物騒なパラメータ名大好き
2022/01/21(金) 23:16:24.74ID:2Ya+eSMz
2022/01/22(土) 01:22:23.25ID:ug6tBrwm
2022/01/22(土) 06:18:54.77ID:pRWoUPFR
はいはい、そうだね。がんばってね
2022/01/22(土) 07:19:40.45ID:SSulEqfs
NextAuth.jsって使ってる人いる?
2022/01/22(土) 09:02:27.22ID:ug6tBrwm
2022/01/22(土) 09:08:30.48ID:f0z1Aqc4
日本語でおk
2022/01/22(土) 17:28:48.01ID:nygG3ujp
最近はReact優勢らしいけど個人での小規模開発でもVueオワコンなの?
転職用のポートフォリオの為にGoとVueでウェブアプリケーション作ってるんだけど今からでも変えた方がいいのかしら
転職用のポートフォリオの為にGoとVueでウェブアプリケーション作ってるんだけど今からでも変えた方がいいのかしら
2022/01/22(土) 17:30:01.75ID:yOBcCnZH
2022/01/22(土) 20:09:13.48ID:63g4vstf
Vueは結局一回も触らんでオワコンなった
我ながら良い選択をしたね
今後メンテナンスしなきゃならん人はご愁傷様
我ながら良い選択をしたね
今後メンテナンスしなきゃならん人はご愁傷様
100デフォルトの名無しさん
2022/01/22(土) 20:19:21.52ID:gpkanxFS 今からVueとか罰ゲームかよ
101デフォルトの名無しさん
2022/01/22(土) 21:56:09.98ID:xUvzS2fG https://zenn.dev/ytr0903/articles/d0a91f6180d34e
↑
reactばっか使ってるわしはこれ読んで良さようやんって思ってんけどな
vueは具体的に何がオワコンなんだい
↑
reactばっか使ってるわしはこれ読んで良さようやんって思ってんけどな
vueは具体的に何がオワコンなんだい
102デフォルトの名無しさん
2022/01/22(土) 22:36:32.62ID:5qbRq3WR アジア圏でしか使われてない
Angularとずっとシェアがトントン
Angularとずっとシェアがトントン
103デフォルトの名無しさん
2022/01/22(土) 22:56:29.72ID:yOBcCnZH104デフォルトの名無しさん
2022/01/22(土) 23:09:14.68ID:FWl1ZFNo105デフォルトの名無しさん
2022/01/22(土) 23:18:25.01ID:mmM8IstB 別にvueでもいいと思うぞ
ここでオワコン言ってるやつは、そいつがそうなってほしいだけ
まあ、時間がそのうち決めるだろうさ
ここでオワコン言ってるやつは、そいつがそうなってほしいだけ
まあ、時間がそのうち決めるだろうさ
106デフォルトの名無しさん
2022/01/23(日) 00:34:43.39ID:Ywyyr4ki 単一ファイルコンポーネントはわりと好きだった
107デフォルトの名無しさん
2022/01/23(日) 00:38:59.45ID:TuoOb8rP これからはSvelteが流行るって聞いて勉強してるんだがそろそろReactもオワコン扱いしていかないか?
108デフォルトの名無しさん
2022/01/23(日) 00:58:41.28ID:L5G2SnD6 Svelteが殺してしまうのは多分ReactじゃなくてVueなんだろうな……
109デフォルトの名無しさん
2022/01/23(日) 01:07:55.47ID:5LuXaMWA110デフォルトの名無しさん
2022/01/23(日) 01:13:47.61ID:/7F6TbfS laravelとVueは中国語のドキュメントが充実している
11165
2022/01/23(日) 05:44:45.01ID:G94fcmHV 日本は特殊で、YouTube で有名な、雑食系エンジニア・KENTA のサロンでも、
未経験者の転職用にはReactよりも、Vue.js を使うように指示している
誰か、Vue.jsがオワコンかどうか、KENTAに聞いてみてくれ
PHP, Scala は、KENTAがオワコン認定したから、もう新規プロジェクトは無い。
ZOZO はLaravel だけど、創業者の前澤が、会社の株を孫正義に2千億円で売って逃げた
未経験者の転職用にはReactよりも、Vue.js を使うように指示している
誰か、Vue.jsがオワコンかどうか、KENTAに聞いてみてくれ
PHP, Scala は、KENTAがオワコン認定したから、もう新規プロジェクトは無い。
ZOZO はLaravel だけど、創業者の前澤が、会社の株を孫正義に2千億円で売って逃げた
112デフォルトの名無しさん
2022/01/23(日) 05:51:50.36ID:1P4fHIMN KENTA?
誰?
誰?
113デフォルトの名無しさん
2022/01/23(日) 07:22:45.53ID:sJJCSXxo ケンタはフロントが絶望的にできないからお呼びではない
114デフォルトの名無しさん
2022/01/23(日) 17:21:31.55ID:z9Jick6I 中国人ならvue
それ以外ならreact
それ以外ならreact
115デフォルトの名無しさん
2022/01/23(日) 17:25:00.77ID:yoD8olQP これからはvue3 x Nuxt 3だよ
Reactなんて外国にカブれてる奴が使ってるだけだろ
Reactなんて外国にカブれてる奴が使ってるだけだろ
116デフォルトの名無しさん
2022/01/23(日) 18:37:17.60ID:cVkgikFr 中国被れがなんか言ってるぞ
■ このスレッドは過去ログ倉庫に格納されています
ニュース
- 中国側が首相答弁の撤回要求、日本側拒否★2 [夜のけいちゃん★]
- 債券・円・株「トリプル安」に…長期金利1.755%まで上昇、円は対ユーロで史上最安値 [蚤の市★]
- 日本行き空路49万件キャンセル 中国自粛呼びかけ 日本行きチケット予約の約32%に相当 ★5 [ぐれ★]
- 【中国外務省】日中関係悪化は高市氏に責任と名指しで非難… ★6 [BFU★]
- 【音楽】Perfume・あ~ちゃんの結婚相手「一般男性」は吉田カバンの社長・吉田幸裕氏(41) 高身長で山本耕史似 [Ailuropoda melanoleuca★]
- 映画「鬼滅の刃」の興行収入急減、日本行き航空券大量キャンセル…中国メディア報道 [蚤の市★]
- ホテル業界、高市のせいで中国から大量キャンセル 「大変厳しい状態。一刻も早い収束を願います」 [271912485]
- 【高市悲報】日経、株安円安止まらない😭ああ…あ… [359965264]
- 【正論】玉木雄一郎「高市さんの答弁は米軍が攻撃を受けた場合を前提としており、撤回するのは難しい」特定野党を完全論破 [519511584]
- 👩「諸事情でミーアキャット飼えなくなったから誰か20万以上で買って😢」 [394133584]
- 麻生太郎氏、高市政権と距離を置きはじめる(´・ω・`) [399259198]
- 鈴木農水大臣「コメの価格が上がってるのは新米に切り替わったからです」 [256556981]
