Vue vs React vs Angular Part.2

**デフォルトの名無しさん** · 2019/03/09(土) 22:02:33.71

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
-
VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
※前スレ
Vue vs React vs Angular
http://mevius.5ch.net/test/read.cgi/tech/1545395856/

★ここではjQueryの話題は禁止です
★jQuery房が書き込んでも無視してください

**デフォルトの名無しさん** · 2019/05/30(木) 16:09:28.78

先生、質問です！
package.jsonのscriptで、

こうやって設定して、
"fn": "ts-node",

こうやって呼んでるのを
yarn fn app/hoge/function/class.ts

こうパスと拡張子を省略したいです。
yarn fn class

なんか良いアイデアないですか？

**デフォルトの名無しさん** · 2019/05/30(木) 18:05:06.34

vueで規模大きめのプロジェクト参加するかもなんだが
どうせ炎上するでしょ…

怖いわ

**デフォルトの名無しさん** · 2019/05/30(木) 18:54:05.42

vueが大規模案件で炎上しがちな根本原因って何？
vuexもあるのになぜ？
いわゆるvb/php現象？（集うプログラマのレベルが低い）

**デフォルトの名無しさん** · 2019/05/30(木) 19:10:18.66

>>885
まずVueはVuex使ってない場合が多い

**デフォルトの名無しさん** · 2019/05/30(木) 19:17:25.75

落ち着け
vueじゃなくても大規模案件は炎上する

**デフォルトの名無しさん** · 2019/05/30(木) 19:32:11.46

codepadのhtml/jsバージョン的なサービスってある？
vue.jsが動けばいい

**デフォルトの名無しさん** · 2019/05/30(木) 19:35:59.23

>>888

https://codesandbox.io/s/vue

**デフォルトの名無しさん** · 2019/05/30(木) 22:56:46.24

知らないけど、jsfiddle, jsdo.it などには、ライブラリは置いてないのかな？

**デフォルトの名無しさん** · 2019/05/31(金) 01:27:36.80

>>883
なんか奇妙な呼び方してる気が…。
「fn」が出てくる理由は分からないけど、ts-node の readme には↓の様に書いてあったよ。

# Execute a script as `node` + `tsc`.
ts-node script.ts

https://github.com/TypeStrong/ts-node/blob/master/README.md

これにならって、↓の様に呼んだら希望通りの動作する？

ts-node app/hoge/function/class.ts

**デフォルトの名無しさん** · 2019/05/31(金) 13:23:21.49

vueをgoogle トレンドでみたら
アメリカ限定だとangularと変わらないよな

vueは結局中国で人気ってだけだよなぁ

**デフォルトの名無しさん** · 2019/05/31(金) 13:52:56.01

AureliaがAurelia UXってのを提供してるんだが、こういうUXフレームワークって御三家にも存在するの？
ちなみにAurelia UXはAurelia以外でも使えるらしい
https://github.com/aurelia/ux/wiki

**デフォルトの名無しさん** · 2019/05/31(金) 15:08:54.16

Angular Materialみたいなのの話してる？

**デフォルトの名無しさん** · 2019/05/31(金) 21:11:33.75

TSLintが非推奨化されて無くなるのを最近知った
代わりにESLintのプラグイン開発に注力するらしい

**デフォルトの名無しさん** · 2019/05/31(金) 22:03:32.06

ReactはおおよそMaterialUI一強だけどVue.jsはVuetifyとかBuefyとかQuasarとかVuesaxとかわりとバラけてるから選定が大変だな

**デフォルトの名無しさん** · 2019/05/31(金) 23:14:44.04

Vuetifyかぁ
Bootstrapも飽きてきたし入れてみるかなぁ

**デフォルトの名無しさん** · 2019/05/31(金) 23:47:27.99

CSSフレームワーク使うの苦手

**デフォルトの名無しさん** · 2019/06/01(土) 07:37:42.14

というか、reactやvue使って、フレームワーク使う意義が良くわかんね。
動的にフロントをカスタムしたいから使ってんだろ？

高価な包丁を使って、冷凍食品の袋を切って、冷凍食品を食ってるみたいなもんだ。
その包丁でちゃんと料理しろよって言いたい。

**デフォルトの名無しさん** · 2019/06/01(土) 07:41:32.88

ちゃんと料理するのが目的ではない。
食べるのが目的
手早く物を食べられる時代に自分で料理するとかマヌケがすること
自分で料理したからって美味しいものができるわけではない
フレームワークなんていらない

**デフォルトの名無しさん** · 2019/06/01(土) 07:43:31.32

うまくても毎日カップラーメンじゃ体壊すぞという話

**デフォルトの名無しさん** · 2019/06/01(土) 07:49:16.20

動的にフロントをカスタムってよく分からんが素のCSSを一から書きたくないから使うんだろ

**デフォルトの名無しさん** · 2019/06/01(土) 08:11:30.38

>>901
手料理なら健康だって勘違いしてる人？
外食だって手料理なんだが

**デフォルトの名無しさん** · 2019/06/01(土) 08:53:50.47

コピペで解決するようなことばっかしてたらコードが腐るって話だよ。

**デフォルトの名無しさん** · 2019/06/01(土) 09:16:46.26

コードが腐るなんてオカルトを言い始めたｗ

**デフォルトの名無しさん** · 2019/06/01(土) 09:18:28.13

なんだまともにプログラム書いたことない人か。そりゃ話が通じないわけだ。

**デフォルトの名無しさん** · 2019/06/01(土) 09:19:43.73

じゃあ腐ってるコードとやらを見せてください。

**デフォルトの名無しさん** · 2019/06/01(土) 10:29:16.81

if else if else if if if if
みたいなやつ

**デフォルトの名無しさん** · 2019/06/01(土) 13:06:26.54

そんな俺俺用語を使われてもねぇ

**デフォルトの名無しさん** · 2019/06/01(土) 13:36:41.95

100歩ゆずって論理的に場合分けが不十分でいかにもバグりそうな書き方は腐ってると思う
真理値表で no care が多すぎみたいなやつ

**デフォルトの名無しさん** · 2019/06/01(土) 13:50:09.32

NO毛やー

**デフォルトの名無しさん** · 2019/06/01(土) 13:51:19.15

なんかもう全部blazorでええわってなってきた
さようならjavascript

**デフォルトの名無しさん** · 2019/06/01(土) 15:14:03.09

メタタグにblazorで作ってますって書いとけよ。
中身ないくせにバカみたいな激重サイト開きたくないんでｗ

**デフォルトの名無しさん** · 2019/06/01(土) 16:37:36.00

サイトｗｗｗ

**デフォルトの名無しさん** · 2019/06/02(日) 14:35:42.50

Reactアプリをtsで書く理由わかんない

**デフォルトの名無しさん** · 2019/06/02(日) 15:36:19.22

なんで？

**デフォルトの名無しさん** · 2019/06/02(日) 16:32:03.67

componentが受け取るpropとか型あったほうが絶対ええやん

**デフォルトの名無しさん** · 2019/06/02(日) 17:06:00.51

型はあったほうが良い。理由は型があったほうが絶対にいいからだ。

**デフォルトの名無しさん** · 2019/06/02(日) 17:21:24.98

型はないほうが良い。理由は型がないほうが絶対にいいからだ。

**デフォルトの名無しさん** · 2019/06/02(日) 17:25:22.38

書くコード量が増える
キャストがめんどい
オブジェクトの型宣言がめんどい

**デフォルトの名無しさん** · 2019/06/02(日) 17:58:21.32

ReactとReduxを入門したばかりの者ですが、react-reduxのconnectを各コンテナで行う意味がわかりません。Providerみたいに最上位コンポーネントだけで行えば？って思ってしまいます。詳しい方教えてください。

**デフォルトの名無しさん** · 2019/06/02(日) 18:06:38.96

>>921
どこからでもアクセスできたら意図しない書き換えがあったときにどこで書き換えられたのかが絞りにくくなるとかいう思想からじゃない？

**デフォルトの名無しさん** · 2019/06/02(日) 18:09:18.96

あとReducerの分割はstoreのを複数の要素で構成させるためですか？うまく説明できなくてすいません。

**デフォルトの名無しさん** · 2019/06/02(日) 18:10:27.33

型がないと扱ってる変数の型が途中でキャストされてこちらが期待する型と一致しなくなってバグの発生に繋がるから、無いよりはあった方が良い。

それに型付けをきちんとしていれば、変数に間違った型の値を入れようとしてもIDEとトランスパイラが教えてくれるからバグの発生を防げる。

型宣言は面倒くさいかもしれないけど、ちゃんと定義しておかないと
プロジェクトが大きくなった時や過去のコードの整備する時に困る事になるよ。

**デフォルトの名無しさん** · 2019/06/02(日) 18:11:08.95

>>922
fluxってグローバルにstateを管理するためのものじゃないんですか？
コンテナの子要素としかstateを共有しないという理解でいいですか？

**デフォルトの名無しさん** · 2019/06/02(日) 18:14:38.81

>>923
別に並立でドーンって並べたいなら並べてもいいけど
機能ごとに状態グループを分けた方が管理しやすいじゃん？

**デフォルトの名無しさん** · 2019/06/02(日) 18:19:35.60

>>925
だからConnectで使う状態とSetterを書いたコンポーネントからだけアクセスできるようにするモノ

四階層くらいコンポーネントをネストしてたら有効なもんだと分かると思う
あとredux-persistとか使えばブラウザのlocalStrageに状態を保存できるからリロードでも飛ばない状態が作れる

**デフォルトの名無しさん** · 2019/06/02(日) 18:25:02.69

>>926
https://ideone.com/wVwkT7
こういうstoreのとき
https://ideone.com/V4THFe
こういうreducerみたいに分割しないとネストしたstoreはreducerで定義できないんじゃっと思って。。。

**デフォルトの名無しさん** · 2019/06/02(日) 18:25:52.32

id変わったけど先程の人です

**デフォルトの名無しさん** · 2019/06/02(日) 18:27:33.76

>>928
つまり、storeのキー名と同じような名前のreducerを定義しないとstateで表現できないんじゃということです

**デフォルトの名無しさん** · 2019/06/02(日) 18:31:47.29

>>920
> 書くコード量が増える

書く量が増えるよりも、読む時にすばやく間違いなく読めるほうが重要

**デフォルトの名無しさん** · 2019/06/02(日) 18:34:19.37

型は読むとき素早く間違いなく読むためのものではない。
コンパイラに論理的間違い探しをさせてあとで指摘させるために与える付加情報だ。

**デフォルトの名無しさん** · 2019/06/02(日) 18:34:31.59

ていうかStoreに定義は書かんけどな

actionとreducerがあればいい

**デフォルトの名無しさん** · 2019/06/02(日) 18:37:15.76

>>933
reducerでstateいじったら自動的にstoreの要素に追加されるということですか？

**デフォルトの名無しさん** · 2019/06/02(日) 18:40:28.58

>>934
react routerとセットになってるヤツだけどこれのexamplesみてどういう風に書かれてるか追ってみるのが一番手っ取り早いと思う
https://github.com/supasate/connected-react-router

**デフォルトの名無しさん** · 2019/06/02(日) 18:41:39.95

>>935
ありがとう！！！

**デフォルトの名無しさん** · 2019/06/02(日) 18:47:53.43

>>920は単に意味のない問答じゃない理由となり得る理由を挙げてみただけ
実際TS使う恩恵は>>931じゃなく>>932だと思う

ソースを読むのに必要なのは変数の型がなにであるかよりも変数が何に使われてるかで
読む際に助けになるのは型名じゃなく分かりやすい変数名

ロジック的な誤りは読んでて見逃す事もあるしな

**デフォルトの名無しさん** · 2019/06/04(火) 03:06:15.14

Angularの公式サイトってChrome以外で見ると重いっていうか場合によってはロードできないみたいだな

**デフォルトの名無しさん** · 2019/06/04(火) 03:18:15.13

>>937
> ソースを読むのに必要なのは変数の型がなにであるかよりも変数が何に使われてるかで
> 読む際に助けになるのは型名じゃなく分かりやすい変数名

それが成り立つのは、変数の型が文字か数値の場合だけ

**デフォルトの名無しさん** · 2019/06/04(火) 04:11:58.83

>>939
変数がオブジェクトの場合なんて尚更読みやすさのためじゃなくオブジェクト形状の妥当性の為に型を書く意味合いが強いじゃん

**デフォルトの名無しさん** · 2019/06/04(火) 04:25:47.87

>>940
理由を１つも言わずに主張されてもなｗ

**デフォルトの名無しさん** · 2019/06/04(火) 11:04:44.50

【速報】金券五百円分とすかいらーく優侍券をすぐもらえる　　
https://pbs.twimg.com/media/D8I_wvBU8AAkV4V.jpg　　　　
　　
①　スマホでたいむばんくを入手　　　　　
②　会員登録を済ませる　
③　マイページへ移動する
④　招待コード→招待コードを入力する [Rirz Tu]（スペース抜き）　　　
　　　　　
今なら更に4日18時までの登録で2倍の600円の紹介金を入手　
クオカードとすかいらーく優待券を両方ゲットできます。　　　
　　　　　　
数分で終えられるのでぜひお試し下さい。　　　　　

**デフォルトの名無しさん** · 2019/06/04(火) 13:06:20.25

>>942
一万請求されたんだが…

**デフォルトの名無しさん** · 2019/06/04(火) 13:23:55.17

>>942
もう貰ってる

**デフォルトの名無しさん** · 2019/06/04(火) 22:08:17.71

>>943
俺も
詐欺だぞこれ

**デフォルトの名無しさん** · 2019/06/04(火) 22:11:14.13

なんで500円如きに釣られるんだよ

**デフォルトの名無しさん** · 2019/06/04(火) 23:53:06.78

一万とられるならマジやばいやつやん

**デフォルトの名無しさん** · 2019/06/05(水) 12:16:11.87

thisはどこにいてもthisだ

**デフォルトの名無しさん** · 2019/06/05(水) 19:43:51.13

>>948
アロー関数「（あれ？なんで俺、、この世に生まれたんだろ？）」

**デフォルトの名無しさん** · 2019/06/06(木) 11:34:24.08

func.call()にはthisパラメータ上書き機能まであるからな

**デフォルトの名無しさん** · 2019/06/07(金) 12:10:24.67

>>942
掲示板荒らすなってレビューすればいいのか？

**デフォルトの名無しさん** · 2019/06/09(日) 16:35:20.94

余談だけど
米オーディオ機器ハーマンの
Flashの移行サポートに使うフレームワーク
アパッチロイヤル？どうなのかな。

https://royale.apache.org/
https://services.harman.com/partners/adobe

ASって殆どTypeScriptだし
開発凄く楽そうなので興味はあるが。

**デフォルトの名無しさん** · 2019/06/10(月) 07:25:02.42

Reactできる人が羨ましいっすな
よくわからずで挫折してもうた流行ってるのが羨ましい
Angularは何とかギリギリ理解できてるから今後もっと流行ってくれないかなぁ・・・厳しいか＾q＾

**デフォルトの名無しさん** · 2019/06/10(月) 09:11:58.52

>>953
何が分からんの？ってかどこで躓いた？

**デフォルトの名無しさん** · 2019/06/10(月) 11:03:48.19

面白くなくてモチベーションが涌かないという躓き方

**デフォルトの名無しさん** · 2019/06/10(月) 21:09:32.44

reactは一歩一歩勉強できるツールなわけだが
どいつもこいつもその一歩一歩やることを拒否しやがる。

**デフォルトの名無しさん** · 2019/06/10(月) 22:02:17.16

①環境構築済みで
②コンポーネント作成者ではなく利用者側の場合、
めっちゃ簡単じゃない？
難しいのはreactではなくreduxの間違いでは？

**デフォルトの名無しさん** · 2019/06/11(火) 02:49:45.57

vuexは超簡単だったが

**デフォルトの名無しさん** · 2019/06/11(火) 04:10:47.47

reduxを使うからと言ってすべての状態をredux管理にする必要はないなって思った
ｒｅａｃｔ routerを使う場合にrouterを跨ぐ情報はreduxで管理した方が便利だし
routerを跨がないものは移動時のデータの破棄がひと手間になるからuseStateとかで処理した方がシンプルかなって

**デフォルトの名無しさん** · 2019/06/11(火) 06:33:43.52

そんなの当たり前

**デフォルトの名無しさん** · 2019/06/11(火) 07:16:39.19

それだったら分けずにreduxでまとめた方が俺は楽だけどな。

**デフォルトの名無しさん** · 2019/06/11(火) 08:20:47.84

後でreduxに入れるか変わったら面倒くさい

**デフォルトの名無しさん** · 2019/06/11(火) 08:24:20.32

コードが少なければ少ないほど、変更する時に変更するコードが少なくなるんだが、
Reactとかreduxとか、コードが増えるので保守性が下がってる。

**デフォルトの名無しさん** · 2019/06/11(火) 19:44:08.86

こういうバカはそのうちコードを書かずに人に命令するのが一番とか言い出す。

**デフォルトの名無しさん** · 2019/06/11(火) 20:19:38.34

>>954
もう序盤も序盤でつまずいた
https://jsbin.com/ragufuguwe/1/edit?js,output
これを、
「何でキー入力でタイトルをリネームするのにファイルをまたぐんだろう？
そのままHeader.jsにぜんぶまとめた方が管理しやすいのにな」と思ったりね
（今思うとこれはApp.jsのstateをHeader.jsに渡す(共有)ための作業なのかなと）
低レベルなアレですまんw

**デフォルトの名無しさん** · 2019/06/11(火) 21:11:53.97

vueでcomponent間に微妙な空白ができるんですけど仕様でしょうか？

**デフォルトの名無しさん** · 2019/06/11(火) 21:21:50.83

>>964
命令された人がコード書くじゃん
お前馬鹿なの？

**デフォルトの名無しさん** · 2019/06/11(火) 21:55:24.21

>>967
さすがにそれくらいはわかるか。よかった。

**デフォルトの名無しさん** · 2019/06/11(火) 22:10:53.11

じゃあ話を戻す

コードが少なければ少ないほど、変更する時に変更するコードが少なくなるんだが、
Reactとかreduxとか、コードが増えるので保守性が下がってる。

**デフォルトの名無しさん** · 2019/06/11(火) 22:35:27.21

>>965
その小さすぎる例では理解し辛いだろうけど
機能やデータがそれぞれ「どこにあるべきか」というのは大事だよ

分割もバランスではあるけど
システムの規模が大きくなるにつれて管理しやすさは逆転し得る

**デフォルトの名無しさん** · 2019/06/11(火) 22:47:41.48

>>966
Vue使ってるけど気になったことないな
あとそんな仕様は聞いたことないが

**デフォルトの名無しさん** · 2019/06/11(火) 22:49:58.12

「コードが少ない」の意味がだいぶ曖昧。
別に高圧縮かけた記号列が保守性が良い訳ではない。
つまり概念が直行してることが重要なわけだがそういう考察もなく
react, reduxのコード量だけで判断しているのはだいぶ愚かとしか言いようがない。

**デフォルトの名無しさん** · 2019/06/11(火) 22:52:53.90

>>972
そんな定義次元の話してないよ
コードの量って言ったらステップ数に決まってる

**デフォルトの名無しさん** · 2019/06/11(火) 23:10:00.88

Reduxを使うかどうかは場合に応じて臨機応変にだと思うがな
フォームのパスワードみたいな値とか特にReduxで持つべきではないと思うしpersistで持つとかもってのほかだし
逆にログインセッションみたいな値はReduxにpersistで持つのが望ましいと思う
とは言っても特定の頻度でサーバー側にステータスチェックを投げるのは必要だとも思う

**デフォルトの名無しさん** · 2019/06/11(火) 23:21:18.27

問題は、Reactのサンプルで、Reactを使うような例が
思いつかないってところなんだろうな

むりにつかっても、React使わないほうが
シンプルに実現できるじゃんって思われてしまう。

**デフォルトの名無しさん** · 2019/06/11(火) 23:32:37.16

SimpleというかRecyclableにする為に使って大規模になった時に結果として使わないよりもシンプルになるってところかな

**デフォルトの名無しさん** · 2019/06/12(水) 04:24:03.58

ウェブでOfficeソフトを作ってまーすってのならわかるが
ほとんどのサイトは大規模になることはないというね

**デフォルトの名無しさん** · 2019/06/12(水) 07:32:44.04

そらWebサイトならWordPressなりWixなりで作ってりゃいいだろ
その分野に関しちゃフレームワークの出る幕も俺の出る幕もありゃせん

**デフォルトの名無しさん** · 2019/06/12(水) 07:35:20.27

>>966
原因調べないと何とも言えないけど、多分vue と言うよりかはbuefy や vuetify みたいなUIフレームワークが関与してる気がする。

原因を調べるならchrome の開発者ツールで空白の気になるcomponent 要素のcssを見て、
そのスタイルが何由来で当たってんのかを調べてみれば？

**デフォルトの名無しさん** · 2019/06/12(水) 09:39:06.57

>>973
一つのステップに暗黙の動作を詰め込んだ言語だったら同じだろ。
それが本当にデバッグしやすいかと言えば全然そんなことはない。
ステップ数でなんでも測ろうとする奴が行き着くところが
自分でやらずに人売りするべしって発想だよ。

**デフォルトの名無しさん** · 2019/06/12(水) 09:51:58.07

>>980
暗黙の動作を詰め込むとかデバッグがどうとか的はずれすぎるｗ

暗黙の動作を詰め込まないようにしつつ、コードは少ないほうが良いし、
デバッグしやすくしつつ、コードは少ないほうが良いだろ

なんでコードを減らすと、暗黙の動作が増えてデバッグしづらくなるって思ってるんだろ？

**デフォルトの名無しさん** · 2019/06/12(水) 10:38:53.87

単純な見方しかしてないのがよくわかる。
マクロを使うことで極限までコード量を減らすことはできるが
全く保守性はよくなってない事例を知らんだけの無知野郎にはこれ以上何もいうことは無いわ。

**デフォルトの名無しさん** · 2019/06/12(水) 12:02:46.09

「直交性が大事」の意味を判ってなさそう