フロントエンドのフレームワークのひとつにVue.jsがあります。
Vue開発のスキルセットには何が必要だろう？！そんな疑問にお答えするべく、今回のストーリーでは、Vue開発における最近の動向をご紹介します。
はじめに
WEBアプリではフロントエンドにJavaScriptのフレームワークが利用されるようになり、jQueryやAngularJSからVue.js、Nuxt.jsへの移行が進められました。
Vue.jsはプログレッシブフレームワークと呼ばれており、Vue.jsはスモールスタートからはじめ、段階的に機能追加しやすいメリットがあると言われます。Vue 3からは最初に導入するJavaScriptフレームワークとして更に機能が充実しております。
今回は当社で取り組んでいるVue.jsでのフロントエンド開発におけるスキル習得を中心にご紹介します。
最近の動向
2016年10月 Vue2 リリース
Vue.jsは、SPAに続いて、SSRがはじめて公式サポートされました。
2017年 Vuex3 リリース
親子関係を超えた（コンポーネントを超えた）グローバルなデータ渡しにて、Vuexを用いた開発がデファクトスタンダードとなります。ChromeのDevToolsに拡張機能を導入するとCSRのデバッグも行えます。
2018年9月 Nuxt2 リリース
Nuxt.jsは規約が提供されることがメリットであると言えます。SPAで開発する際にも、Vueファイルを設置するだけでルーティングが自動生成され、ディレクトリ構成にも規約があります。
さらに、Nuxt.jsではSSRを比較的簡単に開発することができます。SEO管理が必要となるサイトではSSRでフロントエンドを構築できることに魅力があります。ビルド（Webpack）を含めて、エコシステムが揃うVue.js / Nuxt.jsの導入が進みます。
2020年9月 Vue3.0 リリース
Vue3.0が登場して以来、周辺ライブラリのVue3対応への期待が高まります。Vue3への移行開発が検討されるようになり、周辺ライブラリを使用していない開発からVue3への移行が始まります。
2021年2月 Vuex4, Storybook6.2 リリース
2021年8月 Vue3.2 リリース <script setup>
2020年から2021年にかけては、Vue2からVue3への移行に向けた議論が活発でした。課題を挙げると、Vue.jsの周辺ライブラリのなかでNuxt / Vuetify のVue3対応が未完了であることや、ビルドをWebpackで設計している場合には、Vue3への移行時期が策定できておりません。
2022年5月 Vuetify3 予定
2022年6月 Nuxt3 予定 <script setup>
2022年6月 IE 公式サポート終了
Vuex4 / Pinia / ElementPlus / Storybook6.2 / VeeValidate4 / Vuelidate2は既にVue3対応がされております。2022年前半にはNuxt3 / Vuetify3でのVue3対応がリリース予定です。これまでVue3への移行タイミングが検討されてきましたが、いよいよこれからはVue3へのバージョンアップ開発の機運が見込まれます。
今後の流れ
今後のVue開発の流れは次の2通りに集約されると考えております。
・JavaScript開発では、Options API 記法
・TypeScript開発では、Composition API + <script setup> 記法
今後、Nuxt3 / Vuex5が登場すると、SSRでもTypeScript開発が進むことが期待されます。
まとめ
グロシードでは顧客要件を実現するVue開発に取り組んでおります。
Vue.jsは、HTMLベースのテンプレート構文で開発でき、学習コストが低くデザイナーにも配慮があり、スモールスタートし易い特徴があります。プログレッシブフレームワークの観点から、モダンなアーキテクチャにも追随していて、バージョンが上がるごとに進化しています。
フロントエンドエンジニア募集中でございます。こちらも見ていただけましたら幸いです。
