Vue.js vs. Angular使い分けは？

2019-09-23

vue.jsとAngularは人気のJsフロントエンドフレームワークである。

Vue.js Angular
リリース日 2014/02 2016/09 (初代：2010/10)
開発元 AngularJS開発者？ Google
qiitaタグ記事数（19/9/17時点） 4768 2523

もともとは「AngularJS」というGoogle製のフレームワーク（Angularの前身）が存在しており、その開発者の人がもっとシンプルで良いものを開発したいという思いからVueJsが生まれたらしい。その後、Googleが「AngularJS」を完全に作り変えて「Angular」を生み出したという感じだ。(wikiいわく)

このような経緯があってか、Vue.jsとAngularはよく似ている印象がある。

Qiitaの記事数によると2019/09/16時点ではvueの方が情報が多く人気のようだが、どちらを使うべきか？

VueとAngularの共通点

設計思想や構文はかなり似ていると言っていいと思う。独立したcomponentでパーツとして作成して全体を構成するパターンだ。

またcomponentのライフサイクルの主なところの対比は以下でよいか。

Vue.js Angular
created() ngOnInit()
mounted() ngAfterViewInit()
updated() ngAfterViewChecked()
destroyed() ngOnDestroy()

またレンダリング操作も以下のように対応する。

Vue.js Angular
展開 <p>{{text}}</p> <p>{{text}}</p>
HTML展開 <span v-html=“rawHtml"></span> <span [innerHTML]=“rawHtml"></span>
If <div v-if="is_true"> <div *ngIf=“is_true">
for <li v-for="hoge in hoges"> <li *ngFor="let hoge of hoges">
event <button @click="onclick"> <button (click)="onclick()">
双方向バインド <input v-model="val"> <input [(ngModel)]="val">

設計思想から具体的な記述方法まで色々似ている。

VueとAngularの相違点

明確で決定的な違いがあるかというとほとんどない。なぜならお互いに片方に寄せようと思えば可能だからだ。
なので以下は基本的な違いであるが、学習コストについてでも触れるがそれぞれ解決可能な部分も含む。

  • angularはtypescript強制。vueはJavascriptでも書ける
  • angularではhtml, scss, ts, moduleと全て個別ファイルでの設計。vueは1つのファイルに含められる
  • angularは初めからDIによるserviceの注入が求められる。vueはそうではない。

学習コストはAngularのほうが高い？

学習コストの面では通常、Angularのほうが高いと言われている。それはおそらく以下の理由からだと考える。

  • ノーマルなJsではなくTypeScriptの使用が強制される
  • DI（依存性注入）がベース
  • ユニットテストやe2eテストの強要

Angular-TypeScript

Angularではプロジェクトをスタートした時点から開発言語がデフォルトでTypeScriptとなる。Vue.jsでも当然開発言語をTypeScriptにすることはできるのだが、デフォルトはノーマルなJavaScriptである。

まともなシステムエンジニアであればJavaScriptよりTypeScriptの方を好むと思われるが、静的型付け言語（Java, C#など）を経験していない人にとってはTypeScriptの学習コストは高いのかもしれない。

Angular-DI（依存性注入）

DIを使用するデザインパターンのフレームワークはいくつかあるが、DIの存在自体を知らないエンジニアも結構多い。それではAngularを理解することは難しいだろう。

https://qiita.com/bunty/items/a2f6a306972087b56de6

Angular-自動テスト

「強要」と書いたが、別に自動テスト書かなくても問題はない。しかしデフォルトコマンドではcomponent等を追加した時、まるで「当然自動テスト書くよね」という風に『*.spec.ts』が作成される。

当然Vuejsでも自動テストは書けるし、いずれにせよほとんどの場合で、自動テストは書いた方が良いと思う。

とにかく、『Angularは学習コストが高い』などと言われているのは多分上記の理由だと思われるのだが、まともなエンジニアであればこれらは『コスト』にはなり得ない。なのでVueもAngularも学習コストの面ではほとんど違いがないと個人的には思う。

パフォーマンスについて

vueとangularの動作パフォーマンスについて以下で詳しくまとめられている。

https://ics.media/entry/190731/

vueは描写関係の処理が重く、Angularはライブラリ自体の読み込みサイズが大きいという欠点があるようだ。

結局どっちが良いのか

まともなエンジニアにとっては学習コストは変わらない。パフォーマンスについてはケースバイケースだが、ほとんどの場合気にする必要はない。

Angularは大規模プロジェクト向きとか言われているが、当然小規模でも導入出来るので、大規模=Angular、小規模=vueというのもおかしい話だ。

vueもangularもどちらも同じように便利で、よく使ってきた。だが個人的にはAngularの方を推したい。ts、DI、testの全面サポートはやはり魅力的だと思うし安定感はバツグンだ。

数年前からAngularはvueに比べると盛り上がりに欠ける印象があるのが不思議でたまらないのだ。

Angular, TypeScript, Vuejsangular, vue