1つのVueコードベースで、Web・モバイル・デスクトップを同時に作るQuasar

はじめに

「Webアプリは作れたけど、これをモバイルアプリにもデスクトップアプリにも展開したい」と言われたことはありませんか。Vue.jsとCordova/Capacitor、さらにElectronまで別々に学び、コードを二重・三重に管理するのは正直つらい作業です。

Quasarは、この悩みを「単一のVueコードベース」で解決してくれるフレームワークです。SPA・SSR・PWA・モバイルアプリ・デスクトップアプリ・ブラウザ拡張機能まで、書いたコードをほぼそのまま各プラットフォームへ展開できます。GitHub上でも27,000以上のスターを集めており、Vue生態系の中でも実績のあるプロジェクトです。

Quasarとは

Quasarは「Build high-performance Vue.js user interfaces in record time」を掲げるVue 3ベースのフルスタックUIフレームワークです。豊富なUIコンポーネント集と、それらを様々な出力形式にビルドできるCLIツールがセットになっており、デザインから配布までを一気通貫でカバーします。

主な特徴

マルチプラットフォーム対応 - 同じソースコードから、SPA・SSR/SSG・PWA・Cordova/Capacitorによるモバイルアプリ・Electronによるデスクトップアプリ・ブラウザ拡張機能をビルドできます
豊富な公式UIコンポーネント - ボタンやテーブル、ダイアログ、日付ピッカーなど実務で必要になるコンポーネントが最初から揃っており、Material Designをベースにした一貫したデザインを実現できます
強力なCLI - Vite/Vue 3を採用したCLIが、開発サーバーの起動からTypeScript対応、Tree Shakingまで面倒を見てくれます

インストール

Quasarを始める最も手軽な方法は、Quasar CLIを使って新規プロジェクトを作成することです。

# npm
npm init quasar

# yarn
yarn create quasar

# pnpm
pnpm create quasar

対話形式のセットアップウィザードが起動し、App with Quasar CLIを選んでいけば、Vue 3 + Vite構成のプロジェクトがすぐに用意されます。既存のVueプロジェクトに組み込みたい場合は、Quasar Vite Pluginを利用する方法も用意されています。

npm install quasar @quasar/extras
npm install -D @quasar/vite-plugin sass@1.77.6

基本的な使い方

まずはコンポーネントを実際に使ってみましょう。Quasarのコンポーネントはq-プレフィックスで提供されており、Vueのテンプレートにそのまま記述できます。

<template>
  <q-page class="q-pa-md">
    <q-input
      v-model="name"
      label="お名前"
      filled
      class="q-mb-md"
    />

    <q-btn
      color="primary"
      label="送信"
      :disable="!name"
      @click="onSubmit"
    />

    <q-banner v-if="message" class="bg-positive text-white q-mt-md">
      {{ message }}
    </q-banner>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('')
const message = ref('')

function onSubmit() {
  message.value = `${name.value} さん、送信を受け付けました。`
}
</script>

q-inputやq-btnのようなコンポーネントは、Material Designに沿ったスタイルとアニメーションを標準で備えているため、CSSをほとんど書かずに完成度の高い見た目を実現できます。

レイアウトを組む場合は、QLayout・QHeader・QDrawer・QPageContainerを組み合わせることで、ヘッダーやサイドメニューを持つ管理画面のようなUIも簡単に構築できます。

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat round icon="menu" @click="drawerOpen = !drawerOpen" />
        <q-toolbar-title>My App</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="drawerOpen" side="left" bordered>
      <q-list>
        <q-item clickable to="/">ホーム</q-item>
        <q-item clickable to="/settings">設定</q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'

const drawerOpen = ref(true)
</script>

実践的なユースケース

社内向けの管理画面を開発しているケースを想像してみてください。QTableコンポーネントを使えば、ソートやページネーション、行選択といった機能を持つデータテーブルを短いコードで実装できます。

<template>
  <q-table
    :rows="users"
    :columns="columns"
    row-key="id"
    :pagination="{ rowsPerPage: 10 }"
  />
</template>

<script setup>
const columns = [
  { name: 'name', label: '氏名', field: 'name', sortable: true },
  { name: 'email', label: 'メールアドレス', field: 'email', sortable: true },
  { name: 'role', label: '権限', field: 'role', sortable: true }
]

const users = [
  { id: 1, name: '山田太郎', email: 'yamada@example.com', role: '管理者' },
  { id: 2, name: '佐藤花子', email: 'sato@example.com', role: '一般' }
]
</script>

このコードはWebのSPAとしてそのまま動きますが、quasar dev -m electronのようにビルドモードを切り替えるだけで、同じ画面をデスクトップアプリとして配布することも可能です。社内ツールをブラウザで使わせたいチームと、専用アプリとして配布したいチームが両方いる場合でも、コードを分ける必要がありません。