Vue.js を知る │ 株式会社12Grid

フロントエンドチーフなのでVue.jsも触ってます、どうも吉舌です。
昨今のフロントエンド技術は進歩がとても速く、追いつくために必死に勉強しなければならないという状態が続いていますね。
昔の HTML, CSS, Javascript のスキルセットで生き残ることができる時代は終わってしまったのです。。。

というわけで今回はJavascriptフレームワークの中で最も流行っているであろうVue.jsについてお話ししたいと思います。

1. Javascriptフレームワークとは
2. Vue.jsの特徴
3. Vue.jsを利用するうえでの注意点
- 3.1. 環境毎の違いで記述が違う
- 3.2. 成長段階なので状況がカオス
4. 結論

Javascriptフレームワークとは

フレームワークとは直訳すると「枠組み」という意味なんですが、Web開発においてのフレームワークはおおむね直訳の意味通りかと思います。
「router.jsにルーディングルールを書く、viewsディレクトリ配下にvueファイルを置く、すると表示される」のように一定のルールに従って開発することができるため、開発者毎の記述の違いが極力出ないようになっています。
また、共通部分をコンポーネント化することでメンテナンス性が向上し、習熟すると開発速度が向上することが望めます。
そんなJavascriptフレームワークの中でも現在最も勢いのあるVue.jsとはどんなものなのでしょうか。

Vue.jsの特徴

各フレームワークにおいて違いは多々ありますが、特筆すべき特徴は下記の3つでしょう。

学習コストが低い

Vue.jsの最大の特徴はなんといっても学習コストの低さでしょう。
HTML, CSS, Javascript のスキルセットで生き残ることが出来なくなったと言いましたが、Vue.jsで使用するものは基本的にその3つだけで済むのです。
今まで知らなかった新しい概念、ルーディングやステート、コンポーネントといった事柄については学習しなければいけませんが、概念を知り記述方法を知ることが出来れば後は馴染みのあるJavascriptで書くことが出来ます。
ReactですとJSXといった新しい記法が求められるのですが、私はそのJSXに慣れることができずReactを敬遠しています。
それに比べてVue.jsの扱いやすさといったら！

導入が簡単

Vue.jsはプログレッシブフレームワークと呼ばれていますが、よく聞くプログレッシブウェブアプリ（PWA）とは関係がありません。
サポートするツールやライブラリといったエコシステムを状況に合わせて利用することで、どのような規模、段階のアプリケーションにも対応できるという概念です。
CDNからVue.jsを読み込むだけで利用を開始できるので、jQueryを利用したシステムの特定の箇所のみVue.jsを適用させることもできます。

活発なコミュニティ活動

Vue.jsのコミュニティは世界中で活発に活動しています。
世界各地でMeetupやイベントが開催され、2018年にはVue.jsカンファレンスが日本を含む世界7か所で開かれました。
またコアシステム以外のライブラリに関しても、現時点では後発のフレームワーク故数こそ少ないものの驚異的なスピードで増えていっているので困ることはないでしょう。

Vue.jsを利用するうえでの注意点

Vue.jsは開発速度が速く成長途上なので注意点もいくつかあります。

環境毎の違いで記述が違う

Vue.jsが用意しているCLIについて、現在3系がリリースされていますが2系を利用している人も多いかと思います。
また、Vue.jsはJavascriptで書くことが出来ますが、主流となりつつあるtypescriptで書くこともできます。
さらに、クラスベースで記述したい場合は vue-class-component や vue-property-decorator といったライブラリを利用することもあるでしょう。
これらの環境での違いは記事を探す作業をとても困難にします。
記事を探す際には自分がどのような環境で作業しているのか、記事の執筆者はどのような環境で作業しているのか、それらを確認してから参考にする必要が出てきます。

成長段階なので状況がカオス

Vue.jsは成長が速いため、少々状況がカオスな面も見受けられます。
プログレッシブフレームワークのメリットである自由度が高いという点は、裏返せばサードパーティーのライブラリの完成度に左右されてしまうということです。
メンテナンスされずに放置されたライブラリや欠点を抱えたままのライブラリを利用することはなるべく避けたいところですが、拡張が必要な場合には自作するかライブラリを利用するかの2択になってしまいます。
成熟期に入ってしまえばデファクトスタンダードとされるライブラリ等も増えてくると思うので、そこに関しては成熟を待つか自身で実装していくかが迫られるでしょう。

結論

以前の記事、「[FuelPHP, Laravel] PHPフレームワークの比較」でも書きましたが、フレームワークの選択に関しては「時と場合による」というのが結論となるでしょう。
フレームワークに限らずどんなものでも完璧というものはあまり存在せず、メリット・デメリットを踏まえたうえで選択する必要があります。
ただ、12GridではVue.jsが今後も主流で居続けるであろうと予想していますのでVue.jsがメインのJavascriptフレームワークになることは間違いありません。
今後は弊社ブログにおいてVue.jsについてのTips等を掲載していくつもりでいますので、ぜひ読んでいただければと思います。

Pocket