Day18：HugoのShortCodeに入門してみる(その6:ShortCodeにおけるPipeline機能)

本記事の概要

Hugoのショートコードの入門となる初心者向けの記事です。
本記事はその6になります。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

また、その1～5の内容が前提となります。

ShortCodeにおけるPipeline機能とは？

一言で言えば、ShortCodeで、関数の出力結果を次の関数の入力に設定する機能です。
これにより、複数の関数を繋げて処理することが可能になります。
シェルスクリプトの|(Pipeline)と同じような機能です。

用語の注意事項

公式のGlossaryを見ると分かりますが、Hugoには似たような2つの言葉があります。

1. ShortCodeにおけるPipeline(Golang由来)
2. assetにおけるpipeline処理(asset-pipeline)

この記事で扱うのは1.の方です。2.の方ではありません。
時々、2.の意味合いでpipelineと使われている記事などもあるので、調査する際は注意しましょう。

なお、それぞれの公式のglossaryの内容は下記URLから確認できます。
https://gohugo.io/quick-reference/glossary/#pipeline
https://gohugo.io/quick-reference/glossary/#asset-pipeline

簡単な例

下記の様にshow-dateというShortCodeを作りました。
これを記事から呼び出すと、

• 記事の作成時間をタイムゾーン付きで表示
• 上記時間を日本時間に変換したものを表示

することが出来ます。

ここでは、その結果について詳しくはとりあげませんが、|(Pipeline)の働きに着目しながら挙動を解説します。

show-date.html

{{- $format_str := "2006-01-02 15:04:05(MST:-07:00)" -}}
<p>{{- $.Page.Params.date | time.Format $format_str -}}</p>
<p>{{- $.Page.Params.date | time.In "Asia/Tokyo" | time.Format $format_str -}}</p>

解説

簡単に言うと、|の処理は下記のようになります。

• |の左側の結果を取得する
• 上記で取得した結果を|の右側で呼んでいる関数の最後の引数 として自動的に引き渡す

2行目について見てみましょう。
|の左側は「$.Page.Params.date」となっています。この変数は、記事のFrontMatterに埋め込まれた作成時刻を格納する変数です。
つまり、作成時刻を|の右側の関数に渡すという意味です。

|の右側を見ると、time.Format関数を呼び出しています。
time.Format関数の解説を確認しましょう。

time.Format関数は、時刻を表す文字列を指定したフォーマットで出力する関数です。
本来であれば2つの引数を取ります。

1つ目の引数はLAYOUTであり、これが文字列のフォーマットとなります。
(記事の本質から外れるため、詳細な解説は割愛します)

2つ目の引数がINPUTであり、これが入力(対象)となる時刻データです。

time.Format関数の呼び出し

time.Format LAYOUT INPUT

さて、先程のshow-date.htmlの2行目を見ると、time.Format関数の引数が1つ(format_str)のみになっています。
従って、第二引数は|の左側の値、つまり「$.Page.Params.date」となります。

さて、ここで、以下のようにも考えられます。
2行目の場合であれば、別に|を使用しなくても、単に第二引数に記事の作成時刻を渡せば良いようにも思えます。

2行目の別パターン

<p>{{- time.Format $format_str $.Page.Params.date -}}</p>

では、|を使うメリットは何でしょう？

そこで3行目の処理を見ていきます。
3行目の処理を見てみると「time.In "Asia/Tokyo"」という処理が加わっています。

time.In関数の解説を確認しましょう。

解説を確認すると分かる通り、time.In関数は

• 第2引数で指定した入力となる時刻を
• 第1引数で指定したタイムゾーンに変換して
  出力する関数です。

つまり、下記のようなフォーマットになります。

time.In関数の呼び出し

time.In TIMEZONE INPUT

さて、show-date.htmlの3行目に戻ると、TIMEZONEとしては"Asia/Tokyo"となっているため 「入力時刻を日本時間に変換する」 処理となります。

ここで、2行目の処理と比較して考えると、2行目と3行目の処理のやりたいことはほぼ同じで、違うのは日本時間に変換する処理を入れるか否かです。

といったように、関数を追加したり変更したりする場合を考えると、|を使わない場合は、関数を入れ子の形で書くことになり、どの順番で呼び出しているかが分かりにくくなります。

一方で、|を使うことで、左から右に向かって流れるように処理されていくことが視覚的にも分かりやすく表現されているため、
今後さらに関数を追加したり変更する場合でも容易に修正できるようになります。

今回の例で言えば、2行目の段階で|を使うことで、3行目の様に拡張する際も簡単に拡張できました。

これが|を使うメリットです。

まとめ

Pipeline機能を使うことで、関数を順番に呼び出してつなげることが出来ます。
処理の流れを見やすく記述できるので、必要に応じて使うことで、メンテナンスしやすいShortCodeを作成できます。