layouts/_partials/head/js.html

Hugoのlayouts/_partials/head/js.htmlの解説

このコードは Hugo テーマの部分テンプレートで、JavaScript ファイルを処理して HTML に挿入するための部分です。詳細に解説します：

$ cat themes/my-theme/layouts/_partials/head/js.html 
{{- with resources.Get "js/main.js" }}
  {{- $opts := dict
    "minify" (not hugo.IsDevelopment)
    "sourceMap" (cond hugo.IsDevelopment "external" "")
    "targetPath" "js/main.js"
  }}
  {{- with . | js.Build $opts }}
    {{- if hugo.IsDevelopment }}
      <script src="{{ .RelPermalink }}"></script>
    {{- else }}
      {{- with . | fingerprint }}
        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
      {{- end }}
    {{- end }}
  {{- end }}
{{- end }}

全体の流れ

  1. assets/js/main.js ファイルを読み込む
  2. 開発環境かどうかに応じて適切な処理オプションを設定
  3. JavaScriptファイルをビルド
  4. 本番環境ではセキュリティ強化のためインテグリティハッシュを追加

コードの詳細解説

リソースの取得

{{- with resources.Get "js/main.js" }}
  • resources.Get: Hugo のリソースパイプラインを使用して assets/js/main.js ファイルを取得
  • with ステートメントはファイルが存在する場合のみ内部のコードを実行

ビルドオプションの設定

{{- $opts := dict
  "minify" (not hugo.IsDevelopment)
  "sourceMap" (cond hugo.IsDevelopment "external" "")
  "targetPath" "js/main.js"
}}
  • dict: キーと値のペアを持つ辞書（マップ）を作成
  • minify: 開発環境以外（本番環境）でJSファイルを圧縮する
  • sourceMap: 開発環境では外部ソースマップを生成し、本番環境では生成しない
  • targetPath: ビルド後のファイルの出力先

JavaScript のビルド

{{- with . | js.Build $opts }}
  • .: 現在のコンテキスト（main.js ファイル）
  • js.Build: Hugo の JavaScript ビルド機能を使用してファイルを処理
  • $opts: 先ほど定義したビルドオプション

環境に応じたスクリプトタグの出力

{{- if hugo.IsDevelopment }}
  <script src="{{ .RelPermalink }}"></script>
{{- else }}
  {{- with . | fingerprint }}
    <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
  {{- end }}
{{- end }}
  • 開発環境：シンプルなスクリプトタグを出力
  • 本番環境：
    • fingerprint: ファイルの内容に基づくハッシュを生成
    • integrity: Subresource Integrity (SRI) を実装し、ブラウザがスクリプトを実行前に検証できるようにする
    • crossorigin="anonymous": クロスオリジンリクエストでクレデンシャル（Cookie など）を送信しない

このテンプレートは、開発と本番環境で異なる最適化を適用し、本番環境ではセキュリティを強化するベストプラクティスを実装しています。