← ポータルに戻る

Velocity内でのJavaScript実行仕様書

1. 概要

本仕様書では、Apache VelocityテンプレートエンジンにおけるJavaScript実行の仕組みと、Java処理からブラウザでの最終描画までの処理フローについて説明します。

2. Velocityテンプレートエンジンについて

2.1 Velocityとは

Apache Velocityはサーバーサイドのテンプレートエンジン
VTL（Velocity Template Language）という独自の記法を使用
Javaオブジェクトのデータをテンプレートに埋め込んでHTMLを生成

2.2 主な特徴

サーバーサイドでの動的HTML生成
Javaアプリケーションとの密な連携
軽量で高速な処理

3. Velocity内でのJavaScript実行について

3.1 基本的な考え方

重要: Velocity自体がJavaScriptを実行するのではなく、JavaScriptコードを含むHTMLを生成して、それがブラウザで実行される。

3.2 JavaScript実装方法

3.2.1 JavaScriptコードの直接出力

<script>
var data = {
    title1: "$data.title1",
    title2: "$data.title2", 
    title3: "$data.title3"
};
// JavaScriptロジック
</script>

3.2.2 JSONデータの埋め込み

<script>
var recommendData = $jsonData;
processRecommendations(recommendData);
</script>

3.2.3 動的なJavaScript生成

#foreach($item in $recommendations)
<script>
addRecommendation("$item.title", "$item.description");
</script>
#end

4. JavaScript実行タイミング

4.1 基本的な実行タイミング

4.1.1 HTMLの解析中に実行（デフォルト）

<html>
<head>
    <script>
        console.log("1. headで実行"); // HTMLの解析中に即座に実行
    </script>
</head>
<body>
    <div id="content">コンテンツ</div>
    <script>
        console.log("2. bodyで実行"); // この位置で即座に実行
    </script>
</body>
</html>

4.1.2 ページ全体の読み込み完了後

// DOM構築完了後（画像等は未完了でもOK）
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM構築完了");
});

// ページ全体（画像等も含む）の読み込み完了後
window.addEventListener('load', function() {
    console.log("ページ全体の読み込み完了");
});

4.1.3 非同期実行

<!-- HTMLの解析をブロックせずに並行実行 -->
<script async src="script.js"></script>

<!-- HTMLの解析完了後に実行 -->
<script defer src="script.js"></script>

4.2 推奨実装パターン（Velocity使用時）

<body>
    <div id="recommendations"></div>
    
    <!-- Velocityでデータ埋め込み -->
    <script>
        var data = {
            titles: ["$data.title1", "$data.title2", "$data.title3"]
        };
    </script>
    
    <!-- DOM構築完了後に実行 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // この時点でHTMLは全て解析済み
            // JSONからの追加データ取得・描画処理
        });
    </script>
</body>

5. Java処理シーケンス図

5.1 処理フロー概要

ユーザ → TOPリクエスト → Java → Velocity → ブラウザ → 非同期JS実行 → 最終描画

5.2 詳細シーケンス

参考ファイル: Java処理シーケンス図.puml

Java処理シーケンス図

Java処理シーケンス図（非同期版）

主要処理ステップ:

ユーザリクエスト: TOPページリクエスト
Java処理: レコメンド取得
- IN: 年代、性別、家族構成
- OUT: 1位〜3位タイトル
Velocity処理: HTML生成（JavaScript埋め込み含む）
初期描画: ブラウザでの基本HTML表示
非同期処理: DOMContentLoaded後のJavaScript実行
データ取得: JSONからの説明文データ取得
最終描画: 動的なDOM操作による完全表示

5.3 非同期処理の詳細

5.3.1 Velocityでの処理

レコメンドタイトルの埋め込み
JavaScriptコードの埋め込み
DOMContentLoaded処理の含有

5.3.2 ブラウザでの処理

初期HTML描画
DOMContentLoadedイベント発火
埋め込まれたJavaScript実行開始
非同期でのデータ取得
DOM操作による動的描画

6. 実装時の注意点

6.1 エスケープ処理

Velocityで出力するデータは適切にエスケープする
XSS攻撃の防止

6.2 エラーハンドリング

JavaScript実行エラーの適切な処理
非同期通信の失敗時の処理

6.3 パフォーマンス

必要最小限のJavaScriptコード埋め込み
外部JSファイルとの適切な使い分け

7. まとめ

VelocityはサーバーサイドでHTMLを生成
JavaScriptはクライアントサイド（ブラウザ）で実行
非同期処理により、段階的なページ描画が可能
DOMContentLoadedイベントを活用した適切なタイミング制御が重要

作成日: 2024年
対象: Java + Velocity + JavaScript 連携システム