【i18n】Railsで日英切り替えが簡単にできました！

<h1>日英翻訳をPFに追加したい</h1>

今日において、、、グローバル化は避けられない！と思い
PFに日本語と英語の言語切り替えを実装しました。

少しめんどくさいけど、簡単に実装できたので
備忘録も兼ねて記録を残していくとします。

<h2>実装までの流れ</h2>

ステップ⓵：i18nのGemを追加
ステップ⓶：application.rbに記載
ステップ⓷：ymlファイルに翻訳内容を記載
ステップ⓸：viewファイルに翻訳内容を追加
ステップ⓹：Routingファイルにlocaleを追加

たったこれだけであなたのサイトはグローバル化に対応できるようになります！

<h3>ステップ⓵：i18nのGemを追加</h3>

まずやることとしては、
Gemを追加しちゃってください。

このGemがあることによって簡単に
日英(他の言語も追加可能)に対応できるようになります。

```php:Gemfile

gem 'rails-i18n', '~> 5.1'

```

一応 ~>を記述することでバージョンを指定しています。

記載をしたらbundle installをしましょう。

<h3>ステップ⓶：application.rbに追加</h3>

application.rbにデフォルトの言語を追加します。
これ書くことによってデフォルトの言語を決められます。

```php:config/locales/application.rb

module アプリケーション名
  class Application < Rails::Application

    # deviseを日本語化
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end
```


この記述があることによって、デフォルトの言語を設定できるんですね。

config.i18n.default_locale = :ja

英語であれば、:jaの部分を:enとするといいですよ♪

<h3>ステップ⓷：ymlファイルに翻訳内容を記載</h3>

ymlファイルについて簡単に説明をすると、
ymlファイルというのは英語⇒日本語や日本語⇒英語
といったように言語の切り替えをサイトで行いたい時に
使用するファイルのことである。

実際にどのように書くか見ていこう。

```php:config/locales/ja.yml

  application:
    application:
    # ヘッダーのログアウト時の翻訳
      signup: " 新規登録"
      signin: " ログイン"  
    # ヘッダーのログイン時の翻訳
      workout_friends: " 筋トレ仲間"
      workout_diary: " 筋トレ日記"
      calendar: " カレンダー"
      notification: " 通知機能"
      mypage: " マイページ"
      logout: " ログアウト"
      partial_match: "部分一致"
      perfect_match: "完全一致"
      forward_match: "前方一致"
      backward_match: "後方一致"

  devise:
    sessions:
      new:
        login_message: "友達を探してつながろう！"
        login_message2: "SNSでつながる新しい形の筋トレ"

  posts:
    new:
      date: "日付入力"
      time: "時刻入力"
      upload_picture: "画像アップロード"
      workout_place: "筋トレ場所"

```

これは一例だが見方としてはこういう風にみる。

application: ← コントローラー
 application: ← アクション名
  signup: "新規登録" ← 翻訳したい内容

gemなどを使っている場合は少し記載が変わり

devise: ← gem名
    sessions: ← コントローラー名
      new: ← アクション名
        login_message: "友達を探してつながろう！" ← 翻訳したい内容
        login_message2: "SNSでつながる新しい形の筋トレ" ← 翻訳したい内容

注意してほしのはymlファイルは改行が非常に重要で
間違ったインデントをすると翻訳が反映されなくなる。
階層構造でインデントを区切って記載していくのがポイント！


日英の言語切り替えを入れたい場合は
en.ymlファイルも、config >> locales >> ja.yml
en.ymlファイルも、config >> locales >> en.yml

このように二つファイルを作成すればOK。
中国語など増やす場合もファイルを中国語用に増やせばOK。

<h3>ステップ⓸：viewファイルに記載する</h3>

最後にviewファイルに記述をするが
すこしだけ工夫が必要になってくる。

まず、言語切り替えをする場合は切り替えのリンクを
作成して言語が切り替えるようにしよう。

```php:view/layouts/application.html.erb

<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>

```

私の場合はヘッダーにいれたかったので
ヘッダーに切り替えリンクを実装した。

どこにいれるかは自分のやりたいようにすればＯＫ。

上記のコードをいれたい箇所に追加しすれば
リンクを押したときに言語の切り替えができるようになる。

そして、言語の切り替えを行う箇所については
下記のようにtメソッドを使うことで言語の切り替えができるようになる。

```php:view/layouts/application.html.erb
<%= link_to t('application.application.logout'), destroy_user_session_path, method: :delete, class: 'fas fa-sign-out-alt nav-link text-light mt-1' %>

<%= link_to "Delete", post_comment_path(comment.post, comment), method: :delete, remote: true, "data-confirm" => t('comments.create.delete_confirm'), class: "btn-sm btn-danger" %></td>

```

railsの場合viewで表示する場合は<%= %>で囲うことになるが
t('コントローラー名.アクション名.翻訳したい名前')で記述をすればOK。


【ja.yml】
 posts:
    new:
      date: "日付入力"

【en.yml】
 posts:
    new:
      date: "date"

例えばこのような言語切り替えをする時は、
<%= t('posts.new.date') %>

上記のような記述をすることで、
下記のリンクを押したときに言語を自動で切り替えてくれる。

```php:view/layouts/application.html.erb

<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>

```

ステップ⓹：routingに記載する

最後に...

重要なことを書き忘れてしまったので、
最初に記載すべきでしたが最後に記述をするとします(すみません)

下記のリンクの中にlocaleとあると思うのですが
言語の切り替えをするにはurlにlocaleを含ませないと
いけないんですね。

```php:view/layouts/application.html.erb

<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>

```

ルーティングの記載例を紹介しますね＾＾

```php:/workout/config/routes.rb

Rails.application.routes.draw do
  
  # これをいれることでlocaleをパスに含められる
  # scopeを使用するとurlパターンのみを変更可能
 scope '(:locale)' do  
   devise_for :users
   resources :posts
 end
end

```

上記のようにlocaleをスコープでくくってください。
スコープとは簡単に説明するとurlだけに特定の文字などを
含ませたい時に使用をします。

今回の場合ですとlocaleをurlに言語切り替えのため
含ませる必要があるため全体をlocaleでくくりました。

localeをスコープに含ませるとurlが変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1810522/9c527548-9689-2b13-c237-cb9f778edde1.png)

こんな感じでurl patternの先頭部分だけが変わったでしょ？

これでlink_toでの切り替えができるようになります＾＾

<h2>終わり</h2>

いかがでしたでしょうか？

簡単に言語切り替えを実装できることが分かりましたか？

文字内容に誤りなどがあればコメントをいただければと思います。

それでは！チャオ！