始める前に
今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。
Quasarフレームワークとは
Quasarの特徴を紹介します。
- Vue.jsをベースに作成されています。
- ウェブサイトとアプリのための最新のUI（Material Guidelinesに従う）が、デフォルトで提供されます。
- デスクトップとモバイルブラウザ（iOS Safariを含む）に対するサポートが最初から提供されます。
- 各ビルドモード（SPA、SSR、PWA、モバイルアプリ、デスクトップアプリ、ブラウザ拡張機能）におけるサポートと、独自のCLIが使用可です。
- 簡単にカスタマイズ可能（CSS）で拡張可能（JS）です。
- 他のUIライブラリに比べてパフォーマンスに焦点を当てたフレームワークです。
- 自動的にTree-shaking（不要なコードの削除）が行われます。
- フォーラムとDiscordチャットにおけるコミュニティが存在します。
- 新機能を含む定期的なリリースサイクルがあります。
- 迅速な修正とコミュニティの要望に対するリスニングを行います。
- アプリのアイコンやスプラッシュスクリーンの作成を含む、開発全体の経験をサポートします。
- ウェブサイトを構築したい場合、Quasarはウェブサイトに必要なコードだけをビルドしそれ以外のものは含みません。他のビルドモードも同様です。
Quasarとは？
- Quasar（発音：/ˈkweɪ.zɑɹ/）はMITライセンスで公開された、Vue.jsベースのオープンソースフレームワークです。
- このフレームワークを使用することで、ウェブ開発者は迅速にレスポンシブなウェブサイトやアプリをさまざまなバリエーションで作成できます。
Quasarで作成できるもの:
- SPA（シングルページアプリケーション）
- SSR（サーバーサイドレンダリングアプリ）（+ オプションでPWAクライアント接続）
- PWA（プログレッシブウェブアプリケーション）
- BEX（ブラウザ拡張機能）
- モバイルアプリ（Android、iOSなど）（CordovaまたはCapacitorを使用）
- マルチプラットフォームデスクトップアプリケーション（Electronを使用）
Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。
Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。
ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。
条件
使用するコンピュータに、Node.jsのバージョン14以上（または新しいLTS Node.jsバージョン）と、NPMのバージョン6.14.12以上、またはYarnのバージョン1.21.1以上がインストールされていることを確認してください。
- Node.jsのバージョンを確認するコマンド:
node -v
このコマンドを実行すると、現在のNode.jsのバージョンがターミナルに表示されます。
- NPMのバージョンを確認するコマンド:
npm -v
このコマンドを実行すると、現在のNPMのバージョンがターミナルに表示されます。
プロジェクトの作成
以下のコマンドを実行してください：
yarn create quasar # または: npm init quasar
createまたはinitコマンドを実行すると、いくつかのオプションがプロンプトで表示されます。あなたのニーズに応じて、CLIのタイプ（ViteまたはWebpack）を選択したり、TypeScriptサポートを追加したり、異なるCSSプリプロセッサを選択したりできます。オプションについて不明点がある場合、デフォルトを選択（Enterキーを押す）して進んでも問題ありません。後で必要に応じて、CLIのタイプ以外のオプションを変更することもできます。
下記にセットアップのオプションの例を記載します。
C:\GitHub>npm init quasar
Need to install the following packages:
create-quasar@1.4.0
Ok to proceed? (y)
.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... Qapp
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... qapp
√ Project product name: (must start with letter if building mobile apps) ... quizeapp
√ Project description: ... A Quasar Project
√ Author: ... Dan Nakatoshi
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » ESLint, State Management (Pinia), Axios
√ Pick an ESLint preset: » Prettier
Quasar • Generating files...
オプショナル – グローバルCLIのインストール
Quasarをより多く活用するために、グローバルCLIもインストールすることをお勧めします。これにより、ターミナルで直接Quasarコマンドを実行したり、テスト用のローカルHTTPサーバーを実行したり、プロジェクトをアップグレードしたりすることができます。
以下のコマンドを使用してグローバルCLIをインストールできます：
yarn global add @quasar/cli npm install -g @quasar/cli
これにより、Quasarのコマンドをプロジェクトの外からも使用できるようになります。
依存ライブラリをインストール
新しく作成したプロジェクトフォルダに移動し依存ライブラリをインストーします。
cd <プロジェクトフォルダの名前> npm i
次に、以下のコマンドで開発用サーバーを起動します。グローバルCLIをインストールしている場合は：
quasar dev
グローバルCLIをインストールしていない場合は、以下のコマンドで実行できます：
yarn quasar dev # または: npx quasar dev
このコマンドを実行すると、開発用サーバーが新しいアプリケーションをコンパイルし、完了すると新しいアプリがブラウザで開きます。これで開発を開始できます！お気に入りのIDEやコードエディターを使用してアプリを開発できます。
これでデフォルトのQuasarアプリが起動しました！
ファイル構成
Quasar Frameworkのデフォルトのフォルダ構成は、クエーサーアプリケーションの基本的な構造を定義します。以下は一般的なQuasarプロジェクトのデフォルトのフォルダ構造の概要です：
- srcフォルダ:
assets: 画像、フォント、スタイルなどのリソースファイルを格納する場所。components: Quasarコンポーネントやカスタムコンポーネントを配置するディレクトリ。layouts: アプリケーションのレイアウトファイルを格納する場所。pages: アプリケーションのページコンポーネントを配置するディレクトリ。各ページはルーティングされます。router: Vue Routerの設定ファイルがここに配置されます。store: Vuexストアの設定ファイルがここに配置されます。App.vue: アプリケーションのルートコンポーネント。main.js: アプリケーションのエントリーポイント。
- publicフォルダ:
publicフォルダには、直接アクセス可能な静的ファイル（例: favicon.ico）を配置します。
- src/assets:
- 画像、フォント、スタイルなどのアセットファイルがここに配置されます。
- src/components:
- Quasarコンポーネントやカスタムコンポーネントが格納され、再利用可能なUI要素を提供します。
- src/layouts:
- アプリケーションの異なるページやセクションに異なるレイアウトを適用するためのレイアウトコンポーネントが配置されます。
- src/pages:
- アプリケーションの異なるルートページ（ビュー）がここに配置され、Vue Routerによってルーティングされます。
- src/router:
- Vue Routerの設定ファイルがここに配置され、ページのルーティングを定義します。
- src/store:
- Vuexストアの設定ファイルがここに配置され、アプリケーションの状態管理とデータ共有をサポートします。
- src/App.vue:
- アプリケーションのルートコンポーネントで、他のコンポーネントをラップする役割を果たします。
- src/main.js:
- アプリケーションのエントリーポイントで、Vueインスタンスを作成し、アプリケーション全体を初期化します。→これはBootファイルに変更されました。詳しくはこちらを確認してください。https://quasar.dev/quasar-cli-webpack/boot-files#Introduction
これらのデフォルトのフォルダ構造は、Quasarアプリケーションの基本的な構造を提供し、効率的な開発をサポートします。ただし、プロジェクトの要件に応じてカスタマイズできます。
コンポーネントを使ってみる
では参考までにボタンのコンポーネントを使ってみます。
メインページになっているsrc/pages/Index.vueを下記のように変えましょう。
<template>
<q-page class="flex flex-center">
<div class="q-pa-md q-gutter-sm">
<q-btn color="primary" icon="mail" label="On Left" />
<q-btn color="secondary" icon-right="mail" label="On Right" />
<q-btn
color="red"
icon="mail"
icon-right="send"
label="On Left and Right"
/>
<br />
<q-btn icon="phone" label="Stacked" stack glossy color="purple" />
</div>
</q-page>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "IndexPage",
});
</script>
これでボタンのコンポーネントが表示されましたね。 これらのコンポーネントはグローバルにインポートされているので各.vueファイルでインポートする必要がありません。
ちなみにこのscriptの書き方がちょっと古いので必要に応じてscript setupに書き変えることをお勧めします。
次にテーブルのコンポーネントを使ってみましょう。
<template>
<q-page class="flex flex-center">
<div class="q-pa-md">
<q-table
flat
bordered
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
dark
color="amber"
/>
</div>
</q-page>
</template>
<script setup>
const columns = [
{
name: "name",
required: true,
label: "Dessert (100g serving)",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true,
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true,
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{ name: "carbs", label: "Carbs (g)", field: "carbs" },
{ name: "protein", label: "Protein (g)", field: "protein" },
{ name: "sodium", label: "Sodium (mg)", field: "sodium" },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
{
name: "iron",
label: "Iron (%)",
field: "iron",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
];
const rows = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: "14%",
iron: "1%",
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: "8%",
iron: "1%",
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: "6%",
iron: "7%",
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: "3%",
iron: "8%",
},
{
name: "Gingerbread",
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: "7%",
iron: "16%",
},
{
name: "Jelly bean",
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: "0%",
iron: "0%",
},
{
name: "Lollipop",
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: "0%",
iron: "2%",
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: "0%",
iron: "45%",
},
{
name: "Donut",
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: "2%",
iron: "22%",
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: "12%",
iron: "6%",
},
];
</script>
このように簡単で軽量なウェブアプリができてしまいます！
慣れてきたらモバイルアプリにも挑戦してみたいですね。