目次
Vue3
Vue2から様々大きな変更があり、(VueのグローバルAPIの更新、テンプレートディレクティブの利用方法など） それによりコード量が減り、効率的に記述することができるようになった。
注目機能
composition API
Vue3から新たに提供されたAPIで、従来使われていたOption APIをコード量が多くなった場合に煩雑になりがちだった実装をより可読性の高い実装ができるもの。 ※optionAPI:data,props,computed,methods,watchなどの様々な機能を持った関数
Teleport
任意のHTMLの箇所にVueJSのComponentをレンダリングする機能。 モーダルウィンドウをBody直下に配置したい時に使用する。
Fragment
マルチルートコンポーネントがサポートされておらず、
Vite
高速でプロジェクトを生成・実行できるCLIツール。 従来で利用されていたVue CLIは動作速度が遅かったが、Viteでは高速でビルドすることができ、 さらにVue.jsだけでなくReact.js,vanilla.jsなど様々な形式のプロジェクトにも対応できる。
Piniaについて
state management solution：状態管理ツール 様々なところで利用するデータをGlobalにStoreできる状態管理ツールを介することによって簡単にデータの利用をすることができる。 今まではVuexを利用して状態管理を行なっていたが、冗長で学習コストが高いという問題があった。 Piniaは複雑なコードを書かずに安全な状態管理が行え、Typescriptも完全にサポートできるようになった。 5-10コンポーネントまでのプロジェクトやデモプロジェクトなどでは利用する必要はなく、規模が大きくなるであろうプロジェクトなどで利用しやすい。Vitestについて
Viteベースのテスティングフレームワークで、自動テストを行うことができる。 JavaScriptでは他にもJestというフレームワークがある。 テストランナーを走らせることで簡単にテスト、値のチェックができる。
Jestと書き方は基本的には同じだが、処理速度が2割ほどJestより速い。 他にもCypressなどのテスティングフレームワークがある
まとめ
今回はVue.jsにフォーカスして利用する技術の紹介をしてみましたが、 Vueだけでもこれだけ多くのフレームワークがあり、どれもバージョンが上がるにつれて今までよりもシンプルで可読性の高いコードが書けるようになり、より処理速度が速くなっています。 こうしたライブラリの改善されるスピードがすごく速いためキャッチアップも非常に大切で速く習得できればそれだけ速く恩恵を受けられると感じました。
参考文献
https://ja.vitejs.dev/
https://pinia.vuejs.org/
https://vitest.dev/
https://www.cypress.io/
