Vue vs React vs Angular

2018/12/21(金) 21:37:36.86

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/

VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured

2019/01/12(土) 12:01:11.28

フロントエンドは特に変化も早めだしネット上で情報漁れんとな
というか本よりまず公式のドキュメント読めよって思う

2019/01/12(土) 12:42:39.33

あと自分ができるできないの話じゃなくて
>>53,55,56
の状況に対しての話ね

だから結局フロントエンドフレームは多数はにはならずｊQueryはフレームワークだって言い張る輩も居なくならないって話

2019/01/12(土) 12:44:21.72

公式のドキュメント読んだってわからないこといっぱいあるよ

2019/01/12(土) 12:48:07.24

>>70
公式ドキュメントってリファレンスも兼ねてるのにそれで理解できないって逆にヤバい
エンジニアとしてよりも人間としてな

2019/01/12(土) 12:52:38.30

フロントエンドのwebpackの設定なんか、ケースバイケースで、
プラグインの組み合わせとかいろいろあるわけだし、
人それぞれなものを公式サイトが書いてあるわけないじゃん

2019/01/12(土) 13:41:23.02

>>72
具体的に

2019/01/12(土) 13:57:08.64

上に話のようにインストールやら基本なら
まず公式、エラーや組み合わせ等なら他を漁ればいい

漁っても無いものはリファレンス見て自分で書くことになると思うが

2019/01/12(土) 14:04:13.31

公式見ればいいだけなのに公式すら見ずに文句言う奴らはなんなんだ？

2019/01/12(土) 14:08:28.63

>>75
ただの妄想

2019/01/12(土) 14:10:46.67

公式見ればいいだけなんて言ってるやつこそが公式を全然読んでないやつだと思う

2019/01/12(土) 14:27:49.84

なんで俺ができてお前ができないの？

2019/01/12(土) 14:40:43.40

誰もまともに本書かないから、未だにnpm install --saveとか書いてるやついるし
時代遅れの情報がいつまでも残っちゃってる

2019/01/12(土) 14:45:36.99

>>78
でYouは具体的に何を使っててどれくらいのものが作れるのさ？

2019/01/12(土) 15:00:31.05

>>80
基本的にReact使ってるサイト
state管理にreduxは使ってる
その他axiosとかルーティング管理用のライブラリとか
そもそも必要であればライブラリはなんでも使えるけど
どのくらいのものが作れるかって、仕様と時間と金があればなんでも作る

2019/01/12(土) 15:10:52.84

今はtypescriptが当たり前になってきているから、typescriptを絡めることで本を作りやすそうなのになあ

2019/01/12(土) 15:27:32.61

typescript推しはIE信奉者でMS狂信者しかいないと思ってる

2019/01/12(土) 16:00:54.42

で？キミらはどのくらいのことができてどのくらいのものが作れるの？

2019/01/12(土) 16:02:39.14

>>83
AngularはGoogleだけどな

2019/01/12(土) 16:09:24.96

>>85
angularはjavascriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークなんだよな

2019/01/12(土) 16:10:27.90

べつにGoogleがIE信奉者でもいいじゃない。

2019/01/12(土) 16:28:07.25

>>86
えっ？

2019/01/12(土) 16:39:28.40

はは、結局お前らフレームワークに振り回されてるだけじゃん

jQueryの過去の資産を大事にする方針を
見習ったほうが良いぞ

2019/01/12(土) 16:53:03.46

es6+バベルでええやんけ

2019/01/12(土) 18:22:17.27

フロントですでにエンディングかよっていう。

2019/01/12(土) 18:39:06.27

スルーするな
キミらはどのくらいのことができてどのくらいのものが作れるの？

2019/01/12(土) 19:56:59.99

>>92
ああスマンスマン

バックにLaravel置いてVue(Vuex、vue-router、axios、Bootstrap-Vue)とReact(Redux、react-router、SuperAgent、React-Bootstrap)入れた二種類のセット
それぞれ一通り機能確認するデモサイトをローカルに作ってみたって程度だよ実戦投入するのはこれから

あとNuxtとAngularはcliからプロジェクト生成してどこに何を書いて機能追加していけばいいか分かったって程度
Angularとかはコンポーネントの数多すぎて細かいところは全然

フロントエンドフレームワーク去年の後半から始めたばかりだから流石にまだまだ>>81みたいなんでもできるとは言わないよ

公式って結構公平だからサード製のモジュールに関してはこれ使えみたいな事あんま言わないじゃん
その辺に関してはやっぱ新ジャンルに手を出すなら書籍１～２冊読んだ方が効率いいと思うんだよね

2019/01/12(土) 20:06:10.80

>>89
jQueryを使い続けるとしても設計指針としては参考になる事柄は相当あったと思うよ
何もやらなきゃいずれは時代遅れな挙動のサイトしか作れないって事になる

せめてHTML5のAPI集くらはちゃんと読んでおいた方がいいと思うよ

2019/01/12(土) 20:16:53.72

>>93
React-Bootstrapってv3だよ？
今さら使う意味なくね？

そしてReactstrapはまだまだ開発中

俺としてはBootstrap Nativeをオススメするなあ
自分でコンポーネント作ることにはなるけど、むしろ使う部分だけコンポーネントにするから余計なstateないしスッキリ

2019/01/12(土) 20:37:44.48

>>95
npm install react-bootstrap@next bootstrap
@nextって付ければv4でいけるけど
https://react-bootstrap.netlify.com/getting-started/introduction

ありがとうBootstrap Nativeはちょっと調べてみるよ

ところでReduxとreact-router連携するのって何使うのがベターなの？
パっと調べた範囲で
react-router-redux
redux-first-router
connected-react-router
くらいがあるけど選定するための基準がなんとも

2019/01/12(土) 20:39:31.18

別にv3で困らなきゃそれでいいじゃん。

2019/01/12(土) 20:48:45.48

Bootstrap Nativeってパッケージはなかったけど
これの事？
↓
Native JavaScript for Bootstrap

ReactNativeのNativeじゃなてNativeなJavaScriptって意味のNativeか

>>97
V4はV4で何かと機能増えてていいもんだよ

2019/01/12(土) 21:54:24.59

>>96
v4はまだ開発中だしね…

あとrouterはconnected-react-routerがいい
react-router-reduxは非推奨になったから
https://github.com/reactjs/react-router-redux
>Project Deprecated

書籍ではreact-router-reduxを推してるから注意だね

>>98
そうNative JavaScript for Bootstrapのこと
どのコンポーネントライブラリも中途半端で開発中だしissueみたらバグ多いからまだ使うべきではないと思う

2019/01/13(日) 19:44:59.95

それより儂のチンポをしゃぶってくれんかのー

2019/01/14(月) 12:22:51.73

今は、npm よりも、yarn を使うことが多い

2019/01/14(月) 14:45:57.65

npmのバージョンアップにより
yarnのメリットはなくなったんじゃないの？

2019/01/14(月) 14:50:30.91

世界では圧倒的にnmp優勢だよな

2019/01/14(月) 15:36:20.49

とりあえず
npm, react, babel あたり使って開発してみたらいいんじゃないかね。
それらの使い方やドキュメントの漁り方になれれば他に移るのもやりやすいでしょ。

2019/01/14(月) 15:45:29.95

Ionic+Angler使い続けてるけど
そろそろ乗り換えるべきか悩みますね

2019/01/14(月) 15:55:50.43

乗り換えに理由がない時点で何使っても駄目なんじゃね？

2019/01/14(月) 16:19:44.81

>>106
釣られたな
Anglerだけに
なんちって

2019/01/14(月) 21:10:29.94

vueはマジで独学は難しい。
あたかもjQueryより手軽で簡単みたいな事を謡い文句に
なってるけど絶対そんなことないと思うわ。アルゴリズムと
データ構造をカジッてないと
細々とした機能が何のためにあるのか、どうやって
道具として使われるのかが判らん。多分これはReactやAngularでも
いえることなんだろうけど。

2019/01/14(月) 21:28:32.97

宣言型のjQueryとは考え方が違うからね。
CSSも宣言型なので、宣言型ベースで考えてると
オブジェクト指向のvueが使いにくく感じるのは当然

2019/01/14(月) 22:22:46.51

>>108
まぁjQueryの様には行かないわな

他のフレームワークよりも導入しやすい点を挙げるとするなら
制御対象のDOMを<div id="app">～</div>で囲めば元のhtmlを活かしたまま使えるって事くらい
ReactやAngularの場合はイニシャル掛けた時点でその内側のDOMはフレームワークに定義したルートコンポーネントに差し替わってしまうからね

2019/01/14(月) 22:34:13.69

　　∩＿＿＿∩　　　　　　　　｜
　　 | ノ＼　　　　ヽ　　　　　　　|
　　/　　●゛　　● |　　　　　　　|
　 |　∪　　( _●_)　ミ　　　　　　j
　彡､　　　|∪|　　 |　　　　　　Ｊ
/　　　　 ∩ノ ⊃　ヽ
(　＼　／＿ノ　|　 |
.＼　“　　／＿＿|　 |
　　＼／＿＿＿／

オブジェクト指向？

2019/01/14(月) 22:49:24.44

Vueをオブジェクト指向だって言うのは別におかしくないよ

2019/01/15(火) 00:22:41.85

vueが難しいならこれからウェブアプリの標準的な実装方法になるReactはもっと難しいことになる

しかもjQueryより楽と言われているから脳みその思考の仕方が違うんじゃねえの

2019/01/15(火) 00:37:29.32

思考の仕方が違うってのはあると思う

手続き型でめちゃくちゃ複雑なスパゲティプログラムを間違いなく書けるほど高度な情報処理能力を持ってるのにオブジェクト指向、関数型、宣言的プログラムはからっきしダメという人
逆にそれらを使いこなして洗練されたコードをかけるけど、手続き型のスパゲティプログラムを処理しきれない人

どっちが賢いとかではなく
たぶん脳の基本構造が違うのだと思う

2019/01/15(火) 03:59:59.44

フレームワークだとDOM APIと違う方法を使うことになるので
新たに覚えることが多い

jQueryが楽なのはライブラリでフレームワークとしてはDOM APIと
同じだから標準を知っている人は単にAPIを置き換えただけ（と感じる）

とはいってもjQueryは宣言型なので、それを活かした書き方をしなければ
本領は発揮できない。具体的にはCSS（セレクタ）でHTMLの構造を定義して
（CSSの）クラスベースで設計する。

だけどそんなことは構わずDOM APIを置き換えただけとしても使えてしまうので
そういう人ほどjQueryは不要って言ってしまう。

まあ要するにフレームワークだと最初に覚えることが多いから敷居が高いが
やり方が強制されるのでよく理解してない人でもそれなりのコードになる。
jQueryだと（DOM API標準を知ってる人なら）APIの置き換えから入れるから
敷居は低いが、効率いい書き方にしようと思えば、宣言型であることを理解して
自分でCSSのクラスベースで設計しなければいけないということ

2019/01/15(火) 09:38:46.25

いつまでjqueryの話ししてるの？

2019/01/15(火) 12:33:39.45

Vue では、単一ファイルコンポーネント(SFC)と言う、独自フォーマットがあるので、
HTML, CSS, JavaScript(JS) を、1つの.vue ファイルにまとめられるから、
この3つの組み合わせを探す手間がなくなる

普通だと、各HTML, CSS, JS ファイルから、該当する組み合わせを探すのが、ものすごい手間

スコープ付き(Scoped)CSS で、他のファイル・コンポーネントと被らない、ユニークなdata属性が付く

<span class="title" data-v-aaaaaa>あ</span>

span.title[data-v-aaaaaa] { color: red; }

2019/01/15(火) 13:39:47.30

>>116
違いがイマイチ分からんってヤツに違いを教えるのもこのスレとしては優位意だと思うがな

2019/01/15(火) 13:59:21.68

結論

中規模開発を謡っときながら

中規模開発の本もサイトもない。

あることにはあるが

細々としたシステムは説明されてるが

実際に使ってみると対外「チンパン」する

2019/01/15(火) 15:26:52.62

>>117
> HTML, CSS, JavaScript(JS) を、1つの.vue ファイルにまとめられるから、
> この3つの組み合わせを探す手間がなくなる
まとめたほうが本当に便利かというとそうとは限らない。

サイトのデザインを変更する時は一箇所だけじゃなくて全体を変更する必要がある
例えばお正月用デザインとかクリスマス用デザインとか。
コンポーネント一つを変えれば良いわけじゃない
それに対して標準的なやり方をしていれば1ファイルだけ変えれば良くなる

ブログサイトのように、サイトごとにデザインが変わる場合は、コンポーネント側で
デザインを矯正できないから、結局CSSはコンポーネントの外に出す必要がある。
HTMLに関しても、コンテンツすべてをSFCに入れられるわけじゃない。
というかコンポーネントとは汎用的なものだからコンテンツはSFCの中に入れない。
1つの.vue ファイルにまとめられるが、1つの.vue ファイルにまとるわけじゃない
まとめる場合と、まとめない場合が混在する。

そもそもCSSであっても適切に（CSSの）クラス設計をして
クラスごとにファイルに分ければ、探す手間なんていらない
このコンポーネントは、このファイルと決めるわけだからすぐに見つかる。
だけどそのためには設計能力が必要になる。

ただ>>115でも書いたが、そんなことは構わずに使うことも出来る。
だから最初の敷居は低い。ただし適切なやり方をしなければ本領は発揮できない。
それに対してフレームワークだと最初に覚えることが多く敷居は高いが、
やり方が強制されるのでよく理解してない人でもそれなりのコードになる。

**デフォルトの名無しさん** (ｱﾒ MM71-45a3) · 2019/01/15(火) 15:57:27.31

長い。３行で頼む。

**117** (ﾜｯﾁｮｲ d62c-NvUN) · 2019/01/15(火) 18:25:56.14

普通、SCSS は、10個ぐらいのフォルダに、種類ごとに分けて入れる

サイト全体のデザインなら、sight とか、
ページ固有のデザインなら、pages とか

components と、全体のデザインは、分けないといけない

2019/01/16(水) 09:51:29.53

scssをフォルダ別けするかね普通
scssフォルダ一つでいいじゃん

2019/01/16(水) 12:06:14.30

>>123
その辺の派閥でVue派とReact,Angular派に分かれるんだと思う

2019/01/16(水) 12:28:49.87

>>124
でも会社で使うなら、派閥起こしてる場合じゃなくね？

2019/01/16(水) 22:42:48.72

会社ならそれこそ会社で何使うか方針決めるんじゃない？

2019/01/16(水) 23:13:02.72

>>126
それは上が決めること

2019/01/17(木) 14:53:18.25

だから会社で方針が決まれば別に会社内部で派閥が分かれる事はないだろ？
それでいいじゃん何に対して突っかかってんの？

2019/01/17(木) 15:29:34.40

フレームワーク使いたいって言ってるのに
上に今までのやり方（jQuery）でいいやろ？って言われて
理解してくれないって突っかかってるんじゃねーの？

やるべきことはここで愚痴を垂れるんじゃなくて
「これからはフレームワークの時代なんです！」
以外のまともな理由を言うってことだよ

2019/01/17(木) 15:55:27.16

フロンエンドフレームワークの導入しやすさってバックエンド何使ってるかにも依るよね

2019/01/17(木) 16:08:31.53

どのサーバーサイドフレームワークでもREST対応、JSON対応してるんだから
バックエンドがアプリケーションサーバーならどれでも大差ないだろ。

ただ単なるウェブサーバーだと、クライアントでフレームワーク導入する必要はないだろうな

2019/01/17(木) 18:52:05.06

>>130
はあ？それはねーだろ
お前は無能晒して恥ずかしくねえの？

2019/01/17(木) 19:17:46.19

フロントフレームワーク使うことが即座にバックエンドがREST ONLYに繋がるわけではない
MVCとVueの組み合わせはかなりいい感じにまとまる
でもJSPやWebFormsでは全くミスマッチだろう

2019/01/17(木) 19:39:00.55

>>131
データのやり取り以前に初期導入時の敷居の違いの話

2019/01/17(木) 19:41:40.36

>>134
そもそもバックエンドなくてもフロント作れるのがフロントフレームワークなのだが？

2019/01/17(木) 20:07:34.50

>>135
そんなシステムとして完結してないモノを見せて凄いでしょ？とか言うヤツばっかりだからjQueryのシェアが強いまんまなんだよ
XSSやらずにバックエンドのDBとどうやり取りすればいいかとか説明できんだろ？

2019/01/17(木) 20:28:06.33

>>136
説明できんだろ？とかテメェ何様なんだよ？
XSSごときで偉そうなカス野郎www

2019/01/17(木) 20:47:57.11

>>137
話の主題はXSSじゃなくてデータベースの読み書きについてだが
>>135の言い分だとproxy設定とかロクに書いたことないだろ？

2019/01/17(木) 20:48:56.11

ぷろきしｗｗｗ

2019/01/17(木) 21:03:54.46

フロントのスレだしリバースプロキシまで書かないと意味伝わんないんじゃないかな

2019/01/17(木) 21:34:00.77

分からない人にはリバースプロクシって言ってもやっぱ分からないんじゃないかと思うけど
入門ならそんな事しなくてもいいLaravel-Mixが楽でいいと思う

2019/01/19(土) 11:35:33.75

いやそこの分離は本質だろ。

2019/01/19(土) 12:20:44.34

最終的には分離開発するにしても導入検討時から分離を強制してちゃ検討も進まないから結局導入されない

2019/01/20(日) 09:24:17.87

vueのテンプレート作成
ジェネレーターみたいなモノはないよな。(๑´ڡ`๑)
簡単な文法からVueライクなHtmlタグ入りのソリューションを提示してくれるような奴

2019/01/20(日) 11:30:01.35

いくらでもありそう

2019/01/20(日) 15:22:05.46

>>144
vue template generator
でググったらそれっぽいのあったよ

2019/01/21(月) 16:34:43.42

それらしきモノって「ieoman」のことかな？
windowsの解説サイトが無くてフォルダーは手動で構築したけど
なんか半分ぐらい動く感じになった。文法は簡素な感じだけどGroovyやってる感覚になる。

yo mcs:component

ポチッとやたけど、成功パターンがそんなに
判らんので、実用的か、どうかも判らん

2019/01/21(月) 21:01:03.39

yeomanだろWwwWwWw

**デフォルトの名無しさん** (ｱﾒ MM45-7b7b) · 2019/01/21(月) 21:27:33.85

なんて読むの

2019/01/21(月) 22:29:18.49

>>149
https://dictionary.cambridge.org/ja/pronunciation/english/yeoman

2019/01/22(火) 11:19:28.91

宇宙兄弟かな

2019/01/23(水) 22:47:18.07

今のプロジェクトでangular使ってるけどvue使ってみたかった
まだangularの事全然知らないけど、コンポーネントがts,html,cssでそれぞれ別れてるせいでファイル数膨大になるのが嫌だ

**デフォルトの名無しさん** (ｱﾒ MM6d-8lqb) · 2019/01/24(木) 02:03:59.48

Vueは小規模、Angularは中規模以上
という感じがしたな。手間的にも。
Angularの方がアプリ的な作りとして
しっかりしててわかりやすいかな
ただちょっとしたことですぐに動かなくなる
Vueもちゃんとルール決めして作れば
短期間で作れるしよいね
Reactはやってないからわからん…教えて

2019/01/24(木) 07:41:20.08

Angularを開発しているGoogleチームの敵は
別のGoogleチームかもしれない

Google、FlutterアプリをWebアプリへ変換する「Hummingbird」発表
https://www.publickey1.jp/blog/18/googleflutterwebhummingbirdwebdartflutter_live_18.html

2019/01/31(木) 19:03:37.44

Reactで静的サイト作るならGatsbyが素晴らしいよ
モダンなSSR、Webpack、GraphQL対応してるし
かっこいいサイトのテンプレートも充実してる
Reactの勉強用として使い始めたけどGatsbyハマったわ

2019/01/31(木) 21:00:28.63

SPAフレームワークでSSRってなんか目的を見失ってませんか？
従来のMVCフレームワークでいいじゃないですか

2019/01/31(木) 21:12:30.75

イエス。サーバーサイドフレームワークとjQueryで十分

**デフォルトの名無しさん** (ｱﾒ MM03-5/sk) · 2019/01/31(木) 21:20:31.38

お前ら例に漏れずgatsbyの「SSR」を勘違いしてトンチンカンなこと言っててワロタｗｗｗｗｗ
ヒント： gatsbyは「静的」サイトジェネレータ

2019/01/31(木) 21:26:46.94

もうflutterでええやん。

2019/02/01(金) 06:19:45.77

>>155
サイトのテンプレートって
デモサイトどこかにある？

2019/02/01(金) 07:11:27.78

Markdown方式（超簡単）で記事かけたりとまじGatsbyいいよ
>>160
https://www.gatsbyjs.org/starters/?v=2

2019/02/01(金) 07:13:47.87

>>161
ありがと
トップページからだと
ここまでたどりつけんかった

2019/02/01(金) 09:13:31.45

今大手サイトのフレームワーク利用状況ってどうなんだっけ？

ニコニコ、pixiv、Amazon辺りがReact使ってた気はするけど

**デフォルトの名無しさん** (ｱﾒ MM03-5/sk) · 2019/02/01(金) 09:20:37.92

Netflix。サービスページほぼすべてに採用。
一部ランディングページから軽量化のためにlodashなどとともに取り除かれた際はアンチから「NetflixがReactやめたｗ」とデマ流されるほど。
あとTwitter。
https://www.infoq.com/jp/news/2017/02/twitter-react-mobile-stack
あと当然Facebook。

2019/02/01(金) 11:19:03.16

そのサイトで使ってるかどうかはfirefoxのプラグインとかで分かるけどたしかにトップページにはないみたい
利用規約では検知した

2019/02/01(金) 12:44:24.16

任天堂SwitchのeShopがReact
ZOZOがVue
という記事を読んだことある

2019/02/01(金) 15:34:39.74

大手サイトじゃなくて、大手企業のフレームワーク利用状況を知りたい
特に自社で何かしらのサービスを提供してない会社の

ほぼゼロであることはわかっていってますがなにか？ｗ

2019/02/01(金) 17:53:53.62

JSF使ってます
SPAはオモチャみたいなアプリにしか使えないから大手企業は採用しないと思います