先生と生徒の会話形式で理解しよう

生徒

「先生、Thymeleafで多言語対応をするにはどうすればいいんですか？」

先生

「Thymeleafでは、th:lang属性を使ってHTMLのlang属性を動的に設定することで、多言語対応が可能になります。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、th:langの使い方を詳しく見ていきましょう！」

1. th:lang属性とは？

Thymeleafのth:lang属性は、HTMLのlang属性を動的に設定するためのものです。lang属性は、文書の言語を指定するために使用され、検索エンジンの最適化（SEO）やアクセシビリティの向上に役立ちます。

例えば、HTMLのlang属性を日本語に設定する場合、通常は次のように記述します。


<html lang="ja">

しかし、Thymeleafを使用すると、th:lang属性を使って動的に言語を設定できます。

2. th:lang属性の基本的な使い方

Thymeleafでth:lang属性を使用する基本的な例を見てみましょう。以下のように記述することで、現在のロケールに応じてlang属性が設定されます。


<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">

この例では、${#locale.language}を使用して、現在のロケールの言語コード（例：jaやen）を取得し、それをlang属性に設定しています。

3. th:lang属性とxml:lang属性の併用

HTMLでは、xml:lang属性も言語を指定するために使用されます。Thymeleafでは、th:langとth:xmllangを併用して、両方の属性を動的に設定できます。


<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}" th:xmllang="${#locale.language}">

これにより、HTMLとXMLの両方の仕様に対応した言語設定が可能になります。

4. th:lang属性を使用した国際化対応の例

Thymeleafを使用して、国際化対応のテンプレートを作成する例を見てみましょう。以下のコードでは、th:lang属性を使用して、文書の言語を動的に設定しています。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head>
    <meta charset="UTF-8">
    <title>国際化対応の例</title>
</head>
<body>
    <h1 th:text="#{greeting}">こんにちは</h1>
</body>
</html>

この例では、#{greeting}を使用して、メッセージプロパティファイルから適切な挨拶文を取得しています。例えば、messages_ja.propertiesにはgreeting=こんにちは、messages_en.propertiesにはgreeting=Helloと記述することで、ロケールに応じた挨拶文が表示されます。

5. Spring Bootとの連携によるロケールの設定

Spring Bootでは、LocaleResolverを使用してロケールを管理します。例えば、SessionLocaleResolverを使用して、ユーザーのセッションにロケールを設定できます。


@Bean
public LocaleResolver localeResolver() {
    SessionLocaleResolver slr = new SessionLocaleResolver();
    slr.setDefaultLocale(Locale.JAPAN);
    return slr;
}

また、LocaleChangeInterceptorを使用して、リクエストパラメータからロケールを変更できるように設定します。


@Bean
public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
    lci.setParamName("lang");
    return lci;
}

これにより、URLに?lang=enのようなパラメータを追加することで、表示言語を変更できます。

6. th:lang属性を使用する際の注意点

th:lang属性を使用する際には、以下の点に注意してください。

ロケールの設定が適切に行われていることを確認する。
メッセージプロパティファイル（例：messages_ja.properties）が正しく配置されていること。
テンプレートファイルでxmlns:th="http://www.thymeleaf.org"を宣言していること。

これらの点に注意することで、th:lang属性を正しく使用し、国際化対応を実現できます。

7. th:lang属性とSEOの関係

th:lang属性を使用して文書の言語を明示的に指定することで、検索エンジンに対してコンテンツの言語を正確に伝えることができます。これにより、検索結果での表示が適切になり、SEOの向上につながります。

また、アクセシビリティの観点からも、スクリーンリーダーなどの支援技術が文書の言語を正しく認識できるようになります。

8. まとめ

Thymeleafのth:lang属性を使用することで、HTML文書の言語を動的に設定し、国際化対応を実現できます。Spring Bootとの連携により、ロケールの管理も容易になり、ユーザーにとって使いやすい多言語対応のWebアプリケーションを構築できます。

SEOやアクセシビリティの向上にも寄与するため、th:lang属性の活用を検討してみてください。

まとめ

本記事では、Thymeleafにおけるth:lang属性の役割と使い方について、基礎から実践まで丁寧に整理してきました。th:lang属性は、HTML文書のlang属性を動的に制御できる重要な機能であり、多言語対応や国際化対応を行ううえで欠かせない要素です。特にSpring Bootと組み合わせることで、ロケール管理やメッセージ切り替えがスムーズになり、ユーザーの利用環境や言語設定に自然に寄り添った画面表示を実現できます。

th:lang属性を正しく設定することで、検索エンジンはページの言語を正確に認識できるようになり、対象ユーザーに適した検索結果へ表示されやすくなります。また、スクリーンリーダーなどの支援技術にとっても言語情報は非常に重要であり、アクセシビリティ向上という観点でも大きな意味を持ちます。単なる表示制御にとどまらず、Web全体の品質を高める基本要素として理解しておくことが大切です。

記事中で紹介したように、th:lang属性は現在のロケール情報と密接に結びついています。Spring Boot側でLocaleResolverやLocaleChangeInterceptorを設定しておくことで、URLパラメータやセッションを通じた言語切り替えが可能になり、実運用を意識した国際化対応が行えます。こうした仕組みを理解しておくことで、単なるサンプル実装から一歩進んだ、実務レベルのテンプレート設計ができるようになります。

さらに、xml:lang属性との併用やメッセージプロパティファイルの管理など、細かなポイントを押さえることで、HTML仕様とフレームワーク双方に配慮した堅実な実装が可能です。初心者のうちは設定項目が多く感じられるかもしれませんが、一つ一つの役割を理解しながら進めれば、決して難しいものではありません。むしろ、th:lang属性は国際化対応の入り口として最適なテーマだと言えるでしょう。

以下に、記事内容を振り返る意味も込めて、th:lang属性を利用したシンプルなサンプル構成を再確認してみます。実際のプロジェクトでも、この形をベースに拡張していくことで、保守性の高いテンプレートを構築できます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:lang="${#locale.language}"
      th:xmllang="${#locale.language}">
<head>
    <meta charset="UTF-8">
    <title>多言語対応ページ</title>
</head>
<body>
    <h1 th:text="#{greeting}">こんにちは</h1>
    <p th:text="#{description}">このページは国際化対応のサンプルです</p>
</body>
</html>

このように、テンプレート側ではロケール情報を意識しすぎることなく、必要な属性を正しく設定するだけで多言語対応が実現できます。表示文言はメッセージファイルに集約されるため、後から言語を追加する場合も影響範囲を最小限に抑えられます。結果として、開発効率の向上と品質の安定につながります。

先生と生徒の振り返り会話

生徒

「今回の記事で、th:lang属性がただの飾りじゃなくて、すごく重要な役割を持っていることがよく分かりました」

先生

「そうだね。言語設定は見落とされがちだけど、国際化対応やアクセシビリティ、検索結果への影響まで考えると欠かせない要素なんだ」

生徒

「Spring Boot側のロケール設定と組み合わせることで、画面表示が自然に切り替わるのも理解できました」

先生

「その理解はとても大切だよ。テンプレートだけで完結せず、バックエンドの設定と連動して初めて意味を持つからね」

生徒

「これなら、多言語対応のWebアプリケーションにも自信を持って挑戦できそうです」