logo-sm

お電話はこちら 03-6912-0139

ブログ

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

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

関連記事

  • CloudFront+S3+Route53以外のドメイン管理でSPAをSSL化する
    はじめに こんにちは。 季節はそろそろ梅雨も明けて初夏の装いに差し掛かっておりますが、いかがお過ごしでしょうか […]

    2020.07.09

  • UnityプロジェクトをGitHubとSourcetreeで管理する【導入編】

    2020.05.25

  • マウスを使わない仕事術

    2020.05.12

  • パートナー

  • 人材育成