Play Framework のコンパイルに TypeScript を組み込む

Scala / Java 向けの Web フレームワークである Play Frameworkを仕事で使っており、いくつか知見が溜まってきたのでこのブログで書いていこうと思う。

Play Framework といえば一般的には Scala で使うイメージがあるかもしれない。ただ、私の場合は Java の方が慣れているので基本的には Java でコーディングしていく。

さて、タイトルの通りだが、Play Framework をコンパイル・ビルドするときに TypeScript を組み込む処理を書き留めていく。

モチベーション

前提として、今から新たにフロントエンド開発をするのであれば TypeScript は必須という認識を私は持っている。型がない素の JavaScript はどうしても開発効率が落ちる。

Ruby on Railsであれば rails new するときに esbuild をオプションに追加するだけで TypeScript が使えるようになる。 Ruby が動的型付け言語なのを除けば最高の環境である。

一方、Play Framework（Ruby on Rails の影響を受けて作られた）はいまだに CoffeeScriptや RequireJSのトランスパイルにしか対応していない。今どき CoffeeScript を使う人がいるのかは甚だ疑問だが、それらが流行っていた頃からフロントエンドを扱う機構が変わっていないためこのようなことになっているようだ。

Play Framework が公式に TypeScript 対応してくれれば良いのだが当分対応しないし、CoffeeScript サポートを廃止する気もないらしい（ソース）。

そこで、その処理を自分で組み込んで開発を楽にしたいというのがモチベーションだ。 Play Framework とは別に TypeScript のビルドツールを起動させてというのは面倒なので sbt run だけで全てが完結するようにしたい。

また、ついでと言っては何だが、テンプレートエンジン内で Tailwind CSS を使ったスタイリングができるようにする。リロードすると変更が反映されているイメージ。

このページで実現すること

TypeScript で書いたコードがトランスパイルされて puclic/javascripts ディレクトリ以下に配置される
テンプレートエンジン内で書いた Tailwind CSS のクラスがコンパイルされて puclic/stylesheets ディレクトリ以下に配置される
sbt run を実行すると TypeScript トランスパイラと Tailwind CSS のコンパイラが起動する（コンソールから別途立ち上げなくていい）
画面をリロードすると通常のコンパイルに加えて TypeScript と Tailwind CSS もコンパイルされ変更が反映される（ホットリロード対応）
Cache Busting のために生成した静的ファイルにフィンガープリントを付与する
sbt dist でビルドしたバイナリファイルに TypeScript と Tailwind CSS のコンパイルで生成されたファイルを同梱する

開発環境

Play Framework: 3.0.1
Java: 21.0.1
Scala: 3.3.1
sbt: 1.9.6
Vite: 5.1.1
TypeScript: 5.3.3

sbt-web で実装できないか

Play FrameworkでTypeScript, SCSSを動かす - プログラマブル深海魚 Play FrameworkでTypeScript, SCSSを動かしてみたので、備忘録も兼ねて記録を残します。目次 sbtプラグインを追加するプラグインの設定テンプレートからの参照実際に動かすクライアント側のライブラリ依存関係を管理するおわり参考文献 sbtプラグインを追加する sbtには、sbt-webというWeb開発用のプラグイン向けライブラリがあり、プロジェクトでSbtWebを有効にしてsbt-web用プラグインを追加すれば、対応するファイルがコンパイルされるようになります。 https://github.com/sbt/sbt-web TypeScript, SCS…

ancozerticht.hatenablog.com

Play FrameworkでTypeScript, SCSSを動かす - プログラマブル深海魚のカバー画像

こちらの記事にある方法で TypeScript のトランスパイルを組み込めたら楽だろうなあと思ってやってみたが、tsconfig.json を自由に記載できなかったり、内部でどのようにトランスパイルされているのか分からずにデバッグに苦労する未来が見えたので導入を見送った。

結局 Vite でトランスパイルしてから生成されたファイルを public ディレクトリ以下に配置してパッケージ化してもらう方法が良さそう。

ディレクトリ構造

ディレクトリ構造は以下のとおり。ノイズになりそうな部分は記載していない。

.
|-- app
|   |-- controllers
|   |   `-- HomeController.java
|   `-- views
|       |-- index.scala.html
|       `-- main.scala.html
|-- build.sbt
|-- conf
|   |-- application.conf
|   `-- routes
|-- frontend
|   |-- package.json
|   |-- src
|   |   |-- entries
|   |   |   `-- main.ts
|   |   `-- styles
|   |       `-- input.css
|   |-- tailwind.config.ts
|   |-- tsconfig.json
|   `-- vite.config.mts
`-- public
    |-- javascripts
    |   `-- main.js
    `-- stylesheets
        `-- main.css

フロントエンドのコードは frontend 以下で管理する。

frontend/src/entries/main.ts がトランスパイルする際のエントリポイントになる。そこに書かれたコードがトランスパイルされた後に public/javascripts 以下に出力される。

Tailwind CSS にコンパイルされたスタイルシートは public/main.css に出力される。

Vite の環境構築

何はともあれ、まずは Vite をインストールする。ついでに TypeScript も。今回パッケージマネージャには pnpm を使っているが Yarn でも Bun でも何を使っても問題ない。

pnpm add -D vite typescript @types/node

次に Vite の設定ファイルを追加する。

1
import { resolve } from 'path';
2
import { defineConfig } from 'vite';
3

4
export default defineConfig({
5
  build: {
6
    emptyOutDir: true,
7
    lib: {
8
      entry: [resolve(__dirname, 'src', 'entries', 'main.ts')],
9
      formats: ['es'],
10
      fileName: (_, entryName) => `${entryName}.js`,
11
    },
12
    outDir: resolve(__dirname, '..', 'public', 'javascripts'),
13
  },
14
});

今回は SPA を作ることが目的ではないので Vite のライブラリモードを使用する。 lib を設定することでライブラリモードが使える。

ここで重要なのでエントリポイントの設定とビルドされたデータの出力先である。 JavaScript では path.resolve() メソッドを使って絶対パスに変換する。

ここではエントリポイントを frontend/src/entries/main.ts、アウトプット先ディレクトリを public/javascripts としている。

実際にトランスパイルされるか確認してみる。

エントリポイントに TypeScript で書かれたコードを配置する。例として、実行するとブラウザ上にプロンプトを開いて、入力した文字をシーザー暗号に変換する処理を書いてみた。

1
const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split('');
2

3
/**
4
 * Calculates the shifted index based on the current index and shift amount.
5
 *
6
 * @param currentIndex - The current index.
7
 * @param shiftAmount - The amount to shift the index.
8
 * @returns The shifted index.
9
 */
10
const getShiftedIndex = (currentIndex: number, shiftAmount: number): number => {
11
  let newIndex = currentIndex + shiftAmount;
12
  if (newIndex > 25) newIndex = newIndex - 26;
13
  if (newIndex < 0) newIndex = 26 + newIndex;
14
  return newIndex;
15
};
16

17
/**
18
 * Converts a string using the Caesar cipher algorithm.
19
 *
20
 * @returns The converted string.
21
 */
22
window.convertCaesarCipher = () => {
23
  const inputString = prompt('Enter a string to be shifted') || '';
24
  if (!inputString) return alert('You must enter a string to be shifted');
25

26
  let shiftAmount = parseInt(prompt('Enter a shift amount') || '');
27
  if (isNaN(shiftAmount)) return alert('You must enter a valid shift amount');
28

29
  shiftAmount = shiftAmount % 26;
30
  const lowerCaseString = inputString.toLowerCase();
31
  let shiftedString = '';
32

33
  Array.from(lowerCaseString).forEach((currentLetter, i) => {
34
    if (currentLetter === ' ') {
35
      shiftedString += currentLetter;
36
      return;
37
    }
38

39
    const currentIndex = ALPHABET.indexOf(currentLetter);
40
    const shiftedIndex = getShiftedIndex(currentIndex, shiftAmount);
41

42
    if (inputString[i] === inputString[i].toUpperCase()) {
43
      shiftedString += ALPHABET[shiftedIndex].toUpperCase();
44
    } else shiftedString += ALPHABET[shiftedIndex];
45
  });
46

47
  return alert(shiftedString);
48
};

毎回 Vite のビルドスクリプトを打ち込むのは面倒なので package.json に npm スクリプトとして追加する。

{
  "name": "play-framework-java-playground",
  "private": true,
  "scripts": {
    "vite:dev": "vite build --watch",
    "vite:build": "vite build"
  }
}

vite:dev は開発用のスクリプトで、変更が監視されておりホットリロードに対応している。 vite:build は本番環境へのデプロイ前に実行するスクリプトで、コードを minify する。ここでは vite:build を実行してみる。

すると、public/javascripts/main.js に以下のファイルが出力される。

1
const i = "abcdefghijklmnopqrstuvwxyz".split(""), d = (e, n) => {
2
  let t = e + n;
3
  return t > 25 && (t = t - 26), t < 0 && (t = 26 + t), t;
4
};
5
window.convertCaesarCipher = () => {
6
  const e = prompt("Enter a string to be shifted") || "";
7
  if (!e)
8
    return alert("You must enter a string to be shifted");
9
  let n = parseInt(prompt("Enter a shift amount") || "");
10
  if (isNaN(n))
11
    return alert("You must enter a valid shift amount");
12
  n = n % 26;
13
  const t = e.toLowerCase();
14
  let r = "";
15
  return Array.from(t).forEach((s, o) => {
16
    if (s === " ") {
17
      r += s;
18
      return;
19
    }
20
    const f = i.indexOf(s), a = d(f, n);
21
    e[o] === e[o].toUpperCase() ? r += i[a].toUpperCase() : r += i[a];
22
  }), alert(r);
23
};

問題なくトランスパイルに成功していることがわかる。

public リソースの操作

次にトランスパイルした JavaScript を Play Framework の View で使えるようにする。今回は動作確認なので最低限の準備をする。

GET        /                    controllers.HomeController.index()

1
package controllers;
2

3
import play.mvc.Controller;
4
import play.mvc.Http.Request;
5
import play.mvc.Result;
6

7
public class HomeController extends Controller {
8
    public Result index() {
9
        return ok(views.html.index.render());
10
    }
11
}

1
@(title: String)(content: Html)
2

3
<!DOCTYPE html>
4
<html lang="ja">
5
    <head>
6
        <title>@title</title>
7
    </head>
8
    <body>
9
        @content
10
    </body>
11
</html>

1
@()
2

3
@main("Welcome to Play") {
4
  <h1>Welcome to Play!</h1>
5
}

上記のコードを書くことで http://localhost:9000 にアクセスすると画面が描画される。

public ディレクトリに配置したファイルを Play Framework のアセットコントローラとして使うためには routes ファイルに以下の設定を追加する。この操作を経ることで Reverse routing（リソースの URL を取得できる）が使用可能になる。

GET        /                    controllers.HomeController.index()

 GET        /assets/*file        controllers.Assets.versioned(path="/public", file: Asset)

versioned としているのは後々フィンガープリントに使用するためである。

上記で puclic をルーティングに追加したことで View ファイル内で以下のように puclic ディレクトリ以下の静的ファイルを呼び出せるようになった。

@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>@title</title>
       <script type="module" src="@routes.Assets.versioned("javascripts/main.js")" async></script>
    </head>
    <body>
        @content
    </body>
</html>

早速 JavaScript を呼び出せるか確認してみる。

1
@()
2

3
@main("Welcome to Play") {
4
  <h1>Welcome to Play!</h1>
5
  <button onclick="convertCaesarCipher()">
6
    Convert to Caesar cipher
7
  </button>
8
}

ボタンをクリックするとプロンプトが表示され、問題なくシーザー暗号に変換できた。

Tailwind CSS の環境構築

TypeScript のトランスパイルは完了したので、次に Tailwind CSS のコンパイルを行えるように設定を追加していく。

まずはライブラリのインストールから。

pnpm add -D tailwindcss

次に Tailwind CSS の設定ファイルを追加する。

1
import type { Config } from 'tailwindcss';
2

3
export default {
4
  content: ['../app/views/*.scala.html'],
5
  theme: {
6
    extend: {},
7
  },
8
  plugins: [],
9
} satisfies Config;

ここで大事なのはどのファイルをコンパイル対象にするかということである。上記では app/views 以下のテンプレートエンジン（Twirl）の拡張子を指定している。最初は、純粋な HTML ではないのでうまくコンパイルできるか心配だったが、特に問題なく必要なスタイルのみ出力された。

設定ファイルの追加が終わったら Tailwind ディレクティブを置くための CSS ファイルを作成する。

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

続いて npm スクリプトを追加する。

{
  "name": "play-framework-java-playground",
  "private": true,
  "scripts": {
    "vite:dev": "vite build --watch",
    "vite:build": "vite build",
   "tailwind:dev": "tailwindcss -i src/styles/input.css -o ../public/stylesheets/main.css --watch=always",
   "tailwind:build": "tailwindcss -i src/styles/input.css -o ../public/stylesheets/main.css --minify"
  }
}

最後に CSS ファイルをインポートする。

@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>@title</title>
       <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <script type="module" src="@routes.Assets.versioned("javascripts/main.js")" async></script>
    </head>
    <body>
        @content
    </body>
</html>

tailwind:build を実行後、ちゃんとスタイルが効くか確認してみる。

1
@()
2

3
@main("Welcome to Play") {
4
  <h1 class="text-xl text-neutral-500">Welcome to Play!</h1>
5
  <button class="rounded-lg border-amber-200 bg-amber-200 p-2 text-amber-900 transition-colors hover:bg-amber-300" onclick="convertCaesarCipher()">
6
    Convert to Caesar cipher
7
  </button>
8
}

tailwind:build を実行すると public/stylesheets/main.css に以下のコードが追加される。

1
/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.rounded-lg{border-radius:.5rem}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity))}.bg-amber-200{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-amber-300:hover{--tw-bg-opacity:1;background-color:rgb(252 211 77/var(--tw-bg-opacity))}

http://localhost:9000 を開いて確認するとスタイルが適用されていることが確認できた。

PlayRunHook を使って sbt run を拡張する

PlayRunHook を利用することで、コマンド実行時の処理を変更できる。ここでは通常の Play Framework のコンパイルに加えて、Vite と Tailwind のコンパイルを同時に行えるようにする（参考）。

project/PlayDevRunHook.scala に以下のコードを追加する。

1
import java.io.PrintWriter
2
import play.sbt.PlayRunHook
3
import sbt.*
4

5
import scala.io.Source
6
import scala.language.reflectiveCalls
7
import scala.sys.process.Process
8

9
object PlayDevRunHook {
10

11
  object FrontendCommands {
12
    val install = "pnpm install"
13
    val viteDev = "pnpm vite:dev"
14
    val tailwindDev = "pnpm tailwind:dev"
15
  }
16

17
  object Shell {
18
    /**
19
     * Execute a command in the shell
20
     *
21
     * @param cmd  command to execute
22
     * @param cwd  working directory
23
     * @param envs environment variables
24
     * @return exit code
25
     */
26
    def execute(cmd: String, cwd: File, envs: (String, String)*): Int = {
27
      Process(cmd, cwd, envs *).!
28
    }
29

30
    /**
31
     * Invoke a command in the shell
32
     *
33
     * @param cmd  command to execute
34
     * @param cwd  working directory
35
     * @param envs environment variables
36
     * @return process
37
     */
38
    def invoke(cmd: String, cwd: File, envs: (String, String)*): Process = {
39
      Process(cmd, cwd, envs *).run
40
    }
41
  }
42

43
  /**
44
   * Create a PlayRunHook to watch frontend changes
45
   *
46
   * @param base base directory
47
   * @return PlayRunHook
48
   */
49
  def apply(base: File): PlayRunHook = {
50

51
    val frontendBase = base / "frontend"
52
    val packageJsonPath = frontendBase / "package.json"
53

54
    val frontEndTarget = base / "target" / "frontend"
55
    val packageJsonHashPath = frontEndTarget / "package.json.hash"
56

57
    object FrontendBuildProcess extends PlayRunHook {
58
      var processes: List[Process] = Nil
59

60
      /**
61
       * Invoked before the Play application starts
62
       */
63
      override def beforeStarted(): Unit = {
64
        def using[A <: { def close(): Unit }, B](resource: A)(file: A => B): B =
65
          try {
66
            file(resource)
67
          } finally {
68
            resource.close()
69
          }
70

71
        println("Hook to Play Framework dev run -- beforeStarted")
72

73
        val currPackageJsonHash = using(Source.fromFile(packageJsonPath)) { source =>
74
          source.getLines().mkString.hashCode().toString
75
        }
76

77
        val oldPackageJsonHash = getStoredPackageJsonHash
78

79
        if (!oldPackageJsonHash.contains(currPackageJsonHash)) {
80
          println(s"Found new/changed package.json. Run '${FrontendCommands.install}'...")
81

82
          Shell.execute(FrontendCommands.install, frontendBase)
83

84
          updateStoredPackageJsonHash(currPackageJsonHash)
85
        }
86
      }
87

88
      /**
89
       * Invoked after the Play application has been started
90
       */
91
      override def afterStarted(): Unit = {
92
        println(s"> Watching frontend changes in $frontendBase")
93
        processes = List(
94
          Shell.invoke(FrontendCommands.viteDev, frontendBase),
95
          Shell.invoke(FrontendCommands.tailwindDev, frontendBase)
96
        )
97
      }
98

99
      /**
100
       * Invoked after the Play application has been stopped
101
       */
102
      override def afterStopped(): Unit = {
103
        processes.foreach(_.destroy())
104
        processes = Nil
105
      }
106

107
      /**
108
       * Get the stored package.json hash
109
       *
110
       * @return hash
111
       */
112
      private def getStoredPackageJsonHash: Option[String] = {
113
        def using[A <: { def close(): Unit }, B](resource: A)(file: A => B): B =
114
          try {
115
            file(resource)
116
          } finally {
117
            resource.close()
118
          }
119

120
        if (packageJsonHashPath.exists()) {
121
          using(Source.fromFile(packageJsonHashPath)) { source =>
122
            Some(source.getLines().mkString)
123
          }
124
        } else {
125
          None
126
        }
127
      }
128

129
      /**
130
       * Update the stored package.json hash
131
       *
132
       * @param hash hash
133
       */
134
      private def updateStoredPackageJsonHash(hash: String): Unit = {
135
        val dir = frontEndTarget
136

137
        if (!dir.exists) dir.mkdirs
138

139
        val pw = new PrintWriter(packageJsonHashPath)
140

141
        try {
142
          pw.write(hash)
143
        } finally {
144
          pw.close()
145
        }
146
      }
147
    }
148

149
    FrontendBuildProcess
150
  }
151
}

次に build.sbt に以下のコードを追記する。

import scala.sys.process.Process

name := """play-framework-java-playground"""
organization := "me.kkhys"
maintainer := "hi@kkhys.me"

ThisBuild / scalaVersion := "3.3.1"

ThisBuild / version := "1.0.0-SNAPSHOT"

lazy val root = (project in file("."))
  .enablePlugins(PlayJava)
  .settings(
    libraryDependencies ++= Seq(
      guice,
      "com.google.inject" % "guice" % "5.1.0",
      "com.google.inject.extensions" % "guice-assistedinject" % "5.1.0"
    )
  )

 PlayKeys.playRunHooks += baseDirectory.map(PlayDevRunHook.apply).value

sbt run を実行すると同時に Vite と Tailwind のコンパイルも行われ、変更した際にもホットリロードが有効になっていることを確認できた。

dist 時に静的ファイルを同梱する

sbt run を実行したときの対応は完了したので、次は sbt dist で実行可能なバイナリを生成する際に、フロントエンドの静的ファイルを同梱する処理を追加する。

こちらはシンプルに以下のコードを build.sbt に追加するだけで良い。

 import scala.sys.process.Process

...

 lazy val frontEndBuild = taskKey[Unit]("Execute frontend build command")

 val frontendPath = "frontend"
 val frontEndFile = file(frontendPath)

 frontEndBuild := {
 println(Process("pnpm install", frontEndFile).!!)
 println(Process("pnpm vite:build", frontEndFile).!!)
 println(Process("pnpm tailwind:build", frontEndFile).!!)
 }

 dist := (dist dependsOn frontEndBuild).value
 stage := (stage dependsOn dist).value

フィンガープリントを静的ファイルに付与する

最後にファイル名にフィンガープリントとなる文字列を追加していく。

フィンガープリントを付けることでコードを変更したのにブラウザでは変更が反映されないといった問題を解決できる。この手法のことを Cache Busting という。

puclic ディレクトリ以下のファイルにフィンガープリントを付与するためには sbt-digestが必要なので追加する。

addSbtPlugin("org.playframework" % "sbt-plugin" % "3.0.1")
 addSbtPlugin("com.github.sbt" % "sbt-digest" % "2.0.0")

ThisBuild / libraryDependencySchemes += "org.scala-lang.modules" %% "scala-xml" % VersionScheme.Always

次に build.sbt に以下の設定を追加する。

...

lazy val root = (project in file("."))
  .enablePlugins(PlayJava)
 .enablePlugins(SbtWeb)
  .settings(
    libraryDependencies ++= Seq(
      guice,
      "com.google.inject" % "guice" % "5.1.0",
      "com.google.inject.extensions" % "guice-assistedinject" % "5.1.0"
    )
  )

 Assets / pipelineStages := Seq(digest)

Assets / pipelineStages の処理を追加しているのはローカル環境でもフィンガープリントを追加するためである。

開発環境でインポートされているファイルパスを確認するとフィンガープリントが追加されていることを確認した。

/assets/stylesheets/b993b456bf80af0695501c8acd69ab8c-main.css

何も変更せずにブラウザをリロードするとフィンガープリントは変わらないが、少しでもファイルの対象となるコードを変更するとフィンガープリントが変化する。ちなみに sbt を再起動してもフィンガープリントの値は変化する。

/assets/stylesheets/58c0961b8f2d1f3b0837dd4fe7c8c86b-main.css

さいごに

TypeScript があるだけでフロントエンド開発の安心度はすごく高まる。どんどんコードを書いてブラウザをリロードして変更を確認すればモダンな SPA と同等の開発体験を得られる。

と言いたいところだが、あくまでメインの処理はテンプレートエンジンに書いていく形になるので、リロードのたびに退屈な時間を過ごさないといけない点はあまり変わりない（Play Framework のコンパイルはすごく遅い）。

テンプレートエンジンの上に SPA を載せればフロントエンド側のトランスパイルだけ待てばよくなりひとまず開発体験はよくなるが、それなら Next.js などの Web フレームワークを初めから使って API のみ Play Framework で書けば良いからそもそもの目的が曖昧になる。

もし、SPA を使うのであればテンプレートエンジン内の一部分だけ適用するといったように補助的に使う方法が現実的かもしれない。

もっとも、個人的には Play Framework では SPA や JavaScript は極力使わずに純粋に SSR だけでサイト構築していく方が好みではある。本当に必要な箇所だけ JavaScript を使えば不要なファイルの待ち時間や実行にかかる時間を短縮できるのでパフォーマンスが向上するし、構造的にシンプルになる。この辺は常にトレードオフになるので選定が難しい。

Play Framework のコンパイルに TypeScript を組み込む

最後までお読みいただき、ありがとうございます