inuinu blog(開発用)

BOT @wagagun の開発ノウハウや、IT向け？の雑記ブログです。

【Ruby on Rails7】Rails7にi18nを導入する

プログラミング Ruby Rails

Ruby on Railsはバリデーションエラーが簡単に実現できますが、デフォルトは英語です。
この記事では、Ruby on Rails7に国際化ライブラリーi18nを導入し、日本語化を図ります。

i18nとは？

i18nは正式には国際化ライブラリーの総称です。
フルスペルは「internationalization」なのですが、長すぎるのでi18nと表示しているようです。

これにより、アプリを多言語対応できます。

Railsのメッセージは英語なのですが、i18n用のgemをインストールし、翻訳用のja.ymlを定義した後、ビュー及びコントローラーをi18nを呼び出すように変更していくことで、日本語化することができます。

日本語をビューやコントローラーにベタに書くことも当然できますが、ja.ymlに定義しておけば、クライアントの急な(気まぐれな)表記変更に素早く対応できます。

18nのインストール

Gemfileに追記しインストール

まずはGemfileにi18nを追加します。

# 日本語化
gem "rails-i18n", "~> 7.0.0"

さらに、

bundle install

でインストールします。

configに定義を追加

config/application.rbに、

module WagagunMy
  class Application < Rails::Application
(中略)
    # 日本語化
    config.i18n.available_locales = %i[ja en]
    config.i18n.default_locale = :ja

    # 複数のロケールファイルが読み込まれるようpathを通す
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

  end
end

を追記します。

localesディレクトリを作成し、テンプレート的なファイルを置く

localesディレクトリを作成し、以下のファイルを置いておきます。
(役に立つのかは不明ですが。)

https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/en.yml

https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml

ja.ymlを記述

2つのディレクトリを作成し、ja.ymlを記述

あとは任意のディレクトリを作成し、そこにja.ymlを作成しますが、私はいくつかの参考サイトをもとにactiverecordとviewsの2つのディレクトリを作成し、それぞれにja.ymlを記述しました。

activerecordディレクトリのja.yml

config/locales/activerecord/ja.ymlは次の内容になっています。

ja:
  activerecord:
    models:
      project: 'プロジェクト'
      task: 'タスク'
    successful:
      messages:
        created: "%{model}に1件登録されました。"
        updated: "%{model}の情報が変更されました。"
        destroyed: "%{model}から1件削除されました。"
    attributes:
      task:
        description: '詳細'
        done: "完了"
      projet/tasks: 
        description: "詳細"
        done: "完了"
      projet: 
        tasks: 'タスク'

viewsディレクトリのja.yml

config/locales/views/ja.ymlは次の内容になっています。

zja:
  defaults:
    show: "詳細"
    back: "戻る"
    delete: "削除"
    edit: "変更"
    new: "新規作成"
    cancel: "キャンセル"
    save: "登録"
  views:
    pagination:
      first: '最初'
      last: '最後'
      previous: '前'
      next: '次'
      truncate: '...'
  projects:
    index:
      title: 'プロジェクト一覧'
    new:
      title: 'プロジェクト登録'
    edit:
      title: 'プロジェクト変更'
    show:
      title: 'プロジェクト詳細'

pagination:はkaminari(ページネーション用のgem)ですね。

inuinu-tech.hatenablog.jp

ビューを記述

削除ガイダンスをヘルパーに記述

app/helpers/application_helper.rbにビューの削除ボタンのガイダンスに指定するconfirm_deleteを定義します。

module ApplicationHelper
  
  # 削除の確認メッセージ
  def confirm_delete
    return '本当に削除しますか？'
  end

index.html.haml

%h2= t ".title"

%p#notice.text-success
  = notice
(中略)
= link_to (t "defaults.new"), new_project_path, class: 'btn btn-primary'
(中略)
  %tbody
    - @projects.each do |project|
(中略)
          = link_to (t "defaults.show"), project, class: 'btn btn-info'
          = link_to (t "defaults.edit"), edit_project_path(project), class: 'btn btn-primary'
          = button_to (t "defaults.delete"), project method: :delete, data: { turbo_confirm: confirm_delete }, class: 'btn btn-danger'

「t」で始まる箇所(タイトル、リンク、ボタン)が、日本語に置き換わります。
削除完了メッセージを表示するために、3〜4行目を追加します。
削除ボタンには、先程作成したconfirm_deleteを埋め込みます。

show.html.haml

%h2= t ".title"
(中略)
= link_to (t "defaults.edit"), edit_project_path(@project), class: 'btn btn-primary'
\|
= link_to (t "defaults.back"), projects_path, class: 'btn btn-secondary'

new.html.haml

%h2= t ".title"

= render 'form'

= link_to (t "defaults.back"), projects_path, class: 'btn btn-secondary'

「t」で始まる箇所(タイトル、リンク、ボタン)が、日本語に置き換わります。

edit.html.haml

%h2= t ".title"

= render 'form'

= link_to (t "defaults.show"), @project, class: 'btn btn-info'
\|
= link_to (t "defaults.back"), projects_path, class: 'btn btn-secondary'

「t」で始まる箇所(タイトル、リンク、ボタン)が、日本語に置き換わります。

.html.haml

= form_for @project do |f|
  - if @project.errors.any?
    #error_explanation
      %h4= t("errors.template.header", model: @project.model_name.human, count: @project.errors.count)
      %ul
        - @project.errors.full_messages.each do |message|
          %li= message

「t」で始まるバリデーションエラーメッセージが、日本語に置き換わります。

コントローラーを記述

app/controllers/projects_controller.rb

  # POST /projects or /projects.json
  def create
    @project = Project.new(project_params)

    respond_to do |format|
      if @project.save
        #format.html { redirect_to project_url(@project), notice: "Project was successfully created." }
        format.html { redirect_to project_url(@project), :notice => "#{t('activerecord.successful.messages.created',:model => @project.model_name.human)}" }
        format.json { render :show, status: :created, location: @project }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /projects/1 or /projects/1.json
  def update
    respond_to do |format|
      if @project.update(project_params)
        #format.html { redirect_to project_url(@project), notice: "Project was successfully updated." }
        format.html { redirect_to project_url(@project), :notice => "#{t('activerecord.successful.messages.updated',:model => @project.model_name.human)}" }
        format.json { render :show, status: :ok, location: @project }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /projects/1 or /projects/1.json
  def destroy
    @project.destroy

    respond_to do |format|
      #format.html { redirect_to projects_url, notice: "Project was successfully destroyed." }
      format.html { redirect_to projects_url, :notice => "#{t('activerecord.successful.messages.destroyed',:model => @project.model_name.human)}" }
      format.json { head :no_content }
    end
  end

「#{t(」で始まる各更新完了メッセージが、日本語に置き換わります。
(コメントになっている行は変更前の内容です。)<

最後に

とりあえず、これで、日本語表示ができるようになります。