JavaScriptフロントエンド総合 Part.11
!extend:on:vvvvv:1000:512
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
Svelte
https://svelte.dev/
SolidJS
https://www.solidjs.com/
※前スレ
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/
Vue vs React vs Angular vs Svelte Part.9
https://mevius.5ch.net/test/read.cgi/tech/1642316774/
Vue vs React vs Angular vs Svelte Part.10
https://mevius.5ch.net/test/read.cgi/tech/1646747836/
★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorｷﾁｶﾞｲが書き込んでも無視してください
Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおｋ。
VIPQ2_EXTDAT: default:vvvvv:1000:512:: EXT was configured @preact/signals-reactでsignalsがreactでも使えるんだね
useStateとuseContextの完全上位版で記述が減って更新範囲が標準で最小限になる
signals-reactのままでも十分使えるけどこれをラップした新たなライブラリが色々出てくるかな
あとソース解析して行う自動memo化だが
これ以降音沙汰ない
https://ja.reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html なんかつきつめていくと
redraw()
を呼ぶまで再描画しないっ
みたいになったりしてｗ 思ったんだけどここまでネットの速度早なってる時代にｒｅａｃｔだのvueだと言い争ってるのって頭悪くね？
コンサルに転職したほうが人類のためによさそう
くそどうでもいいことに付加価値つけ過ぎじゃねフロントエンドってｗ 細かいことに拘りすぎるヤツは二流かもしれないが、その2つを持ち出して「くそどうでもいいこと」というヤツは三流以下 言い争いするスレはこっちじゃないし
そもそも言ってることが支離滅裂過ぎる 言い争いしてるか？
俺はこっちが好きだ嫌いだって話じゃねーの？ Next陣営は自前で高速バンドルツール作ったか
Viteと組み合わせる道がなくなったのはちょっと残念 Nuxt3とVuetify3がようやくリリースされた模様
時間のあるときに触ってみよう 結局日本語英語が主本だはな
1+1でできるものを曲解して理解しなければならない
スキルはすごいけどそれだけ苦労しなければならない
たかが1+1を 説明サイト見ても
console.logで"こんにちわ"
してるだけ
どのメソッドの説明もそれで済ませてる
それでなにができるかといえば"こんにちわ"
この使い方しか知らない >>40 preactとかsvelteとかsolidとか新しめのやつは公式でプレイグラウンドつきのチュートリアルがある
その流れに習ってか最近はreactにもvueにもある vueの将来性ってどうなの
今の現場でvue派とreact派がバトっとる >>42
日本では広まる可能性はあるのでは？
俺はvueしか使ってないけどな
jsxは気持ちが悪いｗ >>43
＞jsxは気持ちが悪いｗ
わかるw
ヒアドキュメントならわかるけど、HTMLタグを直接代入って仕様がどうも合わない。
というか、経験上ある言語に、他の言語のコード入れると大抵ろくなことにならないんだよなぁ。
PHPやJavaのコードにSQL文直打ちとか。 jsxがHTMLに見えるのは慣れないうちだけなんだよ……。そのうち裏にある関数が透けて見えるようになる。人によっては最初から透けてる。 ヒアドキュメントが許せるなら、その開始終了のデリミタがHTMLのタグになったと考えれば同じようなもの。 JSXにちょっと抵抗感ある派だけどエディタの支援があればSQL直打ちみたいな苦労はないね
個人的につらみがあるのは反復とか分岐の書き方がmapや三項演算子になるとこかな
これも慣れだとは思うけど
ネストが深く構造が複雑になってくると早めにコンポーネント分割したくなるからこれはこれでいいのかも TSXはたしかに型が良く効いて良いものだとは思う
でもIDEの支援があるのなら、別にVueのテンプレートでも十分に型の恩恵は受けられると思う
型の他だと、フレームワークではなくライブラリであることを標榜するReactは単なるライブラリと呼ぶには思想の強要が強過ぎるので気に入らない 自分はjsxはタグをまたいでロジックを記述しないところが気に入っている。
人によってはphpやvueのようにロジックを埋め込める方が便利だというかもしれないけれど。 ReactのJSXは式なので一貫性と使い回しやすさがあって良いね vue3ぼちぼちいじっててdefineEmitsで型推論効かんのなんでやーと思ったら
volarがvue3.3の記法に対応してないぽいのか
そういうのはあるにしてもvue2の頃に比べたらだいぶTypeScriptとの親和性良くなったな vitest触ってみたあとにjestに戻ってくると重さを実感する
vscodeの拡張がもう少し安定してくれればvitestに完全に乗り換えるんだが Nuxtが2から3で変わり過ぎててつらい
そしてまだ情報が少なくてつらい 今までjQueryのみだったんだけど、
新プロジェクトを開始するにあたりVueに変えようか悩んでる。
上の方で将来性がどうこうってあったけど、今から学んでも大丈夫かな？ >>54
将来性の予測は難しいけどもVue2系から3系へのエコシステム移行に難航して勢力が弱まってるのは確かだと思う
ちなみに候補をVueに絞ってるのは何か理由が？ そもそも今はjQueryってもはや必要なくないか？
Vue使う使わない以前に 10年以上前から動いてるサービスとかもあるからな
うちでもjQueryやってる人の隣でNext.jsやってたりするよ >>56
必要はなくても過去の資産や学習コストの点などから選択肢に入れること自体はおかしいことではないだろう >>55
Webアプリの開発がPHP（Laravel）だから。
>>56
スライドをはじめ、使えるライブラリ・プラグインが多数あるからね。
素のJavascriptだと、単純なclickイベントにしても
document.getElementById("myButton").addEventListener("click", function() {
alert("test");
});
な書き方になるから、jQueryの方が手間が減るし。 >>59
>Webアプリの開発がPHP（Laravel）だから。
Laravel全然詳しくなくて申し訳ないんだけど
Reactや他のフロントエンドフレームワークよりVueとの親和性がいいとかあるんだろうか Laravelはlaravelだけで完結しようとする傾向があるように思える。
今はどうか分からんが jQueryは結構独自ルール多くて、今更そんなの覚えたくない >>59
結局Vueでなければならない理由が分からないけど
他のでもいいならReactあたりも検討してみたらってことで >>63
なんでVueはどう思う？って質問してる人間に他のを勧めるの？
明確な理由がなければ使わない方がいいの？ >>64
それは>>54でまず将来性を気にしてるから
現時点で将来性の観点から見たらVueよりReactに軍配が上がるのはVueユーザーでも異論はないところだと思う
だから「他のでもいいなら」と但書きをしたうえでReactを薦めた >>65
実際2系までは使いにくかったし、
3系が出る前なら将来性無いってのは同意しかけたけど、
3系からはTSが公式対応されたしCompositionAPIでかなり書きやすくなってる将来性も悪くないと思うけどな
むしろ公式の開発が活発なのに将来性が無いと言う根拠を知りたい Vue2からVue3に移行するくらいならReactに移行しようって流れがはっきりとあるからな
AngularJSからAngular2の時と同じパターン
公式が活発でも技術的に進歩していても利用者が付いてこないライブラリやフレームワークは将来性がないと言われてもしゃーない >>66
Vueに将来性がない、とは言ってない
VueとReactで将来性を比較したら現時点では後者が優位と判断するのが妥当だろう、と言ってるだけ
そこは読み違えないでほしい Vue：小規模、初心者向け
React：中大規模、中級者向け
だと思ってるんだけどこれは間違い？ 規模の問題に関しては上にも出てるCompositionAPIやTypeScriptのサポート強化で大分改善されてると思う Vueのテンプレートの中で非同期関数を呼び出したいときってどうするのがいいんだろうか Vuetify、半年ぐらい目を離してたら3.3→3.5になってた
コンポーネントもいろいろ増えてるぽいし触ってみよう VSCodeのVolar拡張機能がメジャーバージョンアップ
Vue本体もだけどこれの更新があるのは安心する 分けてたtypescriptの要らなくなったんだな コード書いてるとちょいちょいヒントやインテリセンスが効かなくなるから都度TSサーバの再起動かけてる
安定化に期待したい Vue3のdefineEmitsの書き方について質問
Vue3.3から使えるようになったdefineEmitsの代替構文について下記のページに説明があるんだけど
戻り値のあるイベントハンドラを宣言する方法が分からない
https://ja.vuejs.org/api/sfc-script-setup
具体的には戻り値のない(a)は(a')と書けるけど(b)に対する(b')はどう書けばいいのか不明
(従来の書き方)
const emit = defineEmits<{
(e: 'change', id: number): void // (a)
(e: 'update', value: string): boolean // (b)
}>()
(代替構文)
const emit = defineEmits<{
change: [id: number] // (a')
update: ？？？// (b')
}>()
誰か知ってる人いるだろうか 一応自己解決というか
少し追ってみたら
type ShortEmits<T extends Record<string, any>> = UnionToIntersection<RecordToUnion<{
[K in keyof T]: (evt: K, ...args: T[K]) => void;
}>>;
という記述があってここで戻り値をvoid決め打ちにしてる模様
戻り値が必要なケースはあまり多くないだろうからその場合は従来の書き方でってことなのだろう 
