0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsを2ヶ月利用して思ったこと(個人的感想)

Posted at

この内容は、私が2ヶ月Vue.js(Vue CLI)を利用してシステム開発しての感想です。
異論、反論、多々あると思いますが、生暖かい目で見てください。

JS(TS)系フレームワークではとっつきやすい

奇しくも2,3年の内にReact、Angularでの開発を業務で行ってきましたが、Vue.js(Vue CLI)でコーディングしていく方がとっつきやすい印象があります。

ソース構成

Vue CLIでは、.vueファイルにHTMLベースのテンプレート(ビュー部)、スクリプト本体(コントローラ部)、CSSをコンポーネント単位で一つにまとめてコーディングしていきますが、コンポーネント単位で構造や構成を見ていく分には、これがわかりやすいように思えます。

Reactだとスクリプト本体の中に"render()"メソッドを置き、その中にビュー部となる箇所をJSX形式で記述することになりますが、共通の処理を別の関数として同じソースの中に定義してしまうと、第三者がソースを読む際に、何処にビュー部分があるかを探すのが厄介に思えました(別ファイルでまとめてimportすれば解決できると思いますが)。

Angularはスクリプトとビュー部分が完全分離していて、何かしらのバグがあった場合、最低で2つのファイルを見比べながら調査していくことになるので、ウィンドウを分割して同時に見られるようなエディタでないとめんどくさく感じるように思えます。

ライフサイクル、イベントハンドリング

どのタイミングで処理をするかを考える上で、ライフサイクルとイベントハンドリングを理解する必要がありますが、Vue.jsのほうがシンプルでわかりやすいように思えます。

また、定義した変数の値が変化したことを感知するウオッチャもシンプルに記述できるので、理解するのにそれほど時間がかからないように思えます。

Reactだとライフサイクルの名称が似たようなものが並び、どれがどのタイミングで発動するのかがいまいち理解できませんでした(しかもバージョンが進んで廃止になったものもある)。

Angularだと厳密なイベントハンドリングをするとなるとRxJSを導入することになりますが、Angularとワンセットで勉強するとなると余計に時間を費やしてしまい、理解するのに時間がかかりました。

Flux導入

コンポーネント単位で分割して実装する際、共通のデータをやりとりする場合、バケツリレー形式でいちいち記述しなければならないため、共通で利用するデータ類をFluxのようなものでまとめてしまうのが一般的かと思います。

VueだとVuexがあり、既存のソースを大きく変えなくても、Vuexを扱うディスパッチャを追加することで利用が出来るメリットがあります。

Reactで開発する際、Reduxを使う方が便利だと言われて試したものの、すでにReactで組み上げたソースをほぼ作り直すほど構造を変えていかないとならなくて、結局挫折しました。
Reduxを使うのであれば、新規で構築する際に決めた方がよく、途中導入ならFluxを使う方がいいです(一部のコンポーネントレベルならフック(Hooks)を使うのもアリ)。

学習開始から2ヶ月でフロントエンド完成

過去にReactやAngularを経験した上ではあるものの、結局実務の方で、要望されたフロントエンド部分をVueを1ミリも知らない状態から2ヶ月で完成させられました。

単にVueのみならず、Vuetify(テンプレートの都合上1.x)やChartist.jsを含めて学習した末のものですので、とてつもなくとっつきやすい印象です。

これがReactであれば3ヶ月以上、Angularとなると4ヶ月でも厳しかったでしょう。

もっとも、それぞれのフレームワークの仕様、開発のコツをつかんでしまえば、大規模で本格的なフロントエンドを作る際にはReact、Angularのほうが高機能、効率の良いシステムを作り込めるでしょう。

とはいうものの、あまりにもWeb系開発に於いて言語、技術が雨後の竹の子のように膨大に登場し、タダでさえ人が足りない開発者なのに、自分たちが利用している言語、技術を1年以上経験する人間を確保することが難しいほど、技術が分散してしまっている現状を考えると、SPAベースでフロントエンドを開発する上では、とっつきやすく未経験者でも短期間で理解できるVueは大きなメリットを持っているように思えます。

バックエンドとのやりとりは、axiosを使ってJSON形式で行うのが普及してますが、最近だとApolloを使ってGraphQL形式でやりとりする方法も出てきてますね。それは別の機会に...

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?