Zenn
☕

SVQK - Svelte + Quarkusで開発するWebアプリの開発プラットフォーム

に公開
Svelte
Playwright
Open source
Quarkus
webdev
tech

Project Au Laitでは、SVQK というSvelte (Frontend) + Quarkus (Backend) でWebアプリケーションを開発するためのアセットをオープンソースとして開発・公開しています。アセットには自動テストやソースコード自動生成ツールも含まれます。この記事ではSVQKの概要を紹介します。(SVQKを使用する手順は Quick Startを参照してください。)

概要

SVQKを使って開発するアプリケーションの構成は以下の様なものです。

SVQK Runtime

Frontendはブラウザで実行可能なユーザーインターフェースを提供し、そのために必要な入力値のバリデーションやWeb APIを使用したデータの入出力を行います。BackendはWeb APIを提供し、その内部ではトランザクション制御やビジネスロジックの実行、DBアクセスを行います。

セットアップ

SVQKはMavenアーキタイプ(プロジェクトのテンプレート)としてMaven Centralで公開されています。SVQKを使ってWebアプリケーションを開発するには、まず以下のMavenコマンドでプロジェクトを作成します。

mvn archetype:generate \
  -DarchetypeGroupId=dev.aulait.svqk \
  -DarchetypeArtifactId=svqk-archetype-refimpl \
  -DarchetypeVersion=0.9 \
  -DgroupId=my.group.id  \
  -DartifactId=my-artifactid \
  -Dversion=1.0-SNAPSHOT

作成されたプロジェクトには以下のツール・スクリプトが組み込まれています。

  • Docker + PostgreSQL
  • Flyway + DB Migrationスクリプト
  • Quarkus
  • SvelteKit
  • Playwright + End to End Testスクリプト

プロジェクトの作成後は、これらのツール・スクリプトを以下のコマンドでセットアップします。

./mvnw install -T 1C -P setup

上記のコマンドでは、ツール・スクリプトのセットアップ以外にも、セットアップした結果のツールやアプリケーションが実際に動作することを確認するためのテストも実行されます。テストには、Backend内のコンポーネントをテストするUnitテストの他、Web APIをRest Clientで操作するIntegration Test、Frontendを Playwright で操作するEnd to End Testも含まれます。このセットアップコマンドは、Local PC上でもCI環境上でも実行可能です。

SVQK Setup

ソースコード自動生成

SVQKのプロジェクトには Yeoman を使ったソースコード自動生成ツールが組み込まれています。このツールは、テーブルに対してCRUDを行う画面・APIのソースコードを生成します。加えて、画面・APIに対するEnd to End Test、Integration Testの生成にも対応しています。

まとめ

SVQKを使用することで、Svelte + QuarkusでWebアプリケーションを開発する環境を素早く構築することができます。また開発したアプリケーションのテストは自動化され、Local PC・CI環境で実行することができます。SVQKを使用する手順は Quick Startを参照してください。

Discussion