Vue vs React vs Angular Part.4

**デフォルトの名無しさん** · 2020/06/11(木) 19:01:45.26

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
※前スレ
Vue vs React vs Angular Part.3
https://mevius.5ch.net/test/read.cgi/tech/1560333895/

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

**デフォルトの名無しさん** · 2020/07/07(火) 07:07:55.28

Vue3.0はvueの書き心地の良さだいぶ減る気がする
リアクティブなデータが一段ネストされるのもストレス

**デフォルトの名無しさん** · 2020/07/07(火) 20:34:43.73

reactってクライアントサイドフレワなのに
サーバサイド技術のnpmとかnode.js
がインストールに必要なの意味わからなくね？
なんでjqueryと同様にCDNで配布してsrcで読み込む
シンプルな形式にしないの？
トランスパイルって鯖と蔵どっちで処理してんの？

なんでトランスパイラそのものをライブラリ内に
組み込んでHTMLのsrcで読み込んでブラウザに仕事させれば
いいものをユーザにnpmとかyarnとかwebpackとか
reqireさせるわけ？
そしてなんで色々なやり方が錯綜する訳？

なんでPHPがapacheやMySQLとズブズブに
蜜結合してるのと同じ轍を踏むわけ？

**デフォルトの名無しさん** · 2020/07/07(火) 20:54:32.97

実行時のリソース消費を減らすためだよ

**デフォルトの名無しさん** · 2020/07/07(火) 20:55:13.15

ちなみにCDNとscriptタグの組み合わせも使えるよ

**デフォルトの名無しさん** · 2020/07/07(火) 21:12:22.45

有名なフレームワーク・モジュールには、CDN もある

Ruby on Rails など、ウェブ系の開発者は、
VSCode, Node.js, Webpack などが必須

jQuery, Bootstrap, React なども

**デフォルトの名無しさん** · 2020/07/07(火) 22:59:11.42

>>69
おめーがアホだから理解不能なだけだろが

**デフォルトの名無しさん** · 2020/07/08(水) 00:21:09.70

>>69
>サーバサイド技術のnpmとかnode.js

この認識が可笑しい

**デフォルトの名無しさん** · 2020/07/08(水) 00:30:48.93

>>67
確かにvueのtypescript対応は不親切。
てかいい加減公式サイトぐらいtypescript対応しろと。

**デフォルトの名無しさん** · 2020/07/08(水) 10:52:27.83

>>72
だからお前いつもグルーピングがおかしいってば

**デフォルトの名無しさん** · 2020/07/08(水) 11:23:22.62

rubyｶﾞｲｼﾞに触るな

72 · 2020/07/08(水) 11:59:26.81

>>69
トランスパイルは、サーバー側でする。
その開発環境が、Node.js

もし、JSX で書いて、それをブラウザでトランスパイルすると、
時間が掛かるので、推奨されない

だから事前に、Node.js, Webpack, Babel, Browserify, Uglify, CssShrink, AutoPrefixer などで、
ES2015, JSX などを、ES5 に変換しておく

**デフォルトの名無しさん** · 2020/07/08(水) 12:06:07.93

なんでガイジ鯖でトランスパイルなんてとんちきなこと言ってんのかと思ったけどもしかしてc9みたいな環境でやってんのかなこいつ？

72 · 2020/07/08(水) 12:10:06.57

トランスパイルの手順も、タスクランナーのGulp か、
プロジェクトのpackage.json 内の、npm scripts に書いて実行するだけ

watch 機能を書いて、ファイルを保存するたびに、自動的にトランスパイルすることもできる

Ruby on Rails では開発用サーバーに、webpack-dev-server を使う

72 · 2020/07/08(水) 12:12:49.23

そもそも、ブラウザでトランスパイルするのは、全ユーザーが同じ変換をするから無駄

サーバーなら、1回の変換で、全ユーザーに対応できる。
変換後のHTML を送るだけ

**デフォルトの名無しさん** · 2020/07/08(水) 12:17:22.01

めんどくせーならNuxtでも使えや。

72 · 2020/07/08(水) 12:20:39.69

Docker か何かの開発サーバーじゃないの？

漏れは、自分のPC 内のWindows 10, WSL, Ubuntu 18.04 で、
VSCode の拡張機能、Remote WSL を使って、
Linux側に、プロジェクトを作っている

Windows側からのブラウザアクセスは、
VSCodeの拡張機能・open in browser ではローカルファイルアクセスとなるので制限されるが、
VSCodeの拡張機能・Live Server では、サーバーを立ててのアクセスとなるので制限されない

Linux側には、日本人が作った、バージョンマネージャーのanyenv で、rbenv, nodenv を使って、
ruby 2.6.6, node 12.16.2 を入れた

yarn は、Windows側に入れて、WSL から、拡張子なしのyarn コマンドを呼べる。
これは、#!/bin/sh で始まるシェルスクリプト

anyenv は多言語向きで、rbenv, nodenv, pyenv, phpenv などを同じ使い方で、統一的に扱える。
同様のツールに、asdf もある

**デフォルトの名無しさん** · 2020/07/08(水) 12:25:17.49

devcontainerのほうがいいでしょ
環境切り替えが楽チン

**デフォルトの名無しさん** · 2020/07/08(水) 12:28:10.14

anyenvとかすぐに重くなるから嫌い
なんとかenvは全部作り直せと言いたくなる

72 · 2020/07/08(水) 14:11:54.59

phpenv が重いのは、すべてのファイルをコピーしているからとか、

何かのサイトに書いてあった

72 · 2020/07/08(水) 14:16:33.13

Stoyan Stefanov の本には、Babel, Browserify は、

グローバルにインストールした方がメリットが多い、とか書いてあるけど

**デフォルトの名無しさん** · 2020/07/08(水) 15:16:59.06

>>81
そうじゃなくて、reactっていうかJSXのトランスパイルはrubyｷﾁｶﾞｲであるお前以外の99%はブラウザでもサーバでもなくフロントエンドの開発マシン、要は手元のPCでビルド時に行うの。

**デフォルトの名無しさん** · 2020/07/08(水) 15:28:49.13

いや俺はデプロイ先のコンテナでビルドするように設定してるけど

**デフォルトの名無しさん** · 2020/07/08(水) 15:33:35.61

それはないな
起動が遅いのはコンテナでは許されない

**デフォルトの名無しさん** · 2020/07/08(水) 16:12:22.96

>>90
リリースのたびにローカルの開発環境でnpm run buildみたいなコマンド打って、トランスパイルされたjsファイルを手作業でアップロードみたいな作業するの？
零細サイト(アプリ)ならありかもしれないが…

**デフォルトの名無しさん** · 2020/07/08(水) 16:19:50.85

なんで手動って決めつけてんの？
ビルドプロセスにデプロイも含めるでしょフツー

**デフォルトの名無しさん** · 2020/07/08(水) 16:28:48.25

>>91
Laravelならプロジェクト一式の中にwebpack関連の一式も入ってるけどね

**デフォルトの名無しさん** · 2020/07/08(水) 16:47:50.70

>>91
手動でアップロード？
意味わからんこと言うなよ

**デフォルトの名無しさん** · 2020/07/09(木) 10:02:09.72

>>91
tsファイルの変更を自動検知して.jsに自動でトランスパイルする設定で
開発するのが普通なんじゃないの

>>92
deployっていう用語は開発が終わって本番サーバーに移すときに使う感じでしょ

開発中のこまめな修正はbuildだから
buildとdeployはセットにしてしまうと不便
頻度が違いすぎる

**デフォルトの名無しさん** · 2020/07/09(木) 10:04:52.31

インフラ屋には「開発」って概念がないからｗ
あいつらは出来上がったものを配布するだけ
配布するときにビルドが必要かどうかってことしか知らない
ビルドだけが必要という発想がない

**デフォルトの名無しさん** · 2020/07/09(木) 10:35:48.43

CIでビルドからデプロイまでやるわなフツウ
毎回デプロイまでプロセス進めるわけでもないが
なんらかのトリガで自動デプロイまで整ってないとしんどいよ

**デフォルトの名無しさん** · 2020/07/09(木) 12:28:57.46

蔵「ここに要素追加で！中のここのテキストは決まり次第連絡します」
ワイ「よっしゃ手空いたし実装すすめたろ！ここのテキストは適当にうめとこ！できた！フロントビルドして表示確認したろ！」
CIとやら「ビルド＆デプロイ！」
本番サイト「おちんちんびろーん」
蔵「…」

**デフォルトの名無しさん** · 2020/07/09(木) 12:52:10.72

手動デプロイする人、ビルド構成1つしか使えない人、いろいろいるんだなあー

**デフォルトの名無しさん** · 2020/07/09(木) 14:13:27.36

手動デプロイって人数1人の超小規模開発だけだろ

**デフォルトの名無しさん** · 2020/07/09(木) 14:22:33.72

なんかこのスレ、
・開発中のローカルサーバーでのビルド
・本番等へのデプロイ時に行うビルド
をごっちゃにしてる奴が居て話が噛み合わないわ

**デフォルトの名無しさん** · 2020/07/09(木) 14:25:16.59

どっちも同じだろ
パラメータ少し変えるだけだし

**デフォルトの名無しさん** · 2020/07/09(木) 14:39:00.18

ほらね

**デフォルトの名無しさん** · 2020/07/09(木) 14:42:43.21

まさかローカル用とデプロイ用で分けてメンテしてんのか？
DRYはどこに行ったんだ

**デフォルトの名無しさん** · 2020/07/09(木) 14:46:26.77

ハァ？なんでローカルの開発マシンで既にビルドしてるフロントをまたサーバーでビルドするんだ？
腐った思考がグルグル回ってんのはお前の頭ん中だけ。DRYじゃないのはお前。

**デフォルトの名無しさん** · 2020/07/09(木) 14:51:31.22

>>105
はぁ？
開発中はローカルでビルドするし、CIサーバーでもビルドする
当たり前のことだろーが
お前、はっきり言って意味わからんよ

**デフォルトの名無しさん** · 2020/07/09(木) 15:02:50.19

言うほどローカルでビルドする？

**デフォルトの名無しさん** · 2020/07/09(木) 15:15:30.24

>>104
そもそもローカルではwebpack-dev-serverとか使って効率化するだろ。
お前…まさかファイル更新する度に毎回ビルドコマンド打ってるのか？

>>105
そもそも本番とかってリリース用のブランチと同期しながらリリースするんだから開発マシンとか関係ないだろ。
お前…まさか自分の開発マシンでビルド　したファイルを直接本番とかの環境にデプロイしてるのか？

**デフォルトの名無しさん** · 2020/07/09(木) 15:18:52.05

てかそもそもローカルで開発やってんの？

**デフォルトの名無しさん** · 2020/07/09(木) 15:19:43.38

本番機械にデプロイしてから
デバッグしてるよ

**デフォルトの名無しさん** · 2020/07/09(木) 15:50:54.77

両方成敗されててワロタｗｗｗｗｗ

**デフォルトの名無しさん** · 2020/07/09(木) 16:06:12.14

デプロイとか書くのやめたほうがいいよ
バカっぽいから

deployの発音と全然違う

**デフォルトの名無しさん** · 2020/07/09(木) 16:09:12.55

デッポｫイ

**デフォルトの名無しさん** · 2020/07/09(木) 16:12:04.53

>>108
今はコマンドを打つかウォッチで自動化するかどうかは関係ない
どっちにしろ構成は同じだ

**デフォルトの名無しさん** · 2020/07/09(木) 16:57:49.39

ディプ・ローイ

**デフォルトの名無しさん** · 2020/07/10(金) 00:30:34.49

gulpとかbabelとかwebpackとかyarnとか本末転倒なんだって
そんなものこれっぽっちも使いたくないんだよ。

楽したいと思うからフレームワークに頼るわけであって
使えるようになるまでコマンドいくつも叩くくらいなら
ネイティブJavaScriptで全部やりゃいいだろってなるわ

**デフォルトの名無しさん** · 2020/07/10(金) 00:51:02.42

じゃなんでこのスレ開いたんだ

**デフォルトの名無しさん** · 2020/07/10(金) 01:17:45.44

>>116
はっきりと勉強したくない（努力したくない・技術力をつけたくな）って言ったらどうか？
技術者の道具っていうのは自動車でも飛行機でも
技術力をつけて初めてさらに高度なことが出来るようになるもの
勉強しないで使えるものじゃないんだよ

**デフォルトの名無しさん** · 2020/07/10(金) 01:26:15.32

npm install && npm run watch
たったこれだけやん
あとはソースの更新を自動検知して再ビルドしてくれる

**デフォルトの名無しさん** · 2020/07/10(金) 01:26:33.04

あ、Laravelの場合はね

**デフォルトの名無しさん** · 2020/07/10(金) 02:14:28.34

確かにwebpackはクソ。
俺はビルド設定職人じゃねえっての。
何にでも設定あるのは仕方ないがややこしいすぎめんどすぎ設定方法すぐ変わりすぎ。
投げ捨ててsnowpackを使うことにした。
webpackはとっとと滅べ！

**デフォルトの名無しさん** · 2020/07/10(金) 05:57:04.39

Ruby on Rails は普通、Heroku を使う

Rails 6 からは標準で、Webpack。
プロジェクト内に、node_modules もあるし、
最初から、Yarn に、便利なコマンドも登録されている

webpack-dev-server も入っているから、
最初から、ソースコードの変更をwatch している。
VSCode の拡張機能・Live Server のwatch と同じ

有名なYouTuber、雑食系エンジニア・KENTA も、
CircleCI も必要だって言ってるだろ

**デフォルトの名無しさん** · 2020/07/10(金) 06:13:16.31

>>116
ほんとだね

72 · 2020/07/10(金) 07:49:21.18

Node.js, Webpack, Babel, Browserify, Uglify, CssShrink, AutoPrefixer などが無ければ、

ES2015, JSX などを、ES5 に変換できない

**デフォルトの名無しさん** · 2020/07/10(金) 08:17:54.92

どんだけ必要なんだよww
馬鹿かよビルドばっかでReactの本題がほとんど頭に入らんわ
ちゃんと整理しろよwwww

**デフォルトの名無しさん** · 2020/07/10(金) 08:47:02.79

あの程度のツールの組み合わせもまともに理解できないような輩は
プログラムを仕事でやるのは辞めてほしいわ。
railsなんか使っても何がどこに作用してるかわからなくて糞コードになるのが目に見えてる。

**デフォルトの名無しさん** · 2020/07/10(金) 09:00:52.47

>>125
必要じゃなくてLaravelやRailsならもうプロジェクトに一式入ってる環境が整ってるからビギナーが気にする必要ないわけよ

**デフォルトの名無しさん** · 2020/07/10(金) 09:09:17.82

>>125
てかReactとか普通に入門書やらチュートリアルサイト見ればNode入れてcreate-react-app入れたら
create-react-appで新規プロジェクトを作成してnpm startやるだけって書いてあるだろ
それすらできんって言うんならプログラミングの才能ないからやめた方がいいぞ

**デフォルトの名無しさん** · 2020/07/10(金) 09:46:57.35

魚捌けなくても寿司は食えるみたいな

**デフォルトの名無しさん** · 2020/07/10(金) 10:16:52.30

CPUが古いからかcreate-react-app、実行したら2分くらいかかるんだけど
新しめのRyzenとかだとどれくらいでcreate-react-appの処理終わるの？

>>128
チュートリアルの最初にcreate-react-appでてくるし
プログラミングの才能とかそんなレベルの話じゃない気がする

しかしReactの公式ドキュメントはそのあと一気にハードルあがる
いきなりゲームを作りましょうとかの解説になって挫折したわ
ゲーム作りはチュートリアルのレベルじゃないだろ！とツッコミたい

YouTubeの解説とかのがよっぽどわかりやすい

**デフォルトの名無しさん** · 2020/07/10(金) 10:38:58.61

Bootstrap があれば、CSS 知らないでも、レスポンシブ対応できる

create-react-app は良いけど、
その後、どこから無料の、awesome なコンポーネントをパクッてくるのか、それが重要

Material-UI か？

Rails なんて、React からのコンポーネントのパクリしか考えていないw

**131** · 2020/07/10(金) 10:42:42.45

青色のボタンを使うと、Bootstrap 臭がするとかw

Rails は今や、Node.js, Webpack, React からのパクリしか考えない、段階に入ったw

**デフォルトの名無しさん** · 2020/07/10(金) 10:46:13.74

別にプロジェクトのイニシャルやるのに2分くらい掛かってもいいだろ
変更検知ビルドで2分掛かってたら大問題だけど

**デフォルトの名無しさん** · 2020/07/10(金) 11:25:16.45

>>131
アイコンなら普通にReactDOMにリンクするdivタグがあるhtmlでcdn読み込みすればいいんじゃね？

**デフォルトの名無しさん** · 2020/07/10(金) 13:26:16.21

>>130
CPUじゃなくて回線速度じゃねえの

**デフォルトの名無しさん** · 2020/07/10(金) 13:41:18.34

IDEで新規プロジェクト作成に２分も掛かってたら待ってらんない
SQLのクリエイトデータベースでもそんなにかからない

**デフォルトの名無しさん** · 2020/07/10(金) 15:23:36.78

遅いのは主に回線速度なのかなぁ？
みなさんは、create-react-app、何秒間で終わる？

>>136
Visual StudioでC#とかやってたから2分は相当長く感じる

**デフォルトの名無しさん** · 2020/07/10(金) 18:51:55.72

create-react-appでプロジェクト作るところを言ってるのか、そのあとのbuildのことを言ってるのかどっち

**デフォルトの名無しさん** · 2020/07/10(金) 18:59:02.17

だいたいwebpackのせい
滅びろ

**デフォルトの名無しさん** · 2020/07/10(金) 19:09:24.73

>>138
もちろん、時間のかかる前者。project作成みたいな作業
ほかのひとは何秒くらいかかってるのかな、と
自分は120秒超えてたはず

そのあとのbuildというのはbuildしてる感覚はないのでよくわからない。
VSCodeがtsの変更を監視して.jsに変換するのがbuildなんだろうけど、
JSがcompile不要言語だからbuildといわれてもしっくりこない
後者は1秒未満

**デフォルトの名無しさん** · 2020/07/10(金) 19:20:51.32

だいたいトランスパイルが面倒さの原因だしtsのまま動くようにしてほしい

**デフォルトの名無しさん** · 2020/07/10(金) 19:44:24.02

よくもまあHTMLに埋め込むだけで動作する
シンプルなJavaScriptをここまで複雑にしたもんだ

開発環境複雑なのはマジでゴミだと思うわ
ツール名並べてビルド環境自慢してる奴はおもちゃ
組み立ててはしゃいでるガキと同じ。
そもそもそんな糞みてーなビルドなんかなくても動く
言語だったこと忘れてるみたいですね。

**デフォルトの名無しさん** · 2020/07/10(金) 20:01:19.85

>>142
シンプルで済むのはお前が一人で作るカップラーメンのタイマーくらいなんだが

**デフォルトの名無しさん** · 2020/07/10(金) 20:46:41.69

てかjQueryでいいわ
俺はフロントマウント界隈から降りるぜ

**デフォルトの名無しさん** · 2020/07/10(金) 21:29:33.92

どうせビルドするならトランスパイルじゃなくてアセンブリでいいんだよな
Webasmがウェブの正当進化
これから先の時代ではビルドプロセスを間に挟むならWebasm
そうでないならJSと分化していくだろう
数年後にはJSでSPAやってる人は居なくなる

**デフォルトの名無しさん** · 2020/07/11(土) 00:07:21.89

reactのテストってどういう風に書くのが正解？

**デフォルトの名無しさん** · 2020/07/11(土) 01:19:29.51

>>141
全部のブラウザがTypeScript動くようにすればいいだけなんだよな
それでJSは開発終了でいい

**デフォルトの名無しさん** · 2020/07/11(土) 01:41:33.60

そうだね
ブラウザでTypeScriptが動くようになるかJavaScriptがTypeScriptの機能を取り込んでいくのか分からんけど
トランスパイルは過渡期的な技術だと思う
5～10年後には無くなっているだろう

**デフォルトの名無しさん** · 2020/07/11(土) 02:13:09.20

マイナなんたらはIE11でしか申し込めないんだっけ？

**デフォルトの名無しさん** · 2020/07/11(土) 03:30:23.47

wasmが直接実行できてDOMも生で触れたらJSなんていらないけどね
てかこのRFCとかないの？

**デフォルトの名無しさん** · 2020/07/11(土) 03:56:17.01

・・が直接・できて・も生で触れたらJSなんていらないけどね
てか・・とかないの？

**デフォルトの名無しさん** · 2020/07/11(土) 07:13:13.43

WebAssemblyでweb app作った場合に
ブラウザからソースとかはみえないんだよね？

開発する側にとってはソース見えないのは大きなメリットだけど
ユーザー側はセキュリティ的に実行していいコードなのかどうやって
判断するんだろ

>>149
smartphoneでも申し込めるんだからIE11限定はあり得ないでしょ

**デフォルトの名無しさん** · 2020/07/11(土) 07:56:00.22

>>149
あんなの逆に既存ブラウザに拘らずにWin/Macでそれぞれ専用ブラウザアプリ作りゃ済んだ話なのにな

**デフォルトの名無しさん** · 2020/07/11(土) 09:57:32.58

まあjqueryに適切なネームスペース設定があればって話もわからんではないけど。
でも結局静的チェックは必要だろうなとは思う。
jsはあまりにぐにょぐにょすぎる。

**デフォルトの名無しさん** · 2020/07/11(土) 10:04:21.32

適切なネームスペース設定ってなんだ？jQueryに限った話なのか？

**デフォルトの名無しさん** · 2020/07/11(土) 14:58:25.28

自分がぐにょぐにょだったというオチ

**デフォルトの名無しさん** · 2020/07/11(土) 20:14:49.67

普通に考えたらvuexとかのフレームワークが提供するnamespace機能じゃねえの？

**デフォルトの名無しさん** · 2020/07/11(土) 23:15:12.44

レガシー技術しか触らせてもれないエンジニアがいっぱい居るんだなぁ

**デフォルトの名無しさん** · 2020/07/12(日) 01:12:29.71

VBAスレが勢い2位の板ですし

**デフォルトの名無しさん** · 2020/07/12(日) 01:20:57.95

「触らせてもらえない」って変な表現だな。
もし触りたきゃ個人的に触るだろ。
単に必要がないだけじゃないか。

実際、サーバーサイドのAPIと通信したり、VuexやReduxでやるような状態管理が求められないようなアプリにフロントフレームワークがオーバースペックだっていう意見は同意する。

VueとかReact使うとフロントが楽なのは当然として、サーバーサイドも楽になる。
サーバーサイドはAPI化してJSON返せばいいだけになるし、ネイティブアプリ対応もサーバーサイドはワンソースで済む。

wordpressのような、htmlにサーバーサイドの変数を埋め込んでからレンダリングするようなレガシーアプリだと、言語がphpかrubyあたりに制限さられるし、何より密結合でクソ汚いコードが生成される。
逆にAPIへのリクエストが頻繁するようやサイトでjQueryだの生JSだの言ってたらメンテナンス性や開発効率は最悪だろうね。

**デフォルトの名無しさん** · 2020/07/12(日) 01:39:59.65

あとはテストの書きやすさも違うと思う。
MVCに則ったサーバーサイドの場合、Controllerのいわゆる機能テストはViewの代わりにJSONになるからすごくシンプルになる。（Modelのメソッド単位のユニットテストになると関係無いけど）

俺はサーバーサイドのテストはよく書くけど、フロントのテストはあまり書かないんだよね。（e2eテストって難しいし）
それでもフレームワークの有無の違いでテストの書きやすやが全く違うのは誰でも想像できることだと思う。

**デフォルトの名無しさん** · 2020/07/12(日) 02:16:40.18

それって DOM to JSON みたいなシリアライザがあれば
DOMのテストは簡単にならんか？

**デフォルトの名無しさん** · 2020/07/12(日) 09:32:00.73

Ruby on Rails のシステムテストは、Capybara, Selenium とか

Page Object みたいなデザインパターン

**デフォルトの名無しさん** · 2020/07/12(日) 11:16:28.18

今日のNG確定

**デフォルトの名無しさん** · 2020/07/12(日) 11:26:50.74

>>164
ワードでNG掛ければよくね？

**デフォルトの名無しさん** · 2020/07/12(日) 12:13:06.73

「今日の」ね。
ワード単位なら分かるけど、こんな過疎スレでわざわざID単位でNGしたくなるって、どんだけ効いたんだろ。

**デフォルトの名無しさん** · 2020/07/12(日) 12:25:19.68

そんなたいした作業か？
ロングタップしてNGIDに追加押すだけじゃんｗ