Thymeleaf コメントアウトのやり方をわかりやすく解説

新人と先輩の会話形式で理解しよう

新人

「先輩、Thymeleafで画面を作っているときに、コードを一時的に無効化したいときはどうすればいいですか？HTMLのコメントと同じように使えるんですか？」

先輩

「良い質問だね。Thymeleafには独自のコメントアウト方法があって、HTMLコメントとは少し違う動きをするんだよ。」

新人

「なるほど。じゃあ、Thymeleafのコメントってどんな役割があるんですか？」

先輩

「じゃあ、まずはThymeleafのコメントアウトの基本から見ていこうか。」

1. Thymeleafのコメントアウトとは？

Thymeleaf コメントアウトとは、テンプレートの中で特定の部分を無効化してブラウザに表示されないようにする仕組みです。HTMLのコメントと似ていますが、Thymeleaf専用のコメント方法を使うとテンプレートエンジンの処理段階でコードが完全に除去されるため、ブラウザでソースを確認しても表示されません。

開発環境がpleiades＋Gradleの場合でも、@Controllerを使ったSpring MVCの画面表示に組み合わせて簡単に利用できます。余計なライブラリを追加しなくても、Thymeleaf コメントは標準でサポートされています。


<!-- これはHTMLのコメント。ブラウザのソースには残ります -->
<!-- <p>ここはブラウザから見えるコメントです</p> -->

<!-- これはThymeleafコメント。ブラウザには出ません -->
<!--/*<p th:text="${message}">無効化される部分</p>*/-->

2. コメントアウトを使う目的と役割

Thymeleaf コメントを使う目的は、主に次のような場面です。開発中に一時的に処理を外したいとき、後で使う予定のコードを残しておきたいとき、または条件分岐の確認をしたいときなどです。特にチーム開発では、ソースコードの意図を伝えたり、使わない部分を安全に保管しておくのに便利です。

HTMLコメントとの違いは、開発中に意図せずブラウザに残ってしまう心配がない点です。セキュリティの観点からも、パスワードや機密情報に関係する処理をHTMLコメントに残してしまうのは危険ですが、Thymeleaf コメントならレンダリング前に削除されるため安心です。

例えば以下のように、条件付きで表示する部分を一時的にコメントアウトして検証できます。


<div>
    <!--/* <p th:text="${user.name}">ユーザー名</p> */-->
    <p>ここは固定のテキストです</p>
</div>

3. HTMLコメントとの違い

HTMLコメントはブラウザで「ソースを表示」したときに残ります。つまり、HTMLコメントを使うと、外部の人でもコメントの内容を簡単に見ることができてしまいます。一方でThymeleaf コメントはレンダリング前に削除されるため、最終的なHTMLには一切残りません。

これはセキュリティ面で非常に重要な違いです。もし機密情報や開発中のメモをHTMLコメントに残してしまうと、ユーザーに見えてしまう可能性があります。しかしThymeleaf コメントを使えば、その心配はありません。

具体的な違いの例


<!-- HTMLコメントの場合（ソースに残る） -->
<!-- <p>この部分はブラウザで見えてしまうコメント</p> -->

<!-- Thymeleafコメントの場合（ソースに残らない） -->
<!--/* <p th:text="${user.email}">メールアドレス</p> */-->

このように、Thymeleaf コメントはソースコードを安全に管理するために役立ちます。開発環境がpleiades＋Gradleであっても、@Controllerクラスからビューを返すときに自然に利用できます。

4. Thymeleaf専用コメントの書き方

Thymeleaf コメントアウトの書き方には専用の記法があります。特に知られているのが、という書き方と、/*[[ ]]*/という記法です。これらを使うことで、テンプレートエンジンが処理する前に完全に削除され、最終的なHTMLソースには一切残りません。つまり、セキュリティ上安心して利用できる方法になります。

例えば、Thymeleaf コメントの書き方の一つとして、/*[[ ]]*/を使うと変数式の評価結果も含めてコメント扱いになります。この場合、レンダリング結果に影響を与えないため、安心して一時的にコードを外せます。

基本的なThymeleafコメントの書き方例


<!--/* <p th:text="${user.name}">ユーザー名</p> */-->

<p>通常の表示部分</p>

<!--/*[[ ${user.email} ]]*/-->

上記のように書くことで、Thymeleaf コメントアウトはコードを残しつつもブラウザには表示されません。特に/*[[ ]]*/の部分は、Thymeleaf特有の「式」を含むコメントアウトの書き方としてよく利用されます。

5. 一時的に無効化したい処理をコメントアウトする例

開発作業を進める中で、「この処理は後で使うかもしれないけど今は無効化したい」という場面は多くあります。そうしたときにHTMLコメントを使うとブラウザに残ってしまうため不安ですが、Thymeleaf コメントアウトを使えば完全にレンダリング前に削除されるため安全です。

例えば、ユーザーのプロフィール情報を表示する処理を一時的に無効化するケースを考えてみましょう。


<div>
    <!--/* 
        <p th:text="${user.name}">名前</p>
        <p th:text="${user.email}">メールアドレス</p>
    */-->
    <p>プロフィール情報は現在非表示になっています</p>
</div>

このように書くと、ユーザー情報の部分は無効化され、代わりに固定のテキストだけがブラウザに表示されます。チーム開発で複数人が作業している場合でも、どの部分をコメントアウトしたかが一目でわかるので管理しやすいです。

さらに、複雑な条件式や繰り返し処理を含むブロックを丸ごとThymeleaf コメントで囲んでおくことで、デバッグや検証の際に便利に利用できます。

6. コントローラ（@Controller）と組み合わせたサンプル

次に、実際の@ControllerクラスとThymeleaf コメントアウトを組み合わせたサンプルを見てみましょう。開発環境はpleiades＋Gradleでプロジェクトを作成し、依存関係もpleiadesで設定済みという前提です。以下のコードでは、コントローラから渡したデータをビューで表示する処理の一部をコメントアウトしています。

@Controllerの例


package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping(&quot;/user&quot;)
    public String getUser(Model model) {
        model.addAttribute(&quot;name&quot;, &quot;山田太郎&quot;);
        model.addAttribute(&quot;email&quot;, &quot;taro@example.com&quot;);
        return &quot;user&quot;;
    }
}

Thymeleafテンプレートの例


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー情報</title>
</head>
<body>
    <h1>ユーザー情報</h1>

    <!--/* 
    <p th:text="${name}">名前</p>
    <p th:text="${email}">メール</p>
    */-->

    <p>現在はユーザー情報を表示していません</p>

</body>
</html>

このようにすることで、コントローラから渡されたデータをビューに表示する部分を安全にコメントアウトできます。HTMLコメントを使うとブラウザに内容が残ってしまいますが、Thymeleaf コメントアウトを使えばブラウザのソースコードにも残らず安心です。

また、将来的にこのコードを有効化したいときには、コメント記号を外すだけで簡単に復元できます。これは開発効率を高める上でも非常に便利です。

7. HTMLコメントとThymeleafコメントを使い分けるポイント

ここからは、実際の現場で迷いやすい「HTMLコメント」と「Thymeleaf コメント」の使い分け方を丁寧に整理します。まず重要なのは、検索エンジンや利用者が「ページのソース」を開いたときに内容が見えるかどうかという視点です。HTMLコメントは最終出力にそのまま残るため、機密情報や内部のメモが露出するおそれがあります。一方でThymeleaf コメントはテンプレートエンジンの段階で完全に削除されるため、最終出力には一切残りません。したがって、設計上の意図や内部向けの説明、将来復活させる予定のコード片など、外部に見せるべきではない内容はThymeleaf コメントを優先して使うのが安全です。

逆に、教材用のページやチーム内の練習用資料のように、学習目的でわざと読者に注釈を見せたい場合にはHTMLコメントを使う選択肢もあります。ただし通常の業務アプリケーションでは、不要な情報の露出を避けるためにThymeleaf コメントを基本にし、確認作業のために一時的にHTMLコメントへ切り替えるといった慎重な運用が望まれます。また、画面要素の一部だけを条件付きで出したり消したりしたい場合は、コメントではなくth:ifやth:unlessを使う方法もあります。単純な非表示であれば条件属性の方が差分管理や可読性に優れており、コメントアウトは「一時退避」「検証中」「将来復活」の色合いが強い場面に絞ると運用が安定します。

もうひとつの判断基準は「変更頻度」と「影響範囲」です。要素の表示可否を頻繁に切り替える場合、毎回コメントを外したり戻したりする運用は差分が見づらくなりやすく、レビューでも混乱を生みます。こうした箇所は条件分岐で制御し、コメントは設計検討や一時停止など短期間の用途に限定すると良いでしょう。また、長大なブロックをまとめて外すときはThymeleaf コメントで囲み、短い行単位のメモや説明はHTMLコメントに残す、といった使い分けも読みやすさの観点から有効です。全体として、外部公開の可否と保守性の二軸で判断し、基本は「Thymeleaf コメント優先、必要最小限でHTMLコメント」という指針を覚えておくと安全です。

使い分けの目安

機密や内部向けの注釈は最初からThymeleaf コメントで安全に排除する。
学習目的で読者に意図的に注釈を見せたい場合のみHTMLコメントを検討する。
表示制御はコメントではなく条件属性を基本にし、退避用途にのみコメントを用いる。
大きな塊はThymeleaf コメント、小さな説明は最小限のHTMLコメントで整理する。


<div>
    <!--/* 大きな塊を一時退避：最終出力から完全に消す */-->
    <!--/* 
        <section th:if="${admin}">管理者向けメニュー</section>
    */-->

    <!-- 学習用ページなどで読者に見せたい補足（通常は避ける） -->
    <!-- この行は教材用の解説として残しています -->

    <p th:text="${message}"></p>
</div>

8. よくある間違いと注意点（コメントが画面に出てしまう場合など）

ここでは、Thymeleaf コメントやHTMLコメントを使う際に起こりやすい誤りを整理します。まず多いのが、コメントの閉じ忘れや記法の取り違えによって、意図せずテキストが画面に出てしまうケースです。特にの前後に余計な記号や全角スペースが紛れ込むと、テンプレートエンジンが正しく解釈できず、文字列がそのまま出力されることがあります。また、インライン表記の/*[[ ]]*/は文字列内で使う前提のため、単独で行に置いたときの前後の文脈に注意が必要です。うっかり引用符の外へ出てしまうと、コメントではなく通常の文字として扱われることがあります。

次に、HTMLコメントで機密情報を残してしまう問題があります。動作確認のために一時的にIDやメールアドレスをHTMLコメントで残し、そのまま本番へ反映してしまうと、利用者がソースを確認した際に内容が露出します。これを避けるためには、退避は基本的にThymeleaf コメントで行う、レビュー時に「最終出力のソースを開いて余計な情報がないか」をチェックする、といった手順を標準化しておくと安全です。あわせて、テンプレート内での一時的な退避が長期化している箇所は、設計の見直しや条件分岐への置き換えを検討しましょう。

さらに、コメントと条件分岐の役割の混同にも注意が必要です。表示可否をデータの状態に応じて切り替える場面でコメントを多用すると、動作の分岐点が見えづらくなり、保守時に混乱が生じます。動的制御はth:ifやth:switchを使い、コメントは意図のメモや一時退避に限定します。最後に、テンプレートの一部だけを書き換えたときに、コメントがDOMの階層をまたいでしまうと、閉じタグの対応関係が崩れて意図しないレイアウト崩れを引き起こすことがあります。大きな塊を退避するときは、必ず開閉要素の境界で囲み、入れ子関係が壊れないようにしましょう。

間違いを避けるためのチェックリスト

記法はと/*[[ ]]*/を混同しない。
全角空白や余計な記号が紛れていないか差分で確認する。
機密情報をHTMLコメントへ残さない。最終出力のソースを必ず確認する。
表示制御は条件属性で行い、コメントは退避とメモに限定する。
入れ子構造の境界で囲み、閉じ忘れや階層崩れを防ぐ。

誤った記法と正しい記法の例


<!--/* [誤] 末尾の閉じが欠落しテキストが露出 */ 
    <p th:text="${user.name}">名前</p>
-->

<!--/* [正] 開始と終了の対応をそろえる */-->
<!--/* 
    <p th:text="${user.name}">名前</p>
*/-->


<script th:inline="javascript">
// [誤] 文字列の外で使いコメントにならない
/*[[ ${user.id} ]]*/

// [正] 文字列内に埋め込み、出力全体をコメントとして退避
var tmp = "/*[[${user.id}]]*/";
</script>

9. 実際の開発での活用シーン（デバッグやチーム開発での利用）

最後に、日々の開発で役立つ具体的な活用場面をまとめます。まずデバッグにおいては、表示不具合の切り分けのために、疑わしいブロックをThymeleaf コメントで一気に退避し、原因箇所を段階的に狭めていく方法が有効です。視覚的に範囲が明確で、最終出力へ一切残らないため、検証中でも安心して大きな塊を外せます。また、パフォーマンス調査のときに重い要素や複雑な繰り返しを一時停止し、レンダリング時間の変化を比較する用途にも向いています。このとき、退避前後で計測結果と差分を記録しておくと、後から原因分析を行う際に役立ちます。

チーム開発では、レビュープロセスと組み合わせることでThymeleaf コメントの効果がさらに高まります。たとえば、新機能を段階的に作り込む際、未完成の断片をThymeleaf コメントで囲っておけば、共同編集中に誤って画面へ出てしまうことを防げます。プルリクエストでは「退避理由」「復帰条件」「削除予定」を短い文章で近くに記しておくと、レビュアーが意図を理解しやすくなります。またスプリントの最後には、テンプレート中の退避箇所を洗い出す軽い点検を定例化し、必要のない退避は削除、将来復活させるものは課題管理へ起票する、といった運用を取り入れると健全な状態を保ちやすくなります。

さらに、画面仕様が頻繁に変わる時期には、条件分岐の切り替えとコメント退避を併用します。固定テキストや小さな部品はコメントで退避し、データ依存の表示は条件属性で制御する、といった役割分担が有効です。メールアドレスやユーザー識別子のような個人情報を扱う表示は、検証中も誤って露出しないようThymeleaf コメントで包み、デモ時のみ短時間の復帰で確認する、といった慎重な手順を徹底しましょう。最後に、ドキュメントとしての価値を高めるため、退避ブロックの直前に短い説明文を置き、何を意図して外しているのかを記しておくと、数週間後でも背景が容易に追跡できます。

活用の実例


<section>
    <h3>ダッシュボード</h3>

    <!--/* 集計の負荷が高いカードを検証中のため一時停止。性能測定が完了したら復帰する。 */-->
    <!--/* 
    <div th:each="item : ${heavyStats}">
        <p th:text="${item.label}"></p>
        <p th:text="${item.value}"></p>
    </div>
    */-->

    <div th:if="${lightMode}">
        <p>軽量表示で稼働中</p>
    </div>
</section>

このように、Thymeleaf コメントは単なる「非表示テクニック」ではなく、品質と安全性を両立させるための実践的な道具です。とくに「Thymeleaf コメント」「Thymeleaf コメントアウト方法」という観点で開発プロセスへ組み込み、定期的な点検手順とあわせて運用することで、テンプレートの保守性、可読性、そして情報露出の抑制を同時に実現できます。開発環境がpleiadesとGradleであっても手順は変わらず、@Controllerから受け渡されたモデルの一部を安全に退避しながら検証を進められるため、学習段階から本番運用まで長く通用するスキルとして活用できます。