こんにちは。@orekyuuです。Javaが大好きなエンジニアですが、入社してからはずっとRailsエンジニアをやっていました。最近はJDK11+SpringBootでサクッとWebアプリを立ち上げる仕事を始めたので、SpringBootの話を書いてみます。
今作っているアプリではThymeleafというテンプレートエンジンでレンダリングしています。ほとんどのWebアプリではformの内容を入力によって表示を変えたりしたいといったケースでJavaScriptを使ってDOM操作をしたくなります。今はjQueryという時代でもないので、ちょっとしたDOM操作をVue.jsを使って操作できると便利そうです。
Vue.jsを使う準備
webpackの設定を書く
package.jsonとwebpack.config.jsを用意します。ほぼ普通のjsプロジェクトと同じだと思います。
ポイントはoutputのpathをbuild/classes/java/main/static/js以下にすることです。
ここに成果物を配置することでgradleでjarファイルを作ると一緒にパッケージされます。
gradleからnpmのタスクを実行する
gradle buildをしたときに一緒にjsのビルドもできると便利そうです。 build.gradleに新しいnpmを呼び出すタスクを追加し、processResourcesタスクに依存を追加します。これでビルド時にnpmのタスクが実行され、jarにビルドしたjsファイルが一緒にパッケージされます。
gradle-node-pluginを使う方法もありますが、フロントエンドエンジニアが触りやすい環境を考えるとこのプラグインを使わずgradleから呼び出すほうが優しいという判断を行いました。
formにcsrfトークンを埋め込む
Spring Securityを使っている場合、Thymeleafでformをレンダリングするとcsrfトークンを含むinputタグが埋め込まれますが、jsでフォームをレンダリングする場合は埋め込まれないため自分で埋め込む必要があります。
Thymeleafのテンプレートでheadの中に以下のようにmetaタグを埋め込み、jsからcsrfトークンを取れるようにします。
Vue.js側から以下のようにcsrfトークンをmetaタグから取り出し、formの中にinputタグを埋め込むと良いはずです。
さいごに
SpringBootでさくっとVue.jsを使う準備ができました。ThymeleafでレンダリングしてるページでちょっとしたDOM操作を行いたくなったケースで便利かと思いますので、是非参考にしてみてください。
