Vue vs React vs Angular vs Svelte Part.11
EchoAPIは、テストが私のReactアプリに動力を提供するAPIを容易にし、開発を強化するための迅速な応答を提供。試してみてね
EchoAPIの直感的なインタフェースは、ReactアプリケーションでAPI応答を迅速に検証し、デバッグを容易にするのに役立つ。おすすめ!
Angularが久しぶりに盛り返してる
今年のアプデでかなり改善されたからだろうか
あと特筆すべきことはAstroの伸びかな
https://2024.stateofjs.com/ 本当だVue抜いてるじゃん
Astroは絵に描いた餅感のイメージ強いんだけど、
この間bolt適当に弄ってたら何故かASTROでコード吐いてきたので
AIの力も借りて遊びでなんか作ってみようかなぁ
jsx使ったことある人ならAstroは簡単に習得できると思う
>>373 Angular17以降爆速になったからな、Vite+esbuildというチートで19は起動が6秒ぐらい
それでいてフルスタックのまま。スタンドアロン標準実装、Signal、ビルトインコントロールフロー
ようやく他と戦える体勢整ってきた
>>370 SvelteはAppleが協賛に入って脱TS目指して、アプリ特化になりつつある
Runeもまだ、既存技術をわかりやすくマーキングしただけだし
>>373 Viteの伸びもえぐいな、とうとうWebpack超えてしまったか
Reactも19になってようやく不満要素だった、テンプレート周りの改善とフォームのリアクティブ制御を実現してきた
ただReact普及に貢献してきたNextだけが、案の定Viteから爪弾き状態になってるのが気がかり
Remix、Astroはしっかり公式連携になってるのに
あとAngularはCSR、SSG、SSRをミックスした使い方ができる。これはフルスタックならではの強みであり芸当でもある
Angularってどう学べばいいの?
書籍は古いバージョンしか出てないし
公式サイト(日本)のはじめてのAngularだかも
今のバージョンでは動かなかったりして当てにならなかったわ
>>380 やっぱり本家のチュートリアルかねえ英語だけど
日本語の書籍は古すぎてオススメできない
>>380 ZennかQiitaあたりの使える記事を探すのが手っ取り早いかな
英語読めたらdev communityにも役立つ記事がいっぱいあるけど
Angularも14以降とそれ以前でReactの16.8以降と以前ぐらい別物の記述になってるから注意
あとAngular19からはstandalone標準だから、過去の動かしたい場合はstandalone: falseにしないと動かない
AngularはFCP遅いのがな
一度読み込んだら速いけど
最近の業務待機時間多いから、その合間にここ数年の流行りに取り組んでいるんだけど
solidJSがかなり書きやすくていい。Vueのようなライフサイクルフックもあるし、JSXのループ周りに対しても面倒なmap地獄に遭わなくて済む。Reactかじってたら多分すぐ覚える
システム複雑じゃなくていいけど、JSXでさっと書きたいって人にはおすすめ
RemixとAstroもいい感じだ
RemixはNextほど複雑さがないし
AstroはJSX、Vue、Svelte、Solidどの書き方も通るのが便利そう
ネットうろうろしてるとNextどころか
まだまだVue、Nuxt多いなぁ
Astroとか日本の商用サイトで採用してるとこあるの?
どこで何が役立つかわからん業界だし(今年はまさかのPerl大活躍)
>>386 Astro採用企業の有名どころはAmazon、ネトフリ、クックパッド(ここはかなり日和るが)とか
Microsoftもスポンサーになってるのが大きいかな、あとVite公認
GoogleとかトリバゴもAstro使ってるはず
国内企業は知らんけど
Remix良いとは思うんだけど
こういうフレームワークを更にラップしたようなのって流行過ぎた頃に困る予感しかしないんだよな
バックエンド含んでるから古くてもまぁ動けばええじゃろでサボることもできんし
>>389 どのフレームワーク使ってもその問題は付きまとうから気にしても意味ないような
create-react-appが非推奨になったとかなんとか
フルスタックものはだいたいそのリスクあるでしょ
堅牢なシステムを長期的に運用したいとかなんとかなら
結局愚直にバックエンドapi実装
フルスタックのリスク回避でapiは別に設けるのもアリだよねって思ってもいる
Remixイジり始めたばかりだけど
海外ではQwikも人気出てきてるみたいだし本当に群雄割拠だ
自分は今、Svelteのrune触りまくってるけど、一層proxy制御ガチガチになってて
堅牢性と拡張性は大幅に改善されてたけど、あれじゃもう、Vueと並び初級者向けとは言えんぞ
Reactみたいに汎用的なフレームワークは消えると思ってる
やっぱり個別にコンポーネントをコンパイルした方が効率いいのは間違いないのだし
サーバーサイドありきにするならこの考えが自然なのよね
>>397 いや基本的にはサーバー側でオンザフライにコンパイルされることが基本となると思う
svelteやqwik、solidを融合したような形になると思う
>>396 ReactとVueはあくまでライブラリだからな。だからガワ(フロントエンドツール)として売り出す手段にも出てるわけで。それだけにReactもそろそろ使いやすさ重視しないと離れていくだろうな
特に、今後のエコシステム次第ではSolidに乗り換えられる可能性は大いにある
VueはdefineModelがチート性能すぎてある意味今後が怖い
spaとか糞なUIはそろそろ消えると予想。
画面リロードに対応できない仕組みでUI構築すべきではないと気付き始めるだろ。
SSGもCORS問題が鬱陶しすぎる(ローカルで環境開発しにくいから開発コスト大)
のと、あとデータ量に比例して重くなっていく問題をなんとかせんと
>>400 むしろView Transitions APIとか出てきてSPAは手軽に作れるようになってきてるから消えないよ
>>401 ReactだともうSSGは縮小方向だな
今はReactでマトモにSSGやろうとしたらAstroが一番の選択肢になりそう
react難し過ぎるだろ。
フックの伝播複雑過ぎて、メンテナンスできない説。
コールバック関数、分割代入、proxy この3つを把握すればJSフレームワークはどれも同じ
reactでShift選択するui作ったけど
自分で作ってもう触りたくない。
クリックのフックは子がハンドリングして親に返して、選択範囲の再描画は親が制御するみたいな。
これに余計な子は再描画しないようメモ化するとか入れると、頭こんがらがってくる。
どのフックで何のパラメータが変わってどれが再描画されるか解らなくなる。
設計書書かずに作ってるせいなんだが。
Shift選択のUIってこんな感じの挙動?
ttps://codepen.io/rkeqkdzm-the-reactor/pen/wBvWpyp
ReactのMemoはマジでゴミだけどReact Compilerでやっと解決するらしいから
Reactでゴミなのはコントロールフロー系
Solidはそこをしっかり解決してる
もう一つのゴミだったルーター系も
Solidインスパイアしてるならそっちも真似したらいいのに
Solidにストア系実装されたらまじでシェア流れかねんぞ
>>411 何言ってるんだ?
Solid RouterはReact Routerにインスパイアされて作られたって公式のドキュメントに書いてあるのに
>>411 React Router Domが6からSolid Router(旧solid-app-router)の記法をまんま真似してるんだよ
パクったというより連携だけど
>>407だけどreactで作ったchrome拡張の審査通った。
苦労して作ったから使ってみて欲しい。
適当なブログ開いて拡張のアイコンクリックすると画像一覧表示するから
欲しいの選択してダウンロードボタンでzipにできる。
スライダーで拡大縮小できるのがreactっぽい。
ttps://chromewebstore.google.com/detail/kakeaonncmnkigiijohfhlnondeaanii?utm_source=item-share-cp
誰が作ったのかもわからん怪しいextensionなんかインストールしてはいかんよ
簡単に情報抜かれる
みんなReactでフォーム作るときってinputタグ単位でコンポーネント作るの?
コンポーネントって再利用しやすいように作るのであって
無駄に細分化すると面倒なことになる
必要になったら後からでもコンポーネント分けられるし
描画のタイミング自由に制御できるようになると、react楽しいねぇ。
それまでは糞だけど。
Reactのranderを封じて、
自前のタイミングで再描画する楽しさよ
Reactはmillion.js使えばsvelteやsolidよりレンダリングのパフォーマンスが良くなるよ
>>422 コンポーネントというより、質問のニュアンスだとフォーム部品ごとの出力オブジェクトか
制御フックのこと言ってるっぽいが
Reactはフォーム処理に関してSvelte、Vueにくらべたら糞性能というか、もともとが
深層ステート管理のためのライブラリだしな。複数のフォームを一発制御できる
useStateフックの書き方ググるかカスタムフックで作る
それかReact捨てて、簡単にリアルタイム制御できるVueかSvelteで作るかだな
どっちもストアライブラリ使わないとスパゲッティまっしぐらだがな
>>386 商用サイトじゃないけど、学研グループの勉強サイトはAstroで書かれてるね
https://manabitimes.jp Astro触ってみたけどすごいなこりゃ
こんなのできるならよほど大規模なサービスでも無ければNext.jsは要らないのでは
Astroまだちゃんと触ったことないけど
Reactコンポーネントを将来、全く別のフレームワークのコンポーネント、例えば引数とレンダリング結果が同等の動きをする、コンパイルされたバイナリなんかに差し替えたりとか出来たら面白いな
どうせAI任せになるから関係ない
近いうちにAIが直接SSGしたりWeb Assemblyを直接生成するようになるからフレームワークなんか消滅する
Remix v3が大改造するみたいだな
従来のRemixはReact Router v7になってRemix v3はpreactベースになるということか
スレチだったらごめん
オンライン麻雀ゲームを作成しようと構想(妄想)してるんだけど、
いまから新規に作るならフロント側にはReactかVue.jsか、あるいは他のライブラリのどれを使えばいい?
先駆者 (書籍も出してる) は
> jQueryでないと美しく実装できない
https://blog.kobalab.net/entry/2021/03/25/205151 って言ってるけど、Webゲームのクライアントは特殊ってこと?
その記事の人はReact使ったことがないから知識ゼロなんだろ
そもそも状態管理をして宣言的にUIを構築するんだからむしろReactのほうがスッキリ書ける
jQueryおじさんという化石思考に惑わされてはいけない
> 宣言的アプローチでは「打牌中」の状態を描画できない
いや、Reactでは描画のための状態はUIコンポーネント内部に保持することでコアロジックを汚染することなく打牌中のような中間状態を美しく描画することができる
Reactは宣言的UIは最終的な状態だけを表現するということではない
アニメーションやユーザー操作に伴う一時的な状態、ここでは打牌中もコンポーネントの内部状態やコンテキストAPIとかで管理できる
isPlayingAnimationのようなブーリアン型の状態を用意し、アニメーション中はtrueに設定し、アニメーションが終了したらfalseに戻す
打牌中の牌の位置や動きに関する情報を状態として持ち、その状態に基づいてCSSアニメーションを適用する
> Majiang.ShoupaiはAIの思考ルーチンでも使用します。ここに描画の都合の「打牌中」などという状態を持ち込むとしたら、それは設計として誤っています
Reactでも描画に関わる状態とアプリケーションのコアロジックに関わる状態は分離して管理するのが一般的
コアロジックの麻雀の牌姿やルール進行を司る部分は、Reactコンポーネントからは独立した純粋なJavaScriptクラスや関数として実装するのが普通
> イベントハンドラ設定は描画処理と分離すべきである
Reactの設計思想はコンポーネントが自身の描画とそれに関連するイベントハンドリングをカプセル化すること
「対戦相手の手牌にイベントハンドラは不要だし、牌譜再生にも打牌のためのイベントハンドラは不要」という点についてはReactのコンポーネント設計で柔軟に対応できるからまったく問題なし
isInteractive: booleanなどを渡すことでイベントハンドラの有無を制御できる
牌譜再生時にはイベントハンドラが不要なモードでコンポーネントを描画すればいいだけだし
> JSXを使う局面がない
> HTML に雛形として埋め込まれた「牌を表現するDOMノード」をコピーし差し込むことで実現しています。
Reactをまったく知らないからこんな恥ずかしことを堂々と言えるんだろう
こいつのもっとも無知なところだな
Reactは宣言型だからコピーするというコードを書くことすら不要なわけ
牌なんてCanvasに直接描画すりゃエフェクトも自在だし変にエレメントにデータ持って
重くなることもなくていいんじゃね?って思うのは俺だけなのか
>>446 俺もこう思う
そもそも牌をhtml要素とCSSで描画すること自体が微妙だよね
そういう意味だとjQueryでもReactでもなくてCanvas系のフレームワーク使ったほうが良いんじゃないかな
宣言的UIに慣れるとCanvas全体を命令的に描画するのがあまりにもダル過ぎる
Canvas上の各表示オブジェクトを
Reactやビューで
あたかもHTMLの要素の様に操作できる(CSSプロパティ設定できる)
ライブラリってあるのかな。
実際のゲーム開発で宣言的UIが採用されることってあるの?
設定画面とかチュートリアルなら、まあ宣言的UIを使うもアリ。
Remixが謎方向に進んでいる
Reactを捨てるのか
React捨ててReactもどきを新しく作ったのか
流石にもういらんだろ
Reactは迷走してるって言ってるけど『お前もじゃい!』って感じだな
しかしReact前提のフルスタック全滅したらバックエンドはどうしてくのが良くなるのかねぇ
今さらPugやEJSやThymeleafJSが再流行するとも思えんよなあ