1年以上使用したエンジニアからみるAngularのVue.jsの違い
JavaScriptフレームワークで有名なのは3つありますが
筆者は内2つを業務で使用した経験があります。
使用経験が無いReactを除いたAngular、Vue.jsの違いについて紹介します。
この記事のポイント
- Angular
- 全部のせ
- 記法ルールがしっかりしている
- Vue.js
- 最小限の構成
- 記法ルールは自由度高め
Angular
概要
AngularはGoogleが開発しているフレームワークです。
Ver1系はAngularJSと名称が違い、Ver1以降から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をおすすめします。
設定は手間ですが可読性も高いですし良いコードが書けます。
