Vue vs React vs Angular vs Svelte Part.9

**デフォルトの名無しさん** · 2022/01/16(日) 16:06:14.27

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などはおｋ。

**デフォルトの名無しさん** · 2022/01/26(水) 11:53:28.56

>>174
お、そうだなおじいちゃんw

**デフォルトの名無しさん** · 2022/01/26(水) 11:55:32.37

>>175
一例だけで全体を押し測るのはどうかと思う

>>176
従来のページ遷移に見せかけてるだけであって別の概念
やっぱり全てリセットほどの安心感はないね

**デフォルトの名無しさん** · 2022/01/26(水) 11:56:49.13

>>177
俺はまだおじいちゃんじゃないけど、世の中おじいちゃんおばあちゃん、おじさんおばさんがどんどん増えてるんだから、彼らに最適化したシステムを作るべきなんだよな

**デフォルトの名無しさん** · 2022/01/26(水) 11:57:50.70

>>174
それは見た目(デザイン)の問題であって
シングル/マルチとは関係なさそう

**デフォルトの名無しさん** · 2022/01/26(水) 11:59:54.06

IE使ってそうなおじいちゃんだなw

**デフォルトの名無しさん** · 2022/01/26(水) 12:01:00.51

>>178
概念が違っても見かけが同じなら気づかなくね？
例えば、ユーザーはTwitterのタイムラインとツイート単独画面を別のページだと思ってるでしょ

**デフォルトの名無しさん** · 2022/01/26(水) 12:03:56.46

>>180
デザインの違いじゃなくてあの遷移するときのいったんリセットしてロードし直してる感が良いんだよ
あれがあるとすごく安心するんだ

**デフォルトの名無しさん** · 2022/01/26(水) 12:04:33.05

>>181
Chrome、EDGE、時々Safari使ってる

**デフォルトの名無しさん** · 2022/01/26(水) 12:10:01.72

>>182
気付いてはいるだろう
あれリロードされないぞって

**デフォルトの名無しさん** · 2022/01/26(水) 12:16:09.14

それ、ただの遅いサイトでは……。
じゃあロード画面でも表示しますか

**デフォルトの名無しさん** · 2022/01/26(水) 12:16:30.19

現代の大半の人間はYouTubeやTwitterとかLINEやTikTokとかのアプリを長い時間使ってるし、それらのアプリはSPAの動きするから現代の人間にとってはSPAの方が慣れていると思うぞ
ゆえにページ移動の度に画面が一瞬真っ白になるのって「なんやこれ？」ってなる

**デフォルトの名無しさん** · 2022/01/26(水) 12:23:35.09

>>186
ロード画面はいいかもね
あとは上から徐々にレンダリングされていくあの感覚
あそこまで再現できれば安心感を演出できるかも

**デフォルトの名無しさん** · 2022/01/26(水) 12:25:11.75

>>187
ないない
そんなのごく一部の例外だって
世の中のほとんどはまだSPAになってないし今後もならないだろう
ユーザーはよく使うマルチページのほうが親しみがある

**デフォルトの名無しさん** · 2022/01/26(水) 12:28:05.87

どこまでネタかわからん

**デフォルトの名無しさん** · 2022/01/26(水) 12:28:56.83

あとね
SPAに慣れるってことは基本的にないんだ
SPAで作った特定のアプリに慣れることはある
だけどそれに慣れたとしても別のアプリには慣れない
だってSPAのアプリは個性的でそれぞれ違う動きをするから

これとは対照的にマルチページアプリはどれもウェブの作法を守ってるので異なるアプリでも共通点が多い
なのでマルチページアプリに慣れるってのは大いにあり得る

**デフォルトの名無しさん** · 2022/01/26(水) 12:34:01.00

慣れるも慣れないも時代によって使われる技術は変わるだろ
頭カッチコチの老人かよ

**デフォルトの名無しさん** · 2022/01/26(水) 12:34:24.78

視野が恐ろしく狭い

**デフォルトの名無しさん** · 2022/01/26(水) 12:40:35.07

>>189
スマホ持ってないの？
お年寄り用とか子ども用のスマホなら持ってる？
それならYouTubeとかTwitter使えないかもしれないけども
言うてもネイティブアプリってSPAになってるやつしか見たことないな

**デフォルトの名無しさん** · 2022/01/26(水) 12:41:06.07

>>192
変わるものもあれば変わらないものもある
HTML、HTTPはず～～～っと昔からあってあまり変わってない
SPAの方が異端なんだよ明らかに

**デフォルトの名無しさん** · 2022/01/26(水) 12:41:39.99

親しみのあるガラケー使ってんだろ

**デフォルトの名無しさん** · 2022/01/26(水) 12:42:31.75

前にいたjqueryおじやろw

**デフォルトの名無しさん** · 2022/01/26(水) 12:42:53.80

>>194
ネイティブの話はしてないよ

**デフォルトの名無しさん** · 2022/01/26(水) 12:44:09.89

>>195
HTMLもHTTPも時代に合わせて変わってるけど？
変わってないのはお前の頭だけな

**デフォルトの名無しさん** · 2022/01/26(水) 12:47:38.52

>>196
流石にモバイルはとっくにスマホだよ
三輪車と自動車ぐらい差がつく物なら流石に自動車を選ぶ
それは当然の選択だろう

でもSPAとマルチページアプリってそこまで差がないと思うなー
普通の自転車とロードバイクぐらいの差かなー？
つうか差がないどころか使い勝手はマルチページアプリの方が良いとすら思ってるよ
自転車の例えで言うと「あのー速いのはわかったんですけど、ロードバイクのハンドル持ちにくいんでね。普通のハンドルにしてくれませんか？」みたいな感じ

**デフォルトの名無しさん** · 2022/01/26(水) 12:48:21.26

>>199
あまり、って言葉が見えなかった？

**デフォルトの名無しさん** · 2022/01/26(水) 12:49:54.45

>>175
> twitterが複雑で使いづらいとか聞いたことないが

え？スクロールした後、進むとか戻るで
スクロール位置がリセットされて使いづらいって聞いたこと無いの？

**デフォルトの名無しさん** · 2022/01/26(水) 12:50:10.88

>>197
いや開発者の立場だったらreactおじさんだよw
ユーザー目線の使いやすさはともかく開発するだけならSPA途轍もなく簡単だからね
開発者なら楽な方を選ぶのが正解だ

**デフォルトの名無しさん** · 2022/01/26(水) 12:50:45.25

Googleの検索なら、ページがあるから
10件単位ぐらいで位置を覚えてくれるから便利

**デフォルトの名無しさん** · 2022/01/26(水) 12:51:23.72

個人の感想過ぎる

**デフォルトの名無しさん** · 2022/01/26(水) 12:51:54.58

不便でもそれに慣れてしまうと、不便だって気づかない良い例だな

**デフォルトの名無しさん** · 2022/01/26(水) 12:53:39.85

>>198
①アナリティクスとかアドセンス使ってればユーザーがアクセスしているデバイスが分かるけど、多くのWebサイトやWebアプリはスマホユーザーがめっちゃ多い
②スマホユーザーってのはYouTubeとかTwitterとかのLINEとかのネイティブアプリを長い時間かけて使っていると考えられる
③ネイティブアプリってのはほぼSPAな動きをするから、ネイティブアプリを長い時間使ってるユーザー＝SPAの挙動に慣れてる、と推測できる
よってWebサイトにせよWebアプリせよSPAの方が、スマホユーザーにとっては体験がいいんじゃないの、ってことよ

ただ、②のスマホユーザーが「ネイティブアプリ触ってる時間は1日の内わずかです、割合で言うとWebサイトを閲覧してる時間の方が多いです」ってなったら上の理論は成り立たないよ

**デフォルトの名無しさん** · 2022/01/26(水) 12:53:51.96

>>206
SPAに慣れちゃったらそうなるのかなー？

**デフォルトの名無しさん** · 2022/01/26(水) 12:56:24.92

>>207
さっきも言ったけどSPAに慣れるってことはないんだよ
共通の作法がないからアプリごとに固有の見た目と動きがある
なのでネイティブのアプリに慣れたとしてもそれでSPAに慣れたということにはならない
SPAの個々のアプリについてそれぞれ練習が必要で習熟には時間がかかる

**デフォルトの名無しさん** · 2022/01/26(水) 12:58:31.67

>>207
続き

君が言ってることはつまりこういうこと
「YouTubeやLINEのネイティブのアプリに慣れたらVSCodeにも慣れたことになるよね」

そうはならんやろ？

**デフォルトの名無しさん** · 2022/01/26(水) 12:58:49.67

SPAでMPAの動作を苦労して作る
なら最初からMPAを使えば？

**デフォルトの名無しさん** · 2022/01/26(水) 13:01:08.23

>>211
苦労したくないからSPAで作る
ユーザーには御免なさいだけど使いにくいものを使ってもらう
仕事だからね
信念とは違うこともやらんといかんのよ

**デフォルトの名無しさん** · 2022/01/26(水) 13:01:30.33

頭が固かったり、自分だけの意見を曲げられなくなってて意固地になったり、
長文だったり、連投したり、例えをしだしたり、
典型的な前時代のおっさんじゃんw
ずっとブラウザリロードしてろよw

**デフォルトの名無しさん** · 2022/01/26(水) 13:03:09.96

SPA大嫌いジジイを見てると、日本が何で発展しないかよく分かるわ
既存のやり方に固執して、変化する世界には目を背けて「今までこれでうまくやってきたからいいんだよ！」と開き直る
日本の中枢にいるやつらってこんなんばっかりだもんな

**デフォルトの名無しさん** · 2022/01/26(水) 13:03:33.05

>>213
中身への言及がない時点でお察しのレス

**デフォルトの名無しさん** · 2022/01/26(水) 13:04:07.74

>>215
そういうとこw

**デフォルトの名無しさん** · 2022/01/26(水) 13:06:20.85

なんか最近やたらNuxtからNextに移行しましたみたいな人増えたけど、これただreact使いたいだけだよねえ

**デフォルトの名無しさん** · 2022/01/26(水) 13:08:51.44

>>214
日本は世界でも有数の先進国だが？
国内にいると世界が見えないとよく言うがまさにそれだね
良いものは良いものとして長く使う
本当に良いものは取り入れて改良する
日本は今も昔もそうやって世界をリードしてきたんだよ

SPAだと開発が簡単なところは評価している
なのでうちもSPAを開発に取り入れている
発展はしているのだ
それがユーザーの利便性に繋がるかはまた別の話
全てはコスト・パフォーマンス

**デフォルトの名無しさん** · 2022/01/26(水) 13:11:54.93

jQueryおじさんと芸風が同じだな

**デフォルトの名無しさん** · 2022/01/26(水) 13:12:25.00

>>213
MPAはリンクをクリックした時にページが自動的にロードされる
わざわざブラウザをリロードなんかしない
そんなことも知らないのか？

**デフォルトの名無しさん** · 2022/01/26(水) 13:31:42.79

>>220
ん？ID:qAyrcykqと同じ人？
MPAがどうだなんて絡んだつもりないぞw
IEでjqueryおじがブラウザリロードしてそうだからw

**デフォルトの名無しさん** · 2022/01/26(水) 13:44:37.41

4〜5年前からSPA前提の案件しかやならくなったけどなー
てかMPAで済むような案件安くて割りに合わなくない？
Nuxt使って開発中の機能プレビュー出来るようにしたら
客が気に入っちゃって毎回Nuxt指定で発注くるわw

**デフォルトの名無しさん** · 2022/01/26(水) 13:54:40.62

単価は分からんけどちょっとそこはなんとも言えない気もする
大規模ECのPC版サイトはいわゆるMPAが多い気もしていてそこが安いとも思えない
あと古い業務システム（の保守とか）はまだ多くて、人こないから高くなってそう

後者の会社の人にSPAバリバリのページ見せると目が輝くw導入はまた別の話だけどもw

**デフォルトの名無しさん** · 2022/01/26(水) 14:32:09.32

このおじさんに名前つけようぜ

**デフォルトの名無しさん** · 2022/01/26(水) 14:36:23.23

結局Reactが一番無難？

**デフォルトの名無しさん** · 2022/01/26(水) 16:11:57.51

またこいつ暴れてるのかよ
まあ好きにしろ
それでジョーカーを防げるなら安いものだ

**デフォルトの名無しさん** · 2022/01/26(水) 17:07:36.34

>>225
Reactがしっくりくるならreactでいいんじゃない
初学者が独学でフロントエンド学ぶってならユーザーフレンドリー強調してドキュメントとかに力入れてるvueでいいと思うけど

**デフォルトの名無しさん** · 2022/01/26(水) 17:17:45.06

表題のフレームワーク・ライブラリは全部ドキュメント充実してると思う。良い時代だ

**デフォルトの名無しさん** · 2022/01/26(水) 18:21:10.66

なんか荒れてて草

**デフォルトの名無しさん** · 2022/01/26(水) 22:43:34.74

>>224
レガシーに縛られてるしかなりの石頭な上に自分から動くことももうできないみたいだから、化石とか？

**デフォルトの名無しさん** · 2022/01/27(木) 04:10:57.05

angularでプログレスバーの進捗率を操作してやってる良いサンプルコード無いですかね？

**デフォルトの名無しさん** · 2022/01/27(木) 23:44:42.37

ReduxやRecoilはコンポーネントの凝集度を上げ、疎結合とすることに意味があるのに
すぐバケツリレーの是非の話に置き換えて議論してるのを見かける
本質はそこじゃないだろって毎回思う
バケツリレーが辛いとか辛くないとかどうでもいいんよ

**デフォルトの名無しさん** · 2022/01/28(金) 12:25:41.63

コンポートがreduxやらrecoilといったインフラストラクチャに依存してたら嫌だな
疎結合を謳うならコンポートは純粋にして全ての副作用をpropsで渡すのが正解

**デフォルトの名無しさん** · 2022/01/28(金) 13:08:31.65

reduxとかは再描画抑えるってのが重要なのでは

**デフォルトの名無しさん** · 2022/01/28(金) 13:34:23.09

Hooksが当たり前になってから状態管理ライブラリそのものが必要なくなってきたけどね

**デフォルトの名無しさん** · 2022/01/28(金) 13:45:11.84

redux持ち上げてたやつ反省しろ

**デフォルトの名無しさん** · 2022/01/28(金) 14:21:14.42

パフォーマンスに取り組もうとするとuseCallback地獄になってコードの見通しが最悪
依存性指定は間違えやすいのに間違えるとデバッグしにくいバグになって現れる
困ったものだ

**デフォルトの名無しさん** · 2022/01/29(土) 07:46:05.80

こういうパターンがあるのか。良さげ

コンポーネントをカスタムフックで提供する
https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/

**デフォルトの名無しさん** · 2022/01/29(土) 08:42:38.68

普通のカスタムフックに見えるけど
うちのにもuseが大量に転がってるぞ
カスタムフックだらけだ

**デフォルトの名無しさん** · 2022/01/29(土) 08:55:48.59

結構使われてるのか～

**デフォルトの名無しさん** · 2022/01/29(土) 09:12:06.81

>>240
関数が関数を帰す事をやってない人からみたら
目新しく見えるだけ

**デフォルトの名無しさん** · 2022/01/29(土) 09:16:48.65

>>241
いや、高階関数には親しんでるけど、カスタムhookには詳しくなくてね。
勉強になりました。ありがとう

**デフォルトの名無しさん** · 2022/01/29(土) 09:17:07.12

ロジックと外観が密結合していてなんかもやもやするがこれが正解なのか？

**デフォルトの名無しさん** · 2022/01/29(土) 09:20:42.85

>>243
笑
フック入門としては分かりやすくて良いけど

**デフォルトの名無しさん** · 2022/01/29(土) 09:43:05.22

renderは分けたほうがいいよ

const useChecks = (labels: string[]) => {
const [checkList, setCheckList] = useState(labels.map(x=>false));
const handleCheck = useCallback((index: number) => {
setCheckList((checks) => checks.map((c, i) => (i === index ? !c : c))) }, []);
return {
labels, checkList, onCheck: handleCheck,
isAllChecked: checkList.every(x=>x) }

const App = () => {
const checks = useChecks(["a", "b", "c"]);
return <div>
<Checks {...checks} />
<button disabled={!checks.isAllChecked}>next</button>
</div>
}

**デフォルトの名無しさん** · 2022/01/29(土) 09:52:17.20

>>244
理解できるかどうかでなく良し悪しの問題な
フックは元々コンポートから状態・副作用を抽出するためのものなのにrender hookパターンじゃあ取り除けてないどころかさらに強固に結び付いてるじゃないか？
俺が書いたごく普通のフックなら完全に見た目と振る舞いが分離してるので再利用性が抜群に高く、デフォルトの動作を提供するのも簡単だろ

**デフォルトの名無しさん** · 2022/01/29(土) 11:30:56.31

抽出？

笑

**デフォルトの名無しさん** · 2022/01/29(土) 11:39:03.04

>>245
どちらかというと俺もそんな感じに書くな

選択肢や選択状態というデータと
チェックボックスという見栄えは
分離させておきたいかもってことで

**デフォルトの名無しさん** · 2022/01/29(土) 14:54:58.79

>>136
useStyleってv5ではあんま使わなくなった印象

**デフォルトの名無しさん** · 2022/01/29(土) 15:13:12.86

>>136
お前そもそもBootstrapすら使った事ないだろ

**デフォルトの名無しさん** · 2022/01/29(土) 15:14:57.47

>>235
useContex使うよりはrecoil使う方が楽だと思うけどなあ

**デフォルトの名無しさん** · 2022/01/29(土) 19:12:41.17

SuspenseってFlatListでどうやって使えばいいんだ？

**デフォルトの名無しさん** · 2022/01/29(土) 21:25:26.99

Flatlistに組み込まれないと無理なんじゃねーかな

**デフォルトの名無しさん** · 2022/01/29(土) 21:29:33.14

hooks、逆に混乱する要素増やしただけじゃん

**デフォルトの名無しさん** · 2022/01/29(土) 21:43:32.60

だよな
svelteの巻き返しあるかも

**デフォルトの名無しさん** · 2022/01/29(土) 22:31:16.11

>>253
やっぱそうか
Microsoftが.netにasync awaitを導入した時みたいにライブラリ側も一気に対応してくれんと困るよね
そのあとサードパーティのライブラリも対応時間かかりそうだし
しばらくは混乱が続くのかなー

**デフォルトの名無しさん** · 2022/01/30(日) 03:50:00.39

ReactからSvelteに移行する人は元からReactでやる必要のない事をReactでやってた人だろうな
自称Reactヘビーユーザーとか言ってたのとかまさにそれ

**デフォルトの名無しさん** · 2022/01/30(日) 11:11:15.26

reactは場面場面で最適な書き方がガラッと違ってて統一感なくなるのがしっくりこない
非同期読み取り専用ならSuspense
入力系なら別の書き方、FlatListなら読み取りだけでもまた別の書き方、複合的な画面はカオス、みたいな

**デフォルトの名無しさん** · 2022/01/30(日) 12:41:32.79

それは何使っても一緒では？
さまざまなライブラリを組み合わせる都合上仕方ないことかと

**デフォルトの名無しさん** · 2022/01/30(日) 12:53:14.17

Reactのコードって
ゴミゴミしいんだよなーー
可読性に難がある

**デフォルトの名無しさん** · 2022/01/30(日) 12:58:54.46

Reactはデータ構造がスッキリするから全体としては見通しが良くなる

**デフォルトの名無しさん** · 2022/01/30(日) 13:06:36.70

大規模サービスを構築するならReactの方が良いけど
ちょっとした画面表示くらいならVueのほうが書きやすいんよね結局
だから日本企業に合ってるのはVueなんよ

**デフォルトの名無しさん** · 2022/01/30(日) 13:11:05.43

svelteのREPL SZVg viewBox animationのHTML部

{#each Array(4) as row, row}

がある。
javascriptでは解釈されるのに、typescriptではrow,rowの重複が問題になると警告が出る。
この回避方法って分かります？

**デフォルトの名無しさん** · 2022/01/30(日) 14:01:02.68

>>262
日本企業ディスりすぎだろw

**デフォルトの名無しさん** · 2022/01/30(日) 19:25:52.18

>>262
ちょっとした画面だと思ってたものが壮大な画面になるのは日本企業あるある
yahooのトップページをみろ
いまだにあの古臭いデザインだぞ

**デフォルトの名無しさん** · 2022/01/30(日) 19:56:11.11

担当のお客さま複雑だと使ってもらえないって自分で言っときながら要件はめちゃくちゃ複雑なの出してくるんで呆れた
reactだと簡単に実装できちゃうから要件のんでそのまま作るけどMVCでシンプルな設計にした方がエンドユーザーは喜んだだろうな

**デフォルトの名無しさん** · 2022/01/30(日) 20:12:24.88

ReactだろうがMVCだろうがエンドユーザーにはシンプルに使えるようにするのがお前の仕事だろ

**デフォルトの名無しさん** · 2022/01/30(日) 20:36:25.75

そりゃ無理だね
複雑に使いにくく作るのがユーザー要件だから

**デフォルトの名無しさん** · 2022/01/30(日) 20:54:46.23

そっか
じゃあ問題ない

**デフォルトの名無しさん** · 2022/01/31(月) 02:25:23.43

そこでサードライブラリを入れないで使えるAngularですよ
誰がやってもフレームワークの書き方

**デフォルトの名無しさん** · 2022/01/31(月) 02:44:02.27

何も考えたくないならangularだね
Googleで使われてるし少なくとも数年後に捨てることはまずないし
捨てたとしても移行ツールは用意されるはず

9 · 2022/01/31(月) 05:14:19.99

>>263
このスレは、荒らしが立てたスレです。
まともな人は、移動してください！

>>9-10
を参照

**デフォルトの名無しさん** · 2022/01/31(月) 05:26:45.90

そのスレお前すら使ってないじゃん
先にお前が移動しろよ

**デフォルトの名無しさん** · 2022/01/31(月) 06:59:29.82

このスレになってから明らかに内容が良くなったし、あっち行く理由がない

**デフォルトの名無しさん** · 2022/01/31(月) 20:04:14.52

>>233
使い回さないページ固有のコンポーネントにContainerやカスタムフックで分離して注入する
あと、propsですべてを渡すのは変更や修正に弱い
影響範囲なんて狭いに越したことはないだろ？

>>237
だから結局は小規模でもRedux(RTK)やRecoil使って上位で疎結合にしたら良い
下位は使い回すこと前提だから純粋な状態を保つようにする

**デフォルトの名無しさん** · 2022/01/31(月) 20:21:33.23

上位に副作用を集約して下位に流し込んでくだけ
特に変更に弱かった事例にもあたったことないな
これが変更に弱かったらreact以外の関数型も全部変更に弱いってことになる