あの時の面接官に伝えたい、Vue.jsを導入するメリットは？（簡易版）

あの時の面接官に伝えたい、Vue.jsを導入するメリットは？

エンジニア採用面談にて「reactなどの他のフレームワークに比べてVue.jsを導入するメリットは何かね？」と問われモゴモゴしてしまいました。

モゴモゴしすぎて面接は落とされましたw

またモゴモゴして面接落とされないためにも、Vue.jsを導入するメリットを調べましたのでメモ残します。

有名どころJavaScriptフレームワーク

名称	概要
Angular	Googleを中心に開発されているフルスタックフレームワーク
React	Facebookが開発したフレームワークで、ビュー相当の機能を提供
Vue.js	ビューに特化したシンプルなフレームワーク

2020年現在で有名なJavaScriptフレームワークは以上の３つではないでしょうか？

フルスタックのAngularに比べて、ReactとVue.jsはビューに特化したフレームワークになります。

Angularはフルスタックで高機能ですが、導入のハードルが高く、初期段階で学ぶ項目が多いです。

（AngularはTypeScript が基本であり、かつ DI や Service層など、モダンなアーキテクチャにおける開発を支援するようなスキルスタックとなっています。その為、学習コストが高い）

その一方、Vue.jsはビューに特化したフレームワークなので、導入が簡単です。

... まとめるとこんな感じです。

規模が大きいWEBサイト -> AngularやReactがおすすめ
小～中規模のWebサイト -> Vue.jsがおすすめ

規模が大きいサイトでフルリッチなフロントにしたい場合はAngularやReactがおすすめ。

小～中規模で手軽にリッチなフロントにしたい場合はVue.jsがおすすめ。

メリットその１「導入ハードル、学習コストが少ない」

他のフレームワークに比べて、Vue.jsははるかに簡単と言われています。

HTMLとJavaScriptを理解している人であれば、Vue.jsの初歩的なコードはほぼ直感的に理解することが出来ます。

また、開発にBabelやwebpackなどのツールを前提としない点も初学者には学習コストを下げてくれています。

メリットその2「段階的にVue.jsの機能を大きくしていくことが出来る」

Vue.js導入後にアプリが成長し、大きくなっていくごとにVue.jsでは段階的に機能を追加することが可能です。

大規模
  |   ④データ管理機能
  |   ③ルーティング機能
  |   ②コンポーネント機能
  |   ①テンプレート機能
小規模

①テンプレート機能

動的にページを反映させる程度の用途でVue.jsを利用する場合はテンプレート機能だけをVue.jsで利用することができます。
jQueryでテンプレートプラググイン導入と同じ要領でVue.jsを導入できます。

②コンポーネント機能

アプリが少し巨大化してくると、似たような見た目が混在するようになるのでコンポーネントを導入することが出来ます。
コンポーネントを利用することで、何度も同じコードを書く必要がなくなるので、見通しが良くなり、保守性も高まります。
（詳しくはメリットその３参照）

③ルーティング機能

機能が増えてきたら、より明確にページを分割して整理することが出来ます。
VueRouterと呼ばれる公式ライブラリを加えることで既に用意されているコンポーネントをもとにSPAを組まれることがあります。

④データ管理機能

より高度な機能が増えてきた場合、コンポーネント間でデータのやり取りが複雑になるので。
その場合はグローバルにデータ管理を行うことが出来ます。
Vuexと呼ばれる公式ライブラリを利用することでアプリで扱うデータを中央管理することが出来ます。

こんな感じでアプリの成長フェーズに合わせてVue.jsの機能を拡張できるので便利です。

最近ではフロントをSPA化する現場が多いので①,②,③の機能までを採用している会社が多いイメージですねー

Vuexはグローバルにデータを扱えるメリットがある反面、データの流れが追いにくいというデメリットがあるので個人的にあまり利用しません。

メリットその3「コンポーネント指向」

コンポーネントとはページを構成するUI部品のことです。

ビュー（テンプレート）、ロジック（オブジェクト）、スタイルなどから構成されます。

コンポーネントを組み合わせることで、ページを構成していくことが基本になります。

これをコンポーネント指向と言います。

一つの画面に複数のコンポーネントを分離し、入れ子にして積み上げることで個々のコンポーネントの見通しの良さを維持しています。（下記参照）

メリットその4「ドキュメントやライブラリが充実している」

Vue.jsは主要なJavaScriptフレームワークとして有名なので、ドキュメントやライブラリが充実しています。

また。日本国内でもVue.js コミュニティの活動は活発です。

公式ドキュメントも日本語対応で丁寧に解説されているので、理解をより深めることが出来ます。

ライブラリ・開発環境も充実しています。

- Element(リッチなUIが利用できるライブラリ）
- VueCLI(Vue.jsの骨組みを自動作成するライブラリ）
- Vue.js devotools(Vue.jsアプリ開発を支援するブラウザー拡張機能）
- などなど

まとめ

Vue.jsを導入する最大のメリットは学習コストが低く導入ハードルが低い。

また、アプリの規模に合わせて段階的に機能を追加していくことが出来るポイントなのかなと思います。

ただ、よりリッチなフロントにしたい場合はVue.jsでは物足りないのでAngularとかがお勧めになってきます。

他にもVue.jsを使うメリットがあればコメントで教えてください。

全く関係ないですが、Vue.js開発者のドキュメンタリー面白かったです。 興味ある人は見てみてください ↓ https://www.youtube.com/watch?v=OrxmtDw4pVI

参考

これからはじめるVue.js実践入門