X



Vue vs React vs Angular Part.3
■ このスレッドは過去ログ倉庫に格納されています
0003デフォルトの名無しさん
垢版 |
2019/06/12(水) 19:11:10.66ID:MP1tRols
1. jQueryはシンプルに書けるVue・Reactは冗長

証拠 https://jsfiddle.net/t62b49mp/

JavaScriptのコードはこれだけ
$('.my-component [name="switch"]').change(function() {
 $(this).closest('.my-component').toggleClass('active', this.checked);
});

2. 信者「Vueならこれだけで動く!」

嘘1 isActive=false

嘘2 new vue({data:{isActive:false}})
https://codepen.io/anon/pen/MxmrjP (動かない)

嘘3
new Vue({
el: '#app',
data: {isActive:false},
})
https://codepen.io/anon/pen/XGgpZV (変な動きをする)

3. 結論
jQueryはシンプルに書けるVue・Reactは冗長
0005デフォルトの名無しさん
垢版 |
2019/06/13(木) 11:30:36.40ID:euXigNzW
>>1

前スレの話題、無駄に冗長なコードよりは短い方が良いだろうけど
短さも保守性の一要素であって
同じく保守性に影響する型チェックや適切な分割などとトレードオフになることもある

WebサイトというよりWebアプリ向けのフレームワークとしては
最もスマートなHello worldが書けることより
規模や複雑さが増大したときに保守可能であって欲しい
0006デフォルトの名無しさん
垢版 |
2019/06/13(木) 14:24:17.80ID:9Vo7Y55o
googleで「アヌス」って検索してたら
「新婚旅行で特別な体験」っていうタイトルがヒットしたので早速開いてみたら
ディオクレティアヌス皇帝の浴場レストランに行った話だった
0011デフォルトの名無しさん
垢版 |
2019/06/22(土) 00:23:12.00ID:3TgqxsPN
>>9
【メリット】
・ネイティブアプリみたいに滑らかな画面遷移が可能。

・マテリアルデザインのガイドラインに沿ったUIライブラリが豊富。

・双方向バインディングによりHTMLの状態とJavascript オブジェクトの状態を一致させる事ができ、
jQueryを用いた泥臭いDOMいじり作業が不要。

・Cordovaでアプリ化してストアに登録する事も可能。

【デメリット】
・クローラがSPAに対応してない。SEO対策が必要な案件にはSSR必須 = サバーサイドのスキルも求められる。

・jQuery等のライブラリと比較して学習コストが鬼。特にAngular。

・Angular vs React vs Vue とスレタイにある通り、まだデファクトスタンダードが決まってない。


こんな感じかな。俺的には初心者には Vue → Nuxt がオススメ。
日本語ドキュメントが豊富で取っ付きやすい。
オススメしないのはAngular。TypeScript 必須 & 覚える事多い & 開発元の Google が最近Flutterばっか推してて将来 Flutter for web に喰われるかも。
0012デフォルトの名無しさん
垢版 |
2019/06/22(土) 00:33:07.00ID:3TgqxsPN
あ、もう一つ最大のデメリット忘れてたわ。

・基本的にはモダンブラウザのみ対応。古いPCを使ってるケチな会社…もといレガシーな環境では使えない。
0013デフォルトの名無しさん
垢版 |
2019/06/22(土) 02:31:23.59ID:e0kWbxTa
よく自信満々で偉そうに思い込み騙れるな。
3つともIE9で見れるが。IE9はモダンブラウザですか?
0016デフォルトの名無しさん
垢版 |
2019/06/24(月) 01:02:21.54ID:eytL/XJT
他所で訊いてここが良いと言われたので、質問させてもらいたくやってきました

Vueをtypescriptで書いて、property-decoratorで@Emitデコレータを使いたいときに
外部ファイルからimportしたvueインスタンス(仮にextvm)に
イベントをemitしたいときってどうやればいいのでしょうか

this.$emit('call')

@Emit() call{}
は相当していますが

extvm.$emit('call')
を投げるにはどうすればいいのだろうかという疑問です
property-decoratorの公式も見てみたのですが
例は全部this.$emitの置き換えばかりで分からなかったので
詳しい方いらっしゃいましたらお教えいただければ幸いです
どうぞよろしくお願いいたします
0021デフォルトの名無しさん
垢版 |
2019/06/24(月) 18:12:51.55ID:TlmQ/GE6
jsがどのくらい出来たらvue.jsとかのフレームワーク習得が良いの?
html/cssコーダーとして4年くらいやってたんだけどjQueryでdomいじるくらいで他にライブラリ導入するくらい。
正しい記法やらも知らないし、js単体でのアプリケーション作成なども全く無理な状態。
0025デフォルトの名無しさん
垢版 |
2019/06/24(月) 23:30:41.44ID:TlmQ/GE6
なるほど。使わない人には必要ないと。
しかし今転職考えててスキルセット考えるとコーダー関連しかできませんだと、どうにも辛い状況なんですよね。
PWAだのSPAだの作れますと言える状態にしたいのは間違いないので、とりあえずjsの勉強始めます。
0026デフォルトの名無しさん
垢版 |
2019/06/25(火) 01:08:11.49ID:y6XNwTlk
google i/o 2019見た?
googleがweb.devにreactのガイドコンテンツ作るってよww
google謹製angularの立場wwww
0029デフォルトの名無しさん
垢版 |
2019/06/25(火) 06:50:25.49ID:SxemZYeq
>>16
やりたい事半分も理解できてないから正しい回答か自信ないけど、2つのtsコンポーネントでファンクションを共有化したいのかな。


であれば自分なら2つのコンポーネント用tsファイルとは別にexport class書いたtsファイル1つ作って、
static なファンクションの中に共有したいファンクション書くな。

後は2つのtsコンポーネント上でそれぞれ↑のクラスをimportして、
import { CommonFuncClass } from './CommonFuncClass.ts';

@Emit call{
CommonFuncClass.funcName;
}

みたいにすればいいんでない? 適当に書いてるから間違ってたらすまん。
0032デフォルトの名無しさん
垢版 |
2019/06/25(火) 15:05:28.37ID:7F89fU7n
TypeScriptはあまえ
0033デフォルトの名無しさん
垢版 |
2019/06/25(火) 23:31:08.98ID:sm3AeLff
スレの趣旨から少しずれてすみません
VueJS使っていて

どうしても $.ajax() の利便性を用いたく(jsonpの利用等で)
VueJS中でこういった部分的なjQueryの実装をしている人はいますでしょうか?
0035デフォルトの名無しさん
垢版 |
2019/06/26(水) 00:06:33.98ID:OukDf0at
>>33
通信部分で何使おうが大勢に影響ないし好きにしたら良い
唐突な$が気持ち悪い程度の話
0036デフォルトの名無しさん
垢版 |
2019/06/26(水) 02:09:39.85ID:vlY6iP+W
>>33
jQueryでDOMいじりしないならjQuery混在させても良いんじゃない?
ただajaxなんて使わなくても、Vueにはaxiosがあるからそっち使ったほうがいいよ。
(jQuery入れてると、jQueryしか出来ない馬鹿がjQueryをDOMいじりに使いやがるから)

あと、JSONPを使うのはCORSの制限回避の為? 素直にコンテンツサーバー側のCORS設定見直したほうが方向性としては正しいかと。
0040デフォルトの名無しさん
垢版 |
2019/06/26(水) 08:54:25.99ID:qk5ECIA8
>>39

349 デフォルトの名無しさん sage 2019/04/11(木) 19:42:22.98 ID:GR4ezT/u
日本にいるとVue人気だから勘違いしそうになるがやっぱ採用実績はReactが圧倒してるんだな。475kサイト vs 64kサイトか……
しかしなぜかGitHubのスター数だけタメ張ってるw
Top JavaScript Frameworks For 2019
https://www.codementor.io/nikhil21tyagi/top-javascript-frameworks-for-2019-s8881i8ga

パフォーマンスについてはReactよりVueのほうがいいな。
AppRunってやつ速くて気になる。
しかしAngularいくらなんでも酷すぎる……
A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)
https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075
0041デフォルトの名無しさん
垢版 |
2019/06/26(水) 10:17:06.57ID:tKP4UJlx
毎回同じヤツが言ってるのか知らんが旧版のAngularJSをAngularかのようにミスリードするのはどうかと思う
0042デフォルトの名無しさん
垢版 |
2019/06/26(水) 11:19:59.87ID:+23jdxl3
Vue.js, jQuery は、併用できない

Vue.jsは仮想DOM で、独自のタイミングでDOMを更新するから、
jQueryで実DOMを変更しようとしても、元に戻ってしまう!

axios を使えば?
0043デフォルトの名無しさん
垢版 |
2019/06/26(水) 12:36:54.61ID:qk5ECIA8
RubyキチガイがhttpクライアントライブラリであるaxiosでDOM操作するようですwwwww
0047デフォルトの名無しさん
垢版 |
2019/06/27(木) 19:53:10.03ID:8Wr3UmF0
全体から見たらほとんどのライブラリがjQuery要求するしなぁ
もちろん代替自体は進んでるけど、世の中新規案件より過去案件の保守しなければいけないポイントは増え続けてるわけで。
0048デフォルトの名無しさん
垢版 |
2019/06/27(木) 20:06:51.85ID:pgi+u0Sx
ふーんMath.jsとかlodashとかThreeJSとかjQuery要求するんだ。へぇ。
0052デフォルトの名無しさん
垢版 |
2019/06/28(金) 06:44:40.28ID:vIsijqQP
電子化して働き方改革だあ!って号令のもと新規で社内システム作っちゃったから5年は面倒見ることになりそう、後輩が…
0053デフォルトの名無しさん
垢版 |
2019/06/28(金) 22:46:21.72ID:WUhg5hVA
React は残るんじゃない? バックが Facebook だし。
Angular が残るか消えるかは Google の気分次第かな。現にAngularJSは消えた様なもんだし。
Vue は Evan の個人開発だから、Evan の寿命が Vue の寿命かな。
005433
垢版 |
2019/06/29(土) 01:05:21.67ID:kVSg4mo7
助言を沢山下さりありがとうございます。
JQueryとの併用を検討してみます。
0055デフォルトの名無しさん
垢版 |
2019/06/29(土) 01:19:30.63ID:9h5D+6Gj
実務ならそっちの方がいいかも知れんが学習が目的ならjQueryは完全に省いて
フレームワークの機能で賄う設計を身に着けた方がいい

混ぜる事を前提で進めるとどうしても設計的な欠陥に陥りやすい
0059デフォルトの名無しさん
垢版 |
2019/06/29(土) 11:39:53.32ID:9h5D+6Gj
React Routerとかその辺も近いうちにHooks対応するだろうとかその辺の方向性は見えてるけどね
0062デフォルトの名無しさん
垢版 |
2019/06/29(土) 13:16:42.56ID:rJpz/Ysh
349 デフォルトの名無しさん sage 2019/04/11(木) 19:42:22.98 ID:GR4ezT/u
日本にいるとVue人気だから勘違いしそうになるがやっぱ採用実績はReactが圧倒してるんだな。475kサイト vs 64kサイトか……
しかしなぜかGitHubのスター数だけタメ張ってるw
Top JavaScript Frameworks For 2019
https://www.codementor.io/nikhil21tyagi/top-javascript-frameworks-for-2019-s8881i8ga

パフォーマンスについてはReactよりVueのほうがいいな。
AppRunってやつ速くて気になる。
しかしAngularいくらなんでも酷すぎる……
A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)
https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075
0063デフォルトの名無しさん
垢版 |
2019/06/29(土) 13:35:28.59ID:Asw+lwoz
>>61
訴訟リスクってどういう意味での?
Reactの特許条項ならとっくに外されてるし
それもFacebookへの訴訟を防ぐものだったけど
0064デフォルトの名無しさん
垢版 |
2019/06/29(土) 13:52:23.84ID:9JXpjXYE
ある程度使ってみ、たいていのウェブサイトはSPAにするメリットよりデメリットの方が大きいなって印象
0067デフォルトの名無しさん
垢版 |
2019/06/29(土) 17:03:41.80ID:9h5D+6Gj
>>64
まぁ最低限ユーザー認証を行わない様なシステムには要らんだろうねそりゃ
だからWeb"サイト"に無理に入れる必要はないって最初から言ってる
0068デフォルトの名無しさん
垢版 |
2019/06/29(土) 17:13:30.70ID:Y5taUPqF
なんでこのスレタイでたいていのwebサイトとやらの話をしてると思うんだろう
0077デフォルトの名無しさん
垢版 |
2019/06/30(日) 01:08:26.85ID:sdmPaDuU
一度そのフレームワーク採用するとそれ使い続けるか、完全に書き直すしかない
0078デフォルトの名無しさん
垢版 |
2019/06/30(日) 03:19:12.91ID:ZCZqFe8N
React使ってたらfacebook社に著作権とか特許を侵害されてもfacebook社を訴えることができないのは致命的なマイナス要素
0081デフォルトの名無しさん
垢版 |
2019/06/30(日) 10:16:21.46ID:2juPiYlp
FUD(英: Fear, Uncertainty and Doubt、直訳すると「恐怖、不安、疑念」)は、販売、マーケティング、パブリック・リレーションズ[1][2]、政治、プロパガンダで使われる修辞および誤謬の戦術の一種。
FUDとは一般に、大衆が信じていることに反するような情報を広めることで、大衆の認識に影響を与えようとする戦略的試みである。
例えば、個々の企業が競合他社の製品について悪い印象と憶測を与えるためにFUDを利用する。
すなわち、他社製品に乗り換えるにはコストが掛かりすぎると思わせたり、潜在的ライバルでもあるビジネスパートナーに対して影響力を保持しようとしたりする場合である。
FUDの技法は粗野で単純な場合もあるし、間接的な手法を使った巧妙なものである場合もある。
0082デフォルトの名無しさん
垢版 |
2019/06/30(日) 12:40:39.78ID:QHjPTGGy
Reduxのconnectってcontainerにstate与えるだけでcomponentにはpropsとして与えるしかない?
0084デフォルトの名無しさん
垢版 |
2019/06/30(日) 15:50:09.47ID:Fo3wYRY8
Reactが生き残ったとしても、
これからは○○で書く時代ってな感じで
フレームワークの使い方に振り回されるんだろうな
0085デフォルトの名無しさん
垢版 |
2019/06/30(日) 15:51:17.27ID:EwrgGmh5
ブラウザゲーとか作るのって定番のフレームワークとかライブラリとかってあるの?
0086デフォルトの名無しさん
垢版 |
2019/06/30(日) 16:10:49.80ID:7Llu84Qc
この手の予想なんて当たり外れあるしな。

「これはからはexpressじゃなくてkoa」とか
「これからはwebpackじゃなくてparcel」とか

十分普及してから乗り換えても遅くない。
0087デフォルトの名無しさん
垢版 |
2019/06/30(日) 16:11:25.25ID:9wT1OXSk
海外だとphaser
内部的にPixiJS使ってて
PixiJSはWebGL使ってる
0088デフォルトの名無しさん
垢版 |
2019/06/30(日) 16:12:11.46ID:9wT1OXSk
>>87>>85宛て
ってかスレチだったな
0090デフォルトの名無しさん
垢版 |
2019/06/30(日) 17:15:37.26ID:sdmPaDuU
VueとかAngularとかの基本的なフレームワークの場合、乗り換えることは作り直しになる
0092デフォルトの名無しさん
垢版 |
2019/07/01(月) 07:37:53.41ID:aMktZUOt
ReduxのFAQの1つ目を読むべき

※Google翻訳

・いつReduxを学ぶべきですか?
 (一部省略)
まずその組み込みシステムの機能を学ぶことをお勧めします。
アプリケーションを構築するために必要なのはそれだけです。
アプリケーションが非常に複雑になり、状態がどこに格納されるか、
または状態がどのように変化するかについて混乱している場合は、
Reduxを学ぶのがよいでしょう。
0093デフォルトの名無しさん
垢版 |
2019/07/01(月) 09:13:07.17ID:TlV+Kbgz
プロジェクト開発あるあるのつ目を読むべき

・アプリケーションが複雑になってきたので○○を導入したいのですが、
既存のコードが大量にあって手がつけられません。
上司に相談したら、最初から導入していなかったのが悪い。
お前の失態だ。変更する工数はだせん。と言われました。
0094デフォルトの名無しさん
垢版 |
2019/07/01(月) 17:18:47.72ID:c9LwIDIa
そもそもReactのFacebookを懸念するよりもFirebaseの大規模変更を懸念する方がよっぽど現実的だと思うんだけどな

サーバレスとかいうブラックボックスの方がよっぽど怖いだろ
0095デフォルトの名無しさん
垢版 |
2019/07/01(月) 17:49:42.82ID:9GvzIEuV
facebookの倒産とか訴訟そのものを懸念してるんじゃなくて
そういうリスクのせいでIT大手が導入しなくなると廃れやすくなるという話
リスク評価が大げさだろうがそれは導入する企業が決めることで
中小零細はリスク評価よりもIT大手の判断を予測することが重要
0096デフォルトの名無しさん
垢版 |
2019/07/01(月) 19:55:17.62ID:c9LwIDIa
多重の派遣に作業させてる様なところはIT大手っていうのとは違うと思うがな
0098デフォルトの名無しさん
垢版 |
2019/07/01(月) 21:21:08.37ID:CBwS2tFI
reduxまではそこまで難易度は高くない。
sage,thunkとかはやべーな。。redux捨てた方がいいんじゃねーかと思うくらい。
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況