🍙

i18nによる日本語化対応

2024/01/21に公開

i18nとは

i18nとは、internationalization(国際化)の略称で、アプリケーションを多言語対応させるための機能です。
Railsではデフォルトでi18nの仕組みが組み込まれており、このi18n機能を利用することで、Railsアプリケーションをある言語で作成しつつ、後から別の言語に対応させるといった国際化が容易になります。

i18nで実現できる内容

  • ビューの文字列を言語ごとに対応させる。
  • モデルの属性名や説明文を言語対応させる。
  • 数字、日付、時刻のフォーマットを地域化する。
  • ActiveRecordのエラーメッセージを翻訳する。

日本語訳の記述

i18nでは使う文言の日本語役を別のファイルに記述する必要があります。例として下記に2つ挙げます。
(デフォルトのロケールを:jaに設定します)
activerecord/ja.ymlにはモデルや属性の日本語訳を、
view/ja.ymlには ビューファイルで使う文言の日本語訳をそれぞれ記述します。

config/locales/activerecord/ja.yml

ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        email: メールアドレス
        last_name:first_name:password: パスワード
        password_confirmation: パスワード確認
config/locales/view/ja.yml

ja:
  helpers:
    submit:
      create: 登録
      submit: 保存
      update: 更新
    label:
      email: メールアドレス
      password: パスワード
  user_sessions:
    new:
      title: ログイン
      login: ログイン
      to_register_page: 登録ページへ
      password_forget: パスワードをお忘れの方はこちら
  users:
    new:
      title: ユーザー登録
      to_login_page: ログインページへ
  header:
    login: ログイン
    logout: ログアウト
    board: 掲示板
    board_index: 掲示板一覧
    create_board: 掲示板作成
    bookmark_index: ブックマーク一覧
    profile: プロフィール

i18nを使った記法への書き換え

日本語を直接書いている箇所をi18nを使った記法に書き換えていきます。

app/views/shared/_before_login_header.html.erb
<%= link_to 'ログイン', login_path ,class: 'nav-link' %>
↓
<%= link_to t('header.login'), login_path, class: 'nav-link' %>



<%= t('view.message') %>   (tメソッド) ⇨ [view.ファイル名      message.日本語]

viewsでの文字列翻訳はtメソッドを使う
app/views/shared/_header.html.erb
<%= link_to '掲示板', , class: 'nav-link dropdown-toggle', data: { bs_toggle: 'dropdown' }, aria: { haspopup: 'true', expanded: 'false' }, id: 'header-board-menu' %>
↓
<%= link_to t('header.board'), '#', class: 'nav-link dropdown-toggle'  data: { bs_toggle: 'dropdown' }, aria: { haspopup: 'true', expanded: 'false' }, id: 'header-board-menu' %>

<%= link_to '掲示板一覧', '#', class: 'dropdown-item' %>
↓
<%= link_to t('header.board_index'), '#', class: 'dropdown-item' %>

<%= link_to '掲示板作成', '#', class: 'dropdown-item' %>
↓
<%= link_to t('header.create_board'), '#', class: 'dropdown-item' %>

<%= link_to 'ブックマーク一覧', '#', class: 'nav-link' %>
↓
<%= link_to t('header.bookmark_index'), '#', class: 'nav-link' %>

<%= link_to 'プロフィール', '#', class: 'dropdown-item' %>
↓
<%= link_to t('header.profile'), '#', class: 'dropdown-item' %>

<%= link_to 'ログアウト', logout_path, class: 'dropdown-item', data: { turbo_method: :delete } %>
↓
<%= link_to t('header.logout'), logout_path, class: 'dropdown-item', data: { turbo_method: :delete } %>

app/views/user_sessions/new.html.erb

<h1>ログイン</h1>
↓
<h1><%= t('.title') %></h1>

%= f.submit 'ログイン', class: 'btn btn-primary' %>
↓
<%= f.submit t('.login'), class: "btn btn-primary" %>

<%= link_to '登録ページへ', new_user_path %>
↓
<%= link_to t('.to_register_page'), new_user_path %>

<%= link_to 'パスワードをお忘れの方はこちら', '#' %>
↓
<%= link_to t('.password_forget'), '#' %>
app/views/users/new.html.erb
<h1>ユーザー登録</h1>
↓
<h1><%= t('.title') %></h1>
<%= t('.title') %>

<%= f.submit '登録', class: 'btn btn-primary' %>
↓
<%= f.submit t('.create'), class: "btn btn-primary" %>

<%= link_to 'ログインページへ', login_path %>
↓
<%= link_to t('.to_login_page'), login_path %>

Discussion