このサイトのAboutページの「エンジニア歴〇〇年」という部分は、Hugoで使えるショートコード(関数)によって自動計算して出力しています。この記事では実際に書いたコードを解説したい思います。

HugoとGo言語

HugoはGo言語(Golang)で構築された静的サイトジェネレーターです。そのため、テンプレート内ではGo言語の標準的なテンプレートエンジンの仕組みを利用して、プログラムに近い処理を記述することができます。 つまり、本格的なカスタマイズにはGo言語の知識が必要です。

実装したコードの解説

Hugoでは記事を書いているMarkdownに直接プログラム処理を書くことができないため、処理部分は別のhtmlファイルに記述します。今回作成したショートコードはlayouts/shortcodes/experience.htmlに書きました。

中身は以下の通りです。

{{- $startYear := 2021 -}}
{{- $currentYear := now.Format "2006" | int -}}
{{- sub $currentYear $startYear -}}

以下、詳しく解説します。

1行目:変数の代入と開始年の固定

{{- $startYear := 2021 -}} Go言語のテンプレートでは、$変数名 := 値という構文で変数を定義します。ここではエンジニア活動を開始した「2021年」を固定値として$startYearに代入しています。

ハイフン(-)について

コードに登場する{{- -}}のハイフンは空白除去を意味します。

{{- $startYear := 2021 -}}

ハイフンなし{{ }}の場合、出力時に前後の空白や改行がそのまま残ります。 ハイフンあり{{- -}}にすることで余分な空白・改行を除去してHTMLをスッキリ出力できます。 ショートコードでは基本的にハイフンありを使うのが推奨です。

2行目:現在の年を取得して数値に変換

{{- $currentYear := now.Format "2006" | int -}}

now

ビルドした瞬間の現在時刻を取得します。

Format “2006”

日付を「西暦4桁」の形式に整形します。Go言語では西暦4桁を指定する際に、基準日である2006という数字を使う決まりがあります。

| int

パイプ記号(|)を使い、文字列として取得された西暦を数値として扱えるように変換しています。

3行目:引き算の実行

{{- sub $currentYear $startYear -}}

Hugo(Goテンプレート)の関数は、「関数名 引数1 引数2」という順番で記述します。

sub

引き算(Subtraction)を行う関数です。

$currentYear $startYear

$currentYear - $startYear を計算します。

出力方法

出力したいファイル(Markdown)に以下のように記述します。前述したexperience.htmlをショートコードとして使用することができます。

エンジニア歴は {{< experience >}} 年目になります。

以下、コードの解説です。

< > (角括弧)

中身を「そのままのHTML」として出力します。

他のユースケース

著作権表示に現在の年を使う

フッターの著作権表示に毎年手動で年を更新するのは手間がかかります。 ショートコードを使うことで自動化できます。

layouts/shortcodes/current_year.htmlを作成:

```go {{- now.Format “2006” -}} ```

Markdownまたはテンプレートで以下のように呼び出します:

```md © {{< current_year >}} Afternoon Blog ```

記事の公開からの経過日数を表示する

layouts/shortcodes/days_since.htmlを作成:

{{- $start := .Get 0 | time.AsTime -}}
{{- $diff := now.Sub $start -}}
{{- $days := div $diff.Hours 24 | int -}}
{{- $days -}}

Markdownで以下のように呼び出します:

この記事は公開から {{< days_since "2025-12-30" >}} 日経ちました。

experience という名前

layouts/shortcodes/experience.htmlというファイル名と紐付いています。Hugoは{{< 名前 >}}と書かれると、自動的にlayouts/shortcodes/名前.htmlを探しに行きます。

補足:引数を渡す場合

引数を渡す場合は以下のような記述になります。

{{- $startYear := .Get 0 -}}

.Get 0: 呼び出し時に渡された1番目のパラメータを取得します。

Markdownファイルでは以下のように記述します。

{{< experience 2021 >}}

この記事のまとめ

  • ロジック(HTML): layouts/shortcodes/ 内にプログラムを記述
  • 呼び出し(Markdown): {{< ファイル名 >}} で記事内に結果を表示
  • ハイフン({{- -}}: 前後の空白・改行を除去してHTMLをスッキリ出力
  • 引数を渡す場合: .Get 0 で1番目のパラメータを取得

一度ショートコードを作成しておけば、どの記事からでも呼び出せる再利用性の高い仕組みです。 複雑な処理が必要な場合はGo言語の知識が必要になりますが、今回のような簡単な計算であれば比較的容易に実装できます。



関連記事