【Ruby on Rails】簡単なメモアプリの作成｜rails-i18nによる日本語化対応の実装

動画で解説を見る

1 開発環境
2 Ruby on Railsでi18nによる日本語化対応の実装手順
3 おわりに

開発環境

Ruby:version 3.1.2
Ruby on Rails:version 7.0.4
Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on Railsでi18nによる日本語化対応の実装手順

Ruby on Railsの日本語化対応はja.ymlという辞書データを作成していく流れになります。

今回はメモアプリの作成で使用したコードを用いて解説していきます。

rails-i18nのgemファイルをインストールする

まずはrails-i18nのgemファイルをインストールするためにGemファイルに下記を記述します。

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data"

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

gem 'rails-i18n'

group :test do

# Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]

gem "capybara"

gem "selenium-webdriver"

gem "webdrivers"

end

gem 'rails-i18n'

続いて以下のコマンドを打ち、gemファイルをインストールします。

bundle install

1	bundle install

デフォルトの言語を日本語に設定する

続いてデフォルトの言語を日本語に設定するための設定をしていきます。

require_relative "boot"

require "rails/all"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module MemoApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.0

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config/locales/**/*.yml').to_s]
  end
end

module MemoApp

class Application < Rails::Application

# Initialize configuration defaults for originally generated Rails version.

config.load_defaults 7.0

# Configuration for the application, engines, and railties goes here.

# These settings can be overridden in specific environments using the files

# in config/environments, which are processed later.

# config.time_zone = "Central Time (US & Canada)"

# config.eager_load_paths << Rails.root.join("extras")

config.i18n.default_locale = :ja

config.i18n.load_path += Dir[Rails.root.join('config/locales/**/*.yml').to_s]

end

21行目の「config.i18n.default_locale = :ja」は、デフォルトの言語を日本語に設定するという設定になります。

22行目の「config.i18n.load_path += Dir[Rails.root.join('config/locales/**/*.yml').to_s]」は、複数のロケールファイルが読み込まれるようpathを通す設定になります。

翻訳ファイルを作成する

続いて「app\config\locales」フォルダ内に「ja.yml」というファイルを作成します。

その後、「ja.yml」に「rails-i18n」のGitHubの日本語の辞書データを記述します。

GitHubの日本語の辞書データ：https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
  date:
    abbr_day_names:
    - 日
    - 月
    - 火
    - 水
    - 木
    - 金
    - 土
    abbr_month_names:
    - 
    - 1月
    - 2月
    - 3月
    - 4月
    - 5月
    - 6月
    - 7月
    - 8月
    - 9月
    - 10月
    - 11月
    - 12月
    day_names:
    - 日曜日
    - 月曜日
    - 火曜日
    - 水曜日
    - 木曜日
    - 金曜日
    - 土曜日
    formats:
      default: "%Y/%m/%d"
      long: "%Y年%m月%d日(%a)"
      short: "%m/%d"
    month_names:
    - 
    - 1月
    - 2月
    - 3月
    - 4月
    - 5月
    - 6月
    - 7月
    - 8月
    - 9月
    - 10月
    - 11月
    - 12月
    order:
    - :year
    - :month
    - :day
  datetime:
    distance_in_words:
      about_x_hours: 約%{count}時間
      about_x_months: 約%{count}ヶ月
      about_x_years: 約%{count}年
      almost_x_years: "%{count}年弱"
      half_a_minute: 30秒前後
      less_than_x_seconds: "%{count}秒未満"
      less_than_x_minutes: "%{count}分未満"
      over_x_years: "%{count}年以上"
      x_seconds: "%{count}秒"
      x_minutes: "%{count}分"
      x_days: "%{count}日"
      x_months: "%{count}ヶ月"
      x_years: "%{count}年"
    prompts:
      second: 秒
      minute: 分
      hour: 時
      day: 日
      month: 月
      year: 年
  errors:
    format: "%{attribute}%{message}"
    messages:
      accepted: を受諾してください
      blank: を入力してください
      confirmation: と%{attribute}の入力が一致しません
      empty: を入力してください
      equal_to: は%{count}にしてください
      even: は偶数にしてください
      exclusion: は予約されています
      greater_than: は%{count}より大きい値にしてください
      greater_than_or_equal_to: は%{count}以上の値にしてください
      inclusion: は一覧にありません
      invalid: は不正な値です
      less_than: は%{count}より小さい値にしてください
      less_than_or_equal_to: は%{count}以下の値にしてください
      model_invalid: 'バリデーションに失敗しました: %{errors}'
      not_a_number: は数値で入力してください
      not_an_integer: は整数で入力してください
      odd: は奇数にしてください
      other_than: は%{count}以外の値にしてください
      present: は入力しないでください
      required: を入力してください
      taken: はすでに存在します
      too_long: は%{count}文字以内で入力してください
      too_short: は%{count}文字以上で入力してください
      wrong_length: は%{count}文字で入力してください
    template:
      body: 次の項目を確認してください
      header: "%{model}に%{count}個のエラーが発生しました"
  helpers:
    select:
      prompt: 選択してください
    submit:
      create: 登録する
      submit: 保存する
      update: 更新する
  number:
    currency:
      format:
        delimiter: ","
        format: "%n%u"
        precision: 0
        separator: "."
        significant: false
        strip_insignificant_zeros: false
        unit: 円
    format:
      delimiter: ","
      precision: 3
      separator: "."
      significant: false
      strip_insignificant_zeros: false
    human:
      decimal_units:
        format: "%n %u"
        units:
          billion: 十億
          million: 百万
          quadrillion: 千兆
          thousand: 千
          trillion: 兆
          unit: ''
      format:
        delimiter: ''
        precision: 3
        significant: true
        strip_insignificant_zeros: true
      storage_units:
        format: "%n%u"
        units:
          byte: バイト
          eb: EB
          gb: GB
          kb: KB
          mb: MB
          pb: PB
          tb: TB
    percentage:
      format:
        delimiter: ''
        format: "%n%"
    precision:
      format:
        delimiter: ''
  support:
    array:
      last_word_connector: "、"
      two_words_connector: "、"
      words_connector: "、"
  time:
    am: 午前
    formats:
      default: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      long: "%Y/%m/%d %H:%M"
      short: "%m/%d %H:%M"
    pm: 午後

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

ja:

activerecord:

errors:

messages:

record_invalid: 'バリデーションに失敗しました: %{errors}'

restrict_dependent_destroy:

has_one: "%{record}が存在しているので削除できません"

has_many: "%{record}が存在しているので削除できません"

date:

abbr_day_names:

- 日

- 月

- 火

- 水

- 木

- 金

- 土

abbr_month_names:

- 1月

- 2月

- 3月

- 4月

- 5月

- 6月

- 7月

- 8月

- 9月

- 10月

- 11月

- 12月

day_names:

- 日曜日

- 月曜日

- 火曜日

- 水曜日

- 木曜日

- 金曜日

- 土曜日

formats:

default: "%Y/%m/%d"

long: "%Y年%m月%d日(%a)"

short: "%m/%d"

month_names:

- 1月

- 2月

- 3月

- 4月

- 5月

- 6月

- 7月

- 8月

- 9月

- 10月

- 11月

- 12月

order:

- :year

- :month

- :day

datetime:

distance_in_words:

about_x_hours: 約%{count}時間

about_x_months: 約%{count}ヶ月

about_x_years: 約%{count}年

almost_x_years: "%{count}年弱"

half_a_minute: 30秒前後

less_than_x_seconds: "%{count}秒未満"

less_than_x_minutes: "%{count}分未満"

over_x_years: "%{count}年以上"

x_seconds: "%{count}秒"

x_minutes: "%{count}分"

x_days: "%{count}日"

x_months: "%{count}ヶ月"

x_years: "%{count}年"

prompts:

second: 秒

minute: 分

hour: 時

day: 日

month: 月

year: 年

errors:

format: "%{attribute}%{message}"

messages:

accepted: を受諾してください

blank: を入力してください

confirmation: と%{attribute}の入力が一致しません

empty: を入力してください

equal_to: は%{count}にしてください

even: は偶数にしてください

exclusion: は予約されています

greater_than: は%{count}より大きい値にしてください

greater_than_or_equal_to: は%{count}以上の値にしてください

inclusion: は一覧にありません

invalid: は不正な値です

less_than: は%{count}より小さい値にしてください

less_than_or_equal_to: は%{count}以下の値にしてください

model_invalid: 'バリデーションに失敗しました: %{errors}'

not_a_number: は数値で入力してください

not_an_integer: は整数で入力してください

odd: は奇数にしてください

other_than: は%{count}以外の値にしてください

present: は入力しないでください

required: を入力してください

taken: はすでに存在します

too_long: は%{count}文字以内で入力してください

too_short: は%{count}文字以上で入力してください

wrong_length: は%{count}文字で入力してください

template:

body: 次の項目を確認してください

header: "%{model}に%{count}個のエラーが発生しました"

helpers:

select:

prompt: 選択してください

submit:

create: 登録する

submit: 保存する

update: 更新する

number:

currency:

format:

delimiter: ","

format: "%n%u"

precision: 0

separator: "."

significant: false

strip_insignificant_zeros: false

unit: 円

format:

delimiter: ","

precision: 3

separator: "."

significant: false

strip_insignificant_zeros: false

human:

decimal_units:

format: "%n %u"

units:

billion: 十億

million: 百万

quadrillion: 千兆

thousand: 千

trillion: 兆

unit: ''

format:

delimiter: ''

precision: 3

significant: true

strip_insignificant_zeros: true

storage_units:

format: "%n%u"

units:

byte: バイト

eb: EB

gb: GB

kb: KB

mb: MB

pb: PB

tb: TB

percentage:

format:

delimiter: ''

format: "%n%"

precision:

format:

delimiter: ''

support:

array:

last_word_connector: "、"

two_words_connector: "、"

words_connector: "、"

time:

am: 午前

formats:

default: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"

long: "%Y/%m/%d %H:%M"

short: "%m/%d %H:%M"

pm: 午後

モデルとカラムに関する日本語辞書データを作成する

続いて「activerecord」内にモデルとカラムに関連付けて日本語辞書データを作成します。

今回は、メモアプリの作成で使用したコードをサンプルとして記載しておきます。

ja:
  activerecord:
    modes:
      memo: メモ
    attributes:
      memo:
        title: タイトル
        description: 本文
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
  date:
    abbr_day_names:
    - 日
    - 月
    - 火
    - 水
    - 木
    - 金
    - 土
    abbr_month_names:
    - 
    - 1月
    - 2月
    - 3月
    - 4月
    - 5月
    - 6月
    - 7月
    - 8月
    - 9月
    - 10月
    - 11月
    - 12月
    day_names:
    - 日曜日
    - 月曜日
    - 火曜日
    - 水曜日
    - 木曜日
    - 金曜日
    - 土曜日
    formats:
      default: "%Y/%m/%d"
      long: "%Y年%m月%d日(%a)"
      short: "%m/%d"
    month_names:
    - 
    - 1月
    - 2月
    - 3月
    - 4月
    - 5月
    - 6月
    - 7月
    - 8月
    - 9月
    - 10月
    - 11月
    - 12月
    order:
    - :year
    - :month
    - :day
  datetime:
    distance_in_words:
      about_x_hours: 約%{count}時間
      about_x_months: 約%{count}ヶ月
      about_x_years: 約%{count}年
      almost_x_years: "%{count}年弱"
      half_a_minute: 30秒前後
      less_than_x_seconds: "%{count}秒未満"
      less_than_x_minutes: "%{count}分未満"
      over_x_years: "%{count}年以上"
      x_seconds: "%{count}秒"
      x_minutes: "%{count}分"
      x_days: "%{count}日"
      x_months: "%{count}ヶ月"
      x_years: "%{count}年"
    prompts:
      second: 秒
      minute: 分
      hour: 時
      day: 日
      month: 月
      year: 年
  errors:
    format: "%{attribute}%{message}"
    messages:
      accepted: を受諾してください
      blank: を入力してください
      confirmation: と%{attribute}の入力が一致しません
      empty: を入力してください
      equal_to: は%{count}にしてください
      even: は偶数にしてください
      exclusion: は予約されています
      greater_than: は%{count}より大きい値にしてください
      greater_than_or_equal_to: は%{count}以上の値にしてください
      inclusion: は一覧にありません
      invalid: は不正な値です
      less_than: は%{count}より小さい値にしてください
      less_than_or_equal_to: は%{count}以下の値にしてください
      model_invalid: 'バリデーションに失敗しました: %{errors}'
      not_a_number: は数値で入力してください
      not_an_integer: は整数で入力してください
      odd: は奇数にしてください
      other_than: は%{count}以外の値にしてください
      present: は入力しないでください
      required: を入力してください
      taken: はすでに存在します
      too_long: は%{count}文字以内で入力してください
      too_short: は%{count}文字以上で入力してください
      wrong_length: は%{count}文字で入力してください
    template:
      body: 次の項目を確認してください
      header: "%{model}に%{count}個のエラーが発生しました"
  helpers:
    select:
      prompt: 選択してください
    submit:
      create: 登録する
      submit: 保存する
      update: 更新する
  number:
    currency:
      format:
        delimiter: ","
        format: "%n%u"
        precision: 0
        separator: "."
        significant: false
        strip_insignificant_zeros: false
        unit: 円
    format:
      delimiter: ","
      precision: 3
      separator: "."
      significant: false
      strip_insignificant_zeros: false
    human:
      decimal_units:
        format: "%n %u"
        units:
          billion: 十億
          million: 百万
          quadrillion: 千兆
          thousand: 千
          trillion: 兆
          unit: ''
      format:
        delimiter: ''
        precision: 3
        significant: true
        strip_insignificant_zeros: true
      storage_units:
        format: "%n%u"
        units:
          byte: バイト
          eb: EB
          gb: GB
          kb: KB
          mb: MB
          pb: PB
          tb: TB
    percentage:
      format:
        delimiter: ''
        format: "%n%"
    precision:
      format:
        delimiter: ''
  support:
    array:
      last_word_connector: "、"
      two_words_connector: "、"
      words_connector: "、"
  time:
    am: 午前
    formats:
      default: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      long: "%Y/%m/%d %H:%M"
      short: "%m/%d %H:%M"
    pm: 午後

ja:

activerecord:

modes:

memo: メモ

attributes:

memo:

title: タイトル

description: 本文

errors:

messages:

record_invalid: 'バリデーションに失敗しました: %{errors}'

restrict_dependent_destroy:

has_one: "%{record}が存在しているので削除できません"

has_many: "%{record}が存在しているので削除できません"

おわりに

Ruby on Railsでrails-i18nによる日本語化対応について解説してきましたが、いかがだったでしょうか。

Webサービスではユーザーが使いやすいようにするために複数言語対応などは当たり前に実装されているため、是非、日本語化対応に挑戦してみてください。