🐙

Scalaテンプレートを理解しながらテンプレートのHTMLを読み解く

2020/12/21に公開

Django,Laravelなどテンプレートエンジンを備えているライブラリはたくさんやってきましたが、scalaのテンプレートエンジンはパッと見難しそうです、、

今回はこちらのmain.scala.htmlを理解することをゴールとします

@*
 * This template is called from the `index` template. This template
 * handles the rendering of the page header and body tags. It takes
 * two arguments, a `String` for the title of the page and an `Html`
 * object to insert into the body of the page.
 *@
@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">

    </head>
    <body>
        @* And here's where we render the `Html` object containing
         * the page content. *@
        @content

      <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
    </body>
</html>

このファイルの出どころ

このファイルは、play-scala-seedのテンプレートを使ってsbt newするとviewにあるものです。

先頭〜引数部分

まず最初に説明文が書いてあります。

@*
 * This template is called from the `index` template. This template
 * handles the rendering of the page header and body tags. It takes
 * two arguments, a `String` for the title of the page and an `Html`
 * object to insert into the body of the page.
 *@

このテンプレートはindexテンプレートから呼ばれます。このテンプレートはページのヘッダーとbodyタグを操作します。引数に、

ページのタイトル (文字列)
bodyタグの中身(HTMLオブジェクト)
を必要とする。

ここまで丁寧に書いてくれるとはありがたい。先に進みます
引数というのは、下記のように記述するようです。

@(title: String)(content: Html)

ちなみにコメントは、@* *@で囲むようですね

HTML部分

<!DOCTYPE html>
<html lang="en">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">

    </head>
    <body>
        @* And here's where we render the `Html` object containing
         * the page content. *@
        @content

      <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
    </body>
</html>

見た目はほとんど普通のHTMLです。scalaテンプレートでは、5行目の@titleや12行目の@contentのように、＠の後ろに変数名を記述するようです。

href属性にある@routes.Assets.versionedの記述

デフォルトでは@routes.Assets.とあるとpublicフォルダを見にいくようです。つまりpublicフォルダ以下はこのようになります。どう動くかわかるまでは、公式もこの使い方を推奨している

public
- javascripts
- stylesheets
- images

controllers.routes.Assetsに、設定しているAssetsフォルダに指定しているパスと、この記述の変換を行うコントローラーが作成され、ビルド時には設定したパスに置き換わる仕組みなようです