JavaScript フレームワークで有名なのは 3 つありますが、筆者は内 2 つを業務で使用した経験があります。

使用経験が無い React を除いた Angular、Vue.js の違いについて紹介します。

結論

  • Angular
    • 全部のせ
    • 記法ルールがしっかりしている
  • Vue.js
    • 最小限の構成
    • 記法ルールは自由度高め

Angular

概要

Angular は Google が開発しているフレームワークです。Ver 1 系は AngularJS と名称が違い、Ver 1 以降から Angular と呼ばれています。

Angular は半年ごとにメジャーアップデートがされるとアナウンスされています。メジャーアップデートは互換性が無いと宣言されているので注意です。

※筆者の経験では心配に反し、大きな影響はありませんでした。

筆者が感じた特徴としては:

  • フルスタックフレームワーク
  • TypeScript

です。

フルスタックフレームワーク

Angular は元からルーティング機能などがデフォルトで入っています。インストールしてしまえば、環境構築ができてしまうのは便利でした。また調べる時も公式を見れば解決する可能性が高いのも良かったです。

component のフォルダ構成は以下です。

component
  ├── component.ts
  ├── component.html
  ├── component.css
  └── component.spec.ts

1 ファイル内に言語が混在しないようになっているのは管理しやすいです。

フルスタックのデメリットとしては不要なコードが含まれる可能性が高い点です。パフォーマンスの影響は避けられません。

TypeScript

Angular の推奨言語は TypeScript です。TypeScript は Microsoft が開発している言語なので、Google と Microsoft の組み合わせは強そうに感じます。

静的型言語なので記述方法がガッチリしています。

TypeScript を書いたことが無い人にとっては、Angular と同時に学習することになるので学習コストが高いです。

おすすめ使用ケース

Angular は大規模開発に向いていると一般的に言われていますが、筆者も同様の感想です。

良くも悪くも記述方法・環境構築などがしっかりしているので、引き継ぎ・作業分担が円滑に行えました。

トレードオフとして学習コストも高く、立ち上がりは時間がかかるので余裕を見て引き継ぎ等のスケジュールを立てましょう。

Vue.js

概要

Vue.js は有志の方が開発しているフレームワークです。近年採用率が高く注目されています。

筆者が感じた特徴としては:

  • 最小限の構成
  • 自由度の高さ

です。

最小限の構成

Vue.js は Angular と違い、デフォルトでルーティング機能などは入っていません。ライブラリは個別で入れる必要がありますが、Vue Cli を使用すると簡単に導入できます。

component のフォルダ構成は以下です。

component
  └── component.vue

すごくシンプルです。vue ファイルの中に HTML・JS・CSS が記入されています。

JS と CSS は別ファイルに分離できます。

component
  ├── component.vue
  ├── component.js
  └── component.css

ただし、分離は手動で行う必要があります。

最小限の構成のデメリットはフルスタックの逆でライブラリは自分で探して導入する必要があります。ただし、最小限の構成なのでパフォーマンスが高いです。

自由度の高さ

Vue.js は JavaScript をデフォルト言語にしています。TypeScript も勿論導入できますが、しっかり導入するには少し手間がかかります。

Angular との決定的な違いは自由度の違いです。プロジェクトは使用者の難易度・用途によって構成を変えられるのが Good です。

自分で調べる必要がありますが、敷居が低いのは明らかでした。

おすすめ使用ケース

おすすめはプログラマーやデザイナーの作業分担が発生する以外のプロジェクトです。

Vue.js の注意点は 使用ライブラリ・構成・構築のドキュメントを残す点です。自由度が高い分、引き継ぎ等管理コストがかかるケースがあるので、会社で行うプロジェクトはフォーマッタの導入などを強く推奨します。

※個人プログラムの作成は Vue.js がかなりおすすめです。

まとめ

今回は自分の経験も入れつつ Angular と Vue.js の違いについて紹介しました。

筆者としては Vue.js + TypeScript をおすすめします。設定は手間ですが可読性も高いですし、良いコードが書けます。

関連記事: Vue.js 入門 - Vue の基礎