[javascript入門] これだけは知っておいてほしいおすすめVue.jsプラグイン10選

2022-06-07


はじめに

Vue.jsとは簡単にいうと、ユーザインターフェースを構築するためのjavascriptフレームワークとなります。

人気が高く、シンプルで自由度が高いことが特徴で、とても高い生産性を発揮します。

これからVue.jsを勉強するかたにも、すでに理解していて生産性をより高めていきたい方に対し、今回はこのVue.jsのおすすめプラグインを紹介します。

Vue.jsおすすめプラグイン10選

Vuetify

Vuetifyとは、Googleが提唱したマテリアルデザインに則っており、直感的で使いやすいコンポーネントを利用することができます。このプラグインを利用することでデザインの知識が特になくても、簡単にUIを作成することができます。

Vuetify

Vuex

Vuexはデータの管理を一元化するためのライブラリとなります。コンポーネント間での状態の受け渡しが容易になり、中規模から大規模までの開発でよく利用されます。

Vuex

NuxtJS

NuxtJSは、UIなどのフロンエンド開発向けフレームワークであるVue.jsに対して、UI以外(バックエンド側)の開発に必要な機能がもともと備わっています。
SSR(サーバサイドレンダリング)やルーティングなどが簡単にできる仕組みが提供されます。

NuxtJS

VuePress

VuePressは、Vue.jsを利用した静的なサイトを作成するジェネレーターとなります。Markdownを利用したページの作成やシンタックスハイライト、PWAなどのサポートが充実しているのが特徴です。

VuePress

Vue ChartJS

vue-chartjsはVue.jsにてグラフやチャートを作成することができるライブラリとなります。棒グラフや円グラフ、線グラフなどの様々なチャートに対応しているプラグインとなります。

Vue ChartJS

Vue Grid Layout

vue grid layoutはReact-Grid-Layoutにインスパイアされて作られたライブラリとなります。
自由にドラッグしてコンテンツの大きさや配置を変えることができるUIが簡単に作成することができます。

Vue Grid Layout

Vue Tour

vue tourは、簡単にナビツアー(手順)を実装することがdけいるライブラリとなります。おもにチュートリアルの画面を作成する際に利用されます。

Vue Tour

Vue Toastification

Vue Toastificationはトースト通知を簡単に作成することができます。TypeScriptをサポートしており、マウスカーソルを当てると一時停止してくれます。

Vue Toastification

TroisJS

TroisJSはWebGLライブラリの一つです。このライブラリを利用することでWebサイトの3Dコンテンツを簡単に作成することができます。

TroisJS

Vue Scrollama

Vue-scrollamaはスクロールした際に様々な処理を簡単に加えることができるプラグインとなります。
とてもシンプルで軽量なので、スクロールごとにアクションを加えるサイト作成などで便利です。

Vue Scrollama

最後に

今回紹介したのは、Vue.jsのプラグインの中でもよく利用しそうなものをピックアップしています。
これらを利用して、生産性を高めることができれば幸いです。