【Rails】i18nでdeviseのビューを日本語にする

こんにちは～、とりあえずコーヒー飲みがちなShinyaです

RoRの勉強し始めて結構経った人はdeviseを使い始めたりしてるんじゃないでしょうか

ログイン機能が秒で完成するdeviseって超便利ですよね

でもデフォルトだと表示が英語という難点もあります

英語圏に生まれてればこんな悩みもなかったし、検索して出てきた英語の資料もスラスラ読めたし、、、

まあ、そんなこと言ってても仕方ないのでgemでサクッと日本語化しちゃいましょう

devise導入するとこからビューを日本語化するとこまで見ていきます

注：サクッと、とか言いましたが４．と５．は日本語化の仕組みに少し触れるので長いです（笑）

１．deviseとdevise-i18nをbundle install

まず必要なgem2つをインストールします

# ログイン機能
gem 'devise'

#devise日本語化
gem 'devise-i18n'

Gemfileに書き込んだらbnudle install (--path [インストール先])でインストールします

２．deviseを設定

インストールが完了したら、deviseの設定をします

僕はdevise使うための呪文と思ってます

rails g devise:install

次にログイン機能を使う対象のモデルを作成します

ここではUserモデルと想定します

モデル作成時の通常のコマンドrails g model [モデル名]ではないことにご注意ください

rails g devise user

モデルが作成できたら、いつも通りマイグレーションファイルを実行します

rails db:migrate

ここまででdeviseの設定は終わりです

この時点でlocalohost:3000/users/sign_upにアクセスすればログイン画面が表示されます

しかしまだ英語表記のままなので日本語化していきます

３．config/application.rbでデフォルト言語を設定

RoRではデフォルトの言語が英語になっているので、それを日本語に変えていきます

日本語に変えるというのは、英語に対する日本語訳がずらーっと書かれているファイル（後述）を参照できるようにするということです

そのファイルが気になりますが、まずは参照の設定をします

プロジェクトディレクトリ直下のconfig/application.rbにデフォルト言語を指定する文を加えます

module MessageApp
  class Application < Rails::Application
    config.load_defaults 5.2

    #以下の一文を追加
    config.i18n.default_locale = :ja  #:jaはjapaneseのja

  end
end

４．deviseのビューを作成・編集

この作業は任意です

なぜならdeviseのビューはプロジェクト内に見える形で存在しないですが、自動で用意されているからです

でも、おそらくデフォルトの様式で使うことはないですからほぼ必須の作業です

編集したい場合は作成するコマンドを打ちます

rails g devise:i18n:views

ビュー作成コマンドはネット記事ではよく以下のように紹介されています

rails g devise:views

これだと日本語化されてないビューになるので気を付けてください

rails g devise:i18n:viewsで作ったビューのうち、ログイン画面に相当するファイルの中身を見てみます

本筋には関係ないですが、日本語化やdeviseの仕組みを少しでも知っておいた方がいいですからね

<h2><%= t('.sign_up') %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit t('.sign_up') %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

ブラウザの表示はこうなってます

ビューファイルと画面表示を比べると<%= t('.sign_up') %>の部分が「アカウント登録」として表示されていると分かります

このt()は引数を翻訳（translate）するメソッドです

つまり'.sign_up'が「アカウント登録」に変換されています

別の部分ではt('devise.shared.minimum_password_length', count: @minimum_password_length)が「6字以上」として表示されています

このケースでは引数がカンマで区切られて変数（@minimin_password_length）が与えられていることが読み取れます

どのような仕組みなのでしょうか？

カギは３．で少し触れた日本語訳の設定ファイルにあります

ここに英語に対応する日本語がずらーっと載っているので、英語をt()で指定すると対応する日本語に変換されるという仕組みです

５．日本語訳の設定ファイル（devise.views.ja.yml）を作成・編集

日本語訳の設定ファイルを（devise.views.ja.yml）を開くために、まずは作成します

rails g devise:i18n:locale ja

するとconfig/localesの直下に作成されるので開いてみてみます

最初の数行だけ書きます↓

ja:
  activerecord:
    attributes:
      user:
        confirmation_sent_at: パスワード確認送信時刻
        confirmation_token: パスワード確認用トークン
        ...

ファイルの中身はインデントで階層分けされています

先ほどのログイン画面の日本語化に使われている部分は階層的にはこうなっています（抜粋）

ja:
  devise:
    registrations:
      new:
        sign_up: アカウント登録
    shared:
      minimin_password_length: "（%{count}字以上）"

sign_upがアカウント登録に対応しています

ここで疑問が生じます

なぜt()の引数として'devise.registrations.new.sign_up'と書かずに'.sign_up'で済むのでしょうか？

逆になぜ'devise.shared.minimum_password_length'はと'.minimum_password_length'書かれないでしょうか？

ログイン画面のビューファイルのパスは
views/devise/registrations/new.html.erb
でした

実はビューファイルのパス（views/devise/registrations/new）と階層が一致している部分は省略できるんですね

だから、ビューファイルのパスと階層が一致していないminimum_password_lengthを変換するときは'devise.shared.minimum_password_length'とフルに書く必要があります

最後に変数の受け渡しを見ます

minimum_password_lengthは"（%{count}字以上）"に対応していました

countが変数展開されています

このcountはビューファイルでt('devise.shared.minimum_password_length', count: @minimum_password_length)として、@minimum_password_lengthを渡されていました

よって@minimum_password_lengthに6が入っていたから「６文字以上」と表示されていたわけですね

@minimum_password_lengthはconfig/initializers/devise.rbで定義されています↓

config.password_length = 6..128

変更するならここを触りましょう

以上がdeviseビューの日本語化でした

お疲れ様でした

それでは、また

参考資料

https://qiita.com/take18k_tech/items/03dd0721ad5de08334bd
https://qiita.com/shimadama/items/7e5c3d75c9a9f51abdd5