logo-sm

お問い合わせは Webフォームから

ブログ

Vue.jsを使用するための優れたUIフレームワークを紹介する

2020.10.13

はじめに

こんにちは、クロスメディア課のベトナム人エンジニア ティエンです。

9月に入ってから急激に寒くなりましたね。
気温の急激な変化で体調を崩さないように、みなさんお身体をご自愛ください。

今日は自分が今まで使ってきたVue.jsのUIフレームワークを紹介していきたいと思います。

プロジェクトでUIフレームワークを使うと、開発時間を大幅に削減できます。
機会があれば是非使ってみてください。

さて、いきましょう!

Element

ウェブサイト:https://element.eleme.io/

element.eleme.io

Elementはかなり有名なUIフレームワークで、必要なコンポーネントのほとんどすべてが含まれています。
日本語のドキュメントはありませんが、コンポーネントの使い方の例がありますのでそれを見れば使い方がわかります。

Buefy

ウェブサイト:https://buefy.org

Buefyは、BulmaというCSSフレームワークをVue.js向けに拡張したフレームワークになります。
BulmaはFlexboxを使用するモバイル初のCSSフレームワークです

Buefyの特徴は軽くてドキュメントも読みやすいことですが、コンポーネントの数はElementより少ないです。

Bootstrap Vue

ウェブサイト:https://bootstrap-vue.org

Bootstrap VueはBootstrap4というCSSフレームワークをVue.js向けに拡張したフレームワークです。Bootstrap 4のすべてが含まれておりドキュメントも読みやすいし、何よりBootstrapのクラスをそのまま流用できるのがいいと思います。

プロジェクトでBootstrapを使用している人におすすめです。

Vuetify

ウェブサイト:https://vuetifyjs.com

Vuetifyは、Vue用に構築されたsemanticコンポーネントフレームワークです。コンポーネントも多いしデザインも綺麗ですが、ドキュメントが読みにくいです。

Quasar Framework

ウェブサイト:https://quasar.dev

Quasar frameworkはマテリアルデザインベースのデザインを簡単に構築することが可能なVue.js製のデザインフレームワークです。

Quasarを使用すると、コードを1回記述してから、同じコードベースを使用して、Webサイト、PWA、モバイルアプリ、Electronアプリとして同時に展開できます。

コンポーネントの数も多いしドキュメントも充実しており、「一番何でもできるUIフレームワーク」だと思いますが、何でもできる反面使いこなすには時間がかかると思います。

おわりに

上記はVue.jsを使用するための優れたUIフレームワークを紹介しました。他にも無数のライブラリがあります、例えば:
Framework7
Onsen UI
Vue-material
Keen UI
Vuikit

機会があったら是非使ってみてください。

関連記事

  • 自宅に構築!仮想環境 ~BIG-IP VE導入編~
    【導入】 前回は、自宅サーバにProxmoxを導入しました。 今回はその上に仮想マシンとしてBIG-IP VE […]

    2024.09.30

  • 自宅に構築!仮想環境 ~Proxmox導入編~
    【導入】 以前から学習用に自宅仮想環境をつくりたく思っていたところ、BIG-IP(の仮想版)に触れる必要が出て […]

    2024.09.30

  • WindowsのWSL2上のDockerでup時に’ContainerConfig’のエラーが出た。
    当社の開発環境はMacとWindowsが混在したDocker上での開発を行っています。なのでMacでOKだけど […]

    2024.04.08

  • パートナー

  • 人材育成・採用情報