Hugo テンプレート内で配列(スライス)変数を扱う (slice, index, range)

Hugo テンプレートの中で slice 関数を使用すると、渡されたパラメータ群から新しいスライス(配列)を作成することができます。

配列(スライス)を定義する (slice)

Hugo テンプレートでは、新しくスライス(配列)を定義するための構文は用意されていないため、そのような場合はスライス(配列)を戻り値として返す slice 関数 を使用する必要があります。 下記の例では、slice 関数に 3 つのパラメータを渡し、それらの要素からなるスライスを生成しています。

テンプレート内での記述例
{{ $arr := slice "AAA" "BBB" "CCC" }}
{{ printf "%#v" $arr }}
実行結果
[]interface {}{"AAA", "BBB", "CCC"}
☝️ ワンポイント Go のテンプレート内で使用できる文法は、Go 言語の文法とは異なっています。 スライスを定義するときに、Go 言語と同じ構文で、$arr := []string{"AAA", "BBB", "CCC"} と記述することはできないことに注意してください。

配列(スライス)の要素を参照する (index)

インデックス番号指定で配列(スライス)内の要素を参照するには、index 関数 を使用します。 この書き方は、慣れるまでは若干わかりにくいかもしれません。

テンプレート内での記述例
{{ $arr := slice "AAA" "BBB" "CCC" }}
<ul>
  <li>{{ index $arr 0 }}
  <li>{{ index $arr 1 }}
  <li>{{ index $arr 2 }}
</ul>
実行結果
<ul>
  <li>AAA
  <li>BBB
  <li>CCC
</ul>

配列(スライス)をループで処理する (range)

配列の全要素をループで処理したい場合は、range を使って以下のように記述します。

テンプレート内での記述例
{{ $arr := slice "AAA" "BBB" "CCC" }}
<ul>
  {{- range $arr }}
    <li>{{ . }}
  {{- end }}
</ul>
実行結果
<ul>
    <li>AAA
    <li>BBB
    <li>CCC
</ul>

上記の例ではドットコンテキストを置き換えて、各要素をドット (.) で参照するようにしていますが、次のように変数名を付けてアクセスすることもできます。

テンプレート内での記述例
{{ $arr := slice "AAA" "BBB" "CCC" }}
<ul>
  {{- range $val := $arr }}
    <li>{{ $val }}
  {{- end }}
</ul>
☝️ ワンポイント range を使ってループ処理をするときに、ループ用の変数を明示的に割り当てても、結局ドットコンテキストの方は置き換えられてしまうようなので、この書き方はあまり意味がないかもしれません。

range で配列をループ処理するときに、下記のように 2 つの変数を指定すると、配列のインデックス番号を取得しながらループ処理することができます。

テンプレート内での記述例
{{ $arr := slice "AAA" "BBB" "CCC" }}
<ul>
  {{- range $index, $val := $arr }}
    <li>{{ $index }} : {{ $val }}
  {{- end }}
</ul>
実行結果
<ul>
    <li>0 : AAA
    <li>1 : BBB
    <li>2 : CCC
</ul>