フロントエンドをビルドしない Web アプリを Java で作った話

― DTO 駆動バリデーションによる Buildless フレームワーク anko ―

業務システムを作っていると、

• フロントとバックで入力チェックを二重に書いている
• React / Vue を使うほどでもない業務システムでは、ビルド工程が重い

と感じることはありませんか？

そこで、
フロントエンドをビルドせず、入力チェックを2度書かない という方針で
Web アプリケーションフレームワークを作りました。

この記事では、その設計思想と実装を紹介します。

anko とは？

anko は、以下の特徴を持つ Web アプリケーションフレームワークです。

フロントエンドは HTML / CSS / Vanilla JS

React / Vue / ビルドツール 不使用

バックエンドは Java + Servlet

DTO のバリデーション定義を
フロントエンドに自動伝搬

入力チェックの 二重実装を排除

特に重視しているのはこの点です：

DTO が API・Validation・UI の唯一の定義になる

Buildless フレームワーク とは？

anko は、画面全体を再読み込みせず、
コンテンツ部分のみを差し替える構成を採用しています。

一般的には SPA と呼ばれる構成に近いですが、
本記事ではあえてその呼称は使用しません。

HTML / CSS / JS
   ↓
Template rendering
   ↓
Content only replace

そのため：

• npm / webpack / vite 不要

• デプロイは jar html js css を置くだけ

• サーバ再起動 = 仕様反映

アーキテクチャ概要

Browser
 ├─ HTML / CSS / JS
 ├─ validation.js (generated)
 │
 ├─ GET /validation.js
 ▼
JsServlet
 └─ DTO metadata + Validator + Enum

Browser
 ├─ POST /api/xxx (JSON)
 ▼
ApiServlet
 └─ API Layer
     └─ Service Layer
         └─ DAO / ORM

ポイント

• JsServlet は validation.js / enumeration.js を生成する

• ApiServlet は JSON ⇄ DTO の入口

• バリデーション定義は DTO のみ

• DAO / DB は validation.js に一切関与しない

DTO 駆動バリデーションの仕組み

Java DTO

@Form("login")
public class LoginDto {

  @NotBlank(message = "必須です。")
  public String id;

  public String pass;
}

生成される validation.js

const validationHash = 'FFFFFFFFA2C9E569';

if (validationHash != localStorage.getItem('validationHash')) {
  localStorage.setItem('validationHash', validationHash);
  localStorage.setItem('validation', JSON.stringify({
    "login": {
      "id": {
        "required": { "message": "必須です。" },
        "pattern": {
          "regexp": ".*\\S+.*",
          "message": "必須です。"
        }
      }
    }
  }));
}

何が起きているか

1. DTO にバリデーションを書く

2. フロントは validation.js を読み込む

3. JsServlet が JS を生成して返却

4. フォームに 自動で必須表示・入力チェックを設定

5. API 側でも同じ DTO で検証

👉 入力チェックの二重実装が不要

バリデーションエラーの二重連携

• フロントのチェックを無効化して送信しても

• API 側で DTO Validator が必ず実行される

• violation は JSON で返却

• 同じフォームにエラーを再表示

Frontend validation
        ↓
(API bypass)
        ↓
Backend validation
        ↓
Same form error binding

制限事項

anko は 業務フォーム特化のため、以下は対応しません。

• 相関バリデーション（複数項目依存）

• 条件付き必須

• フロントエンドの状態管理

• 複雑な UI 表現

3分で試せます（GitHub Codespaces）

anko は GitHub Codespaces 対応です。

1. Code → Create codespace
2. mvn exec:java
3. http://localhost:8080

ローカル環境構築なしで、
約3分で動作確認できます。

向いている用途

• 業務用フォーム

• 管理画面

• CRUD 中心の社内システム

• Validation が多い Web アプリ

向いていない用途

• 高度な UI / アニメーション

• リアルタイムアプリ

• クライアント側状態が複雑な Web アプリ

おわりに

anko は、

• 最新フロントエンド技術を否定するものではありません

• 業務システムに最適化した選択肢の一つです

DTO を中心に据えると、
UI と API が驚くほどシンプルになる

同じ悩みを持っている方の
参考になれば幸いです。

Repository